如何通过 mat-dialog-close 或其他方式对 MatDialog 关闭进行单元测试

Question

我有一个简单的组件，它将通过MatDialog显示为对话框窗口。在该组件的模板中，一个按钮被标记为mat-dialog-close属性，它应该关闭对话框窗口。

单击按钮时，如何对对话框进行单元测试？此外， mat-dialog-close 可以接受一个参数并将其传递给打开对话框的任何人。如何验证是否传递了正确的值？

这不是关于测试MatDialog机器，而是关于正确地将其连接到组件上。从测试的 POV 来看，如果对话框是通过按钮关闭的，mat-dialog-close或者通过仔细设置调用this.dialogRef.close(). 在后一种情况下，我可以dialogRef在调用时模拟注入和监视close，但使用mat-dialog-close要方便得多，所以我想坚持这一点。

通常我会使用TestBed.createComponent来创建组件，也许这必须以某种方式进行更改。

Answer 1

我参加聚会有点晚了，但我是这样做的。正如上面的评论中提到的，需要对注入的 MatDialogRef 进行监视。OP 可能错过的部分是，当从组件内部手动调用mat-dialog-close时，具有属性的材质将在幕后调用该部分。this.dialogRef.close()

我的组件仅使用以下模板：

<button mat-button mat-dialog-close>Cancel</button>

并且以下测试通过得很好：

it('should close the component if cancel is clicked', () => {
    mockDialogRef.close.calls.reset();
    page.cancelButton.click();
    expect(mockDialogRef.close).toHaveBeenCalled();
});

（为了在读取文件时清晰起见，我使用页面类来定义页面上的内容.spec，如Angular 文档中所建议的那样。）

如果我调用一个函数并执行，这个完全相同的测试就会通过this.dialogRef.close()。

虽然我没有测试传递的值，但OP确实询问了这一点。像这样的事情应该可以解决问题：

在模板中：

<button mat-button [mat-dialog-close]="true">Cancel</button>

现在在测试中：

it('should close the component and pass back correct data if cancel is clicked', () => {
    mockDialogRef.close.calls.reset();
    page.cancelButton.click();
    expect(mockDialogRef.close).toHaveBeenCalledWith(true);
});

我希望这有帮助。