如何测试 Angular2 Observable 的功能？答案

【问题标题】：How Do I Test Functionality in an Angular2 Observable?如何测试 Angular2 Observable 的功能？
【发布时间】：2017-08-29 03:15:14
【问题描述】：

我正在尝试为 angular2 中的身份验证服务上的登录方法编写单元测试。我面临的问题是 Observable.subscribe 是异步的，并且没有在我的测试中运行，因此 localStorage.setItem 永远不会运行。我试图让我的代码返回一个承诺并使用 jasmine，但这似乎也不起作用。我应该如何测试这个功能？

来自身份验证服务的代码

login(username: string, password: string) {

  const url = environment.apiUrl;

  this._http.post(`https://${url}/authenticate`, {username, password})
    .map(res => res.json())
    .subscribe(
      data => localStorage.setItem('id_token', data.id_token),
      error => console.log(error)
    );
}

单元测试

it('should set id_token', () => {
  mockBackend.connections.subscribe((connection: MockConnection) => {
    connection.mockRespond(validResponse);
  });
  spyOn(localStorage, 'setItem').and.returnValue(undefined);
  authService.login('admin', 'secret');
  expect(localStorage.setItem).toHaveBeenCalledWith('i am a token!');
});

【问题讨论】：

标签： angular unit-testing jasmine observable

【解决方案1】：

Angular 提供了一个 fakeasync 实用程序用于测试以解决此类问题。

您只需将测试包装在 fakeasync 中，然后在任何异步方法之后调用 tick()，这将允许任何异步方法在继续之前完成

将以下内容导入您的测试

import { fakeAsync , tick} from '@angular/core/testing';

并如下修改你的测试；

it('should set id_token', fakeasync(() => {
  mockBackend.connections.subscribe((connection: MockConnection) => {
    connection.mockRespond(validResponse);
  });
  spyOn(localStorage, 'setItem').and.returnValue(undefined);
  authService.login('admin', 'secret');
  tick();
  expect(localStorage.setItem).toHaveBeenCalledWith('i am a token!');
}));

https://angular.io/api/core/testing/fakeAsync

【讨论】：