Angular 17.3组件@Input属性变更检测单元测试问题

你的测试未触发init方法的核心原因有两个：

1. 直接修改组件实例的input_title属性后调用fixture.detectChanges()，Angular不会自动触发ngOnChanges钩子——该钩子仅在模板绑定的输入属性变更时由变更检测自动调用，直接修改组件属性不会触发。
2. 你的逻辑要求previousValue存在才调用init，但当前测试流程中，第一次fixture.detectChanges()时input_title初始值为undefined，后续直接设置新值时previousValue仍为undefined，不满足触发条件。

以下是两种可行的解决方案：

方案一：手动调用ngOnChanges并模拟变更参数 #

直接构造符合要求的SimpleChanges对象，模拟输入属性的前后值变更，手动触发钩子：

it('should call init when input_title changes with existing previous value', () => {
  const initSpy = spyOn(component, 'init');
  
  // 第一步：设置初始值并触发变更检测，让组件拥有有效的previousValue
  const initialTitle = 'initial title';
  component.input_title = initialTitle;
  fixture.detectChanges(); // 首次触发ngOnChanges，previousValue为undefined，不会调用init

  // 第二步：构造SimpleChanges对象，模拟input_title的变更
  const changes: SimpleChanges = {
    input_title: new SimpleChange(initialTitle, 'blablabla', false)
  };
  
  // 第三步：手动调用ngOnChanges
  component.ngOnChanges(changes);
  
  // 验证init方法被调用
  expect(initSpy).toHaveBeenCalled();
});

方案二：模拟父组件模板绑定场景（更贴近真实业务） #

通过创建临时父组件，用模板绑定的方式传递输入属性，模拟真实环境中的输入变更：

// 定义临时父组件，模拟真实模板绑定
@Component({
  template: `<app-simple [input_title]="parentTitle"></app-simple>`
})
class TestParentComponent {
  parentTitle = 'initial title';
}

// 修改测试配置，引入临时父组件
beforeEach(() => {
  TestBed.configureTestingModule({
    declarations: [SimpleComponent, TestParentComponent]
  });
});

it('should trigger init when parent updates input_title', () => {
  const parentFixture = TestBed.createComponent(TestParentComponent);
  const parentComponent = parentFixture.componentInstance;
  parentFixture.detectChanges(); // 初始渲染，传递初始input_title

  // 获取子组件实例并监听init方法
  const simpleComponent = parentFixture.debugElement.query(By.directive(SimpleComponent)).componentInstance;
  const initSpy = spyOn(simpleComponent, 'init');

  // 修改父组件属性，触发子组件输入变更
  parentComponent.parentTitle = 'blablabla';
  parentFixture.detectChanges(); // 变更检测会自动触发子组件的ngOnChanges

  expect(initSpy).toHaveBeenCalled();
});

额外注意事项 #

确保子组件的ngOnChanges逻辑判断正确，比如：

ngOnChanges(changes: SimpleChanges): void {
  const titleChange = changes['input_title'];
  // 严格判断previousValue存在且前后值不同
  if (titleChange && titleChange.previousValue !== undefined && titleChange.currentValue !== titleChange.previousValue) {
    this.init();
  }
}

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