jasmine - 测试订阅可观察对象的方法 - Angular 2

Question

我想测试 Angular 2 组件内部的一个方法，该组件订阅了从服务中的方法返回的可观察对象。以下是服务方法的代码摘要:

public create(user: User): Observable<any> {
  return this.http.post(this._api.create,
    JSON.stringify(user), {
      headers: this.apiConfig.getApiHeaders()
    }).map((res: Response) => res.json());
  }

很容易对该方法进行单元测试，因为它返回一个可观察对象，所以我可以订阅它。但是我想测试已经订阅的组件中的方法:

public onSubmit(user: User): void {
  this._authentication.create(user).subscribe((token) => {
    localStorage.setItem('token', token);
    this.router.navigate(['/Home']);
  });
}

到目前为止，这是我的规范，但是当我尝试监视 localStorage.setItem 时，它返回为未被调用。我的理解是它可能在实际调用之前检查它是否被调用。

it('Should login a user and on success store a token in localStorage',
  injectAsync([TestComponentBuilder], (tcb) => {
    return tcb.createAsync(Login).then((fixture) => {
      let instance = fixture.debugElement.componentInstance;
      localStorage.clear();
      spyOn(localStorage, 'setItem');
      instance.onSubmit({userId: 'some@email.com', password: 'password', siteName: 'sample'});
      expect(localStorage.setItem).toHaveBeenCalled();
    });
  })
);

我想知道我是否需要模拟 this._authentication.create 方法来返回一个新的带有模拟响应的可观察对象？

经过更多研究后，一些文章表明我确实需要模拟服务并返回一个同步运行的 Observable.of() 来解决问题，我将复制下面的代码。然而，这仍然行不通，我一天大部分时间都在做这件事，我觉得这不应该那么难，感谢任何帮助。

class MockAuthentication extends Authentication {
  public create(user: Object): Observable<any> {
    return Observable.of({'test': 'test'});
  }
}

Answer 1

好吧，这花了我一天的大部分时间，但我终于破解了它。无需使用 injectAsync 和 TestComponentBuilder 来设置规范，我只需要像执行服务一样使用注入(inject)和注入(inject)组件。这看起来不错，因为我不需要像事件一样在 View 中测试任何东西。

这是有效的最终规范:

it('Should set token in localStorage, set the new user, 
and navigate to home page on succesful login', 
  inject([Login], (login) => {
    login.router.config([ { path: '/', name: 'Home', component: Home }]);
    spyOn(localStorage, 'setItem');
    spyOn(login._currentUser, 'set');
    spyOn(login.router, 'navigate');
    login.onSubmit({ userId: 'some@email.com', password: 'password', siteName: 'sample' });
    expect(localStorage.setItem).toHaveBeenCalledWith('token', 'newToken');
    expect(login._currentUser.set).toHaveBeenCalledWith({ 'test': 'one' });
    expect(login.router.navigate).toHaveBeenCalledWith(['/Home']);
}));

希望这对将来的人有所帮助。