角闭通用对话框测试

Question

我有对话框服务的打开，确认和关闭对话框，我正在制作它的单元测试文件，但我得到了一个错误的哭声测试波纹管方法的角，这是代码。

dialog.service.ts

​

@Injectable({
  providedIn: 'root'
})
export class DialogService {
  public genericDialogRef?: MatDialogRef<GenericDialogComponent>;

  constructor(
    private dialog: MatDialog,
    private toastr: ToastrService,
    private translateService: TranslateService
  ) { }

  public openGenericDialog(options: GenericDialogOptions) {
const filledInConfig: Required<GenericDialogOptions> = { ...defaultValues, ...options };
this.genericDialogRef = this.dialog.open(GenericDialogComponent, {
  data: filledInConfig
});
  }

  public genericDialogClosed(): Observable<boolean> {
    if (!this.genericDialogRef)
      throw Error("Dialog ref wasn't initialized! Call open first");

    return this.genericDialogRef.afterClosed().pipe(take(1));
  }
}

​

dialog.service.spec.ts

​

describe('DialogService', () => {
  let service: DialogService;
  let matDialogMock = jasmine.createSpyObj(['open']);
  let toastrServiceMock = {};
  let dialog: any;
  let translateService: TranslateService;

  beforeEach(() => {
    TestBed.configureTestingModule({
      imports: [TranslateModule.forRoot()],
      providers: [
        { provide: MatDialog, useValue: matDialogMock },
        { provide: ToastrService, useValue: toastrServiceMock },
      ],
    });
    service = TestBed.inject(DialogService);
    dialog = TestBed.inject(MatDialog);
    translateService = TestBed.inject(TranslateService);
  });

  it('should be created', () => {
    expect(service).toBeTruthy();
  });

  it('should close generic Dialog', fakeAsync(() => {

    service.genericDialogClosed().subscribe(() => {
      expect(service.genericDialogRef?.afterClosed).toHaveBeenCalled();
    });

    tick();
  }));

});

​

这里是错误：

你能帮我解决这个问题吗？

编辑：下面的测试工作正常：

​

  it('should close generic Dialog', () => {
    service.genericDialogRef = {
      afterClosed: () => of(true)
    } as MatDialogRef<GenericDialogComponent>;

    service.genericDialogClosed()
  });

​

Answer 1

这是正确的结果，因为genericDialogRef从未被设置过。快速修复将是手动设置它，最好用一些模拟。但是，由于您正在测试是否调用了afterClosed，所以您应该将它封装到一个fakeAsync函数中，并订阅genericDialogClosed函数，否则它将无法工作。

编辑：正如我所说的，我希望找到一个非常简单的解决方案，但在您的例子中，它变得越来越复杂。原因是，您将具有特定类型的DialogRef分配给服务的属性，类型检查不允许我的简单值分配。所以你可以要么嘲笑它：

// Create a mock
const matDialogRefMock: MatDialogRef<GenericDialogComponent> {
  // completely mock the DailogRef
  afterClosed: () => of(true);
}

it('should close generic Dialog', fakeAsync(() => {
  // then assign it before you try to close the dialog
  service.genericDialogRef = matDialogRefMock;

  service.genericDialogClosed().subscribe(() => {
    expect(service.genericDialogRef?.afterClosed).toHaveBeenCalled();
  });
  // Make the async tick happen
  tick();  
}));

或者您可以尝试在关闭对话框之前打开它，这样引用就存在了。

it('should close generic Dialog', fakeAsync(() => {
  // open the dialog in order to create a reference to it
  service.openGenericDialog();

  service.genericDialogClosed().subscribe(() => {
    expect(service.genericDialogRef?.afterClosed).toHaveBeenCalled();
  });
  // Make the async tick happen
  tick();  
}));

我有过一次类似的测试用例，当我在一个it测试用例中打开对话框时，我将引用分配给顶层变量，然后该变量可用于另一个it测试来关闭它。