触摸和取消触摸垫输入后单元测试是否存在垫错误

时间:2019-01-16 14:01:56

标签: html angular typescript unit-testing dom

当我未触摸输入时以及在未输入任何文本的情况下触摸和未触摸输入时,如何测试DOM中是否存在mat-error?

我正在使用Jest进行测试

HTML

<mat-form-field>
  <input matInput formControlName="someInput"/>
  <mat-error id="my_error">* required</mat-error>
</mat-form-field>

测试

it('Should not show error', () => {
  const myEl = fixture.debugElement.query(By.css('#my_error'));

  expect(myEl).toBeUndefined();
});

it('Should show error', () => {
  const myEl = fixture.debugElement.query(By.css('#my_error'));

 // code to touch and untouch the element

  expect(myEl).not.toBeUndefined();
});

1 个答案:

答案 0 :(得分:0)

也许是这样的:

const input = fixture.debugElement.query(By.css("[formControlName='someInput']"));
const errors = fixture.debugElement.queryAll(By.css("mat-error"));

input.nativeElement.dispatchEvent(new Event("input"));
fixture.detectChanges();

expect(errors.length).toEqual(1);
expect(errors[0].nativeElement.innerHTML.trim()).toMatch("* required");