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 个计时器。

另见

• 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