Angular单元测试：如何对模板驱动表单的验证进行单元测试？

针对你提供的这个模板驱动登录表单，咱们可以围绕必填字段验证、表单状态变化、提交逻辑触发条件这几个核心点来编写单元测试。下面是具体的实现步骤和测试用例：

第一步：配置测试环境 #

首先要在组件的.spec.ts文件中导入FormsModule，因为模板驱动表单依赖这个模块才能正常工作：

import { ComponentFixture, TestBed } from '@angular/core/testing';
import { FormsModule } from '@angular/forms';
import { By } from '@angular/platform-browser';
import { YourLoginComponent } from './your-login.component'; // 替换成你的组件类名

describe('YourLoginComponent', () => {
  let component: YourLoginComponent;
  let fixture: ComponentFixture<YourLoginComponent>;
  let debugElement: DebugElement;
  let loginSpy: jasmine.Spy;

  beforeEach(async () => {
    await TestBed.configureTestingModule({
      imports: [FormsModule], // 必须导入FormsModule才能测试模板驱动表单
      declarations: [YourLoginComponent]
    })
    .compileComponents();
  });

  beforeEach(() => {
    fixture = TestBed.createComponent(YourLoginComponent);
    component = fixture.componentInstance;
    debugElement = fixture.debugElement;
    // 监听login方法，用来验证它是否被正确调用
    loginSpy = spyOn(component, 'login');
    fixture.detectChanges(); // 触发初始数据绑定
  });
});

第二步：编写核心测试用例 #

1. 初始状态验证 #

验证表单刚加载时，所有必填控件都是未触碰状态，整体表单无效：

it('should have invalid form initially', () => {
  const form = component.form; // 对应模板中的#f="ngForm"
  expect(form.valid).toBeFalse();
  
  // 验证单个控件的初始状态
  const usernameControl = component.username; // 对应模板中的#username="ngModel"
  const passwordControl = component.password;
  expect(usernameControl.touched).toBeFalse();
  expect(passwordControl.touched).toBeFalse();
  expect(usernameControl.hasError('required')).toBeTrue();
  expect(passwordControl.hasError('required')).toBeTrue();
});

2. 空提交测试 #

验证当用户直接点击提交按钮时，表单不会触发login方法，同时控件会被标记为已触碰：

it('should not call login when form is submitted empty', () => {
  // 获取提交按钮并触发点击事件
  const submitBtn = debugElement.query(By.css('button[type="submit"]'));
  submitBtn.triggerEventHandler('click', null);
  fixture.detectChanges();

  expect(loginSpy).not.toHaveBeenCalled();
  // 验证控件被标记为已触碰
  expect(component.username.touched).toBeTrue();
  expect(component.password.touched).toBeTrue();
});

3. 必填字段验证 #

验证当控件为空且失去焦点时，会触发必填错误（如果模板中有错误提示元素，还可以验证提示是否显示）：

it('should trigger required error when username is touched and empty', () => {
  const usernameInput = debugElement.query(By.css('input[name="username"]')).nativeElement;
  // 触发失去焦点事件
  usernameInput.dispatchEvent(new Event('blur'));
  fixture.detectChanges();

  expect(component.username.hasError('required')).toBeTrue();
  // 如果模板中有错误提示（比如<div *ngIf="username.invalid && username.touched">请输入用户名</div>）
  // 可以添加验证：
  // const errorElement = debugElement.query(By.css('.username-error'));
  // expect(errorElement).toBeTruthy();
});

4. 有效表单提交测试 #

验证当用户名和密码都填写后，表单变为有效，点击提交时login方法会被调用：

it('should call login when form is valid and submitted', () => {
  // 填写合法的用户名和密码
  component.model.username = 'test-username';
  component.model.password = 'test-password';
  fixture.detectChanges();

  // 先验证表单状态是否变为有效
  expect(component.form.valid).toBeTrue();

  // 触发提交事件
  const submitBtn = debugElement.query(By.css('button[type="submit"]'));
  submitBtn.triggerEventHandler('click', null);
  fixture.detectChanges();

  expect(loginSpy).toHaveBeenCalled();
});

额外提示 #

• 如果你的模板有自定义错误样式或复杂的提示逻辑，可以针对性添加测试，比如验证错误提示在特定条件下的显示/隐藏状态。
• 每次修改组件数据或触发DOM事件后，记得调用fixture.detectChanges()触发Angular的变更检测，确保视图同步更新。
• 可以通过nativeElement获取原生DOM元素，模拟用户的真实操作（比如输入文本、点击、失去焦点等）。

内容的提问来源于stack exchange，提问作者Yudo