如何为Angular响应式表单的自定义ErrorStateMatcher编写单元测试用例

针对你提供的CustomErrorStateMatcher类的isErrorState方法，可按照以下方案编写单元测试，测试基于Angular默认集成的Jasmine框架实现：

测试逻辑梳理 #

该方法的返回规则非常明确，仅当三个条件同时成立时才返回true：

1. 传入的control实例不为空
2. control校验状态为不通过（invalid为true）
3. control已被用户触碰（touched为true）

我们只需要覆盖所有排列组合的场景，即可保证测试的完整性。另外注意原方法未使用form参数，测试时直接传null即可，不需要额外模拟表单实例。

完整测试代码 #

import { FormControl, Validators } from '@angular/forms';
import { CustomErrorStateMatcher } from './custom-error-state-matcher'; // 替换为你的类实际存放路径

describe('CustomErrorStateMatcher', () => {
  let matcher: CustomErrorStateMatcher;

  // 每个测试用例执行前初始化新的实例，避免用例间数据污染
  beforeEach(() => {
    matcher = new CustomErrorStateMatcher();
  });

  it('control为null时返回false', () => {
    expect(matcher.isErrorState(null, null)).toBeFalse();
  });

  it('control校验通过、未触碰时返回false', () => {
    const control = new FormControl('合法输入值', Validators.required);
    expect(matcher.isErrorState(control, null)).toBeFalse();
  });

  it('control校验不通过、未触碰时返回false', () => {
    const control = new FormControl('', Validators.required);
    expect(matcher.isErrorState(control, null)).toBeFalse();
  });

  it('control校验通过、已触碰时返回false', () => {
    const control = new FormControl('合法输入值', Validators.required);
    control.markAsTouched();
    expect(matcher.isErrorState(control, null)).toBeFalse();
  });

  it('control校验不通过、已触碰时返回true', () => {
    const control = new FormControl('', Validators.required);
    control.markAsTouched();
    expect(matcher.isErrorState(control, null)).toBeTrue();
  });
});

测试验证说明 #

• 所有分支场景100%覆盖：包含空值异常场景、三个判断条件的所有组合场景，无逻辑遗漏
• 用例职责单一：每个测试只验证一种场景，出现失败时可快速定位问题点
• 无需额外依赖：完全使用Angular表单自带的API实现，不需要引入第三方测试工具

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