带有弹出控制器的 ionic 5 单元测试

Question

我试图在我的 ionic 5 / angular 11 项目中监视 popover present 方法，但出现错误

未处理的承诺拒绝：无法读取未定义的属性“then”

这是单元测试代码

describe('LoginPage', () => {

 let popoverSpy = jasmine.createSpyObj('Popover', ['create', 'present', 'onDidDismiss', 'dismiss']);
 let popoverCtrlSpy = jasmine.createSpyObj('PopoverController', ['create']);
 popoverCtrlSpy.create.and.callFake(function () {
  return popoverSpy;
 });

 beforeEach(waitForAsync(() => {
  TestBed.configureTestingModule({
   declarations: [LoginPage],
   imports: [
     IonicModule.forRoot(),
     TranslateModule.forChild(),
     ComponentsModule,
     TranslateModule.forRoot({
       loader: { provide: TranslateLoader, useClass: TranslateFakeLoader }
     })
   ],
   providers: [{ provide: PopoverController, useValue: popoverCtrlSpy }]
 }).compileComponents()

 it("check popover preset", () => {
  component.openEntitySelection();
  fixture.detectChanges();
  expect(popoverSpy.present).toHaveBeenCalled()
 })

}


private async openEntitySelection() {

 let popover = await this.popoverCtrl.create({
  component: PopoverPage
 });
 await popover.present();
 popover.onDidDismiss().then((response) => {
  //Handle response
 })

}

提前致谢！

Answer 1

看来你不是在嘲笑onDidDismiss 来返回一个承诺。在进行断言之前，您还需要使用 fixture.whenStable 或 waitForAsync 实用程序来等待承诺得到解决。

试试这个：

describe('LoginPage', () => {

 let popoverSpy = jasmine.createSpyObj('Popover', ['create', 'present', 'onDidDismiss', 'dismiss']);
 // !! -- Add this line -- !!
 // I am mock resolving it to a value of true, you can resolve it to any value
 popOverSpy.onDidDismiss.and.returnValue(Promise.resolve(true));
 // !! --- !!
 let popoverCtrlSpy = jasmine.createSpyObj('PopoverController', ['create']);
 popoverCtrlSpy.create.and.callFake(function () {
  return popoverSpy;
 });

 beforeEach(waitForAsync(() => {
  TestBed.configureTestingModule({
   declarations: [LoginPage],
   imports: [
     IonicModule.forRoot(),
     TranslateModule.forChild(),
     ComponentsModule,
     TranslateModule.forRoot({
       loader: { provide: TranslateLoader, useClass: TranslateFakeLoader }
     })
   ],
   providers: [{ provide: PopoverController, useValue: popoverCtrlSpy }]
 }).compileComponents()

 it("check popover preset", (done) => { // add done to let jasmine know you're done
  component.openEntitySelection();
  fixture.detectChanges();
  // you have to wait at least for one fixture.whenStable I am thinking
  // because we are returning a promise and we have to ensure that the promises
  // have completed before doing our assertion.
  fixture.whenStable().then(() => {
     expect(popoverSpy.present).toHaveBeenCalled();
     done();
  });
 });
}


private async openEntitySelection() {

 let popover = await this.popoverCtrl.create({
  component: PopoverPage
 });
 await popover.present();
 popover.onDidDismiss().then((response) => {
  //Handle response
 })

}