angular - 我应该如何测试 Angular 6 中出现的错误消息

Question

我正在测试一个组件的验证，我可以测试它是否是falsy，但是我不知道如何测试是否出现错误信息。

这是 HTML:

<input type="text" formControlName="name" class="form-control input-lg"
       placeholder="{{ 'validation.attributes.name' | translate }}"
       [ngClass]="{ 'is-invalid': !f.name.pristine  && f.name.errors }"/>
<div *ngIf="!f.name.pristine && f.name.errors" class="text-primary">
  <div *ngIf="f.name.errors.required">{{ 'validation.required' | translate:{'attribute':'Name'} }}
  </div>
</div>

这是我的实际测试:

it(`form should be invalid without name`, async(() => {
  comp.registerForm.controls['name'].setValue('');
  expect(comp.registerForm.valid).toBeFalsy();
}));

我应该如何测试出现的错误信息？

编辑:

我做了一个调试测试:

<div id="test" >qqq</div>

我可以验证它:

fixture = TestBed.createComponent(RegisterComponent);
de = fixture.debugElement.query(By.css('form'));
el = de.nativeElement;
const test = el.querySelector('#test');
expect(test.textContent).toContain('qqq'); // This will pass

但是当我添加条件时:

*ngIf="!f.name.pristine && f.name.errors"

我得到:

Cannot read property 'textContent' of null

只是为了确认，我有

fixture.detectChanges();

在beforeEach()

中

Answer 1

你有两个选择:

1. 使用 @ViewChild 元素:

   <div #errorMessage *ngIf="!f.name.pristine && f.name.errors" class="text-primary">
   
   // In your component
   @ViewChild() errorMessage: ElementRef;
   

2. 使用文档查询选择器

   <div id="errorMessage" *ngIf="!f.name.pristine && f.name.errors" class="text-primary">
   
   // In your test file
   const el = fixture.nativeElement.querySelector('#errorMessage')
   

现在在你的测试中你可以使用其中之一:

expect(component.errorMessage.nativeElement).toBeTruthy();
expect(el).toBeTruthy();

两者都是 HTMLElement，因此您可以访问它们的属性:

el.innerHTML
el.className
...