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

搜索结果组件：从＆＃34; angular2 / core＆＃34;;

导入{Component}

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

生产代码有效，但规范并不适用。显然，路由器设置中仍然缺少某些东西，因为我收到以下错误：＆＃34;组件未定义没有路由配置。＆＃34; 我调试了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']);
}

组件未定义没有路由配置又如何配置Angular 2路由器进行单元测试？

1 个答案: