Question

我正在测试组件的有效性，并且可以测试它是否为假，但是我不知道如何测试错误消息的出现。

这是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

您有两个选择：

使用@ViewChild元素：

<div #errorMessage *ngIf="!f.name.pristine && f.name.errors" class="text-primary">

// In your component
@ViewChild() errorMessage: ElementRef;

使用文档查询选择器

<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
...

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

1 个答案: