Angular2测试组件

时间:2016-11-11 16:22:57

标签: unit-testing angular angular2-services angular2-testing

您好我试图在Angular2中测试我的组件,但在我试图模拟我的服务时遇到了问题。我目前正在关注测试的Angular2文档。

我正在调用我从角度服务构建的后端API,只要我有一个JWT令牌就可以正常工作。 但是在测试时,我只想在组件测试中模拟服务。

服务

@Injectable()
export class ItemService {
    constructor(private _http: AuthHttp, private _store: Store<AppStore>) {}

        items(): Observable<any[]> {
            return this._http.get(ENDPOINT_ITEMS, {withCredentials: false})
                .map((response: Response) => response.json().data);
        }
}

组件

@Component({
 selector: 'items',
 template: require('./items.component.html'),
 providers: [ItemService]
})

export class ItemsComponent {
 items: Observable<Array<Object>>;

 constructor(private _service: ItemService) {}

  ngOnInit(): any {
    this.items = this._service.items();
  }
}

组件测试

beforeEach(() => {
TestBed.configureTestingModule({
    declarations: [ ItemsComponent ],
    providers:    [
        { provide: ItemService, useValue: itemsMock },
    ] 
});
fixture = TestBed.createComponent(ItemsComponent);
itemService = fixture.debugElement.injector.get(ItemService)

我希望我的模拟ItemService为我返回useValue,itemsMock,这样我就可以测试我的html标签是否有正确的数据。 但是看起来我的服务没有受到嘲弄呢?

出现此错误:

  

错误:./ ItemsComponent类中的错误ItemsComponent_Host - 内联模板:0:0引起:没有AuthHttp的提供者!在karma.entry.js(第17341行)

1 个答案:

答案 0 :(得分:1)

您的组件在其提供商中有ItemService。这意味着每次创建组件的实例时,都会为组件创建一个新的ItemService实例。模块级别的服务不会被使用。

您的服务是无状态的,并且可能没有充分的理由进入组件级别。将其从提供程序中删除,并确保它在模块的提供程序中。