Question

我使用ngIf在* .html中显示这样的消息：

<input name="name" id="name" formControlName="name" required>
<span *ngIf="name.invalid && (name.dirty || name.touched)" id="message">
   Some messages
</span>

现在我想检查它是否生效。因此，在* spec.ts中，我将该ngIf的右操作数设置为true（成功通过“expect”验证），然后使用debugElement通过id查询它。不幸的是，查询的返回值为null。我认为这意味着上面的范围尚未创建。

在设置“name”的值并将其标记为脏后，我尝试使用“detectChanges”，但它仍然无效。我尝试过的另一种方法是直接分配该HTMLInputElement的值，然后使用“dispatchEvent”，仍然不起作用。

我利用茉莉和业力来测试我的Angular 4应用程序。任何人都知道如何解决这个问题？

谢谢！

Answer 1

ngif不正确，你必须改变它

*ngIf not ngIf

<span *ngIf="name.invalid && (name.dirty || name.touched)" id="message">
    Some messages
</span>

Answer 2

这就是我设法测试它的方式。可能不需要一些步骤，但我把所有东西扔到了它。

  it('should not show error messages when input is valid', async(() => {
    const fixture = TestBed.createComponent(AppComponent);
    fixture.detectChanges();
    const compiled = fixture.debugElement.nativeElement;
    const messages = compiled.querySelector('#message');
    expect(messages).toBeFalsy();
  }));

  it('should show error messages when input is invalid', async(() => {
    const fixture = TestBed.createComponent(AppComponent);
    const component = fixture.componentInstance;
    component.ngOnInit();
    fixture.detectChanges();
    const compiled = fixture.debugElement.nativeElement;
    const input = component.formGroup.controls['name'];
    input.setValue('')
    input.markAsTouched();
    fixture.detectChanges();
    fixture.whenStable().then(() => { 
      const messages = compiled.querySelector('#message');
      expect(messages).toBeTruthy();
    });
  }));

如何测试ngIf，其右操作数与FormControl相关？

2 个答案: