Angular课程：模型驱动表单的单元测试实践-优快云博客

本文链接：https://blog.youkuaiyun.com/gitblog_00393/article/details/148647573

Angular课程：模型驱动表单的单元测试实践

angular-course Official repository for the Angular: From Theory To Practice Book 项目地址: https://gitcode.com/gh_mirrors/ang/angular-course

前言

在Angular应用开发中，表单是必不可少的重要组成部分。模型驱动表单（Model-Driven Forms，也称为响应式表单）因其强大的可测试性和灵活性而受到开发者青睐。本文将深入探讨如何在Angular中对模型驱动表单进行单元测试。

测试环境搭建

首先，我们需要准备一个基本的登录组件作为测试对象。这个组件包含email和password两个字段，使用模型驱动方式构建表单：

@Component({
  selector: 'app-login',
  template: `
    <form (ngSubmit)="login()" [formGroup]="form">
      <label>Email</label>
      <input type="email" formControlName="email">
      <label>Password</label>
      <input type="password" formControlName="password">
      <button type="submit">Login</button>
    </form>
  `
})
export class LoginComponent {
  @Output() loggedIn = new EventEmitter<User>();
  form: FormGroup;

  constructor(private fb: FormBuilder) {}

  ngOnInit() {
    this.form = this.fb.group({
      email: ['', [
        Validators.required,
        Validators.pattern("[^ @]*@[^ @]*")]],
      password: ['', [
        Validators.required,
        Validators.minLength(8)]],
    });
  }

  login() {
    if (this.form.valid) {
      this.loggedIn.emit(
        new User(this.form.value.email, this.form.value.password)
      );
    }
  }
}

在测试模块配置时，需要特别注意导入ReactiveFormsModule和FormsModule：

beforeEach(() => {
  TestBed.configureTestingModule({
    imports: [ReactiveFormsModule, FormsModule],
    declarations: [LoginComponent]
  });
  
  fixture = TestBed.createComponent(LoginComponent);
  component = fixture.componentInstance;
  component.ngOnInit(); // 手动触发生命周期钩子
});

表单有效性测试

测试空表单

模型驱动表单的一个优势是我们可以直接访问表单模型的状态：

it('空表单应该无效', () => {
  expect(component.form.valid).toBeFalsy();
});

字段级验证

我们可以深入测试单个表单控件的验证状态：

it('email字段初始有效性', () => {
  const email = component.form.controls['email'];
  expect(email.valid).toBeFalsy();
});

验证错误详情

通过访问控件的errors属性，我们可以检查具体的验证失败原因：

it('email字段的必填验证', () => {
  const email = component.form.controls['email'];
  const errors = email.errors || {};
  expect(errors['required']).toBeTruthy();
});

我们还可以测试其他验证规则，例如模式验证：

it('email字段的模式验证', () => {
  const email = component.form.controls['email'];
  email.setValue("test"); // 设置无效值
  const errors = email.errors || {};
  expect(errors['pattern']).toBeTruthy();
});

表单提交测试

测试表单提交时，我们可以直接调用组件的login()方法，然后验证输出事件：

it('提交有效表单应发出用户事件', () => {
  // 准备有效表单数据
  component.form.controls['email'].setValue("test@test.com");
  component.form.controls['password'].setValue("123456789");
  
  let emittedUser: User;
  component.loggedIn.subscribe(user => emittedUser = user);
  
  // 触发提交
  component.login();
  
  // 验证输出
  expect(emittedUser.email).toBe("test@test.com");
  expect(emittedUser.password).toBe("123456789");
});