Fault Unit Testing Service with a Router Introduced in the Designer in Angular 2

I am trying to test the service in which the application router is built into my constructor. After Julie Ralph's suggestions presented in AngularConnect conf 2015 (and her repository: https://github.com/juliemr/ng2-test-seed ), I use Karma and Jasmine.

This follows the service being tested:

import { Router } from 'angular2/router'; export class ExampleService { constructor(router : Router) { this._router = router; } //... } 

Right now, I'm just stating the truth. This 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 tests (> karma start karma.config.js), I get TypeError: I can not read the length of the 'null property

Looking at the source code of router.js, it looks like I have to download at least one component before starting the router. Here's an easy way to inject a Router dependency in a test?

Stacktrace:

ORIGINAL EXCLUSION: TypeError: Unable to read the length of the 'property' null ORIGINAL GLASS: TypeError: Unable to read the value of the length property on the PrimaryComponentFactory (C: / Users / LSANTOS / Desktop / ng2-test-seed / node_modules / angular2 / bundles router 2963: 27) on Injector._instantiate (C: /Users/LSANTOS/Desktop/ng2-test-seed/node_modules/angular2/bundles/angular2.js: 11920: 19) on Injector._instantiateProvider (C: / Users / LSANTOS / Desktop / ng2-test-seed / node_modules / angular2 / bundles / angular2.js: 11859: 21) on Injector._new (C: / Users / LSANTOS / Desktop / ng2-test-seed / node_modules / angular2 / bundles / angular2. js: 11849: 19) on InjectorDynamicStrategy.getObjByKeyId (C: /Users/LSANTOS/Desktop/ng2-test-seed/node_modules/angular2/bundles/angular2.js: 11733: 42) in Injector._getByKeyDef ault (C: /Users/LSANTOS/Desktop/ng2-test-seed/node_modules/angular2/bundles/angular2.js: 12048: 33) on Injector._getByKey (C: / Users / LSANTOS / Desktop / ng2-test-seed /node_modules/angular2/bundles/angular2.js: 12002: 21) in Injector._getByDependency (C: /Users/LSANTOS/Desktop/ng2-test-seed/node_modules/angular2/bundles/angular2.js: 11990: 21) on Injector._instantiate (C: /Users/LSANTOS/Desktop/ng2-test-seed/node_modules/angular2/bundles/angular2.js: 11887: 32) on Injector._instantiateProvider (C: / Users / LSANTOS / Desktop / ng2-test -seed / node_modules / angular2 / bundles / angular2.js: 11859: 21) on Injector._new (C: /Users/LSANTOS/Desktop/ng2-test-seed/node_modules/angular2/bundles/angular2.js: 11849: 19 ) on InjectorDynamicStrategy.getObjByKeyId (C: /Users/LSANTOS/Desktop/ng2-test-seed/node_modules/angular2/bundles/angular2.js: 11733: 42) in Injector._getByKeyDefault (C: / Users / LSANTOS / Desktop / ng2 -test-seed / node_modules / angular2 / bundles /angular2.js: 12048: 33) on Injector._getByKey (C: /Users/LSANTOS/Desktop/ng2-test-seed/node_modules/angular2/bundles/angular2.js: 12002: 21) in Injector._getByDependency (C: /Users/LSANTOS/Desktop/ng2-test-seed/node_modules/angular2/bundles/angular2.js: 11990: 21) on Injector._instantiate (C: / Users / LSANTOS / Desktop / ng2-test-seed / node_modules / angular2 /bundles/angular2.js: 11887: 32) on Injector._instantiateProvider (C: /Users/LSANTOS/Desktop/ng2-test-seed/node_modules/angular2/bundles/angular2.js: 11859: 21) on Injector._new ( C: /Users/LSANTOS/Desktop/ng2-test-seed/node_modules/angular2/bundles/angular2.js: 11849: 19) on InjectorDynamicStrategy.getObjByKeyId (C: / Users / LSANTOS / Desktop / ng2-test-seed / node_modules /angular2/bundles/angular2.js: 11733: 42) in Injector._getByKeyDefault (C: /Users/LSANTOS/Desktop/ng2-test-seed/node_modules/angular2/bundles/angular2.js: 12048: 33) on Injector. _getByKey (C: / Users / LSANTO S / Desktop / ng2-test-seed / node_modules / angular2 / bundles / angular2.js: 12002: 21) in Injector._getByDependency (C: / Users / LSANTOS / Desktop / ng2-test-seed / node_modules / angular2 / bundles / angular2.js: 11990: 21) on Injector._instantiate (C: /Users/LSANTOS/Desktop/ng2-test-seed/node_modules/angular2/bundles/angular2.js: 11887: 32) on Injector._instantiateProvider (C: / Users / LSANTOS / Desktop / ng2-test-seed / node_modules / angular2 / bundles / angular2.js: 11859: 21) on Injector._new (C: / Users / LSANTOS / Desktop / ng2-test-seed / node_modules / angular2 / bundles / angular2.js: 11849: 19) on InjectorDynamicStrategy.getObjByKeyId (C: /Users/LSANTOS/Desktop/ng2-test-seed/node_modules/angular2/bundles/angular2.js: 11733: 42) in Injector._getByKeyDefault ( : /Users/LSANTOS/Desktop/ng2-test-seed/node_modules/angular2/bundles/angular2.js: 12048: 33) on Injector._getByKey (C: / Users / LSANTOS / Desktop / ng2-test-seed / node_modules / angular2 / bundles / angular2.js: 12002: 21) on Injector.get (C: /Users/LSANTOS/Desktop/ng2-test-seed/node_modules/angular2/bundles/angular2.js: 11804: 19) on C: / Users / LSANTOS / Desktop / ng2-test- seed / node_modules / angular2 / bundles / testing.dev.js: 2477:25 on Array.map (native) on Array.map (C: / Users / LSANTOS / Desktop / ng2-test-seed / node_modules / es6-shim / es6-shim.js: 1113: 14) on FunctionWithParamTokens.execute (C: /Users/LSANTOS/Desktop/ng2-test-seed/node_modules/angular2/bundles/testing.dev.js: 2476: 33) on C: / Users / LSANTOS / Desktop / ng2-test-seed / node_modules / angular2 / bundles / testing.dev.js: 2601: 25 in Zone.run (C: / Users / LSANTOS / Desktop / ng2-test-seed / node_modules / angular2 / bundles / angular2 -polyfills.js: 138: 17) in 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) in the object. (C: / Users / LSANTOS / Desktop / NG2 test seeds / node_modules / angular2 / bundles / testing.dev.js: 2600: 33) in an attempt to Async (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) on QueueRunner.execute (C: / Users / LSANTOS / Desktop / ng2-test-seed / node_modules / jasmine-core / lib / jasmine-core / jasmine.js: 1762: 10) in Spec.Env.queueRunnerFactory (C: /Users/LSANTOS/Desktop/ng2-test-seed/node_modules/jasmine-core/lib/jasmine-core/jasmine.js: 627: 35) in Spec.execute (C: /Users/LSANTOS/Desktop/ng2-test-seed/node_modules/jasmine-core/lib/jasmine-core/jasmine.js: 353: 10) in Object.fn (C : /Users/LSANTOS/Desktop/ng2-test-seed/node_modules/jasmine-core/lib/jasmine-core/jasmine.js: 2360: 37) in an attempt to Async (C: / Users / LS ANTOS / 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) on QueueRunner.execute (C: / Users / LSANTOS / Desktop / ng2-test-seed / node_modules / jasmine-core / lib / jasmine- core / jasmine.js: 1762: 10) on Env.queueRunnerFactory (C: /Users/LSANTOS/Desktop/ng2-test-seed/node_modules/jasmine-core/lib/jasmine-core/jasmine.js: 627: 35) in Object.fn (C: /Users/LSANTOS/Desktop/ng2-test-seed/node_modules/jasmine-core/lib/jasmine-core/jasmine.js: 2345: 13) in an attempt to Async (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) in C: / Users / LSANTOS / Desktop / ng2-test-seed / node_modules / jasmine-core / lib / jasmine-core /jasmine.js:1801:16 in C: / Users/LSANTOS/Desktop/ng2-test-seed/node_modules/jasmine-core/lib/jasmine-core/jasmine.js: 1745: 9 in queueRunnerFactory.onComplete (C: /Users/LSANTOS/Desktop/ng2-test-seed/node_modules/jasmine-core/lib/jasmine-core/jasmine.js:2348:17) on QueueRunner.clearStack (C: / Users / LSANTOS / Desktop / ng2-test -seed / node_modules / jasmine-core / lib / jasmine-core / jasmine.js: 605: 9) on QueueRunner.run (C: / Users / LSANTOS / Desktop / ng2-test-seed / node_modules / jasmine-core / lib /jasmine-core/jasmine.js:1784:12) in C: / Users/LSANTOS/Desktop/ng2-test-seed/node_modules/jasmine-core/lib/jasmine-core/jasmine.js: 1801: 16 in C : / Users / LSANTOS/Desktop/ng2-test-seed/node_modules/jasmine-core/lib/jasmine-core/jasmine.js: 1745: 9 upon completion (C: / Users / LSANTOS / Desktop / ng2-test-seed /node_modules/jasmine-core/lib/jasmine-core/jasmine.js{65:9)

See also https://github.com/angular/angular/issues/6325

+7
unit-testing angular testing karma-runner
source share
2 answers

The problem is resolved, just need to provide 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 }) ]); 
+6
source share

I know this post is related to the old router, but I thought it would be helpful to answer this question. Using the angular version of rc.1 with the new router, I got unit tests with the router, including navigateByUrl testing, using this test in angular as inspiration: https://github.com/angular/angular/blob/master/modules/%40angular/ router / test / integration_spec.ts

saved me a lot of hastle

Here is 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() }) }) }) })) 
+3
source share

All Articles