在Angular 2的构造函数中注入了Router的故障单元测试服务
[英]Trouble unit testing service with the Router injected in the constructor in Angular 2
问题描述
I'm trying to test a service that has the application router injected in its constructor. 
我正在尝试测试在其构造函数中注入应用程序路由器的服务。 Following Julie Ralph's suggestions presented in AngularConnect conf 2015 (and her repository: https://github.com/juliemr/ng2-test-seed ), I'm using Karma and Jasmine. 继Julie Ralph在AngularConnect conf 2015（以及她的存储库： https ： //github.com/juliemr/ng2-test-seed ）中提出的建议后，我正在使用Karma和Jasmine。
It follows the example service to be tested: 它遵循要测试的示例服务：
import { Router } from 'angular2/router';
export class ExampleService {
constructor(router : Router) {
this._router = router;
}
//...
}
Right now, I'm just asserting the truth. 现在，我只是断言真相。 It follows the service test: 它遵循服务测试：
import { it, describe, expect, inject, beforeEachProviders, MockApplicationRef } from 'angular2/testing';
import { ROUTER_PROVIDERS } from 'angular2/router';
import { provide, ApplicationRef } from 'angular2/core';
import { ExampleService } from 'example-service.js';
describe('ExampleService', () => {
beforeEachProviders(() => [
ROUTER_PROVIDERS, ExampleService,
provide(ApplicationRef, { useClass: MockApplicationRef })
]);
it('should validate the truth', inject([ExampleService], (exService) => {
expect(true).toBeTruthy();
}));
});
when I run the tests ( > karma start karma.config.js ), I get a TypeError: Cannot read property 'length' of null 当我运行测试（> karma start karma.config.js）时，我得到一个TypeError：无法读取属性'length'的null
Looking at the router.js source code, it looks like I should bootstrap at least one component before injecting router. 查看router.js源代码，看起来我应该在注入路由器之前引导至少一个组件。 Is there an easy way to inject the Router dependency in a test? 有没有一种简单的方法可以在测试中注入路由器依赖项？
The Stacktrace: Stacktrace：
ORIGINAL EXCEPTION: TypeError: Cannot read property 'length' of null ORIGINAL STACKTRACE: TypeError: Cannot read property 'length' of null at routerPrimaryComponentFactory (C:/Users/LSANTOS/Desktop/ng2-test-seed/node_modules/angular2/bundles/router.js:2963:27) at Injector._instantiate (C:/Users/LSANTOS/Desktop/ng2-test-seed/node_modules/angular2/bundles/angular2.js:11920:19) at Injector._instantiateProvider (C:/Users/LSANTOS/Desktop/ng2-test-seed/node_modules/angular2/bundles/angular2.js:11859:21) at Injector._new (C:/Users/LSANTOS/Desktop/ng2-test-seed/node_modules/angular2/bundles/angular2.js:11849:19) at InjectorDynamicStrategy.getObjByKeyId (C:/Users/LSANTOS/Desktop/ng2-test-seed/node_modules/angular2/bundles/angular2.js:11733:42) at Injector._getByKeyDefault (C:/Users/LSANTOS/Desktop/ng2-test-seed/node_modules/angular2/bundles/angular2.js:12048:33) at Injector._getByKey (C:/Users/LSANTOS/Desktop/ng2-test-seed/node_modules/angular2/bundles/angular2.js:12002:21) at Injector._getByDe
See also https://github.com/angular/angular/issues/6325 另见https://github.com/angular/angular/issues/6325
2 个解决方案
解决方案1
5 已采纳 2016-01-07 16:14:32
Problem solved, just need to provide the ROUTER_PRIMARY_COMPONENT. 问题解决了，只需要提供ROUTER_PRIMARY_COMPONENT。
import {ROUTER_PRIMARY_COMPONENT} from 'angular2/router';
class MockPrimaryComponent {
}
beforeEachProviders(() => [
ROUTER_PROVIDERS,
provide(ROUTER_PRIMARY_COMPONENT, {useClass: MockPrimaryComponent}),
ExampleService,
provide(ApplicationRef, { useClass: MockApplicationRef })
]);
解决方案2
3 2016-05-17 23:01:27
I know this post is related to the old router, but I thought it might be useful to answer this. 我知道这篇文章与旧路由器有关，但我认为回答这个问题可能会有用。 Using angular version rc.1 with the new router, I got unit tests with the router, including testing navigateByUrl, by using this test within angular as inspiration: https://github.com/angular/angular/blob/master/modules/%40angular/router/test/integration_spec.ts 使用角度版本rc.1和新路由器，我使用路由器进行单元测试，包括测试navigateByUrl，在angular中使用此测试作为灵感： https ： //github.com/angular/angular/blob/master/modules/ ％40angular /路由器/测试/ integration_spec.ts
saved me a lot of hastle 救了我很多东西
Here's a working example 这是一个有效的例子
import {setBaseTestProviders,beforeEachProviders,inject,it,describe,expect,beforeEach} from '@angular/core/testing'
import { Component,provide} from '@angular/core';
import {Routes,ROUTER_DIRECTIVES,Route} from "@angular/router";
import {ComponentResolver} from '@angular/core';
import {Router,RouterOutletMap,RouteSegment,RouterUrlSerializer,DefaultRouterUrlSerializer} from '@angular/router';
import {SpyLocation} from '@angular/common/testing';
import {Location} from '@angular/common';
import {ComponentFixture, TestComponentBuilder} from '@angular/compiler/testing';
import {TEST_BROWSER_DYNAMIC_PLATFORM_PROVIDERS,TEST_BROWSER_DYNAMIC_APPLICATION_PROVIDERS} from '@angular/platform-browser-dynamic/testing';
@Component({
selector: 'some-component',
template: `Blah!`,
directives: [ROUTER_DIRECTIVES]
})
export class SomeComponent {
}
@Component({
selector: 'another-component',
template: `Blah!`,
directives: [ROUTER_DIRECTIVES]
})
export class AnotherComponent {
}
@Component({
selector: 'root-cmp',
template: `<router-outlet></router-outlet>`,
directives: [ROUTER_DIRECTIVES]
})
@Routes([
new Route({path: '/some-path',component:SomeComponent}),
new Route({path: '/another-path',component:AnotherComponent})
])
export class RootCmp {
}
export const PROVIDERS_TESTING = [
provide(RouterUrlSerializer, {useClass: DefaultRouterUrlSerializer}),
RouterOutletMap,
provide(Location, {useClass: SpyLocation}),
provide(RouteSegment, {useFactory: (r) => r.routeTree.root, deps: [Router]}),
provide(Router,{
useFactory: (resolver, urlParser, outletMap, location) => new Router(
"RootComponent", RootCmp, resolver, urlParser, outletMap, location),
deps: [ComponentResolver, RouterUrlSerializer, RouterOutletMap, Location]
}
),
]
setBaseTestProviders(TEST_BROWSER_DYNAMIC_PLATFORM_PROVIDERS,[TEST_BROWSER_DYNAMIC_APPLICATION_PROVIDERS,PROVIDERS_TESTING]);
it('some test',inject([Router, TestComponentBuilder, Location], (router:Router, tcb:TestComponentBuilder, location:Location) => {
return new Promise((resolve,reject)=>{
tcb.createAsync(RootCmp).then(fixture=>{
router.navigateByUrl('/some-path').then(()=>{
expect(location.path()).toEqual('/some-path');
resolve()
})
})
})
}))
it('another test',inject([Router, TestComponentBuilder, Location], (router:Router, tcb:TestComponentBuilder, location:Location) => {
return new Promise((resolve,reject)=>{
tcb.createAsync(RootCmp).then(fixture=>{
router.navigateByUrl('/another-path').then(()=>{
expect(location.path()).toEqual('/another-path');
resolve()
})
})
})
}))
声明:本站的技术帖子网页，遵循CC BY-SA 4.0协议，如果您需要转载，请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.