angular - 如何在 Angular 单元测试中使用模拟打开 MatDialog

Question

我目前正在使用一个组件，在该组件中单击按钮将打开一个弹出窗口来问候用户。我正在使用 Angular Material Dialog 打开弹出窗口，点击时将调用的组件代码块是

public openMatDialog(): void {
this.isDialogOpen = true;

this.dialogReference = this.dialog.open(GreetComponent, {
  autoFocus: false,
  disableClose: false,
});

this.dialogReference.afterClosed().subscribe(
  () => {
       this.isDialogOpen = false;
  }
);

我还需要检查 bool 属性以指示对话框打开和关闭。

在组件规范中，我为对话框提供模拟以防止如下所示的实际依赖，

export class MatDialogMock {
   open() {
    return {
      afterClosed: () => of(true)
    };
  }
}

在规范提供者中，

{ provide: MatDialog, useValue: matDialog },

在beforeEach中，

const matDialog = new MatDialogMock();

当我测试 Dialog open 时，如下所示，

  it('Greet User', () => {
    spyOn(matDialog, 'open');
    component.openMatDialog();
    expect(matDialog.open).toHaveBeenCalled();
  });

它因错误而失败，

Error: Expected spy open to have been called.

请指导如何使用规范中的模拟检查打开的对话框。

Answer 1

问题是const matDialog = new MatDialogMock();。您不应该获得新的句柄，您应该获得您在 TestBed 中提供的句柄。

const matDialog = fixture.debugElement.injector.get(MatDialog); // get actual instance provided then your test should be good.

在文档中查看具有依赖关系的组件: https://angular.io/guide/testing-components-scenarios#component-with-a-dependency