如何在角度单元测试中使用模拟打开 MatDialog答案

【问题标题】：How to test MatDialog is opened using mock in angular unit test如何在角度单元测试中使用模拟打开 MatDialog
【发布时间】：2020-11-19 18:20:16
【问题描述】：

我目前正在使用一个组件，在该组件中单击按钮会打开一个弹出窗口来问候用户。我正在使用角度材质对话框打开弹出窗口，点击时调用的组件代码块是

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

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

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

}

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

在组件规范中，我为对话框提供了模拟，以防止像下面这样的实际依赖，

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

在规范提供者中，

{ provide: MatDialog, useValue: matDialog },

在每个之前，

const matDialog = new MatDialogMock();

当我测试对话框打开时，如下所示，

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

它因错误而失败，

Error: Expected spy open to have been called.

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

【问题讨论】：

标签： angular unit-testing mocking spyon mat-dialog

【解决方案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

【讨论】：

我参考了您提供的链接，其中它用于服务存根。但是在这里我正在检查 MatDialog 打开并且我正在使用模拟类进行对话以防止实际的对话依赖。我尝试了您提到的代码，但仍然遇到相同的错误。谢谢！！

【解决方案2】：

我对问题的实施有不同的问题。 spyOn 包装了 open 函数，然后返回 undefined 而不是带有 afterClosed 的对象。这显然会导致测试在尝试调用this.dialogReference.afterClosed() 时崩溃，因为dialogReference 是undefined。

我最终定义了这样的MatDialogMock 类：

class MatDialogMock {
  open = jasmine.createSpy().and.returnValue({
    afterClosed: () => of(),
  });
}

然后它开始工作了。

不确定这是否会解决问题中的确切问题，但它肯定会帮助像我这样试图在自己的测试中使用问题中的实现的人。

【讨论】：