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