모의 서비스로 각도 2 구성 요소 테스트

Question

서비스에 따라 Angular2 구성 요소를 테스트하려고합니다.

테스트를 위해 스텁 서비스를 전달하려고합니다. 테스트에서 구성 요소가 스텁 된 구성 요소를 선택하지 않는 것 같습니다. https://angular.io/docs/ts/latest/guide/testing.html#!#component-with-dependency

구성 요소 :

import { Component, OnInit } from '@angular/core'; 
import { TodoIdGeneratorService } from '../todo-id-generator.service'; 

@Component({ 
    selector: 'app-todo-card', 
    templateUrl: './todo-card.component.html', 
    styleUrls: ['./todo-card.component.css'] 
}) 
export class TodoCardComponent implements OnInit { 
    public todoId: number; 

    constructor(private todoIdgenerator: TodoIdGeneratorService) { } 

    ngOnInit() { 
this.todoId = this.todoIdgenerator.getNextTodoId(); 
    } 
} 

사양 :

이

import { TestBed, async } from '@angular/core/testing'; 
import { TodoCardComponent } from './todo-card.component'; 
import { TodoIdGeneratorService } from '../todo-id-generator.service'; 

describe('Component: TodoCard',() => { 
    let stubbedTodoId = 1337; 
    let fixture; 
    let service; 

    beforeEach(() => { 
    let serviceStub = { 
     getNextTodoId:()=> stubbedTodoId 
    } 

    TestBed.configureTestingModule({ 
     declarations: [ TodoCardComponent ], 
     providers: [ {provide: TodoIdGeneratorService, useValue: serviceStub} ] 
    }); 

    service = TestBed.get(TodoIdGeneratorService); 

    fixture = TestBed.createComponent(TodoCardComponent); 
    }); 

    it('should have Todo id',() => { 
    fixture.detectChanges(); 
    expect(service.getNextTodoId()).toEqual(stubbedTodoId, 'stubbed servide should be stubbed'); 
    expect(fixture.todoId).toEqual(stubbedTodoId, 'the component should use stubbed service'); 
    }); 
}); 

가 오류 내가 얻을 :

Chrome 53.0.2785 (Linux 0.0.0) Component: TodoCard should have Todo id FAILED 
     Expected undefined to equal 1337, 'the component should use stubbed service'. 
      at Object.<anonymous> (webpack:///home/michal/Projects/learning_angular/JustRunTests/src/app/todo-card/todo-card.component.spec.ts:30:27 <- src/test.ts:12020:32) 
      at ZoneDelegate.invoke (webpack:///home/michal/Projects/learning_angular/JustRunTests/~/zone.js/dist/zone.js:203:0 <- src/test.ts:20985:28) 
      at ProxyZoneSpec.onInvoke (webpack:///home/michal/Projects/learning_angular/JustRunTests/~/zone.js/dist/proxy.js:72:0 <- src/test.ts:14451:39) 
      at ZoneDelegate.invoke (webpack:///home/michal/Projects/learning_angular/JustRunTests/~/zone.js/dist/zone.js:202:0 <- src/test.ts:20984:34) 
Chrome 53.0.2785 (Linux 0.0.0): Executed 4 of 8 (1 FAILED) (0 secs/0.231 secs) 
Chrome 53.0.2785 (Linux 0.0.0) Component: TodoCard should have Todo id FAILED 
     Expected undefined to equal 1337, 'the component should use stubbed service'. 
      at Object.<anonymous> (webpack:///home/michal/Projects/learning_angular/JustRunTests/src/app/todo-card/todo-card.component.spec.ts:30:27 <- src/test.ts:12020:32) 
      at ZoneDelegate.invoke (webpack:///home/michal/Projects/learning_angular/JustRunTests/~/zone.js/dist/zone.js:203:0 <- src/test.ts:20985:28) 
      at ProxyZoneSpec.onInvoke (webpack:///home/michal/Projects/learning_angular/JustRunTests/~/zone.js/dist/proxy.js:72:0 <- src/test.ts:14451:39) 
      at ZoneDelegate.invoke (webpack:///home/michal/Projects/learning_angular/JustRunTestChrome 53.0.2785 (Linux 0.0.0): Executed 8 of 8 (1 FAILED) (0.354 secs/0.268 secs)) 

전체 응용 프로그램은 그녀를하다

나는 공식 문서 다음 해요 e : https://bitbucket.org/chomik/ngjustruntests/src/0c030837432140f3f99f2d8afec0835aa9ff2fe3?at=failing_mocks

힌트 :-)에 대한 감사의 말 : 여기에서 어떻게 확인해야합니까? 내 질문을 개선하는 방법?

Answer 1

가 동일 1,337

expect(fixture.todoId) 

fixture 정의되지 않은 것이 예상 ComponentFixture이다. 구성 요소를 가져 오려면 fixture.componentInstance

expect(fixture.componentInstance.todoId) 

으로 전화해야합니다.