unit-testing - 单元测试Angular 5-期望对话框关闭

Question

我有一个组件(这是一个MatDialog组件)，其功能之一就是通过简单地调用“this.dialogRef.close(true);”来保存一些日期并在最后(对话框)关闭自身。到现在为止还挺好。
问题出在单元测试上。当我尝试测试此功能时，Karma会引发错误“TypeError:this.dialogRef.close不是函数”。我想它不能识别对话框中调用的关闭函数，因为我一定忘记了以某种方式在我的spec.ts文件中启动此dialogRef，但是考虑到事实并非如此，我不知道如何继续网络上有关在spec.ts中配置Material 2组件的大量 Material 。我的问题是:如何通过单元测试来获取此测试以识别dialogRef.close()函数。

下面是一些示例代码:
timeRangeDialogComponent.ts

import { MatDialogRef, MAT_DIALOG_DATA } from '@angular/material';

export class TimeRangeDialogComponent implements OnInit, OnDestroy {

 constructor(public dialogRef: MatDialogRef<TimeRangeDialogComponent>,
           @Inject(MAT_DIALOG_DATA) public data: any) {
 }

 saveCustomTimeRange(): void {
   this.dialogRef.close(true);
 }
}

TimeRangeDialogComponent.spec.ts

beforeEach(async(() => {
  TestBed.configureTestingModule({
    declarations: [ TimeRangeDialogComponent ],
    imports: [ FormsModule, MaterialModule, MatDatepickerModule ],
    providers: [
      { provide: MatDialogRef, useValue: {} },
      { provide: MAT_DIALOG_DATA, useValue: [] } ]
  })
    .compileComponents();
}));

beforeEach(() => {
  fixture = TestBed.createComponent(TimeRangeDialogComponent);
  component = fixture.componentInstance;
  fixture.detectChanges();
});

it('should call the function to close the dialog', () => {
  component.saveCustomTimeRange();
  expect(component.dialogRef.close()).toHaveBeenCalled();
});

引发错误:TypeError:this.dialogRef.close不是函数

预先感谢您的帮助。

Answer 1

解决该问题的一种方法是提供具有close方法的对话框类的模拟，而不是仅在providers数组中提供一个空对象。就像是:

// mock object with close method
const dialogMock = {
    close: () => { }
};

beforeEach(async(() => {
  TestBed.configureTestingModule({
    declarations: [ TimeRangeDialogComponent ],
    imports: [ FormsModule, MaterialModule, MatDatepickerModule ],
    providers: [
      { provide: MatDialogRef, useValue: dialogMock },
      { provide: MAT_DIALOG_DATA, useValue: [] } ]
  })
    .compileComponents();
}));

这里的close方法实际上不执行任何操作，但是您可以检查是否至少已调用它。