开发者问题收集

在 Angular 2 中，使用构造函数注入路由器进行单元测试服务存在问题

2016-01-07
4565
unit-testing testing karma-runner angular

我正在尝试测试一个在其构造函数中注入了应用程序路由器的服务。根据 Julie Ralph 在 AngularConnect conf 2015 中提出的建议（以及她的存储库： https://github.com/juliemr/ng2-test-seed ）， 我正在使用 Karma 和 Jasmine。

它遵循要测试的示例服务： 

import { Router } from 'angular2/router';

export class ExampleService {
  constructor(router : Router) {
    this._router = router;
  }

  //...
}

现在，我只是在断言事实。它遵循服务测试： 

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

当我运行测试（> karma start karma.config.js）时，我收到 TypeError：无法读取 null 的属性“length”

查看 router.js 源代码，看起来我应该在注入路由器之前引导至少一个组件。有没有一种简单的方法可以在测试中注入路由器依赖项？

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._getByDependency (C:/Users/LSANTOS/Desktop/ng2-test-seed/node_modules/angular2/bundles/angular2.js:11990:21) at Injector._instantiate (C:/Users/LSANTOS/Desktop/ng2-test-seed/node_modules/angular2/bundles/angular2.js:11887:32) 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._getByDependency (C:/Users/LSANTOS/Desktop/ng2-test-seed/node_modules/angular2/bundles/angular2.js:11990:21) at Injector._instantiate (C:/Users/LSANTOS/Desktop/ng2-test-seed/node_modules/angular2/bundles/angular2.js:11887:32) 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._getByDependency (C:/Users/LSANTOS/Desktop/ng2-test-seed/node_modules/angular2/bundles/angular2.js:11990:21) at Injector._instantiate (C:/Users/LSANTOS/Desktop/ng2-test-seed/node_modules/angular2/bundles/angular2.js:11887:32) 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.get (C:/Users/LSANTOS/Desktop/ng2-test-seed/node_modules/angular2/bundles/angular2.js:11804:19) at C:/Users/LSANTOS/Desktop/ng2-test-seed/node_modules/angular2/bundles/testing.dev.js:2477:25 at Array.map (native) at Array.map (C:/Users/LSANTOS/Desktop/ng2-test-seed/node_modules/es6-shim/es6-shim.js:1113:14) at FunctionWithParamTokens.execute (C:/Users/LSANTOS/Desktop/ng2-test-seed/node_modules/angular2/bundles/testing.dev.js:2476:33) at C:/Users/LSANTOS/Desktop/ng2-test-seed/node_modules/angular2/bundles/testing.dev.js:2601:25 at Zone.run (C:/Users/LSANTOS/Desktop/ng2-test-seed/node_modules/angular2/bundles/angular2-polyfills.js:138:17) at Zone.run (C:/Users/LSANTOS/Desktop/ng2-test-seed/node_modules/angular2/bundles/testing.dev.js:2544:30) at runInTestZone (C:/Users/LSANTOS/Desktop/ng2-test-seed/node_modules/angular2/bundles/testing.dev.js:2588:23) at Object. (C:/Users/LSANTOS/Desktop/ng2-test-seed/node_modules/angular2/bundles/testing.dev.js:2600:33) at attemptAsync (C:/Users/LSANTOS/Desktop/ng2-test-seed/node_modules/jasmine-core/lib/jasmine-core/jasmine.js:1819:24) at QueueRunner.run (C:/Users/LSANTOS/Desktop/ng2-test-seed/node_modules/jasmine-core/lib/jasmine-core/jasmine.js:1774:9) at QueueRunner.execute (C:/Users/LSANTOS/Desktop/ng2-test-seed/node_modules/jasmine-core/lib/jasmine-core/jasmine.js:1762:10) at Spec.Env.queueRunnerFactory (C:/Users/LSANTOS/Desktop/ng2-test-seed/node_modules/jasmine-core/lib/jasmine-core/jasmine.js:627:35) at Spec.execute (C:/Users/LSANTOS/Desktop/ng2-test-seed/node_modules/jasmine-core/lib/jasmine-core/jasmine.js:353:10) at Object.fn (C:/Users/LSANTOS/Desktop/ng2-test-seed/node_modules/jasmine-core/lib/jasmine-core/jasmine.js:2360:37) at attemptAsync (C:/Users/LSANTOS/Desktop/ng2-test-seed/node_modules/jasmine-core/lib/jasmine-core/jasmine.js:1819:24) at QueueRunner.run (C:/Users/LSANTOS/Desktop/ng2-test-seed/node_modules/jasmine-core/lib/jasmine-core/jasmine.js:1774:9) at QueueRunner.execute (C:/Users/LSANTOS/Desktop/ng2-test-seed/node_modules/jasmine-core/lib/jasmine-core/jasmine.js:1762:10) at Env.queueRunnerFactory (C:/Users/LSANTOS/Desktop/ng2-test-seed/node_modules/jasmine-core/lib/jasmine-core/jasmine.js:627:35) at Object.fn (C:/Users/LSANTOS/Desktop/ng2-test-seed/node_modules/jasmine-core/lib/jasmine-core/jasmine.js:2345:13) at attemptAsync (C:/Users/LSANTOS/Desktop/ng2-test-seed/node_modules/jasmine-core/lib/jasmine-core/jasmine.js:1819:24) at QueueRunner.run (C:/Users/LSANTOS/Desktop/ng2-test-seed/node_modules/jasmine-core/lib/jasmine-core/jasmine.js:1774:9) at C:/Users/LSANTOS/Desktop/ng2-test-seed/node_modules/jasmine-core/lib/jasmine-core/jasmine.js:1801:16 at C:/Users/LSANTOS/Desktop/ng2-test-seed/node_modules/jasmine-core/lib/jasmine-core/jasmine.js:1745:9 at queueRunnerFactory.onComplete (C:/Users/LSANTOS/Desktop/ng2-test-seed/node_modules/jasmine-core/lib/jasmine-core/jasmine.js:2348:17) at QueueRunner.clearStack (C:/Users/LSANTOS/Desktop/ng2-test-seed/node_modules/jasmine-core/lib/jasmine-core/jasmine.js:605:9) at QueueRunner.run (C:/Users/LSANTOS/Desktop/ng2-test-seed/node_modules/jasmine-core/lib/jasmine-core/jasmine.js:1784:12) at C:/Users/LSANTOS/Desktop/ng2-test-seed/node_modules/jasmine-core/lib/jasmine-core/jasmine.js:1801:16 at C:/Users/LSANTOS/Desktop/ng2-test-seed/node_modules/jasmine-core/lib/jasmine-core/jasmine.js:1745:9 at complete (C:/Users/LSANTOS/Desktop/ng2-test-seed/node_modules/jasmine-core/lib/jasmine-core/jasmine.js:365:9)

另请参阅 https://github.com/angular/angular/issues/6325

2个回答

问题已解决，只需提供 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 })
]);
cangosta
2016-01-07

我知道这篇文章与旧路由器有关，但我认为回答这个问题可能会有用。使用 angular 版本 rc.1 和新路由器，我使用路由器进行了单元测试，包括测试 navigationByUrl，使用 angular 中的这个测试作为灵感： https://github.com/angular/angular/blob/master/modules/%40angular/router/test/integration_spec.ts

为我省去了很多麻烦

这是一个有效的例子 

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()   
            })
        })
    })
}))
Tucker
2016-05-17