在Angular 2的构造函数中注入了Router的故障单元测试服务-Java 学习之路

我在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 回答

问题解决了，只需要提供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 })
]);

回复于 2024-04-17T06:47:35+08:00

我知道这篇文章与旧路由器有关，但我认为回答这个问题可能会有用 . 使用角度版本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()   
            })
        })
    })
}))

回复于 2024-04-17T06:47:35+08:00

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

2 回答

相关问题