如何在角度单元测试中使用mock测试MatDialog打开

Question

我当前正在使用一个组件，在该组件中单击按钮将打开一个弹出窗口以迎接用户。我正在使用角度材质对话框打开弹出窗口，单击时将调用的组件代码块是

public openMatDialog(): void {
this.isDialogOpen = true;

this.dialogReference = this.dialog.open(GreetComponent, {
  autoFocus: false,
  disableClose: false,
});

this.dialogReference.afterClosed().subscribe(
  () => {
       this.isDialogOpen = false;
  }
);

}

我还需要检查布尔属性以指示对话框打开和关闭。

在组件规范中，我为对话框提供模拟以防止实际依赖，如下所示，

export class MatDialogMock {
   open() {
    return {
      afterClosed: () => of(true)
    };
  }
}

在规格提供商中，

{ provide: MatDialog, useValue: matDialog },

在每个之前，

const matDialog = new MatDialogMock();

当我测试对话框打开时，如下所示，

  it('Greet User', () => {
    spyOn(matDialog, 'open');
    component.openMatDialog();
    expect(matDialog.open).toHaveBeenCalled();
  });

它因错误而失败，

Error: Expected spy open to have been called.

请指导如何使用规范中的模拟检查对话框打开情况。

Answer 1

问题是

const matDialog = new MatDialogMock();

。您不应该获得新的句柄，您应该获得您在

TestBed

中提供的句柄。

const matDialog = fixture.debugElement.injector.get(MatDialog); // get actual instance provided then your test should be good.

在文档中查看具有依赖项的组件： https://angular.io/guide/testing-components-scenarios#component-with-a-dependency

Answer 2

我在实施方面遇到了与问题不同的问题。

spyOn

包装了

open

函数，然后返回

undefined

而不是

afterClosed

的对象。这显然导致测试在尝试调用

this.dialogReference.afterClosed()

时崩溃，因为

dialogReference

是

undefined

。

我最终定义了

MatDialogMock

类，如下所示：

class MatDialogMock {
  open = jasmine.createSpy().and.returnValue({
    afterClosed: () => of(),
  });
}

然后就开始工作了。

不确定这是否能解决问题中的确切问题，但它肯定可以帮助像我这样尝试在自己的测试中使用问题中的实现的人。