私はおそらく私の間違いで解決できないという迷惑なエラーがあります。 私はWebアプリケーションのトップバー要素以外の何ものでもない単純なコンポーネントを持っています。依存関係を持つコンポーネントのユニットテスト、何が問題なのですか？
あなたが見ることができるように、このコンポーネントは唯一の依存関係、UserServiceを持っており、それは非常に単純にそれを使用しています。
import { Component, OnInit } from '@angular/core';
import { MdButton } from '@angular2-material/button';
import { MdIcon , MdIconRegistry} from '@angular2-material/icon';
import { UserService } from '../services/index';
import { RouteConfig, ROUTER_DIRECTIVES, Router, ROUTER_PROVIDERS
} from '@angular/router-deprecated';
@Component({
moduleId: module.id,
selector: 'top-bar',
templateUrl: 'top-bar.component.html',
styleUrls: ['top-bar.component.css'],
providers: [MdIconRegistry, UserService, ROUTER_PROVIDERS],
directives: [MdButton, MdIcon, ROUTER_DIRECTIVES]
})
export class TopBarComponent implements OnInit {
constructor(private userService: UserService) {
this.userService = userService;
}
ngOnInit() {
}
/**
* Call UserService and logout() method
*/
logout() {
this.userService.logout();
}
}
このサービスはまた、私はbeforeEachProvidersでそれらを提供しなければならなかったいくつかの依存関係（ルータなど）を有しているので
import {
beforeEach,
beforeEachProviders,
describe,
expect,
it,
inject,
} from '@angular/core/testing';
import { TopBarComponent } from './top-bar.component';
import {
Router, RootRouter, RouteRegistry, ROUTER_PRIMARY_COMPONENT
} from '@angular/router-deprecated';
import { provide } from '@angular/core';
import { SpyLocation } from '@angular/common/testing';
import { UserService } from '../services/index';
describe('Component: TopBar',() => {
beforeEachProviders(() => [
RouteRegistry,
provide(Location, { useClass: SpyLocation }),
provide(ROUTER_PRIMARY_COMPONENT, { useValue: TopBarComponent }),
provide(Router, { useClass: RootRouter }),
UserService,
TopBarComponent
]);
it('should inject the component', inject([TopBarComponent],
(component: TopBarComponent) => {
expect(component).toBeTruthy();
}));
});
私は、このエラーメッセージを得るのに私がテストを実行すると：：
をあなたが見ることができるようにする方法Chrome 51.0.2704 (Mac OS X 10.11.5) Component: TopBar should inject the component FAILED Error: No provider for Location! (TopBarComponent -> UserService -> Router -> Location) Error: DI Exception[......]
最初にが表示されているように、ロケーションプロバイダが提供されています。 私のテストでは、使用されているコンポーネントの依存関係をテストされたコンポーネントサービスに提供（または注入）する必要があるのはなぜですか？
たとえば、上記のテストでルータを削除した場合でも、私のコンポーネントはルータを使用していません。使用したサービスが原因でエラーが発生します。それでは、コンポーネントだけでなく、テストでも同じエラーを受け取るべきではありませんか？
UPDATE - 私はこれに私のスペックDOEを変更することで、このエラーを取得して停止するように管理しているCODE &エラーメッセージ
OF CHANGE：
import {
beforeEach,
describe,
expect,
it,
} from '@angular/core/testing';
import { TopBarComponent } from './top-bar.component';
import { UserService } from '../services/index';
import {
Router
} from '@angular/router-deprecated';
import { Http } from '@angular/http';
import { AuthHttp } from 'angular2-jwt';
describe('Component: TopBar',() => {
let router: any = Router;
let authHttp: any = AuthHttp;
let http: any = Http;
let component: TopBarComponent;
let service: UserService = new UserService(router, authHttp, http);
beforeEach(() => {
component = new TopBarComponent(service);
});
it('logout function should work ',() => {
let logout = component.logout;
logout();
expect(localStorage.getItem('token')).toBe(null);
});
});
しかし、私はこのエラーを取得しています知っています私のコンポーネント：
TypeError: Cannot read property 'userService' of undefined
上記のエラーは、この機能にあります：
私のコンポーネントですが、これはテスト時のみです。アプリでは正常に動作します。私のテストで何らかの理由で関数がコンストラクタのパラメータに到達できません。
ここでは、スタックのようなもの...