Angular 2 가짜 종속성을 가진 구성 요소 테스트

Question

가짜 종속성을 가진 Angular 2 구성 요소를 테스트하려고합니다.

사실 Ng2 및 Redux가있는 간단한 TODO 응용 프로그램을 만들었으며 내 구성 요소 중 하나에는 redux 앱 스토어의 인스턴스가 있습니다.

이 객체를 모의하고 구독 방법에 대해 스파이를해야합니다. 이 방법은, 내가 하나 개의 솔루션을 가지고있어하는 것처럼 보이는 그 다음

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); 
     }); 
    } 
} 

내 문제는 테스트가 모두 통과하지 않고 있다는 것입니다 stacktrace는 명시 적이지 않습니다.

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/subscriptions 조롱과 관련하여 우수 사례를 찾고 있습니다.

귀하의 도움에 감사드립니다.

Answer 1

나는 귀하의 기대에 부합한다고 생각합니다. 다음을 시도해 볼 수도 있습니다 :

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

대신 다음 anwser에 대한

expect(component.appStore).toHaveBeenCalled();