使用模拟服务测试Angular 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))

整个应用程序在这里：https://bitbucket.org/chomik/ngjustruntests/src/0c030837432140f3f99f2d8afec0835aa9ff2fe3?at=failing_mocks

我会感激任何提示:-)我应该在这里查看什么？如何改进我的问题？

Answer 1

预期未定义为等于1337

expect(fixture.todoId)

fixture是一个ComponentFixture。要获取组件，您需要调用fixture.componentInstance

expect(fixture.componentInstance.todoId)