angular - 注入(inject)服务更改时，HTML 未在 Angular Testing 中更新

Question

我正在尝试测试一个基于当前用户详细信息显示或隐藏按钮的组件。我从服务上的方法获取用户详细信息。该组件使用 getter 来调用服务方法。

在组件中:

get me() {
  return this.sessionService.getMe()
}

在组件的 html 中:

<a id="profile-button" *ngIf="me.loggedIn" routerLink="profile">Profile</a>

我需要测试当我登录时按钮是否显示，当我未登录时它不显示。我正在对 session 服务进行 stub ，如下所示:

在组件规范文件中:

let sessionServiceStub = {
  currentUser: {
    loggedIn: false
  }

  getMe: function () {
    return this.currentUser
  }
}

beforeEach(async(() => {
  TestBed.configureTestingModule({
    imports: ['RouterTestingModule'],
    declarations: ['MyComponent'],
    providers: [{provide: SessionService, useValue: sessionServiceStub}],
  }).compileComponents()
}))

beforeEach(() => {
  sessionServiceStub.currentUser = {
    loggedIn = false
  }

  fixture = TestBed.createComponent(MyComponent);
  component = fixture.componentInstance;
  fixture.detectChanges();
})

在每个测试开始时，我将服务 stub 上的 loggedOn 属性设置为 true 或 false，然后调用 detectChanges()但 HTML 没有按预期更新。这与getter有关吗？如果是这样，我如何强制 View 从sessionService中获取新值？

在组件规范文件中:

it('shows the button when a user is logged in', () => {
  sessionServiceStub.currentUser.loggedIn = true
  fixture.detectChanges()

  de = fixture.debugElement.query(By.css('#profile-button'))
  el: HTMLAnchorElement = de.nativeElement // TypeError: Cannot read property 'nativeElement' of null
  // ...
})

Answer 1

从 beforeEach 方法中删除 fixture.detectChanges()。

beforeEach(() => {
  sessionServiceStub.currentUser = {
    loggedIn = false
  }

  fixture = TestBed.createComponent(MyComponent);
  component = fixture.componentInstance;

})

它应该可以正常工作。