我有一个简单的组件,它将显示为对话框窗口垫对话框 https://material.angular.io/components/dialog/overview。在该组件的模板中,一个按钮标记为垫子对话框关闭 https://material.angular.io/components/dialog/api#MatDialogClose属性,这应该关闭对话框窗口。
如何在单击按钮时对对话框确实关闭进行单元测试?此外,mat-dialog-close 可以接受一个参数并将其传递给打开对话框的任何人。如何验证传递的值是否正确?
这不是为了测试MatDialog
机械,更多关于将其正确连接到组件上的信息。从测试的 POV 来看,我不在乎对话框是否是通过按钮关闭的mat-dialog-close
或者通过仔细设置调用的超时this.dialogRef.close()
。在后一种情况下,我可以模拟注入的dialogRef
并监视通话close
,但是使用mat-dialog-close
方便得多,所以我想坚持这样做。
通常我会使用TestBed.createComponent https://angular.io/api/core/testing/TestBed#createComponent要创建组件,也许必须以某种方式改变它。
我参加聚会有点晚了,但我是这样做的。正如上面的评论中提到的,需要对注入的 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
文件,如建议的角度文档 https://angular.io/guide/testing#use-a-page-object.)
如果我调用一个函数并执行,这个完全相同的测试就会通过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);
});
我希望这有帮助。
本文内容由网友自发贡献,版权归原作者所有,本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容,请联系:hwhale#tublm.com(使用前将#替换为@)