Niezdefiniowany komponent nie ma konfiguracji trasy, jak skonfigurować router Angular 2 do testu urządzenia?

Question

Pracuję nad skonfigurowaniem specyfikacji dla routingu za pomocą Angular2. to składnik aplikacji:

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 { 
} 

to komponent wyszukiwania zawierający nawigacja

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

Składnik Wyniki: Składnik importu {} z "angular2/core";

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

Jest to specyfikacja:

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

Kod produkcyjny działa, ale specyfikacja nie robi. Wygląda na to, że w konfiguracji routera nadal brakuje czegoś, ponieważ pojawia się następujący błąd: "Niezdefiniowany komponent nie ma konfiguracji trasy." Po debugowaniu kodu Angular2 (beta.1) ten wyjątek zostanie zgłoszony w linii 2407 pliku router.dev.js. Oznacza to, że nie ma rozpoznawania komponentu przypisanego do tego komponentu, ale nie wiem, jak go rozwiązać.

Answer 1

używam następujące funkcje Provider:

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

Które I obejmują:

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

I używać w następujący sposób:

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