网站搜索

单元测试 - 使用 MockBackend 测试随后调用 .map 的函数


我正在尝试为我的服务编写单元测试,该服务会发起 HTTP 请求。

我有一个服务,它返回一个 Http.get() 请求,随后是一个 .map()。我在让我的模拟后台返回某些不会在 .map() 上出错的内容时遇到了问题。我得到的错误是:

this._http.get(...).map is not a function

我一直把这篇文章作为我的主要指南。

如果我从我的服务函数中移除 .map(),我不会得到任何错误。我如何才能让我的模拟响应拥有一个我可以调用的 .map() 函数?

注意:我目前正在使用 RC.4

这是我的服务:

import { Injectable } from '@angular/core';
import { Http, Response } from '@angular/http';
import { Observable } from 'rxjs/Observable';

import { AppSettings } from '../../../settings';
import { Brand } from '../../models/index';

@Injectable()
export class BrandDataService {

  allBrands : Brand[];
  groups : any;
  groupNames : string[];

  constructor (
    private _http : Http
  ) {}

  /**
  * Get all brands
  */
  public getAllBrands () :Observable<any> {

    let url = AppSettings.BRAND_API_URL + 'brands';
    return this._http.get( url )
    .map( this.createAndCacheBrands )
    .catch( (error) => {
      return Observable.throw( error );
    });        
  }

  private createAndCacheBrands (res:Response) {
    ...
  }

}

这是我的规格文件,它使用 MockBackend 和其他相关库来模拟这些测试的后端:

// vendor dependencies
import { Http, BaseRequestOptions, Response, ResponseOptions, RequestMethod } from '@angular/http';
import { addProviders, inject } from '@angular/core/testing';
import { MockBackend, MockConnection } from '@angular/http/testing';

// Service to test
import { BrandDataService } from './brandData.service';


describe( 'Brand data service', () => {

  let service : BrandDataService = null;
  let backend : MockBackend = null;

  // Provide a mock backend implementation
  beforeEach(() => {
    addProviders([
      MockBackend,
      BaseRequestOptions,
      {
        provide : Http,
        useFactory : (backendInstance : MockBackend, defaultOptions : BaseRequestOptions) => {
          return new Http(backendInstance, defaultOptions);
        },
        deps : [MockBackend, BaseRequestOptions]
      },
      BrandDataService
    ])
  })

  beforeEach (inject([BrandDataService, MockBackend], (_service : BrandDataService, mockBackend : MockBackend) => {
    service = _service;
    backend = mockBackend;
  }));

  it ('should return all brands as an Observable<Response> when asked', (done) => {
    // Set the mock backend to respond with the following options:
backend.connections.subscribe((connection : MockConnection) => {
    // Make some expectations on the request
  expect(connection.request.method).toEqual(RequestMethod.Get);
    // Decide what to return
    let options = new ResponseOptions({
      body : JSON.stringify({
        success : true
      })
    });
    connection.mockRespond(new Response(options));
  });

  // Run the test.
  service
  .getAllBrands()
  .subscribe(
    (data) =>  {
      expect(data).toBeDefined();
      done();
    }
  )
  });
});

答案#1

你需要导入 rxjs,这样你才能使用 map:

import 'rxjs/Rx';

或者,你可以只导入 map 操作符,这样你的应用就不会加载你不会使用的文件:

import 'rxjs/add/operator/map';