Angular 17 模型单元测试：如何验证模型值已更新？

Angular的model.required返回的是ModelSignal，它整合了输入与输出的双向绑定逻辑，和传统@Input+@Output的实现方式不同，依赖信号的set方法传递更新而非emit事件。针对你的BooleanToggler组件，以下是完整的单元测试方案：

1. 测试父组件设置模型值时，视图同步更新 #

通过setInput设置模型值后，需手动触发变更检测，再验证复选框状态是否匹配：

import { ComponentFixture, TestBed } from '@angular/core/testing';
import { FormsModule } from '@angular/forms';
import { BooleanToggler } from './boolean-toggler.component';

describe('BooleanToggler', () => {
  let fixture: ComponentFixture<BooleanToggler>;
  let component: BooleanToggler;
  let inputElement: HTMLInputElement;

  beforeEach(async () => {
    await TestBed.configureTestingModule({
      imports: [BooleanToggler, FormsModule] // 必须导入FormsModule支持ngModel
    }).compileComponents();

    fixture = TestBed.createComponent(BooleanToggler);
    component = fixture.componentInstance;
    inputElement = fixture.nativeElement.querySelector('input')!;
    fixture.detectChanges(); // 执行初始变更检测
  });

  it('同步视图状态与模型输入值', () => {
    // 设置模型为true
    fixture.componentRef.setInput('myModel', true);
    fixture.detectChanges();
    expect(inputElement.checked).toBeTrue();

    // 切换模型为false
    fixture.componentRef.setInput('myModel', false);
    fixture.detectChanges();
    expect(inputElement.checked).toBeFalse();
  });
});

2. 测试用户交互（点击复选框）时，模型值同步更新 #

点击复选框后需触发变更检测，让Angular处理ngModel的双向绑定更新，之后直接读取信号值验证：

it('用户点击复选框时更新模型值', () => {
  // 初始设置模型为false
  fixture.componentRef.setInput('myModel', false);
  fixture.detectChanges();
  expect(component.myModel()).toBeFalse();

  // 点击复选框
  inputElement.click();
  fixture.detectChanges();
  expect(component.myModel()).toBeTrue();

  // 再次点击验证反向更新
  inputElement.click();
  fixture.detectChanges();
  expect(component.myModel()).toBeFalse();
});

3. 验证模型变更向外传递（模拟父组件接收更新） #

可以通过订阅信号变化，或者拦截set方法来验证更新是否正确传递：

方式1：订阅信号变化 #

it('模型变更同步到外部', () => {
  const changes: boolean[] = [];
  component.myModel.subscribe(val => changes.push(val));

  inputElement.click();
  fixture.detectChanges();
  expect(changes).toEqual([true]);

  inputElement.click();
  fixture.detectChanges();
  expect(changes).toEqual([true, false]);
});

方式2：拦截set方法 #

it('点击复选框时调用模型的set方法', () => {
  // 由于model.required返回只读信号，需通过类型断言绕过限制
  const setSpy = spyOn(component.myModel as any, 'set');

  inputElement.click();
  fixture.detectChanges();
  expect(setSpy).toHaveBeenCalledWith(true);
});

常见问题说明 #

• spyOn(..., 'set')无效的原因：model.required()返回的是只读ModelSignal，其set方法为内部实现，需通过as any断言或订阅信号的方式验证更新。
• 点击复选框后模型未更新：测试环境中Angular不会自动触发变更检测，必须手动调用fixture.detectChanges()才能同步ngModel与模型信号的状态。
• 需导入FormsModule：[(ngModel)]属于Angular Forms模块指令，未导入会导致模板解析错误。

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