Angular 2 RC6 测试 HTTP.get 抛出错误 get() 方法不存在答案

【问题标题】：Angular 2 RC6 test HTTP.get throws error the get() method doesn't existAngular 2 RC6 测试 HTTP.get 抛出错误 get() 方法不存在
【发布时间】：2017-03-06 21:08:06
【问题描述】：

我正在尝试为包含 http.get 方法的方法编写单元测试，但在使其正常工作时遇到问题。我知道将用于 Http 的类设置为 MockBackend 是错误的，这就是为什么我得到错误：get() method does not exist 但是我不知道应该为 http 后面的模拟类使用什么。

describe('Http Service', () => {
  beforeEach(() => {
    TestBed.configureTestingModule({
      providers: [
        SharedHttpService,
        {
          provide: SharedCookieService,
          useClass: MockSharedCookieService
        }, {
          provide: Http,
          useClass: MockBackend
        }
      ]
    });
  });

  beforeEach(inject([ SharedHttpService, Http ], ( _httpService: SharedHttpService, _mockBackend: MockBackend ) => {
    httpService = _httpService;
    mockBackend = _mockBackend;
  }));

  describe('get', () => {
    it(`should call setAuthToken and make the get request with the authorization headers`, () => {
      let fakeUrl: string = 'www.fakeurl.com';
      httpService.headers = mockHeaders;
      spyOn(httpService, 'setAuthToken');
      spyOn(httpService.http, 'get').and.callThrough();
      mockBackend.connections.subscribe((connection: MockConnection) => {
        let options: ResponseOptions = new ResponseOptions({
          body: { }
        });
        connection.mockRespond(new Response(options));
      });
      httpService.get(fakeUrl, () => { })
      .subscribe(() => {
        expect(httpService.setAuthToken).toHaveBeenCalled();
        expect(httpService.http.get).toHaveBeenCalledWith(fakeUrl, { headers: mockHeaders });
      });
    });
  });

后面的代码：

export class SharedHttpService {
  private headers: Headers = new Headers();

  constructor(  private cookieService: SharedCookieService,
                private http: Http  ) { }

  public get(address: string, callback: any): Observable<any> {
    return this.setAuthToken()
      .map(() => { })
      .switchMap(() => {
        return this.http.get(address, { headers: this.headers })
          .map(callback)
          .catch(( error: any ) => this.handleError(error));
      });
  }
}

【问题讨论】：

标签： http angular karma-jasmine

【解决方案1】：

您需要使用MockBackend 而不是as Http，而是创建 Http。你用工厂来做

imports: [ HttpModule // this is needed ],
providers: [
  SharedHttpService,
  MockBackend,
  BaseRequestOptions    // @angular/http
  {
    provide: Http,
    deps: [ MockBackend, BaseRequestOptions ],
    useFactory: (backend: MockBackend, options: BaseRequestOptions) => {
      return new Http(backend, options);
    }
  }
]

现在您可以将MockBackend 注入测试中，以便模拟连接上的响应。

                                  // MockBackend not Http
beforeEach(inject([ SharedHttpService, MockBackend ],
          ( _httpService: SharedHttpService, _mockBackend: MockBackend ) => {
  httpService = _httpService;
  mockBackend = _mockBackend;
}));

另外，您需要使用异步测试，因为对 subscribe 的调用会异步解析

import { async } from '@angular/core/testing';

it('...', async(() => {

}));

另见Angular 2 Testing - Async function call - when to use

【讨论】：