Converting json object to typescript interface causing error in the mock object while unit testing in Angular 11

Question

I am receiving a json response in an Angular 11 app and I have created an interface corresponding to that json object. The json object is

{
  "division": {
      "uid": "f5a10d90-60d6-4937-b917-1d809bd180b4",
      "name": "Sales Division",
      "title": "Sales",
      "type": "Form",
      "formFields": [
          {
              "id": 1,
              "name": "firstName",
              "label": "First Name",
              "value": "John"
          },
          {
              "id": 2,
              "name": "lastName",
              "label": "Last Name",
              "value": "Smith"
          }
      ]
   }
}

The typescript interface I created for this json object is

export interface FormField {
   id: number;
   name: string;
   label: string;
   value: string;
}

export interface Division {
   uid: string;
   name: string;
   title: string;
   type: string;
   formFields: FormField[];
}

export interface Division {
   division: Division;
}

I am using a service division.sevice.ts to fetch the above json response from API and everything works fine. I am trying to write unit tests for the this service in the division.service.spec.ts file. I created a mockDivisionObj inside this file for testing purpose which is shown below.

mockDivisionObj = {
  "division": {
      "uid": "f5a10d90-60d6-4937-b917-1d809bd180b4",
      "name": "Sales Division",
      "title": "Sales",
      "type": "Form",
      "formFields": [
          {
              "id": 1,
              "name": "firstName",
              "label": "First Name",
              "value": "John"
          },
          {
              "id": 2,
              "name": "lastName",
              "label": "Last Name",
              "value": "Smith"
          }
      ]
  }
}

An error is shown which says

Property 'division' is missing in type '{ uid: string; name: string; title: string; type: 
string; formFields: { id: number; name: string; label: string; value: string; }[]; }' but 
required in type 'Division'.

I think the way I created the interface may be wrong but I couldn't figure out what exactly is causing the issue. Please help me out with this.

Yes but when I change the last declared interface name to 'AppDivision', then inside my actual component I get the error Property 'division' is missing in type 'Division' but required in type 'AppDivision' — suvenk
– suvenk, Commented Mar 14, 2021 at 7:00
I don't think this code will even compile as it isn't possible to define two types with the same name. You will need to address that first. — Nicholas K
– Nicholas K, Commented Mar 14, 2021 at 7:03
The code still compiles even if we have two interfaces with same name in one file as I got the main functionality working without issues. But to fix the above issue I changed the name of one interface to 'AppDivision' and fixed the error in component I mentioned above. — suvenk
– suvenk, Commented Mar 14, 2021 at 7:26
@suvenk You can check my answer. I think you do not require the extra interface called AppDivision. Best wishes :-) — Srijon Chakraborty
– Srijon Chakraborty, Commented Mar 14, 2021 at 7:42

suvenk · Accepted Answer · 2021-03-14 07:28:36Z

1

I was able to fix the issue by changing the name of one of the interfaces in the file to 'AppDivision' as shown below.

export interface FormField {
   id: number;
   name: string;
   label: string;
   value: string;
}

export interface Division {
   uid: string;
   name: string;
   title: string;
   type: string;
   formFields: FormField[];
}

export interface AppDivision {
   division: Division;
}

The same name for two interfaces caused the error in the unit test mock object.

answered Mar 14, 2021 at 7:28

suvenk

5171 gold badge11 silver badges28 bronze badges

Sign up to request clarification or add additional context in comments.

1 Comment

Srijon Chakraborty Over a year ago

You can check my answer. I think you do not require the extra interface called AppDivision. Best wishes :-)

Srijon Chakraborty · Accepted Answer · 2021-03-14 07:40:34Z

0

Your code is fine.To solve this error you can try the code below =>

  this.division = this.mockDivisionObj.division as Division;

Check the Link: StackBlitz Demo link.

answered Mar 14, 2021 at 7:40

Srijon Chakraborty

2,1622 gold badges12 silver badges24 bronze badges

Collectives™ on Stack Overflow

Converting json object to typescript interface causing error in the mock object while unit testing in Angular 11

2 Answers 2

1 Comment

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

1 Comment

Comments

Your Answer

Sign up or log in

Post as a guest

Related