如何为FormControl的valueChanges编写测试用例？能否复用代码到spec文件？

首先，咱们先聊聊怎么写针对这段valueChanges订阅的测试用例，再说说能不能直接复用你现有代码的问题。

编写测试用例的正确姿势 #

在你的app.component.spec.ts里，可以按照以下步骤来写测试：

• 初始化测试环境：确保组件和表单都被正确初始化，拿到组件实例、表单以及po控件的引用。
• 模拟值变化并验证结果：通过setValue或patchValue改变po控件的值，然后断言poNbrsFieldCount是否按预期更新。
• 清理订阅（重要）：测试结束后记得取消订阅，避免内存泄漏，也可以利用Angular测试工具的异步处理机制自动处理。

给你一个具体的代码示例：

import { ComponentFixture, TestBed } from '@angular/core/testing';
import { ReactiveFormsModule, FormControl } from '@angular/forms';
import { AppComponent } from './app.component';

describe('AppComponent', () => {
  let component: AppComponent;
  let fixture: ComponentFixture<AppComponent>;
  let poControl: FormControl;

  beforeEach(async () => {
    await TestBed.configureTestingModule({
      imports: [ReactiveFormsModule],
      declarations: [AppComponent]
    }).compileComponents();

    fixture = TestBed.createComponent(AppComponent);
    component = fixture.componentInstance;
    // 触发变更检测，确保表单在ngOnInit中完成初始化
    fixture.detectChanges();
    poControl = component.form.get('po') as FormControl;
  });

  it('should update poNbrsFieldCount when po control value changes', () => {
    // 验证初始值是否正确
    expect(component.poNbrsFieldCount).toBe(0);

    // 设置非空值，验证计数更新
    poControl.setValue(['PO001', 'PO002', 'PO003']);
    expect(component.poNbrsFieldCount).toBe(3);

    // 设置空值，验证计数回到0
    poControl.setValue(null);
    expect(component.poNbrsFieldCount).toBe(0);
  });

  afterEach(() => {
    // 如果组件里的订阅没有自动清理，这里可以手动取消
    // 比如你把订阅存成了变量：component.poValueSub?.unsubscribe();
    fixture.destroy();
  });
});

能不能直接在spec文件里复用现有代码？ #

不建议直接复制粘贴那段组件代码到测试文件中，原因如下：

• 测试的核心是验证组件的现有逻辑是否正常工作，如果直接把组件代码复制到测试里，相当于你在测试自己写的测试代码，完全失去了测试的意义。
• 额外的订阅会增加内存泄漏的风险，你需要手动清理这些订阅，不然会影响其他测试用例的执行。
• 如果担心重复代码，可以把这段订阅逻辑提取到组件的一个私有方法里，测试时只需要验证这个方法的行为，或者确保组件初始化时正确调用了它即可。

当然，如果只是临时调试验证某个点，你可以临时加，但正式测试里一定要避免这种做法。

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