Angular 4组件@Input绑定后ngOnInit未调用的排查方案

看起来你的核心问题有两个：一是确认SkillsetComponent的ngOnInit方法是否被正确触发，二是让测试用例能正确验证异步加载后的skillsetData。我来一步步帮你解决：

1. 先确认ngOnInit是否真的被调用 #

首先，我们可以在测试中添加一个用例来直接验证ngOnInit的调用情况，这能帮你排除生命周期钩子未触发的问题：

it('should trigger ngOnInit when component initializes', () => {
  spyOn(component, 'ngOnInit');
  fixture.detectChanges(); // 触发Angular变更检测，会调用ngOnInit
  expect(component.ngOnInit).toHaveBeenCalled();
});

如果这个测试通过，说明ngOnInit确实被调用了，问题出在异步数据加载的测试时机上；如果不通过，那要检查你的TestBed配置是否正确——比如组件是否被正确声明，有没有遗漏必要的模块。

2. 处理异步数据的测试时机 #

你的skillsetService.getSkillsetsForStatusID是异步操作，当你调用fixture.detectChanges()触发ngOnInit后，订阅还没完成，skillsetData还是初始的DUMMY_DATA，所以测试会失败。你需要用Angular测试工具等待异步操作完成：

方法一：使用async/await和fixture.whenStable() #

修改你的测试用例，等待异步请求完成后再断言：

it('should not be using DUMMY_DATA after data loads', async () => {
  fixture.detectChanges(); // 触发ngOnInit，发起请求
  await fixture.whenStable(); // 等待所有异步操作完成
  fixture.detectChanges(); // 更新组件状态和视图
  expect(component.skillsetData).not.toEqual(component.DUMMY_DATA);
});

方法二：Mock SkillsetService（更推荐） #

依赖真实的API服务会让测试不稳定，最好Mock服务来返回预设数据，这样测试更可靠：

import { of } from 'rxjs';

beforeEach(async(() => {
  // 创建Mock服务，模拟getSkillsetsForStatusID方法
  const mockSkillsetService = jasmine.createSpyObj('SkillsetService', ['getSkillsetsForStatusID']);
  // 设置Mock返回的测试数据
  mockSkillsetService.getSkillsetsForStatusID.and.returnValue(of({
    data: [
      { count: [2, 3, 4], name: 'Skill A' },
      { count: [5, 6, 7], name: 'Skill B' }
    ]
  }));

  TestBed.configureTestingModule({
    declarations: [SkillsetComponent],
    imports: [HttpClientTestingModule, ChartsModule],
    // 使用Mock服务替代真实服务
    providers: [{ provide: SkillsetService, useValue: mockSkillsetService }]
  }).compileComponents();
}));

这样修改后，测试中的异步请求会立刻返回Mock数据，不需要等待真实API响应，测试结果更稳定。

3. 修复selectedStatus绑定的测试逻辑 #

你当前的should have non-zero skillID测试有问题：设置selectedStatus后没有触发变更检测，所以ngOnInit不会重新执行，skillID还是默认值。修改如下：

it('should set correct skillID for CONFIRMED status', () => {
  component.selectedStatus = SelectedStatusConstants.CONFIRMED;
  fixture.detectChanges(); // 触发变更检测，重新执行ngOnInit逻辑
  expect(component.skillID).toBe(9); // 对应CONFIRMED的预设ID
});

4. 排查潜在的生命周期干扰 #

你的组件使用了@AutoUnsubscribe装饰器，有可能这个装饰器的实现影响了组件生命周期。可以暂时移除这个装饰器测试，如果测试恢复正常，那你需要检查装饰器的代码，确保它没有错误地提前销毁组件或阻止生命周期钩子执行。

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