組件undefined沒有路由配置又名如何配置Angular 2路由器進行單元測試？

Question

我正在制定一個使用Angular2進行路由的規範。 這是應用程序組件：

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

這是包含導航搜索組件：

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

搜索結果組成：從 「angular2 /芯」 進口{元器件};

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

這是規格：

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

生產代碼的工作，但規範不。顯然，在路由器設置中還是缺少一些東西，因爲我收到以下錯誤： 「組件未定義，沒有路由配置。」 我調試到Angular2（beta.1）代碼中，這個異常將在router.dev.js的2407行中拋出。這意味着沒有組件識別器分配給此組件，但我不知道如何解決它。

Answer 1

我用下面提供的功能：

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

其中包括我：

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

而且使用方法如下：

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