使用Angular 2进行Rxjs5测试

Question

我有一个Angular 2服务，通过Rxjs 5连接到Angular Http服务，以连接到restful风格的web服务。getObjects调用只是以可观察的有意义对象数组的形式返回解析后的Json。我一直在尝试用我模拟的Http响应返回可观察对象来解析，但我还没有找到一个有效的解决方案。

测试代码：

import { getTestBed } from '@angular/core/testing';
import { MockBackend } from '@angular/http/testing';
import { TestScheduler } from "rxjs";

import { expect } from 'chai';
import { spy } from 'sinon';
import TestingUtilities from "../shared/test.utilities";

import Service from './service';
import ReturnObject from "../returnobject";

describe(`ServiceTests`, () => {
  let MOCK_DATA: string = ...mocked JSON string response...;

  let service: Service
  let backend: MockBackend
  let scheduler: TestScheduler

  function assertDeepEqualFrame(actual:any, expected:any) {
    console.log("test");
    if (!expected === actual) {
      throw new Error('Frames not equal!');
    }
  }

  beforeEach(() => {
    TestingUtilities.configureTestingModuleForMockHttp(getTestBed(), function () {
      return Service
    });

    backend = getTestBed().get(MockBackend);
    service = getTestBed().get(EarthquakeService);
    scheduler = new TestScheduler(assertDeepEqualFrame);
  });

  it('should return mocked data', () => {
    TestingUtilities.mockHttpResponse(backend, MOCK_DATA);

    let observables = service.getObjects();
    scheduler.expectObservable(observables).toBe("", functionToCreateMockObjects());
  });

TestingUtilities只是用来模拟Angular在https://semaphoreci.com/community/tutorials/testing-angular-2-http-services-with-jasmine上提供的Http服务的解决方案的一个方便包装器。上面的代码进行了编译，但它实际上似乎没有返回模拟的可观察对象，也没有对任何东西进行断言。我很难确切地知道应该如何使用TestScheduler来调用现有的服务，并将可观察数据返回以进行验证。有谁有什么想法吗？

Answer 1

我不使用TestScheduler来测试可观察性。但我真的很喜欢我使用的以下方法：

import {TestBed, inject} from '@angular/core/testing';
import {BaseRequestOptions, Http, HttpModule, ResponseOptions, Response} from '@angular/http';
import {MockBackend} from '@angular/http/testing';
import {Book} from '../custom-types/book';
import {GoogleBooksService, API_PATH_SINGLE_BOOK} from './google-books.service';

const mockedHttpProvider = {
    provide: Http,
    deps: [MockBackend, BaseRequestOptions],
    useFactory: (backend: MockBackend, defaultOptions: BaseRequestOptions) => {
        return new Http(backend, defaultOptions);
    }
};

describe('Service: GoogleBooks', () => {
    beforeEach(() => {
        TestBed.configureTestingModule({
            imports: [HttpModule],
            providers: [
                GoogleBooksService,
                BaseRequestOptions,
                MockBackend,
                mockedHttpProvider
            ],
        });
    });

    it('should call the google books api',
        inject([GoogleBooksService, MockBackend], (service: GoogleBooksService, backend: MockBackend) => {
            let queryId: string = "someId";
            let expectedResponse: Book = {
                description: 'It's just Angular',
                title: 'How to test Observables'
            };

            backend.connections.subscribe(connection => {
                expect(connection.request.url).toBe(API_PATH_SINGLE_BOOK + queryId);
                let response = new ResponseOptions({body: JSON.stringify(expectedResponse)});
                connection.mockRespond(new Response(response));
            });

            service.getBookByGoogleBookId(queryId).subscribe(response => {
                expect(response).toEqual(expectedResponse);
            })
        })
    );
});

服务实现：

@Injectable()
export class GoogleBooksService {

    constructor(private http: Http) {
    }

    getBookByGoogleBookId(id: string): Observable<Book> {
        return this.http.get(API_PATH + id)
            .map(res => res.json());
    }
}

Answer 2

尝试使用模拟的后端测试您的服务：

describe(`ServiceTests`, () => {
  let MOCK_DATA: string = ...mocked JSON string response...;

  let earthquakeService: EarthquakeService;

  beforeEach(() => {
    TestBed.configureTestingModule( {
        providers: [
            EarthquakeService,
            { provide: XHRBackend, useClass: MockBackend },
            { provide: ComponentFixtureAutoDetect, useValue: true }
        ],
        imports: [
            HttpModule
        ]
    } )
    .compileComponents();
    });
  });

  it('should return mocked data', async( inject( [ Http, XHRBackend ], ( http: Http, backend: MockBackend ) => {
    backend.connections.subscribe( ( c: MockConnection ) => c.mockRespond( response ) );

    let options = new ResponseOptions( { status: 200, body: { data: MOCK_DATA } } );
    response = new Response( options );

    earthquakeService = new EarthquakeService( http );

    earthquakeService.getObjects().subscribe( results => {
        expect( results ).toEqual( { data: MOCK_DATA } );
    } ););

这将隔离测试您的服务。测试使用此服务的其他组件可以通过扩展此框架或在这些测试中创建一个存根服务来完成。