如何测试Angular依赖多表单控件的响应式表单验证服务方法

你这个dateRange属于作用于表单组（FormGroup）的高阶验证器，不用做复杂mock，直接构造对应结构的表单组传入测试即可，具体方案如下：

测试核心逻辑 #

dateRange方法首先接收两个字段名参数，返回的才是实际执行验证的函数，因此测试时需要先拿到返回的验证函数，再传入构造好的测试用表单组即可。

完整测试示例 #

1. 错误场景测试（结束日期早于开始日期）

it('当结束日期早于开始日期时应返回dateRange验证错误', () => {
  // 1. 传入字段名，拿到实际验证函数
  const rangeValidator = service.dateRange('startDate', 'endDate');
  // 2. 构造对应字段结构的测试用FormGroup
  const testFormGroup = new FormGroup({
    startDate: new FormControl('2024-05-20'),
    endDate: new FormControl('2024-05-10')
  });
  // 3. 执行验证，断言结果
  const validateRes = rangeValidator(testFormGroup);
  expect(validateRes).toEqual({ dateRange: true });
});

2. 合法场景测试（日期范围符合要求）

it('当结束日期晚于等于开始日期时应返回null', () => {
  const rangeValidator = service.dateRange('startDate', 'endDate');
  const testFormGroup = new FormGroup({
    startDate: new FormControl('2024-05-10'),
    endDate: new FormControl('2024-05-20')
  });
  const validateRes = rangeValidator(testFormGroup);
  expect(validateRes).toBeNull();
});

可选轻量mock方案 #

如果你不想引入完整的FormGroup依赖，也可以手动mock符合AbstractControl接口的对象，只要实现get方法返回对应控件即可：

it('用mock对象测试验证逻辑', () => {
  const rangeValidator = service.dateRange('startDate', 'endDate');
  // 仅模拟需要的get方法即可
  const mockGroup = {
    get: (field: string) => {
      if (field === 'startDate') return new FormControl('2024-05-20');
      if (field === 'endDate') return new FormControl('2024-05-10');
      return null;
    }
  } as AbstractControl;

  const validateRes = rangeValidator(mockGroup);
  expect(validateRes).toEqual({ dateRange: true });
});

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