如何通过 mat-dialog-close 或其他方式对 MatDialog 关闭进行单元测试 [英] How do I unit-test that MatDialog is closed, by mat-dialog-close or otherwise

问题描述

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

I have a simple component, which will be displayed as a dialog window by MatDialog. In the template of that component, one button is labelled with mat-dialog-close attribute, which should close the dialog window.

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

How can I unit-test that the dialog is indeed closed when clicking on the button? Moreover, mat-dialog-close can take an argument and pass it to whomever opened the dialog. How can I verify that the correct value is passed?

这不是关于测试 MatDialog 机制，而是关于正确地将其附加到组件上.从测试的 POV 来看，我不在乎对话框是通过 mat-dialog-close 按钮关闭还是通过仔细设置调用 this.dialogRef.close().在后一种情况下，我可以模拟注入的 dialogRef 并监视调用 close，但是使用 mat-dialog-close 更方便，所以我想坚持这一点.

It's not about testing the MatDialog machinery, more about correctly attaching it to the component. From the test's POV I couldn't care less if the dialog was closed by the button with mat-dialog-close or by carefully set timeout that calls this.dialogRef.close(). In the latter case I could mock the injected dialogRef and spy on calling close, but using mat-dialog-close is much more convenient, so I'd like to stick to this.

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

Normally I'd use TestBed.createComponent to create components, maybe this would have to be changed somehow.

推荐答案

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

I'm a bit late to the party, but here's how I did this. As mentioned in the comments above, a spy on the injected MatDialogRef is needed. The part that OP may have missed is that behind the scenes that will be called by material with the mat-dialog-close attribute AS WELL AS when this.dialogRef.close() is called manually from within the component.

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

My component only uses the following template:

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

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

and the following test passes just fine:

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

(为了在阅读 .spec 文件时清晰起见，我使用页面类来定义页面上的内容，如 Angular 文档.)

(I use a page class to define what is on the page for clarity when reading .spec files, as suggested in the Angular docs.)

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

This exact same test passes if instead I call a function and execute this.dialogRef.close().

虽然我没有测试传递的值，但 OP 确实询问了这个问题.这样的事情应该可以解决问题:

While I am not testing a value passed, the OP did ask about that. Something like this should do the trick:

在模板中:

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

我希望这会有所帮助.

这篇关于如何通过 mat-dialog-close 或其他方式对 MatDialog 关闭进行单元测试的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！