0

所以我有一个 MatDialog 框，它在关闭时会发送一些表单值。然后我在 MatDialogRef 提供的 afterClosed 方法中分派一个动作。

当我手动测试它时，这工作得很好。但是在单元测试时，调度没有被调用，我的测试失败了。

我的代码在打开对话框时运行并在关闭时调度操作。

openAddUserDialog() {
     this.addUserDialog = this.dialog.open(AddUserDialogComponent, {
      width: 'max-content',
      height: 'max-content',
      minWidth: '35vw',
      minHeight: '20vh',
      autoFocus: false
    });

     this.addUserDialog.afterClosed().subscribe(result => {
      console.log(result);
      this.store.dispatch({type: UserActions.ActionTypes.TryAddUser, payload: result.value});
    });
  }

MatDialog 的模拟

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

测试床配置

 beforeEach(async(() => {
    TestBed.configureTestingModule({
      imports: [MaterialModule, ReactiveFormsModule, BrowserAnimationsModule],
      declarations: [ UserManagementDialogComponent ],
      providers: [{provide: MatDialog, useClass: MatDialogMock}, provideMockStore({initialState})]
    })
    .compileComponents();
  }));

  beforeEach(() => {
    fixture = TestBed.createComponent(UserManagementDialogComponent);
    component = fixture.componentInstance;

    store = TestBed.get(Store);
    spyOn(store, 'dispatch').and.callThrough();
    dialog = TestBed.get(MatDialog);

    fixture.detectChanges();
  });

以及应该通过的测试

it('should dispatch an action when the form is submitted', fakeAsync(() => {

    spyOn(dialog, 'open').and.callThrough();
    const dialogRef = dialog.open();

    dialogRef.afterClosed().subscribe(result => {
      console.log('verbrberbhyn', result);
      expect(result).toEqual(initialValue);

      tick();

      expect(store.dispatch).toHaveBeenCalledTimes(1);
      expect(store.dispatch).toHaveBeenCalledWith({
        type: UserAtions.ActionTypes.TryAddUser,
        payload: initialValue
      });
    });
  }));
4

1 回答 1

0

找出我无法通过测试用例的原因。

afterClosed()对话框关闭后调用。所以我所要做的就是dialog.close()在订阅之前打电话afterClosed()

所以最后我的测试功能看起来像：

it('should dispatch an action when the form is submitted', () => {

    spyOn(dialog, 'open').and.callThrough();
    component.openAddUserDialog();
    dialog.close();
    component.addUserDialog.afterClosed().subscribe(result => {

      expect(result.value).toEqual(initialValue);
      expect(store.dispatch).toHaveBeenCalledTimes(1);
      expect(store.dispatch).toHaveBeenCalledWith({
        type: UserAtions.ActionTypes.TryAddUser,
        payload: result.value
      });
    });
  });

我还更新了 Mock

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

  close() {}
}

以便调用close()模拟对话框并afterClosed()随着操作的有效负载存储在 value 属性中而更新：

this.addUserDialog.afterClosed().subscribe(result => {
      console.log(result);
      this.store.dispatch({type: UserActions.ActionTypes.TryAddUser, payload: result.value});
    });
于 2019-03-21T05:27:58.447 回答