如何測試Angular2 /打字稿的HTTPService沒有模擬

Question

import {Injectable} from '@angular/core'; 
import {Http} from '@angular/http'; 

@Injectable() 
export class HttpService { 
    result: any; 

    constructor(private http:Http) { 
    } 

    public postRequest(){ 
     return this.http.get('http://httpbin.org/get');  
    } 
} 

以上是我的代碼，這是我的測試：

我不想嘲笑什麼，只是測試真正的HTTP連接。

編輯 - 新service.spec文件：

import {beforeEachProviders, beforeEach, it, describe, expect, inject} from '@angular/core/testing'; 
import {HttpService} from '../../providers/http-service/http-service'; 
import {TranslateService} from 'ng2-translate/ng2-translate'; 
import {Goal} from '../../providers/goal/goal'; 
import {NavController} from 'ionic-angular'; 
import {HTTP_PROVIDERS, Http} from '@angular/http'; 

describe('Http Service Test',() => { 

     beforeEachProviders(() => { 
     return [ 
      HTTP_PROVIDERS, 
      HttpService 
     ]; 
    }); 

    it('should return response when subscribed to postRequest', 
     inject([HttpService], (httpService: HttpService) => { 

      httpService.postRequest().subscribe((res) => { 
       expect(res.text()).toBe('hello raja'); 
      }); 
    })); 
}); 

這些都是我的因果報應控制檯錯誤：

28 06 2016 14:33:32.067:ERROR [Chrome 51.0.2704 (Mac OS X 10.11.4) | Http Service Test | should return response when subscribed to postRequest]: TypeError: Cannot read property 'getCookie' of null 
    at CookieXSRFStrategy.configureRequest (http://localhost:9876/absolute/var/folders/vy/18sb1wqs60g734bhr75cw9_r0000gn/T/9b9439f5f9c1590d3052594bcae9e877.browserify?26719cf22e6406ebc638b6b187c777666dcc5698:36568:81) 
    at XHRBackend.createConnection (http://localhost:9876/absolute/var/folders/vy/18sb1wqs60g734bhr75cw9_r0000gn/T/9b9439f5f9c1590d3052594bcae9e877.browserify?26719cf22e6406ebc638b6b187c777666dcc5698:36583:28) 
    at httpRequest (http://localhost:9876/absolute/var/folders/vy/18sb1wqs60g734bhr75cw9_r0000gn/T/9b9439f5f9c1590d3052594bcae9e877.browserify?26719cf22e6406ebc638b6b187c777666dcc5698:37476:20) 

Answer 1

您需要首先爲模擬HTTP後端配置提供：

describe('HttpService Tests',() => { 
    beforeEachProviders(() => { 
    return [ 
     HTTP_PROVIDERS, 
     provide(XHRBackend, { useClass: MockBackend }), 
     HttpService 
    ]; 
}); 

然後你可以使用模擬後端是這樣的：如果你想

mockBackend.connections.subscribe(
    (connection: MockConnection) => { 
    if (connection.request.url === 'file1.json') { 
     // Simulate an error 
     var err = new ResponseError(); 
     err.status = 404; 
     connection.mockError(<Error>err); 
    } else { 
     // Simulate a successful response 
     connection.mockRespond(new Response(
     new ResponseOptions({ 
      body: ['i love angular2'] 
     }))); 
    } 
    }); 

httpService.postRequest().subscribe((res:Respsone) => { 
    expect(res.text()).toBe('hello raja'); 
}); 

編輯

要使用真實的連接進行測試，請僅使用傳統的HTTP_PROVIDERS：

describe('HttpService Tests',() => { 
    beforeEachProviders(() => { 
    return [ 
     HTTP_PROVIDERS, 
     HttpService 
    ]; 
}); 

EDIT1

由於您的調用是異步的，你可以使用async：

it('should return response when subscribed to postRequest', 
    async(inject([HttpService], (httpService: HttpService) => { 

     httpService.postRequest().subscribe((res) => { 
      expect(res.text()).toBe('hello raja'); 
     }); 
}))); 

Answer 2

見https://angular.io/docs/ts/latest/api/http/testing/MockBackend-class.html

import {BaseRequestOptions, Http} from '@angular/http'; 
import {MockBackend} from '@angular/http/testing'; 
it('should get some data', inject([AsyncTestCompleter], (async) => { 
    var connection; 
    var injector = Injector.resolveAndCreate([ 
    MockBackend, 
    {provide: Http, useFactory: (backend, options) => { 
     return new Http(backend, options); 
    }, deps: [MockBackend, BaseRequestOptions]}]); 
    var http = injector.get(Http); 
    var backend = injector.get(MockBackend); 
    //Assign any newly-created connection to local variable 
    backend.connections.subscribe(c => connection = c); 
    http.request('data.json').subscribe((res) => { 
    expect(res.text()).toBe('awesome'); 
    async.done(); 
    }); 
    connection.mockRespond(new Response('awesome')); 
})); 

和https://angular.io/docs/ts/latest/api/http/testing/MockConnection-class.html

var connection; 
backend.connections.subscribe(c => connection = c); 
http.request('data.json').subscribe(res => console.log(res.text())); 
connection.mockRespond(new Response(new ResponseOptions({ body: 'fake response' }))); //logs 
'fake response'