How do I unit test routers in Angular version 2.0.0 with karma and jasmine?
Here's what my old unit test looks like in version 2.0.0-beta.14
For testing we now create a testing module using TestBed
. We can use the TestBed#configureTestingModule
and pass a metadata object to it the same way we would pass to @NgModule
beforeEach(() => {
TestBed.configureTestingModule({
imports: [ /* modules to import */ ],
providers: [ /* add providers */ ],
declarations: [ /* components, directives, and pipes */ ]
});
});
For routing, instead of using the normal RouterModule
, we would instead use RouterTestingModule
. This sets up the Router
and Location
, so you don't need to yourself. You can also pass routes to it, by calling RouterTestingModule.withRoutes(Routes)
TestBed.configureTestingModule({
imports: [
RouterTestingModule.withRoutes([
{ path: 'home', component: DummyComponent }
])
]
})
To get the Location
and Router
in the test, the same thing works, as in your example.
let router, location;
beforeEach(() => {
TestBed...
});
beforeEach(inject([Router, Location], (_router: Router, _location: Location) => {
router = _router;
location = _location;
}));
You could also inject into each test as necessary
it('should go home',
async(inject([Router, Location], (router: Router, location: Location) => {
})));
The async
above is used like done
except we don't need to explicitly call done
. Angular will actually do that for us after all asynchronous tasks are complete.
Another way to get the providers is from the test bed.
let location, router;
beforeEach(() => {
TestBed.configureTestingModule({
imports: [RouterTestingModule.withRoutes([
{ path: 'home', component: DummyComponent }
])],
});
let injector = getTestBed();
location = injector.get(Location);
router = injector.get(Router);
});
Here's a complete test, refactoring your example
import { Component } from '@angular/core';
import { Location } from '@angular/common';
import { Router } from '@angular/router';
import { RouterTestingModule } from '@angular/router/testing';
import { fakeAsync, async, inject, TestBed, getTestBed } from '@angular/core/testing';
import { By } from '@angular/platform-browser';
@Component({
template: `
<router-outlet></router-outlet>
`
})
class RoutingComponent { }
@Component({
template: ''
})
class DummyComponent { }
describe('component: RoutingComponent', () => {
let location, router;
beforeEach(() => {
TestBed.configureTestingModule({
imports: [RouterTestingModule.withRoutes([
{ path: 'home', component: DummyComponent }
])],
declarations: [RoutingComponent, DummyComponent]
});
});
beforeEach(inject([Router, Location], (_router: Router, _location: Location) => {
location = _location;
router = _router;
}));
it('should go home', async(() => {
let fixture = TestBed.createComponent(RoutingComponent);
fixture.detectChanges();
router.navigate(['/home']).then(() => {
expect(location.path()).toBe('/home');
console.log('after expect');
});
}));
});
Also, if you want to simply mock the router, which actually might be the better way to go in a unit test, you could simply do
let routerStub;
beforeEach(() => {
routerStub = {
navigate: jasmine.createSpy('navigate'),
};
TestBed.configureTestingModule({
providers: [ { provide: Router, useValue: routerStub } ],
});
});
And in your tests, all you want to do is test that the stub is called with the correct argument, when the component interacts with it
expect(routerStub.navigate).toHaveBeenCalledWith(['/route']);
Unless you actually want to test some routing, this is probably the preferred way to go. No need to set up any routing. In a unit test, if you are using real routing, you're involving unnecessary side effects that could affect what you are really trying to test, which is just the behavior of the component. And the behavior of the component is to simply call the navigate
method. It doesn't need to test that the router works. Angular already guarantees that.