Angular 2 Observable 服务集成测试

Question

我想创建一个集成测试并点击我的实际服务（不是模拟）。我将如何在 Angular 2 中做到这一点？

以下是我的可观察服务：

import { Injectable } from '@angular/core';
import { Http, Response, RequestOptions, Headers } from '@angular/http';

import { Observable } from 'rxjs/Observable';
import 'rxjs/add/operator/do';
import 'rxjs/add/operator/catch';
import 'rxjs/add/operator/map';
import 'rxjs/add/observable/throw';

import { UserDetail } from '../models/user-detail.model';

export class GetUserDetailService {
  private _userDetailUrl : string = 'http://ourserver/api/GetCurrentUserDetail';

  constructor(private _http: Http) { }

  getUserDetail(): Observable<UserDetail> {
        return this._http.get(this._userDetailUrl)
        .map((response: Response) => <UserDetail> response.json())
        .do(data => console.log('All: ' +  JSON.stringify(data)))
        .catch(this.handleError);
  }

  private handleError(error: Response) {
      console.error(error);
      return Observable.throw(error.json().error || 'Server error');
  }
}

如何确保从服务返回对象？

// Third party imports
import { Observable } from 'rxjs/Observable';
import { HttpModule } from '@angular/http';

// Our imports
import { GetUserDetailService } from './get-user-detail.service';
import { UserDetail } from '../models/user-detail.model';

describe('GetUserDetailService', () => {

  beforeEach(() => {
    // What do I put here?
  });

  it('should get the user detail', () => {
    // What do I put here?
  });
});

Answer 1

如this example 所示，在 Angular 中进行 XHR 集成测试的一种方法是只使用 HttpModule 而不使用 MockBackend：

describe('GetUserDetailService', () => {
  beforeEach(() => {
    TestBed.configureTestingModule({
      provide: [GetUserDetailService],
      imports: [HttpModule]
    });
  });

  it('should get user detail', async(inject([Http, GetUserDetailService], (http, svc) => {
    spyOn(http, 'get').and.callThrough();

    svc.getUserDetail().subscribe(
      (userDetail: UserDetail) => {
        expect(userDetail).toEqual(...);
      }
    );

    expect(http.get).toHaveBeenCalledWith(...);
  })));

  it('shouldnot get user detail', async(inject([Http, GetUserDetailService], (http, svc) => {
    spyOn(http, 'get').and.callThrough();
    spyOn(svc, 'handleError').and.callThrough();
    svc._userDetailUrl = 'wrong url';

    svc.getUserDetail().subscribe(
      (userDetail: UserDetail) => { throw new Error('should fail') },
      (error) => {
        expect(svc.handleError).toHaveBeenCalledWith(...);
        expect(error).toEqual(...);
      }
    );

    expect(http.get).toHaveBeenCalledWith('wrong url');
  })));
});

fakeAsync helper 不能用于真正的异步测试（使用应该会有错误），所以是async。

如果 observable 中有错误，第一个测试会自动失败，因此不必在 subscribe 中捕获。