用 Material 编写的 Angular Testing 模板驱动形式

Question

我正在尝试为我的组件编写测试。我的组件有一个表单，其中有一个下拉(mat-select)字段，上面有 required 属性。

如果我在其中设置一个值，则表单有效:

我如何测试这个。我想编写一个测试，期望 form.invalid 在我设置值之前为真，而 form.valid 在设置值之后为真。

it('should validate the app', () => {
let fixture = TestBed.createComponent(AppComponent);
  fixture.detectChanges();
  fixture.whenStable().then(() => {
    fixture.detectChanges();
    let component = fixture.componentInstance;
    expect(component.form.invalid).toBeTruthy();
    component.myobject.value = "ABC";
    expect(component.form.valid).toBeTruthy();

  });
});

如果测试看起来像上面那样，在表示我的字段的表单对象上找到的 ngModel 几乎没有变化。

如果我在设置值后添加 fixture.detectChanges()(不确定何时调用此方法)，该字段的模型将为“ABC”，但该字段的值为“”:

it('should validate the app', () => {
let fixture = TestBed.createComponent(AppComponent);
  fixture.detectChanges();
  fixture.whenStable().then(() => {
    fixture.detectChanges();
    let component = fixture.componentInstance;
    expect(component.form.invalid).toBeTruthy();
    component.myobject.value = "ABC";
    fixture.detectChanges();
    expect(component.form.valid).toBeTruthy();

  });
});

我的感觉是 mat-select 字段没有正确启动，它还没有计算出有哪些有效选项。如果我调试和检查 dom，则在设置值时不会绘制任何选项。

有人知道怎么解决吗？

如果有人想克隆并尝试，我做了一个简单的 github 存储库:

https://github.com/trashhead/angular-templ-drivn-form-test

Answer 1

我找到了一种现在看来可行的方法。我只是不明白运行 whenStable 时会发生什么。

it('This one works', (done) => {
  let fixture = TestBed.createComponent(AppComponent);
  fixture.detectChanges();
  fixture.whenStable().then(() => {
    fixture.detectChanges();
    let component = fixture.componentInstance;
    expect(component.form.invalid).toBeTruthy();
    component.myobject.value = "ABC"; 
    fixture.detectChanges();
    fixture.whenStable().then(() => {
      fixture.detectChanges();
      expect(component.form.valid).toBe(true);
      done();
    })
  });
});

所以解决方案是，在设置下拉值之后，我必须执行另一个 whenStable 并在其中检查表单的有效性。