Angular 2測試一個虛假的依賴關係的組件

Question

我試圖用假的依賴關係測試一個Angular 2組件。

事實上，我用Ng2和Redux構建了一個簡單的TODO應用程序，在我的組件之一中，我有一個redux應用程序商店的實例。

我需要嘲笑這個對象，並監視它的訂閱方法。這樣一來，我m具有一個解決方案，它看起來像以下：

import { TestComponentBuilder } from '@angular/compiler/testing'; 
import {HomeComponent} from './home.component'; 
import {provide} from '@angular/core'; 
import { 
    it, 
    expect, 
    inject, 
    describe, 
    async, 
    beforeEachProviders 
} from '@angular/core/testing'; 


class MockAppStore { 

    title: String; 
    constructor() { 
     this.title = 'plouf'; 
    } 
    subscribe(callback) { 
     callback(); 
    } 
} 

describe('HomeComponent',() => { 

    beforeEachProviders(() => [ 
     provide('AppStore', { useValue: MockAppStore }) 
    ]); 

    it('should call the dispatch method of the appStore', async(inject([TestComponentBuilder], 
     (tsb: TestComponentBuilder) => { 
      tsb.createAsync(HomeComponent).then((fixture) => { 
       // Given 
       const component = fixture.componentInstance; 
       spyOn(component.appStore, 'subscribe'); 

       // When 
       fixture.detectChanges(); 

       // then 
       expect(component.appStore.subscribe).toHaveBeenCalled(); 
      }); 
     }))); 
}); 

，並應測試以下組件：

import {Component, Inject} from '@angular/core'; 

@Component({ 
    selector: 'as-home', 
    templateUrl: 'app/home/home.html', 
    styleUrls: [ 
     'app/home/home.css' 
    ] 
}) 
export class HomeComponent { 

    appStore: any; 
    constructor(@Inject('AppStore') appStore: any) { 
     this.appStore = appStore; 
     this.appStore.subscribe(state => { 
      console.log(state); 
     }); 
    } 
} 

我的問題是，測試沒有通過可言，和堆棧跟蹤沒有如此明確：

PhantomJS 2.1.1 (Windows 8 0.0.0) HomeComponent should call the dispatch method of the appStore FAILED 
     invoke@C:/Project/angular2/kanboard/node_modules/zone.js/dist/zone.js:323:34 
     run@C:/Project/angular2/kanboard/node_modules/zone.js/dist/zone.js:216:50 
     C:/Project/angular2/kanboard/node_modules/zone.js/dist/zone.js:571:61 
     invokeTask@C:/Project/angular2/kanboard/node_modules/zone.js/dist/zone.js:356:43 
     runTask@C:/Project/angular2/kanboard/node_modules/zone.js/dist/zone.js:256:58 
     drainMicroTaskQueue@C:/Project/angular2/kanboard/node_modules/zone.js/dist/zone.js:474:43 
     invoke@C:/Project/angular2/kanboard/node_modules/zone.js/dist/zone.js:426:41 
PhantomJS 2.1.1 (Windows 8 0.0.0): Executed 16 of 16 (1 FAILED) (0.48 secs/0.518 secs) 
Remapping coverage to TypeScript format... 
Test Done with exit code: 1 
[08:28:55] 'unit-test' errored after 7.27 s 
[08:28:55] Error: 1 
    at formatError (C:\Project\angular2\kanboard\node_modules\gulp\bin\gulp.js:169:10) 
    at Gulp.<anonymous> (C:\Project\angular2\kanboard\node_modules\gulp\bin\gulp.js:195:15) 
    at emitOne (events.js:77:13) 
    at Gulp.emit (events.js:169:7) 
    at Gulp.Orchestrator._emitTaskDone (C:\Project\angular2\kanboard\node_modules\gulp\node_modules\orchestrator\index.js:264:8) 
    at C:\Project\angular2\kanboard\node_modules\gulp\node_modules\orchestrator\index.js:275:23 
    at finish (C:\Project\angular2\kanboard\node_modules\gulp\node_modules\orchestrator\lib\runTask.js:21:8) 
    at cb (C:\Project\angular2\kanboard\node_modules\gulp\node_modules\orchestrator\lib\runTask.js:29:3) 
    at DestroyableTransform.<anonymous> (C:\Project\angular2\kanboard\tasks\test.js:62:13) 
    at emitNone (events.js:72:20) 
    at DestroyableTransform.emit (events.js:166:7) 
    at finishMaybe (C:\Project\angular2\kanboard\node_modules\remap-istanbul\node_modules\through2\node_modules\readable-stream\lib\_stream_writable.js:475:14) 
    at endWritable (C:\Project\angular2\kanboard\node_modules\remap-istanbul\node_modules\through2\node_modules\readable-stream\lib\_stream_writable.js:485:3) 
    at DestroyableTransform.Writable.end (C:\Project\angular2\kanboard\node_modules\remap-istanbul\node_modules\through2\node_modules\readable-stream\lib\_stream_writable.js:455:41) 
    at DestroyableTransform.onend (C:\Project\angular2\kanboard\node_modules\gulp\node_modules\vinyl-fs\node_modules\through2\node_modules\readable-stream\lib\_stream_readable.js:523:10) 
    at DestroyableTransform.g (events.js:260:16) 
    at emitNone (events.js:72:20) 
    at DestroyableTransform.emit (events.js:166:7) 
    at C:\Project\angular2\kanboard\node_modules\gulp\node_modules\vinyl-fs\node_modules\through2\node_modules\readable-stream\lib\_stream_readable.js:965:16 
    at nextTickCallbackWith0Args (node.js:420:9) 
    at process._tickCallback (node.js:349:13) 
Remapping done! View the result in report/remap/html-report 
npm ERR! Test failed. See above for more details. 

任何想法爲什麼測試失敗？

否則，我在尋找關於嘲笑rxjs observable /訂閱的良好實踐，如果有人有想法。

感謝您的幫助

Answer 1

我認爲問題在於您的期望。你可以嘗試以下內容：

expect(component.appStore.subscribe).toHaveBeenCalled(); 

代替：

expect(component.appStore).toHaveBeenCalled();