如何测试 Angular 材质对话框答案

【问题标题】：How to test Angular Material Dialog如何测试 Angular 材质对话框
【发布时间】：2021-02-12 01:37:48
【问题描述】：

我正在尝试找出测试使用 Angular Material Dialog (https://material.angular.io/components/dialog/overview) 的组件的最佳方法

我正在使用来自 Angular (Karma, jasmine) 的内置测试工具

public deleteQualification: void() {
   let dialogRef = dialog.open(DeleteQualificationComponent, {
      height: '400px',
      width: '600px',
   });

    dialogRef.afterClosed().subscribe(result => {
          if (result){
             //delete code goes here, I want to test this
            }
   });
   
}

我不知道如何模拟一个返回 observable 的对象，然后在测试中等待响应..

目前我是这样解决的：

public deleteQualification: void() {
   let dialogRef = dialog.open(DeleteQualificationComponent, {
      height: '400px',
      width: '600px',
   });

    dialogRef.afterClosed().subscribe(result => {
          if (result){
             doDelete();
            }
   });

}



//I only test this
   public doDelete:void(){

   }

【问题讨论】：

标签： angular testing angular-material

【解决方案1】：

您可以像这样完全模拟 MatDialog：

TestBed.configureTestingModule({
    // ...
    providers: [
        {
            provide: MatDialog,
            useValue: jasmine.createSpyObj({
                open: jasmine.createSpyObj({
                    afterClosed: of('your result')
                })
            })
        }
    ]
})

或者这个：

{
    provide: MatDialog,
    useValue: {
        open() {
            return {
                afterClosed() {
                    return of('your result');
                }
            };
        }
    }
}

afterClosed 将返回一个同步 observable，它会发出你想要的结果。这样，您可以检查doDelete 是否在您获得预期结果时被调用。

如果您想通过打开来测试实际对话框本身，您需要导入 MatDialogModule 并在您的测试中触发关闭对话框。要在打开对话框后获得对对话框的引用，您可以在 MatDialog 上使用 openDialogs。如果这是您想要做的，请发表评论，我会更新我的答案。

【讨论】：