[英]Converting json object to typescript interface causing error in the mock object while unit testing in Angular 11
I am receiving a json response in an Angular 11 app and I have created an interface corresponding to that json object.我在 Angular 11 应用程序中收到 json 响应,我创建了一个与该 json ZA8CFDE6311BD59EB2AC966B8 对应的接口The json object is
json object 是
{
"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我为此 json object 创建的 typescript 接口是
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.我正在使用服务Division.sevice.ts从 API 获取上述 json 响应,一切正常。 I am trying to write unit tests for the this service in the division.service.spec.ts file.
我正在尝试在division.service.spec.ts文件中为此服务编写单元测试。 I created a mockDivisionObj inside this file for testing purpose which is shown below.
我在这个文件中创建了一个mockDivisionObj用于测试目的,如下所示。
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.
这个你能帮我吗。
I was able to fix the issue by changing the name of one of the interfaces in the file to 'AppDivision' as shown below.我可以通过将文件中的一个接口的名称更改为“AppDivision”来解决此问题,如下所示。
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.两个接口同名导致单元测试mock object报错。
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 .检查链接: StackBlitz 演示链接。
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.