时间戳

首页 > 解决方案 > 注入服务更改时，HTML 未在角度测试中更新

angular - 注入服务更改时，HTML 未在角度测试中更新

问题描述

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

在组件中：

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

在组件的 html 中：

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

我需要测试在我登录时是否显示该按钮，而在我未登录时是否显示该按钮。我正在对会话服务进行存根，如下所示：

在组件规格文件中：

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();
})

在每个测试开始时，我将服务存根上的 loggedOn 属性设置为 true 或 false，然后调用detectChanges()但 HTML 没有按预期更新。这与getter有关吗？如果是这样，我如何强制视图从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
  // ...
})

标签： angularunit-testingjasmine

解决方案

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

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

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

})

它应该可以正常工作。

推荐阅读