Question

在Angular中，是否有一种方法可以测试规格测试中是否存在垫错误？我认为这应该起作用，但是不起作用。

describe('email control set to invalid email', () => {
      it('should result in email warning', () => {
        component.form.get('email').setValue('flo.com');
        fixture.detectChanges();
        expect(de.queryAll(By.css('#email-warning')).length).toBe(1);
      });
describe('email control set to invalid email', () => {
      it('should result in email warning', () => {
        component.form.get('email').setValue('flo@gmail.com');
        fixture.detectChanges();
        expect(de.queryAll(By.css('#email-warning')).length).toBe(0);
      });

问题在于输入值是无效的flo.com还是有效的flo@gmail.com，查询数组的长度始终为1。如果我从.html中删除...，则数组的长度为零。

我的模板中还将包含其他元素，因此我特别在寻找这一元素。

这是我的html。

<form [formGroup]="form">
  <mat-form-field>
    <input  name="email"
    formControlName="email"
    matInput
    type="email"
    placeholder="Email"
    autocomplete="off"/>
    <mat-error id="email-warning">Enter a valid email address.</mat-error>
  </mat-form-field>

这是我的组件。

ngOnInit(): void {
    this.form = this.fb.group({
      email: ['', [Validators.required, Validators.email]],
      pwGroup: this.fb.group({
        password: ['', [Validators.required, Validators.minLength(6)]],
        pwConfirmation: ['', ]
      }, {validator: this.checkPasswords})
  });
  }

在浏览器中，它可以正常工作，仅在电子邮件无效时显示警告。实际上，当电子邮件有效时，被检查的html中不存在＃email-warning元素。这就是为什么我认为数组的长度应为0的原因。我已经知道如何在量角器，e2e测试中进行测试，实际上只是在询问.spec测试。

编辑这是发生错误时检查的html：

<div class="mat-form-field-subscript-wrapper ng-tns-c109-0" ng-reflect-ng-switch="error">

    <div class="ng-tns-c109-0 ng-trigger ng-trigger-transitionMessages ng-star-inserted" style="opacity: 1; transform: translateY(0%);">

        <mat-error _ngcontent-uiy-c122="" role="alert" id="email-warning" class="mat-error ng-tns-c109-0" ng-reflect-id="email-warning">Enter a valid email address.</mat-error>

    </div><!--bindings={"ng-reflect-ng-switch-case": "error"}--><!--bindings={"ng-reflect-ng-switch-case": "hint"}-->

</div>

这里是没有错误的待检查HTML。

<mat-form-field _ngcontent-uiy-c122="" class="mat-form-field ng-tns-c109-0 mat-primary mat-form-field-type-mat-input mat-form-field-appearance-legacy mat-form-field-can-float mat-form-field-has-label mat-form-field-hide-placeholder mat-form-field-should-float ng-dirty ng-touched ng-valid">

<div class="mat-form-field-wrapper ng-tns-c109-0">

    <div class="mat-form-field-flex ng-tns-c109-0"><!--bindings={
  "ng-reflect-ng-if": "false"}--><!--bindings={"ng-reflect-ng-if": "0"}-->
        
        <div class="mat-form-field-infix ng-tns-c109-0">

            <input _ngcontent-uiy-c122="" name="email" formcontrolname="email" matinput="" type="email" autocomplete="off" class="mat-input-element mat-form-field-autofill-control ng-tns-c109-0 cdk-text-field-autofill-monitored ng-dirty ng-touched ng-valid" ng-reflect-type="email" ng-reflect-placeholder="Email" ng-reflect-name="email" id="mat-input-0" data-placeholder="Email" aria-invalid="false" aria-required="false">

            <span class="mat-form-field-label-wrapper ng-tns-c109-0">

                <label class="mat-form-field-label ng-tns-c109-0 ng-star-inserted" ng-reflect-disabled="true" id="mat-form-field-label-1" ng-reflect-ng-switch="false" for="mat-input-0" aria-owns="mat-input-0">

                <span class="ng-tns-c109-0 ng-star-inserted">Email

                </span>

                <!--ng-container--><!--bindings={"ng-reflect-ng-switch-case": "false"}--><!--bindings={"ng-reflect-ng-switch-case": "true"}--><!--bindings={"ng-reflect-ng-if": "false"}--></label><!--bindings={"ng-reflect-ng-if": "true"}-->
            
            </span>

        </div><!--bindings={"ng-reflect-ng-if": "0"}-->

    </div>

    <div class="mat-form-field-underline ng-tns-c109-0 ng-star-inserted">

        <span class="mat-form-field-ripple ng-tns-c109-0"></span>

    </div><!--bindings={"ng-reflect-ng-if": "true"}-->

    <div class="mat-form-field-subscript-wrapper ng-tns-c109-0" ng-reflect-ng-switch="hint"><!--bindings={"ng-reflect-ng-switch-case": "error"}-->

        <div class="mat-form-field-hint-wrapper ng-tns-c109-0 ng-trigger ng-trigger-transitionMessages ng-star-inserted" style="opacity: 1; transform: translateY(0%);"><!--bindings={"ng-reflect-ng-if": ""}-->

            <div class="mat-form-field-hint-spacer ng-tns-c109-0">

            </div>

        </div><!--bindings={"ng-reflect-ng-switch-case": "hint"}-->

    </div>

</div>

我更新的测试导致错误：

describe('email control set to valid email', () => {
      it('should not result in email warning', async () => {
        component.form.get('email').setValue('flo@gmail.com');
        fixture.detectChanges();
        await fixture.whenStable();
        expect(fixture.debugElement.queryAll(By.css('#email-warning')).length).toBe(0);
      });
    });

Answer 1

也许在执行断言之前您需要等待一些异步操作。

尝试一下：

describe('email control set to invalid email', () => {
      it('should result in email warning', async() => {
        component.form.get('email').setValue('flo.com');
        fixture.detectChanges();
        await fixture.whenStable(); // wait for promises to complete before asserting
        expect(de.queryAll(By.css('#email-warning')).length).toBe(1);
      });
describe('email control set to invalid email', () => {
      it('should result in email warning', async() => {
        component.form.get('email').setValue('flo@gmail.com');
        fixture.detectChanges(); // wait for promises to complete before asserting
        expect(de.queryAll(By.css('#email-warning')).length).toBe(0);
      });

如果这不起作用，您可以继续使用TypeScript，并确保在TypeScript正确的情况下HTML可以正确运行。

describe('email control set to invalid email', () => {
      it('should result in email warning', () => {
        component.form.get('email').setValue('flo.com');
        fixture.detectChanges();
        expect(component.form.controls['email'].hasError('email')).toBeTruthy();
      });
describe('email control set to invalid email', () => {
      it('should result in email warning', () => {
        component.form.get('email').setValue('flo@gmail.com');
        fixture.detectChanges();
        expect(component.form.controls['email'].hasError('email')).toBeFalsy();
      });

编辑

似乎de是fixture.detectChanges之前的旧参考文献，我认为您需要一个新参考文献。

describe('email control set to invalid email', () => {
      it('should result in email warning', async() => {
        component.form.get('email').setValue('flo.com');
        fixture.detectChanges();
        await fixture.whenStable(); // wait for promises to complete before asserting
        expect(fixture.debugElement.queryAll(By.css('#email-warning')).length).toBe(1); // grab a new reference by using `fixture.debugElement`
      });
describe('email control set to invalid email', () => {
      it('should result in email warning', async() => {
        component.form.get('email').setValue('flo@gmail.com');
        fixture.detectChanges(); 
        await fixture.whenStable();
        expect(fixture.debugElement.queryAll(By.css('#email-warning')).length).toBe(0); // grab a new reference by using fixture.debugElement
      });

在角度测试中，有没有一种方法可以测试.spec测试中是否存在mat-error？

1 个答案: