單元測試Angular 2服務

Question

Im新的整體單元測試場景與Angular，所以如果傢伙可以指向我的方向是很好的..我試圖創建一個虛假的服務，並傳回數據，我可以運行一些簡單的測試..

當我去運行它似乎在向的WebPack失敗，

Server錯誤 測試：///~/rxjs/Subscriber.js：194：0 < - 配置/ karma- test-shim.js：20301

我不認爲它是我的webpack配置..這裏是我的代碼...

import { SearchModule } from './search.module'; 
import { SearchService } from './search.services'; 
import { HttpModule } from '@angular/http'; 
import { inject, TestBed } from '@angular/core/testing'; 
import { Observable } from 'rxjs/Observable'; 
import { BrowserDynamicTestingModule, platformBrowserDynamicTesting } from '@angular/platform-browser-dynamic/testing'; 

class SearchServiceMock { 

search() { 

    return Observable.of(
     [ 
      { 
      "title": "title_1", 
      "artist": "artist_1", 
      "release": "06/02/2016", 
      "slug": "slug-1" 
     }, 
     { 
      "title": "title_2", 
      "artist": "artist_1", 
      "release": " 27/01/2017", 
      "slug": "slug-2" 
     }, 
     { 
      "title": "title_3", 
      "artist": "artist_3", 
      "release": "17/02/2017", 
      "slug": "slug-3" 
     } 
     ] 
    ) 

} 

} 

describe('Service: TracksServices',() => { 

let searchService: SearchService; 

beforeEach(() => TestBed.configureTestingModule({ 
    imports: [ SearchModule, HttpModule ], 
     providers: [ 
     { provide: SearchService, useClass: SearchServiceMock }, 
    ] 
})); 

beforeEach(inject([SearchService], (s: any) => { 
    searchService = s; 
})); 

it('Search results 3',() => { 

    searchService.search('track 1', 1, 4).subscribe(
     (x:any) => {  

      // expect(x).toContain(track); 
      expect(x.length).toEqual(3); 

     } 
    ); 

}); 

}); 

測試似乎仍然得到真正的服務，我想，當我要使用測試雙打的假的

Answer 1

目的

我知道進入單元測試的痛苦，在JavaScript ，還有Angular，並且我花了一些時間試圖圍住它。

所以我希望下面的解釋將有助於理清困惑：

您正在測試的對象稱作「測試物」

在你的情況下，它是SearchService。

A 模擬是一種假物體。

這些假冒的對象有許多不同的名稱和用途 - 嘲笑，間諜，存根等。

但傑拉德梅薩羅斯創造和通用名稱解釋here是測試雙打。

被測物體通常依賴於其他物體。 這些依賴也被稱爲合作者

更換你的對象的合作者與測試雙打被測試對象如何與他們互動的目的而進行的。

這個想法是「記錄」交互，它是與間諜（在茉莉花 - jasmine.createSpy()）完成。

單元測試角2個服務

的測試HTTP調用

一種方式 -

你沒有義務使用TestBed用於測試服務，這是因爲用於測試可重用的組件更有用，其DOM功能。

您可以創建一個假對象，它具有與Angular的Http對象相同的方法，但被間諜替換。

然後創建一個new SearchService(httpSpy)實例。 這會給你一份你的服務的副本，你可以測試。

然後調用REAL服務的方法，並調查相關間諜的結果。

另一種方式來測試HTTP調用 可以使用MockBackend類和配置HTTP服務以使用假的後端，而不是像in this doc

關於你所得到的錯誤

很難說沒有看到與真正的服務在測試代碼的例子的沉重。

更多的理論材料（視頻）

如果你是新來的測試，您可以瞭解更多關於測試雙打以及如何單元測試是在我的（免費），理論課約JavaScript Unit Testing and TDD

完成

希望它有幫助。