Angular 如何涵盖角度控制的测试？（附闪电战）

我正在制作一个简单的应用程序，它有一个输入字段和一个按钮，点击按钮，就会调用api并获取相应的响应

这一切都很好

到目前为止所做的事情：我正在进行验证，并通过如下函数显示错误消息：

您好.component.ts：

controlErrors(formControl: AbstractControl | FormControl): string {
    if (
      formControl &&
      formControl.touched &&
      formControl.invalid &&
      formControl.errors
    ) {
      return Object.keys(formControl.errors)[0];
    } else {
      return null;
    }
  }

  <form [formGroup]="userForm" novalidate>
      <input
        class="email-input mat-body-1"
        type="email"
        formControlName="email"
      />
      <button class="subscribe mat-body-2" [disabled]="userForm.invalid || submitted" (click)="subscribeEmail()">
        Subscribe
      </button>
      <span *ngIf="controlErrors(userForm.get('email')); let error">{{
        error
      }}</span>
    </form>

  describe('controlErrors', () => {

    it('should return null if !formControl', () => {
      const result = component.controlErrors(null);
      expect(result).toBeNull();
    });

    it('should return null if formControl is untouched', () => {
      const formControl = new FormControl();
      const result = component.controlErrors(formControl);
      expect(result).toBeNull();
    });

  });

在

HTML

模板中添加验证消息，如

hello.component.html：

controlErrors(formControl: AbstractControl | FormControl): string {
    if (
      formControl &&
      formControl.touched &&
      formControl.invalid &&
      formControl.errors
    ) {
      return Object.keys(formControl.errors)[0];
    } else {
      return null;
    }
  }

  <form [formGroup]="userForm" novalidate>
      <input
        class="email-input mat-body-1"
        type="email"
        formControlName="email"
      />
      <button class="subscribe mat-body-2" [disabled]="userForm.invalid || submitted" (click)="subscribeEmail()">
        Subscribe
      </button>
      <span *ngIf="controlErrors(userForm.get('email')); let error">{{
        error
      }}</span>
    </form>

  describe('controlErrors', () => {

    it('should return null if !formControl', () => {
      const result = component.controlErrors(null);
      expect(result).toBeNull();
    });

    it('should return null if formControl is untouched', () => {
      const formControl = new FormControl();
      const result = component.controlErrors(formControl);
      expect(result).toBeNull();
    });

  });

问题：问题是在运行测试覆盖时，它显示分支（黄色突出显示）和语句（红色突出显示）未覆盖

要求：请帮助我完全覆盖这些控制错误测试，以便此规范文件将有100%的测试覆盖率

工作测试用例书面stackblitz:

由于我是角度单元测试的初学者，请用正确的解决方案指导我

非常感谢

更新：

根据@Marc的评论，我试过

it('should return invalid formControl if touched with invalid email', () => {
  const formControl = new FormControl('test');
  formControl.touched;
  fixture.detectChanges();
  const result = component.controlErrors(formControl);
  expect(result).toBeNull();
});

---

但结果与上面的截图一样。。有谁能帮助我实现全面测试覆盖的结果吗？

您的测试非常好。我认为你的测试涵盖了快乐的道路。您可以做什么：您可以设置一个无效的输入（电子邮件），并将此输入设置为触摸。然后可以触发fixture.detectChanges（）@马克，谢谢你的回复。。你能给出一个有效的解决方案吗？你的测试很好。我认为你的测试涵盖了快乐的道路。您可以做什么：您可以设置一个无效的输入（电子邮件），并将此输入设置为触摸。然后可以触发fixture.detectChanges（）@马克，谢谢你的回复。。你能给出一个可行的解决方案吗？