5

我想为检查是否显示 mat-error 的组件创建测试。

我创建了一个测试，但它失败了，因为 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();
  });
});
4

2 回答 2

5

tldr; 您必须先触摸 ，FormControl然后才会显示任何错误。

您必须先触摸组件。
使用反应形式（其中nameFormControl是 type 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

于 2019-11-21T11:00:38.697 回答
0

我采用了另一种方式，我使用了一个名为 spectator 的库来帮助我处理使用 angular-material spectator的场景

文件测试

import { createComponentFactory, Spectator } from '@ngneat/spectator';
describe('InputEmailComponent', () => {
 let spectator: Spectator<InputEmailComponent>;
 const createComponent = createComponentFactory({
   component: InputEmailComponent,
 });

 beforeEach(() => (spectator = createComponent()));

 it(`should get the component mat-error with a email empty`, () => {
   // Pass a value null for a email validator required
   spectator.component.email.setValue(null);

   expect(spectator.query('mat-error')).toHaveText('Insira um e-mail válido');
 });

});

文件组件

import { Component, Input, OnInit } from "@angular/core";
import {
  ControlContainer,
  FormControl,
  FormGroupDirective,
  Validators,
} from "@angular/forms";

@Component({
  selector: "input-email",
  templateUrl: "./input-email.component.html",
  viewProviders: [
    {
      provide: ControlContainer,
      useExisting: FormGroupDirective,
    },
  ],
})
export class InputEmailComponent implements OnInit {
  @Input() style: string = "";
  email: FormControl;
  constructor() {
    this.email = new FormControl("", [Validators.required, Validators.email]);
  }
  ngOnInit(): void {}

  getErrorMessage(): string | null {
    if (this.email.hasError("required") || this.email.hasError("email")) {
      return "Insira um e-mail válido";
    }
    return null;
  }
}

文件模板html

<mat-form-field [style]="style" appearance="fill">
  <mat-label>e-mail</mat-label>
  <input
    type="email"
    formControlName="email"
    matInput
    placeholder="digite seu e-mail"
  />
  <mat-error *ngIf="!email.valid">{{ getErrorMessage() }}</mat-error>
</mat-form-field>
于 2021-10-06T14:01:09.977 回答