如何测试Angular表单statusChanges可观察对象的触发逻辑？

我开发了一个Angular组件，该组件接收继承自NgForm的IQuestionForm作为输入，当表单状态变为VALID时，会通过questionChange输出属性发射IQuestion对象，组件逻辑已正常运行。但在编写单元测试验证该行为时遇到困难，现有测试代码框架如下，请问当前思路是否有误？应如何正确测试该行为？

组件代码 #

@Input() form!: IQuestionForm; //this type extends NgForm;
@Input() question!: IQuestion;
@Output() questionChange = new EventEmitter<IQuestion>();

ngOnInit(): void {
  this.form.form.statusChanges.pipe(filter((s) => s === 'VALID')).subscribe(() => {
    this.questionChange.emit(this.question);
  });
}

现有测试代码框架 #

const mockQuestionForm = new NgForm([], []) as IQuestionForm;
mockQuestionForm.form.addControl('questionText', new FormControl('', Validators.required));
mockQuestionForm.form.addControl('responseType', new FormControl(QuestionTypeEnum.FREE_TEXT, Validators.required));

describe('QuestionFormEditorComponent', () => {
  let component: QuestionFormEditorComponent;
  let fixture: ComponentFixture<QuestionFormEditorComponent>;

  beforeEach(() => {
    TestBed.configureTestingModule({
      imports: [QuestionFormEditorComponent],
    });
    fixture = TestBed.createComponent(QuestionFormEditorComponent);
    component = fixture.componentInstance;
  });
  
  it('should emit the updated question object when the form becomes valid', () => {
    spyOn(component.questionChange, 'emit');
    
    component.form = { ...mockQuestionForm } as IQuestionForm;
    component.question = {
      id: '',
      text: '',
      type: QuestionTypeEnum.FREE_TEXT,
    };
    
    fixture.detectChanges(); //triggers ngOnInit()
    
    expect(component.questionChange.emit).not.toHaveBeenCalled();
  
    // ???
  
    expect(component.questionChange.emit).toHaveBeenCalledOnceWith();
  });
  
  it('should NOT emit the updated question object when the form becomes invalid', () => {
    //similar test here
  });
});

问题分析与解决方案 #

当前思路的问题 #

1. 浅拷贝丢失响应式特性：使用{ ...mockQuestionForm }浅拷贝NgForm实例，会丢失其内部FormGroup的订阅机制和状态变化逻辑，导致statusChanges无法正常触发。
2. 未处理异步流：statusChanges是Observable异步流，测试中没有等待其完成就进行断言，会导致断言时机错误。
3. 未正确触发表单状态变更：测试中没有更新表单控件值来让表单从INVALID变为VALID，无法触发订阅逻辑。

修正后的测试代码 #

const mockQuestionForm = new NgForm([], []) as IQuestionForm;
mockQuestionForm.form.addControl('questionText', new FormControl('', Validators.required));
mockQuestionForm.form.addControl('responseType', new FormControl(QuestionTypeEnum.FREE_TEXT, Validators.required));

describe('QuestionFormEditorComponent', () => {
  let component: QuestionFormEditorComponent;
  let fixture: ComponentFixture<QuestionFormEditorComponent>;

  beforeEach(() => {
    TestBed.configureTestingModule({
      imports: [QuestionFormEditorComponent],
    });
    fixture = TestBed.createComponent(QuestionFormEditorComponent);
    component = fixture.componentInstance;
  });
  
  it('should emit the updated question object when the form becomes valid', async () => {
    spyOn(component.questionChange, 'emit');
    
    // 直接赋值mock表单，避免浅拷贝
    component.form = mockQuestionForm;
    const testQuestion = {
      id: '',
      text: '',
      type: QuestionTypeEnum.FREE_TEXT,
    };
    component.question = testQuestion;
    
    fixture.detectChanges(); // 触发ngOnInit，订阅statusChanges
    
    // 初始状态表单无效，emit未被调用
    expect(component.questionChange.emit).not.toHaveBeenCalled();
  
    // 更新表单控件值，使表单变为有效
    component.form.form.get('questionText')?.setValue('测试问题');
    fixture.detectChanges();
    
    // 等待异步流完成
    await fixture.whenStable();
    
    // 验证emit被调用，参数为传入的question对象
    expect(component.questionChange.emit).toHaveBeenCalledOnceWith(testQuestion);
  });
  
  it('should NOT emit the updated question object when the form becomes invalid', async () => {
    spyOn(component.questionChange, 'emit');
    
    component.form = mockQuestionForm;
    component.question = {
      id: '',
      text: '',
      type: QuestionTypeEnum.FREE_TEXT,
    };
    
    // 先设置表单为有效状态
    component.form.form.get('questionText')?.setValue('测试问题');
    fixture.detectChanges();
    await fixture.whenStable();
    
    // 此时emit已被调用一次，重置spy
    (component.questionChange.emit as jasmine.Spy).calls.reset();
    
    // 清空控件值，使表单变为无效
    component.form.form.get('questionText')?.setValue('');
    fixture.detectChanges();
    await fixture.whenStable();
    
    // 验证无效状态下emit未被调用
    expect(component.questionChange.emit).not.toHaveBeenCalled();
  });
});

关键修正点 #

• 避免浅拷贝：直接将mockQuestionForm赋值给组件的form输入属性，保留其完整的响应式特性。
• 处理异步操作：使用await fixture.whenStable()等待表单状态变更的异步流完成后再进行断言。
• 明确状态切换步骤：先让表单处于无效状态验证初始断言，再更新控件值触发有效状态，最后验证发射行为；无效测试则先让表单有效，再切换为无效，重置spy后验证不发射。

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