组件未定义没有路由配置，也就是如何配置 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';从 'angular2/router' 导入 {RouteConfig, ROUTER_DIRECTIVES}；从 './search/search' 导入 {Search}；从 './search-results/search-results' 导入 {SearchResults}；@成分({选择器:'我的应用'})@看法({模板:`
<路由器插座></路由器插座></div>`,指令:[ROUTER_DIRECIVES]})@RouteConfig([{path: '/search', name: 'Search', 组件: Search, useAsDefault: true},{路径:'/search-results'，名称:'SearchResults'，组件:SearchResults}])出口类应用{}

这是包含导航的搜索组件:

import {Component} from 'angular2/core';从angular2/router"导入{Router}；@成分({模板:'<div></div>'})导出类搜索{构造函数(公共路由器:路由器){}onSelect(station:Station):void {this.router.navigate(['SearchResults']);}}

搜索结果组件:从angular2/core"导入{Component}；

@Component({模板:'<div></div>'})导出类 SearchResults {构造函数(){}}

这是规范:

import {它，注入，描述，在每个提供者之前，模拟应用引用来自'angular2/testing';从 'angular2/core' 导入 {Component, provide, ApplicationRef};进口 {APP_BASE_HREF、ROUTER_PRIMARY_COMPONENT、ROUTER_PROVIDERS、ROUTER_DIRECTIVES来自angular2/路由器"；从./search"导入{搜索}；从../app"导入{App}；从../search-results/search-results"导入{SearchResults}；从 'angular2/platform/browser' 导入 {bootstrap}；从angular2/http"导入 {Http, BaseRequestOptions};从angular2/src/http/backends/mock_backend"导入{MockBackend}；描述('搜索'，()=> {//向依赖注入器提供我们的实现或模拟beforeEachProviders(() => [ROUTER_PROVIDERS,ROUTER_DIRECIVES，提供(ROUTER_PRIMARY_COMPONENT，{useClass:App})，提供(APP_BASE_HREF，{useValue:'/'})，提供(ApplicationRef，{useClass:MockApplicationRef})，搜索]);它('导航'，注入([搜索]，(搜索)=> {search.onSelect(CHOICE);期望(search.router.navigating).toBe(true);}));});

生产代码有效，但规范无效.显然路由器设置中仍然缺少一些东西，因为我收到以下错误:未定义的组件没有路由配置."我调试到 Angular2 (beta.1) 代码中，这个异常将在 router.dev.js 的第 2407 行抛出.这意味着没有分配给该组件的组件识别器，但我不知道如何解决.

解决方案

我使用以下提供程序功能:

import {AppComponent} from "../components/app/app-component";从angular2/router"导入 {Router, ROUTER_PRIMARY_COMPONENT, RouteRegistry};从angular2/src/router/router"导入{RootRouter}；从angular2/src/mock/location_mock"导入{SpyLocation}；从angular2/src/router/location/location"导入{Location}；导出函数 provideMockRouter():any[] {返回 [路由注册，提供(位置，{useClass:SpyLocation})，提供(ROUTER_PRIMARY_COMPONENT，{useValue:AppComponent})，提供(路由器，{useClass:RootRouter})，];}

我包括:

beforeEachProviders(() => [提供MockRouter(),...]);

并使用如下:

it('navigates', testAsyncAwait(async() => {spyOn(router, '导航').and.callThrough();等待 component.call();期望(router.navigate).toHaveBeenCalledWith(['TargetComponent']);}

I'm working on setting up a specification for routing with Angular2. This is the app component:

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

This is the search component containing the navigation:

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

The search results component: import {Component} from "angular2/core";

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

This is the specification:

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

The production code works, but the specification doesn't. Apparently there's still something missing in the router setup, because I get the following error: "Component undefined has no route config." I debugged into the Angular2 (beta.1) code and this exception will be thrown on line 2407 of router.dev.js. It means that there's no component recognizer assigned to this component, but I don't know how to resolve it.

解决方案

I use the following provider function:

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

Which I include:

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

And use as follows:

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

这篇关于组件未定义没有路由配置，也就是如何配置 Angular 2 路由器进行单元测试?的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！