Trouble unit testing service with the Router injected in the constructor in Angular 2

Question

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.

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

Looking at the router.js source code, it looks like I should bootstrap at least one component before injecting router. Is there an easy way to inject the Router dependency in a test?

The 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 pendency (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_mod ules/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)

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

Answer 1

Problem solved, just need to provide the 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 })
]);

Answer 2

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

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