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()属性AS WELL AS的材质将调用该场景。

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

<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();
});

（为了方便阅读，我使用页面类来定义页面上的内容，如Angular docs中所建议。）

如果我改为调用一个函数并执行.spec，则会通过完全相同的测试。

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

在模板中：

this.dialogRef.close()

现在正在测试中：

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

我希望这会有所帮助。

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

1 个答案: