如何为Angular中的自定义ErrorStateMatcher编写单元测试？

你完全不需要手动Mock所有复杂的表单实例，Angular本身的测试工具链就能大幅简化这类测试工作。核心思路是覆盖isErrorState方法的所有逻辑分支，而非盲目模拟所有状态组合。

测试核心逻辑分支 #

你的ShowOnChangeErrorStateMatcher逻辑清晰，只需覆盖以下关键场景：

• 当传入的control为null时，返回false
• 当control处于有效状态时，无论其他条件如何都返回false
• 当control无效时，只要满足dirty/touched/表单submitted其中一个条件，返回true
• 当control无效但三个触发条件都不满足时，返回false

具体测试实现（基于Jasmine） #

直接使用真实的FormControl实例（无需Mock），通过Angular提供的方法设置其状态；对于表单对象（FormGroupDirective/NgForm），仅需模拟submitted属性即可：

import { ShowOnChangeErrorStateMatcher } from './your-file-path';
import { FormControl, Validators } from '@angular/forms';

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

  beforeEach(() => {
    matcher = new ShowOnChangeErrorStateMatcher();
  });

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

  it('返回false当control处于有效状态', () => {
    const validControl = new FormControl('valid content');
    expect(matcher.isErrorState(validControl, null)).toBeFalse();
  });

  it('返回true当无效control被标记为dirty', () => {
    const invalidControl = new FormControl('', { validators: [Validators.required] });
    invalidControl.markAsDirty();
    expect(matcher.isErrorState(invalidControl, null)).toBeTrue();
  });

  it('返回true当无效control被标记为touched', () => {
    const invalidControl = new FormControl('', { validators: [Validators.required] });
    invalidControl.markAsTouched();
    expect(matcher.isErrorState(invalidControl, null)).toBeTrue();
  });

  it('返回true当无效control且表单已提交', () => {
    const invalidControl = new FormControl('', { validators: [Validators.required] });
    const mockSubmittedForm = jasmine.createSpyObj('NgForm', [], { submitted: true });
    expect(matcher.isErrorState(invalidControl, mockSubmittedForm)).toBeTrue();
  });

  it('返回false当无效control未触发任何状态且表单未提交', () => {
    const invalidControl = new FormControl('', { validators: [Validators.required] });
    const mockUnsubmittedForm = jasmine.createSpyObj('NgForm', [], { submitted: false });
    expect(matcher.isErrorState(invalidControl, mockUnsubmittedForm)).toBeFalse();
  });
});

Angular提供的简化工具说明 #

• FormControl本身是测试友好的可实例化类，通过markAsDirty/markAsTouched/setValidators等方法就能轻松设置各种状态，完全不需要Mock。
• 对于NgForm或FormGroupDirective，只需用jasmine.createSpyObj模拟submitted属性即可——因为你的逻辑只用到了这个属性，无需创建完整的表单实例。

这样写的测试既覆盖了所有必要分支、满足覆盖率要求，又避免了不必要的Mock工作量。

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