在Angular 2的构造函数中注入了Router的故障单元测试服务

我在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:无法读取属性'length'的null

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

Stacktrace:

ORIGINAL EXCEPTION:TypeError:无法读取null的属性'length'ORIGINAL STACKTRACE:TypeError:无法在routerPrimaryComponentFactory读取null的属性'length'(C:/ Users / LSANTOS / Desktop / ng2-test-seed / node_modules / angular2 / bundles /router.js:2963:27)Injector._instantiate(C:/Users/LSANTOS/Desktop/ng2-test-seed/node_modules/angular2/bundles/angular2.js:11920:19)Injector._instantiateProvider(C: /Users/LSANTOS/Desktop/ng2-test-seed/node_modules/angular2/bundles/angular2.js:11859:21)在Injector._new(C:/ Users / LSANTOS / Desktop / ng2-test-seed / node_modules / angular2) /bundles/angular2.js:11849:19)在Injector._getByKeyDefault的InjectorDynamicStrategy.getObjByKeyId(C:/Users/LSANTOS/Desktop/ng2-test-seed/node_modules/angular2/bundles/angular2.js:11733:42) C:/Users/LSANTOS/Desktop/ng2-test-seed/node_modules/angular2/bundles/angular2.js:12048:33)Injector._getByKey(C:/ Users / LSANTOS / Desktop / ng2-test-seed / node_modules /angular2/bundles/angular2.js:12002:21)在Injector._getBy Injector._instantiate的依赖关系(C:/Users/LSANTOS/Desktop/ng2-test-seed/node_modules/angular2/bundles/angular2.js:11990:21)(C:/ Users / LSANTOS / Desktop / ng2-test-seed) /node_modules/angular2/bundles/angular2.js:11887:32)在Injector._instantiateProvider(C:/Users/LSANTOS/Desktop/ng2-test-seed/node_modules/angular2/bundles/angular2.js:11859:21)at at Injector._new(C:/Users/LSANTOS/Desktop/ng2-test-seed/node_modules/angular2/bundles/angular2.js:11849:19)InjectorDynamicStrategy.getObjByKeyId(C:/ Users / LSANTOS / Desktop / ng2-test) -seed / node_modules / angular2 / bundles / angular2.js:11733:42)Injector._getByKeyDefault(C:/Users/LSANTOS/Desktop/ng2-test-seed/node_modules/angular2/bundles/angular2.js:12048:33 )Injector._getByDependency(C:/ Users / LSANTOS / Desktop / ng2)中的Injector._getByKey(C:/Users/LSANTOS/Desktop/ng2-test-seed/node_modules/angular2/bundles/angular2.js:12002:21) Injector._instantiate中的-test-seed / node_modules / angular2 / bundles / angular2.js:11990:21)(C:/ Users / LSANTOS / Desktop / ng2-te st-seed / node_modules / angular2 / bundles / angular2.js:11887:32)在Injector._instantiateProvider(C:/Users/LSANTOS/Desktop/ng2-test-seed/node_modules/angular2/bundles/angular2.js:11859: 21)在Injector._new(C:/Users/LSANTOS/Desktop/ng2-test-seed/node_modules/angular2/bundles/angular2.js:11849:19)InjectorDynamicStrategy.getObjByKeyId(C:/ Users / LSANTOS / Desktop / ng2-test-seed / node_modules / angular2 / bundles / angular2.js:11733:42)Injector._getByKeyDefault(C:/Users/LSANTOS/Desktop/ng2-test-seed/node_modules/angular2/bundles/angular2.js: 12048:33)在Injector._getByDependency(C:/ Users / LSANTOS /)中的Injector._getByKey(C:/Users/LSANTOS/Desktop/ng2-test-seed/node_modules/angular2/bundles/angular2.js:12002:21) Desktop / ng2-test-seed / node_modules / angular2 / bundles / angular2.js:11990:21)在Injector._instantiate(C:/ Users / LSANTOS / Desktop / ng2-test-seed / node_modules / angular2 / bundles / angular2 . js:11887:32)在Injector._instantiateProvider(C:/ Users / LSANTOS / Desktop / ng2-test-seed / node_modules / angular2 / bundl) es / angular2.js:11859:21)Injector._new(C:/Users/LSANTOS/Desktop/ng2-test-seed/node_modules/angular2/bundles/angular2.js:11849:19)InjectorDynamicStrategy.getObjByKeyId(C :/Users/LSANTOS/Desktop/ng2-test-seed/node_modules/angular2/bundles/angular2.js:11733:42)Injector._getByKeyDefault(C:/ Users / LSANTOS / Desktop / ng2-test-seed / node_modules / angular2 / bundles / angular2.js:12048:33)Injector.get中的Injector._getByKey(C:/Users/LSANTOS/Desktop/ng2-test-seed/node_modules/angular2/bundles/angular2.js:12002:21) (C:/Users/LSANTOS/Desktop/ng2-test-seed/node_modules/angular2/bundles/angular2.js:11804:19)在C:/ Users / LSANTOS / Desktop / ng2-test-seed / node_modules / angular2 /在Array.map的Array.map(native)上捆绑/ testing.dev.js:2477:25(C:/Users/LSANTOS/Desktop/ng2-test-seed/node_modules/es6-shim/es6-shim.js:1113:14)在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 at Zone.run上的Zone.run(C:/Users/LSANTOS/Desktop/ng2-test-seed/node_modules/angular2/bundles/angular2-polyfills.js:138:17)(C:/ Users / LSANTOS / Desktop / ng2) runInTestZone中的-test-seed / node_modules / angular2 / bundles / testing.dev.js:2544:30)(C:/Users/LSANTOS/Desktop/ng2-test-seed/node_modules/angular2/bundles/testing.dev.js :2588:23)在对象 . (C:/Users/LSANTOS/Desktop/ng2-test-seed/node_modules/angular2/bundles/testing.dev.js:2600:33)在attemptAsync(C:/ Users / LSANTOS / Desktop / ng2-test-seed / node_modules / jasmine -core / lib / jasmine-core / jasmine.js:1819:24)在QueueRunner.run(C:/ Users / LSANTOS / Desktop / ng2-test-seed / node_modules / jasmine-core / lib / jasmine- core / jasmine.js:1774:9)在QueueRunner.execute(C:/Users/LSANTOS/Desktop/ng2-test-seed/node_modules/jasmine-core/lib/jasmine-core/jasmine.js:1762:10)在Spec.exeEnv.queueRunnerFactory(C:/Users/LSANTOS/Desktop/ng2-test-seed/node_modules/jasmine-core/lib/jasmine-core/jasmine.js:627:35)在Spec.execute(C:/在Object.fn上的用户/ LSANTOS / Desktop / ng2-test-seed / node_modules / jasmine -core / lib / jasmine-core / jasmine.js:353:10)(C:/ Users / LSANTOS / Desktop / ng2-test- seed / node_modules / jasmine -core / lib / jasmine-core / jasmine.js:2360:37)在attemptAsync(C:/ Users / LSANTOS / Desktop / ng2-test-seed / node_modules / jasmine-core / lib / jasmine- core / jasmine.js:1819:24)在QueueRunner.run(C:/ Users / LSANTOS / Desktop / ng2-test- seed / node_modules / jasmine -core / lib / jasmine-core / jasmine.js:1774:9)在QueueRunner.execute(C:/ Users / LSANTOS / Desktop / ng2-test-seed / node_modules / jasmine-core / lib / jasmine-core / jasmine.js:1762:10)在Env.queueRunnerFactory(C:/Users/LSANTOS/Desktop/ng2-test-seed/node_modules/jasmine-core/lib/jasmine-core/jasmine.js:627: 35)atatject.fn(C:/Users/LSANTOS/Desktop/ng2-test-seed/node_modules/jasmine-core/lib/jasmine-core/jasmine.js:2345:13)在attemptAsync(C:/ Users /)在QueueRunner.run的LSANTOS / Desktop / ng2-test-seed / node_modules / jasmine-core / lib / jasmine-core / jasmine.js:1819:24)(C:/ Users / LSANTOS / Desktop / ng2-test-seed / node_modules / jasmine-core / lib / jasmine-core / jasmine.js:1774:9)在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 /桌面/ NG2测试种子/ node_modules /茉莉核/ LIB /茉莉核/ jasmine.js:2348:17)在QueueRunner的QueueRunner.clearStack(C:/Users/LSANTOS/Desktop/ng2-test-seed/node_modules/jasmine-core/lib/jasmine-core/jasmine.js:605:9) .run(C:/Users/LSANTOS/Desktop/ng2-test-seed/node_modules/jasmine-core/lib/jasmine-core/jasmine.js:1784:12)在C:/ Users / LSANTOS / Desktop / ng2- test-seed / node_modules / jasmine-core / lib / jasmine-core / jasmine.js:1801:16在C:/ Users / LSANTOS / Desktop / ng2-test-seed / node_modules / jasmine-core / lib / jasmine-core /jasmine.js:1745:9完成后(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)

2 years ago

问题解决了,只需要提供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 years ago

我知道这篇文章与旧路由器有关,但我认为回答这个问题可能会有用 . 使用角度版本rc.1与新路由器,我得到了路由器的单元测试,包括测试navigateByUrl,在角度作为灵感使用此测试: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()   
            })
        })
    })
}))