角度测试模板驱动形式写在材料中

Question

我正在尝试为我的Component编写测试。我的组件有一个表单，其中包含一个下拉（mat-select）字段，其中包含必需的属性。

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

我该如何测试呢。我想编写一个测试，希望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

我找到了一种似乎现在有用的方法。我只是不明白在运行什么时会发生什么。

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();
    })
  });
});

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

Answer 2

你试过：

expect(component.form.invalid).toBe(true) 接下来 expect(component.form.valid).toBe(true)？