Angular测试中注入服务变更后HTML未更新的问题排查

我碰到过类似的问题，咱们一步步来排查和解决：

首先，修正测试代码里的语法错误 #

你的测试代码里有两处语法错误，这大概率是导致问题的根源：

1. 定义sessionServiceStub时，currentUser属性后缺少逗号，导致对象字面量语法无效：

   // 错误写法
   let sessionServiceStub = { currentUser: { loggedIn: false } getMe: function () { return this.currentUser } }
   // 正确写法
   let sessionServiceStub = { 
     currentUser: { loggedIn: false }, // 补上逗号
     getMe: function () { return this.currentUser } 
   }
   

2. beforeEach里给currentUser赋值时，误用了等号而非冒号：

   // 错误写法
   sessionServiceStub.currentUser = { loggedIn = false }
   // 正确写法
   sessionServiceStub.currentUser = { loggedIn: false }
   

其次，确保修改的是组件实际使用的SessionService实例 #

直接修改全局的sessionServiceStub偶尔会因为TestBed的实例化机制导致不生效，更可靠的方式是从组件的fixture中获取注入的SessionService实例，再修改它的属性：

it('shows the button when a user is logged in', () => {
  // 从fixture中获取组件依赖的SessionService实例
  const sessionService = fixture.debugElement.injector.get(SessionService);
  // 更新登录状态
  sessionService.currentUser.loggedIn = true;
  // 触发Angular变更检测
  fixture.detectChanges();
  // 查询按钮元素并验证
  const de = fixture.debugElement.query(By.css('#profile-button'));
  expect(de).not.toBeNull();
  const el: HTMLAnchorElement = de.nativeElement;
  expect(el.textContent.trim()).toBe('Profile');
});

额外优化建议（针对OnPush策略场景） #

如果你的组件使用了ChangeDetectionStrategy.OnPush变更检测策略，仅修改对象属性可能无法触发变更检测，此时需要手动标记组件需要检查：

sessionService.currentUser.loggedIn = true;
fixture.markForCheck(); // 告诉Angular需要检查组件
fixture.detectChanges();

另外，你也可以把currentUser改成BehaviorSubject类型的可观察对象，这样组件能自动订阅状态变化，测试时只需发射新状态即可，更贴近真实业务场景：

// 改写stub使用BehaviorSubject
let sessionServiceStub = {
  currentUser$: new BehaviorSubject({ loggedIn: false }),
  getMe: function () { return this.currentUser$.value }
};

// 测试用例中更新状态
sessionService.currentUser$.next({ loggedIn: true });
fixture.detectChanges();

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