Just like components, routes play an important role in the way our applications deliver an efficient user experience. As such, testing routes becomes paramount to ensure a flawless performance. Trying to declare the Router token as a provider would turn into an exception, so we basically need to somehow inform our test injector about what should it use as root router and root component, bringing in all the dependencies required by these two types, aside from mocking the Location service with a more specialized service which is the SpyLocation service. The following example clarifies all this (disregard the LoginComponent import for now, as we will use it in the next section):
app/app.component.spec.ts
import AppComponent from './app.component';
import { LoginComponent } from './login/login';
import { provide } from '@angular/core';
import {
describe,
expect,
it,
inject,
beforeEach,
beforeEachProviders } from '@angular/core/testing';
import {
Router,
RouteRegistry,
ROUTER_PRIMARY_COMPONENT } from '@angular/router-deprecated';
import { Location } from '@angular/common';
import { SpyLocation } from '@angular/common/testing';
import { RootRouter } from '@angular/router-deprecated';
describe('AppComponent', () => {
let location: Location, router: Router;
// We override the Router and Location providers and its own
// dependencies in order to instantiate a fixture router to
// trigger routing actions and a location spy
beforeEachProviders(() => [
RouteRegistry,
provide(Location, { useClass: SpyLocation }),
provide(Router, { useClass: RootRouter }),
provide(ROUTER_PRIMARY_COMPONENT, { useValue: AppComponent })
]);
// We instantiate Router and Location objects before each test
beforeEach(inject([Router, Location], (_router, _location) => {
router = _router;
location = _location;
}));
// Specs with assertions
it('can navigate to the main tasks component', done => {
// We navigate to a component and check the resulting
// state in the URL
router.navigate(['TasksComponent'])
.then(() => {
expect(location.path()).toBe('/tasks');
done();
})
.catch(e => done.fail(e));
});
});In our previous example, we tested how we could navigate to a named route and check if the router resulting URL matched the expected state. But sometimes we want to check whether we have actually loaded the component we aimed to reach. The following example takes the opposite approach: we navigate to a URL and check the resulting component type. Do you remember we imported the LoginComponent token previously? Now, we'll put it to good use in our next test assertion.
Please append the following spec to app/app.component.spec.ts:
...
it('should be able to navigate to the login component', done => {
// We navigate to an URL and check the resulting state in the URL
router.navigateByUrl('/login').then(() => {
expect(router.currentInstruction.component.componentType)
.toBe(LoginComponent);
done();
}).catch(e => done.fail(e));
});What if we want to check whether a redirection actually works? No worries, we just need to navigate by URL to the path triggering the redirection and then check either the type of the router current instruction or the resulting location path.
Please append the following spec to app/app.component.spec.ts:
it('should redirect "/" requests to the tasks component', done => {
// We navigate to an URL and check the resulting state in the URL
router.navigateByUrl('/').then(() => {
expect(location.path()).toBe('/tasks');
done();
}).catch(e => done.fail(e));
});