Component undefined hat keine route config aka wie konfiguriert Angular 2 router für unit test?

Question

Ich arbeite daran, eine Spezifikation für das Routing mit Angular2 einzurichten. Diese ist die App-Komponente:

import {Component, View} from 'angular2/core'; 

import {RouteConfig, ROUTER_DIRECTIVES} from 'angular2/router'; 
import {Search} from './search/search'; 
import {SearchResults} from './search-results/search-results'; 

@Component({ 
    selector: 'my-app' 
}) 
@View({ 
    template: `<div> 
    <router-outlet></router-outlet> 
    </div>`, 
    directives: [ROUTER_DIRECTIVES] 
}) 
@RouteConfig([ 
    {path: '/search', name: 'Search', component: Search, useAsDefault: true}, 
    {path: '/search-results', name: 'SearchResults', component: SearchResults} 
]) 
export class App { 
} 

Dies ist die Suchkomponente enthält, die Navigation:

import {Component} from 'angular2/core'; 
import {Router} from "angular2/router"; 

@Component({ 
    template: '<div></div>' 
}) 
export class Search { 
    constructor(public router: Router) {} 

    onSelect(station:Station):void { 
     this.router.navigate(['SearchResults']); 
    } 
} 

Die Suchergebnisse Komponente: import {Component} von "angular2/core";

@Component({ 
    template: '<div></div>' 
}) 
export class SearchResults { 
    constructor() { 
    } 
} 

Dies ist die Spezifikation:

import { 
    it, 
    inject, 
    describe, 
    beforeEachProviders, 
    MockApplicationRef 
} from 'angular2/testing'; 

import {Component, provide, ApplicationRef} from 'angular2/core'; 

import { 
    APP_BASE_HREF, ROUTER_PRIMARY_COMPONENT, ROUTER_PROVIDERS, ROUTER_DIRECTIVES 
} from "angular2/router"; 
import {Search} from "./search"; 
import {App} from "../app"; 
import {SearchResults} from "../search-results/search-results"; 

import {bootstrap} from 'angular2/platform/browser'; 
import {Http, BaseRequestOptions} from "angular2/http"; 
import {MockBackend} from "angular2/src/http/backends/mock_backend"; 


describe('Search',() => { 

// provide our implementations or mocks to the dependency injector 
beforeEachProviders(() => [ 
    ROUTER_PROVIDERS, 
    ROUTER_DIRECTIVES, 
    provide(ROUTER_PRIMARY_COMPONENT, {useClass: App}), 
    provide(APP_BASE_HREF, {useValue : '/'}), 
    provide(ApplicationRef, {useClass: MockApplicationRef}), 
    Search 
]); 

it('navigates', inject([Search], (search) => { 
    search.onSelect(CHOICE); 
    expect(search.router.navigating).toBe(true); 
})); 
}); 

Der Produktionscode funktioniert, aber die Spezifikation nicht. Anscheinend fehlt noch etwas im Router-Setup, weil ich den folgenden Fehler bekomme: "Component undefined hat keine Route config." Ich debuggte in den Angular2 (beta.1) Code und diese Ausnahme wird in Zeile 2407 von router.dev.js geworfen werden. Es bedeutet, dass dieser Komponente kein Komponentenerkenner zugewiesen ist, aber ich weiß nicht, wie ich sie lösen kann.

Answer 1

Ich verwende die folgende Provider-Funktion:

import {AppComponent} from "../components/app/app-component"; 
import {Router, ROUTER_PRIMARY_COMPONENT, RouteRegistry} from "angular2/router"; 
import {RootRouter} from "angular2/src/router/router"; 
import {SpyLocation} from "angular2/src/mock/location_mock"; 
import {Location} from "angular2/src/router/location/location"; 

export function provideMockRouter():any[] { 
    return [ 
     RouteRegistry, 
     provide(Location, {useClass: SpyLocation}), 
     provide(ROUTER_PRIMARY_COMPONENT, {useValue: AppComponent}), 
     provide(Router, {useClass: RootRouter}), 
    ]; 
} 

Was ich sind:

beforeEachProviders(() => [ 
    provideMockRouter(), 
    ... 
]); 

Und verwenden Sie wie folgt vor:

it('navigates', testAsyncAwait(async() => { 
    spyOn(router, 'navigate').and.callThrough(); 
    await component.call(); 
    expect(router.navigate).toHaveBeenCalledWith(['TargetComponent']); 
}