我试图测试依赖于服务的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))
我很感激任何提示:-) 我应该在这里查看什么?如何改进我的问题?
答案 0 :(得分:1)
预期未定义为等于1337
expect(fixture.todoId)
fixture
是ComponentFixture
。要获取该组件,您需要致电fixture.componentInstance
expect(fixture.componentInstance.todoId)