入口组件中的单元测试对话框组件实例事件发射器

Question

我有一个入口对话框组件 (EntryDialog) 和一个实际的对话框组件 (MyDialog)。我在入口组件中有一个订阅者，它订阅了我的主对话框组件中的事件发射器。努力测试下面的部分，感谢您的帮助。

要测试的部分

this.dialogRef.componentInstance.myEventEmitter.subscribe((type: string) => {
  if (type) {
    this.assignSample(type);
  }
});

入门组件

@Component({
  selector: 'app-entry-dialog',
})
@Component({template: ''})
export class EntryDialog {
  dialogRef: MatDialogRef<MyDialog>;
  constructor(
      private readonly dialog: MatDialog,
  ) {
    this.dialogRef = this.dialog.open(MyDialog, {
      data: someData,
      disableClose: true,
    });
    this.dialogRef.componentInstance.myEventEmitter.subscribe((type: string) => {
      if (type) {
        this.assignSample(type);
      }
    });
  }

  private assignSample(type: string) {
    // some code here
  }

主对话框组件

@Component({
  selector: 'app-my-dialog',
  templateUrl: './my_dialog.ng.html',
})
export class MyDialog {
  @Output() myEventEmitter = new EventEmitter<string>(true);

  constructor(
      @Inject(MAT_DIALOG_DATA) readonly sample: string,
      public dialogRef: MatDialogRef<MyDialog>,
  ) {
    merge(
        this.dialogRef.backdropClick(),
        this.dialogRef.keydownEvents().pipe(filter(
            (keyboardEvent: KeyboardEvent) => keyboardEvent.key === 'Escape')))
        .pipe(take(1))
        .subscribe(() => {
          this.dialogRef.close();
        });
  }

  emitEvent() {
    this.myEventEmitter.emit("data");
    this.dialogRef.close();
  }

Answer 1

你可以为它使用模拟，你甚至不需要这里的 TestBed。

it('', () => {
  // creating mocked dependencies
  const mockDialogRef: any = {
    componentInstance: {
      myEventEmitter: new Subject(),
    },
  };
  const mockMatDialog: any = {
    open: jasmine.createSpy(),
  };

  mockMatDialog.open.and.returnValue(mockDialogRef);

  // action
  const instance = new EntryDialog(mockMatDialog);

  // checking open call
  expect(mockMatDialog.open).toHaveBeenCalledWith(MyDialog, {
    data: someData,
    disableClose: true,
  });

  mockDialogRef.componentInstance.myEventEmitter.next('typeToTest');
  // assertions 
});

入口组件中的单元测试对话框组件实例事件发射器

Unit testing dialog componentInstance event emitter in entry component

javascript

jasmine

typescript

angular

要测试的部分

入门组件

主对话框组件