Unit Test für eine Komponente mit Abhängigkeit, die Abhängigkeiten hat, was ist los?

Question

Ich habe einen nervigen Fehler, den ich wahrscheinlich nicht durch meinen Fehler beheben kann. Ich habe auf einfache Komponente, die eigentlich nichts anderes als ein Top-Bar-Element in meiner Webanwendung ist.

Diese Komponente wie Sie sehen nur eine Abhängigkeit hat, die UserService und verwendet es ganz einfach:

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(); 
    } 

} 

Da dieser Dienst hat auch einige Abhängigkeiten (Router usw.) Ich hatte sie am beforeEachProviders zu schaffen Verfahren wie Sie sehen können:

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(); 
    })); 

}); 

Wenn ich den Test ausführen, obwohl ich diese Fehlermeldung:

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[......]

Zuerst von allen, wie Sie sehen können, ist der Standort Anbieter zur Verfügung gestellt. Und sekundäre, warum mein Test erfordert, um auch die Abhängigkeiten der verwendeten in den getesteten Komponentendienst bereitzustellen (oder injizieren)?

Zum Beispiel wenn ich aus dem obigen Test den Router entferne, auch wenn meine Komponente Router nicht benutzt, bekomme ich einen Fehler, weil der verwendete Dienst dies tut. Dann sollte ich nicht den gleichen Fehler in der Komponente erhalten und nicht nur im Test?

UPDATE - ÄNDERUNG DER CODE & ERROR MESSAGE

schaffe ich habe zu stoppen diesen Fehler durch meine spec doe zu diesem Wechsel:

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); 
    }); 

}); 

aber weiß, dass ich immer diese Fehlermeldung aus meine Komponente:

TypeError: Cannot read property 'userService' of undefined

Der genannte Fehler in dieser Funktion:

logout() { 
    this.userService.logout(); 
} 

meiner Komponente, aber das ist nur auf den Test. In der App funktioniert es normal. Die Funktion kann den Konstruktorparameter in meinem Test aus irgendeinem Grund nicht erreichen.

Art Stapel hier ...

Answer 1

versuchen, das Objekt des Dienstes innerhalb before Erstellung mit TestBed.get (Userservice). Dieser Code löst die Abhängigkeiten automatisch auf und erstellt das Objekt zur Verwendung.

Entfernen '= new UserService (router, authHttp, http);' von 'let service: UserService = neuer UserService (router, authHttp, http);'