Angular 2單元測試http.get未定義

Question

我正在嘗試使用MockBackend為異步http服務編寫角度2單元測試，但出現http.get undefined錯誤。 這是我的代碼：

Http服務：

import { Injectable } from '@angular/core';
import { Http,Headers,RequestOptions,Response } from '@angular/http';
import 'rxjs/add/operator/map';
import 'rxjs/Rx';

@Injectable()
export class HttpService {


    constructor(private _http: Http) {}

    /**
     *  Http request will time out if not received response within 20 sec
     * 
     * @param url
     * @returns {Observable<R>}
     */
    getData(url : string) {
        return this._http.get(url)
            .timeout(20000, new Error('delay exceeded'))
            .map(response => response.json());
    }

}

我正在為其編寫單元測試的Custom組件方法：

 private loadDetails(input : string){
        this._httpService.getData("/api/test"+ input)
            .subscribe(
                data => {this.user = data,
                         // Some more logic in here based on data     
                },
                error =>  { console.log( error);}
            );
    }

單元測試 ：

import { HttpService } from "../shared/services/http.service";
import {
    async,
    inject,
    fakeAsync,
    TestBed
} from '@angular/core/testing';

import {
Http,
    BaseRequestOptions,
    Response,
    BaseResponseOptions,
    ResponseOptions
} from '@angular/http';

import { HttpModule } from '@angular/http';

import {
    MockBackend,
    MockConnection
} from '@angular/http/testing';
import { Observable } from 'rxjs/Rx';

import { TestingComponent } from './testing.component';

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

describe('testingComponent', () => {

    let fixture,testingComponent;

    // provide our implementations or mocks to the dependency injector
    beforeEach(() => {

        TestBed.configureTestingModule({
            declarations: [
                CustomComponent
            ],
            providers: [
                HttpService,
                MockBackend,
                BaseRequestOptions,
                {provide: Http, useValue: mockHttpProvider}
            ]
        });

        fixture = TestBed.createComponent(PortfolioComponent);
        testingComponent = fixture.debugElement.componentInstance;
    });


    it('should call loadDetails to load user details',  inject(
        [IPIQHttpService, MockBackend],
        fakeAsync((service: HttpService, backend: MockBackend) => {
            backend.connections.subscribe((connection: MockConnection) => {

                let mockResponseBody= {
                    id: '123',
                    title: 'test',
                    empno: '456'
                };

                let response = new ResponseOptions({body: JSON.stringify(mockResponseBody)});
                connection.mockRespond(new Response(response));
            });
            testingComponent.loadUserDetails('123');
            expect(testingComponent.user.empno).toEqual('456');
        })));


});

當我調用testingComponent.loadUserDetails（'123'）來調用http服務時，我正在獲取未定義的http.get方法。

知道我在這里做錯了嗎？

Answer 1

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

  TestBed.configureTestingModule({
        imports: [HttpModule], // <<<=== added
        declarations: [
            CustomComponent
        ],
        providers: [
            HttpService,
            MockBackend,
            BaseRequestOptions,
            mockHttpProvider
        ]
    });

Answer 2

終於可以了。 這是我所做的更改：

1. 導入HttpModule並按照@GünterZöchbauer在上一篇文章中的建議更改了我使用模擬HttpProvider的方式：

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

 TestBed.configureTestingModule({
        imports: [HttpModule], // <<<=== added
        declarations: [
            CustomComponent
        ],
        providers: [
            HttpService,
            MockBackend,
            BaseRequestOptions,
            mockHttpProvider
        ]
    });

3. 更改了我的單元測試並刪除了fakeAsync：

it('should call loadDetails to load user details', inject([HttpService, MockBackend, Http], (_httpService, backend, http) => {
        backend.connections.subscribe(connection => {
            let mockResponseBody= {
                 id: '123',
                 title: 'test',
                 empno: '456'
            };
            let response = new ResponseOptions({body: JSON.stringify(mockResponseBody)});
            connection.mockRespond(new Response(response));
        });
        testingComponent.loadDetails('123');
        expect(testingComponent.user.empno).toEqual('456');
    }));