组件未定义没有路由配置又名如何配置 Angular 2 路由器进行单元测试?
Component undefined has no route config aka how to configure Angular 2 router for unit test?
我正在为使用 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/core";
导入 {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);
}));
});
生产代码有效,但规范无效。显然路由器设置中仍然缺少一些东西,因为我收到以下错误:
"Component undefined has no route config."
我调试了 Angular2 (beta.1) 代码,这个异常将在 router.dev.js 的第 2407 行抛出。这意味着没有分配给该组件的组件识别器,但我不知道如何解决它。
我使用以下提供者函数:
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']);
}
我正在为使用 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/core";
导入 {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);
}));
});
生产代码有效,但规范无效。显然路由器设置中仍然缺少一些东西,因为我收到以下错误: "Component undefined has no route config." 我调试了 Angular2 (beta.1) 代码,这个异常将在 router.dev.js 的第 2407 行抛出。这意味着没有分配给该组件的组件识别器,但我不知道如何解决它。
我使用以下提供者函数:
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']);
}