Question

我想为检查是否显示垫错误的组件创建测试。

我已经创建了一个测试，但是失败了，因为在测试过程中DOM完全没有mat-error。尽管在提供项目时效果很好。

模板片段

<mat-error>
    Error message
</mat-error>

测试设置

describe('MyComponent', () => {
  let component: MyComponent;
  let fixture: ComponentFixture<MyComponent>;

  beforeEach(async(() => {
    TestBed.configureTestingModule({
      imports: [
        MatFormFieldModule,
        ReactiveFormsModule,
        MatInputModule,
        MatFormFieldModule,
        BrowserAnimationsModule
      ],
      declarations: [MyComponent]
    }).compileComponents();
  }));

  beforeEach(() => {
    fixture = TestBed.createComponent(MyComponent);
    component = fixture.componentInstance;
    fixture.detectChanges();
  });

  fit('should display error', () => {
    const matErrorEl: HTMLElement = 
    fixture.debugElement.query(By.directive(MatError)).nativeElement;
    expect(matErrorEl).toBeTruthy();
  });
});

Answer 1

tldr;您必须触摸FormControl才能显示任何错误。

您必须先触摸组件。
使用反应形式（其中nameFormControl的类型为FormControl）

component.nameFormControl.markAsTouched();

您的mat-error元素现在将显示在视图中。

对于实际情况，您在ngIf元素上将有一个mat-error，并且还需要设置该错误。

示例模板：

<mat-error *ngIf="nameFormControl.hasError('required')">
    Error message
</mat-error>

添加错误：

component.nameFormControl.setErrors({ required: true} as ValidationErrors);

与此问题类似的问题：
How to catch the <mat-error> error message text content using Protractor

有关Angular表单验证的官方文档：
https://angular.io/guide/form-validation#why-check-dirty-and-touched

如何测试该组件模板包含mat-error

1 个答案: