Angular2 - 在单元测试中打开和关闭 mdDialog

Question

我目前正在尝试在我的一个单元测试中打开和关闭 Angular Material 2 对话框。打开看起来不错，但我监视了一个应该在关闭后调用的函数，但它从未被调用过，我认为这是因为对话框没有按我希望的那样关闭。

我要测试的代码:

openDialog() {
    this.dialogRef = this.dialog.open( ConfirmationDialogComponent, {
      height: '210px',
      width: '335px',
      disableClose: true
    });
    this.dialogRef.componentInstance.title = 'Delete Selected Intents?';
    this.dialogRef.componentInstance.content = 'All corresponding data will be deleted';
    this.dialogRef.componentInstance.option1 = 'Cancel';
    this.dialogRef.componentInstance.option2 = 'Delete';

    this.dialogRef.afterClosed().subscribe( result => {
      this.afterDialogClose(result);
    });
  }

到目前为止我的测试(由于未按预期调用 afterDialogClose 而失败):

  it('should call afterDialogClose when the dialog closing event triggered', fakeAsync(() => {
    spyOn(component, 'afterDialogClose');
    component.openDialog();
    fixture.detectChanges();
    tick();
    component.dialog.closeAll();
    fixture.detectChanges();
    tick();
    expect(component.afterDialogClose).toHaveBeenCalled();
  }));

谁能告诉我我做错了什么以及如何强制关闭对话框并调用 afterDialogClose() 函数？谢谢!

Answer 1

我认为主要错误是

1 timer(s) stil in the queue.

另见

• https://github.com/angular/angular/issues/10127

为了解决这个问题，我们可以使用 jasmine.done 而不是 async/fakeAsync

it('should call afterDialogClose when the dialog closing event triggered', (done) => {
  spyOn(component, 'afterDialogClose');
  component.openDialog();
  fixture.detectChanges();
  fixture.whenStable().then(() => {
    component.dialog.closeAll();
    fixture.detectChanges();
    fixture.whenStable().then(() => {
      expect(component.afterDialogClose).toHaveBeenCalled();
      done();
    });
  });
});

Plunker Example