Angular 4：将 mockRespond 与 RxJS Observables 一起使用

Question

我最近构建了一个可以运行的应用程序，我正在尝试构建一个测试。我的服务从 API 后端获取项目：

export class CatfactService {

    constructor(private http: Http) {}
    getFacts() {
        const url = "http://www.catfact.info/api/v1/facts.json";
        return this.http.get(url).map(this.extractData)
            .catch(this.handleError);
    }

在我的组件中，我可以订阅 API 响应。 facts 变量的结果是来自 API 的响应详细信息：

ngOnInit() {
    this.counter = this.start;
    this.service.getFacts().subscribe((facts) => {
        this.results = facts.facts;
    });
}

现在，我正在为服务构建一个测试，奇怪的是 subscribe 方法获取了参数，但参数不是响应数据，而是返回一个最终解析为模拟值。

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

import {
    CatfactService
} from './catfact.service';
import {
    HttpModule,
    Http,
    BaseRequestOptions,
    XHRBackend,
    ResponseOptions
} from '@angular/http';
import {
    MockBackend
} from '@angular/http/testing';
describe('CatfactService', () => {
    beforeEach(() => {
        TestBed.configureTestingModule({
            imports: [HttpModule],
            providers: [
                CatfactService,
                MockBackend,
                BaseRequestOptions,
                {
                    provide: Http,
                    useFactory: (backend, options) => new Http(backend, options),
                    deps: [MockBackend, BaseRequestOptions]
                }
            ],
            imports: [
                HttpModule
            ]
        });
    });

    it('should return reasonable json', inject([CatfactService, MockBackend], fakeAsync((service: CatfactService, mockBackend) => {

        const mockResponse = {
            data: [{
                    id: 0,
                    details: 'All cats are lions'
                },
                {
                    id: 1,
                    details: 'Video 1'
                },
                {
                    id: 2,
                    details: 'Video 2'
                },
                {
                    id: 3,
                    details: 'Video 3'
                },
            ]
        };

        mockBackend.connections.subscribe(connection => {
            connection.mockRespond(new Response(JSON.stringify(mockResponse)));
        });

        service.getFacts().subscribe((facts) => {
            facts.then((facts2) => {
                expect(facts2.length).toBe(4);
                expect(facts2[0].details).toEqual("All cats are lions");
            });
        });

        tick();
    })));
});

调用 subscribe 方法会在实际应用程序中返回实际响应，但在测试中是一个承诺，这让我相信我在应用。

我正在使用以下版本的 Angular：

ng -v
    _                      _                 ____ _     ___
   / \   _ __   __ _ _   _| | __ _ _ __     / ___| |   |_ _|
  / △ \ | '_ \ / _` | | | | |/ _` | '__|   | |   | |    | |
 / ___ \| | | | (_| | |_| | | (_| | |      | |___| |___ | |
/_/   \_\_| |_|\__, |\__,_|_|\__,_|_|       \____|_____|___|
               |___/
@angular/cli: 1.0.2
node: 7.9.0
os: darwin x64
@angular/common: 4.1.1
@angular/compiler: 4.1.1
@angular/core: 4.1.1
@angular/forms: 4.1.1
@angular/http: 4.1.1
@angular/platform-browser: 4.1.1
@angular/platform-browser-dynamic: 4.1.1
@angular/router: 4.1.1
@angular/cli: 1.0.2
@angular/compiler-cli: 4.1.1

整个项目都在 GitHub 上：https://github.com/kenmazaika/AngularTesting

Answer 1

这是规范的固定版本。主要问题是您没有导入角度 Response。

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

            import { CatfactService } from './catfact.service';
            import { HttpModule, Http, BaseRequestOptions, XHRBackend, ResponseOptions, Response, RequestOptions } from '@angular/http';
            import { MockBackend } from '@angular/http/testing';
            describe('CatfactService', () => {
                beforeEach(() => {
                    TestBed.configureTestingModule({
                        imports: [HttpModule],
                        providers: [
                            CatfactService,
                            MockBackend,
                            BaseRequestOptions,
                            {
                                provide: Http,
                                useFactory: (backend, options) => new Http(backend, options),
                                deps: [MockBackend, BaseRequestOptions]
                            }
                        ]
                    });
                });

                it('should return reasonable json', inject([CatfactService, MockBackend], fakeAsync((service: CatfactService, mockBackend) => {

                    const mockResponse = {
                        data: [
                            { id: 0, details: 'All cats are lions' },
                            { id: 1, details: 'Video 1' },
                            { id: 2, details: 'Video 2' },
                            { id: 3, details: 'Video 3' },
                        ]
                    };

                    mockBackend.connections.subscribe(connection => {
                        connection.mockRespond(new Response(
                            new ResponseOptions({
                                body: [
                                    { id: 0, details: 'All cats are lions' },
                                    { id: 1, details: 'Video 1' },
                                    { id: 2, details: 'Video 2' },
                                    { id: 3, details: 'Video 3' },
                                ]
                            })));
                    });

                    service.getFacts().subscribe((facts) => {
                        expect(facts.length).toBe(4);
                        expect(facts[0].details).toEqual("All cats are lions");
                    });

                    tick();
                })));
            });