我正在尝试为我的应用程序中的组件编写单元测试。这是一个非常简单的组件,称为 TroubleShootingPage,如果有人在我的应用程序的其余部分出现问题,它只应该显示帮助页面。
所有测试都通过了,但在 Karma 的输出中我看到了一个提示:SPEC HAS NO EXPECTATIONS:
据称没有预期的测试正在处理getTroubleShootingPage()
我的 TroubleShootingPage 组件中的函数,如下所示:
export interface Entry<T> {
sys: Sys;
fields: T;
toPlainObject(): object;
update(): Promise<Entry<T>>;
}
troubleShootingPage: Entry<any>;
constructor(private contentfulService: ContentfulService) {}
ngOnInit() {
this.getTroubleShootingPage("en-US")
}
getTroubleShootingPage(locale: string) {
this.contentfulService.getTroubleShootingPage(locale).then(page => {
this.troubleShootingPage = page;
...
}
}
如您所见,故障排除页面的内容/文本必须从 contentfulService 加载,并且根据用户的语言从 API(Contentful)加载。所以我只想确保函数被调用,并且从 contentfulService 返回的输入正确分配给变量this.troubleShootingPage
。
测试看起来像这样:
describe('TroubleshootingPageComponent', () => {
let component: TroubleshootingPageComponent;
let fixture: ComponentFixture<TroubleshootingPageComponent>;
let contentfulServiceStub: Partial<ContentfulService> = {
getTroubleShootingPage: () => {
return new Promise<Entry<any>>(() => {
return troubleShootingPageMock;
});
}
};
let troubleShootingPageMock: Entry<any>;
troubleShootingPageMock = {
fields: {
description: "Please read here for further help:",
mainText: {},
textCancelButton: "Quit",
textConfirmButton: "Continue",
title: "Need Help?"
},
toPlainObject() {
return null;
},
update() {
return null;
},
sys: {
type: "",
id: "string",
createdAt: "string",
updatedAt: "string",
locale: "string",
contentType: {
sys: null
},
},
};
beforeEach(async(() => {
TestBed.configureTestingModule({
imports: [],
declarations: [TroubleshootingPageComponent],
schemas: [NO_ERRORS_SCHEMA],
providers: [{ provide: ContentfulService, useValue: contentfulServiceStub }]
})
.compileComponents();
}));
beforeEach(() => {
fixture = TestBed.createComponent(TroubleshootingPageComponent);
component = fixture.componentInstance;
fixture.detectChanges();
});
it('should get the troubleShootingPage form Contentful', () => {
component.getTroubleShootingPage("en-GB");
setTimeout(() => {
expect(component.troubleShootingPage).toEqual(troubleShootingPageMock.fields);
}, 1000)
});
// I also tried:
// it('should get the troubleShootingPage form Contentful', (done) => {
// component.getTroubleShootingPage("en-GB");
// setTimeout(() => {
// expect(component.troubleShootingPage).toEqual(troubleShootingPageMock.fields);
// done();
// }, 1000)
// });
});
我添加了一个 timeout ,setTimeout()
因为没有它component.troubleShootingPage
always undefined
,因为在解决 getTroubleShootingPage() 函数中的 Promise 之前,测试进入了ecpect()
语句:
it('should get the troubleShootingPage form Contentful', () => {
component.getTroubleShootingPage("en-GB");
expect(component.troubleShootingPage).toEqual(troubleShootingPageMock.fields);
});
-> 这失败了,因为component.troubleShootingPage
is undefined
。
我怎么能解决这个问题,有什么想法吗?