In this tutorial we will see how to detect the changes of the routes made by the angular router change events.
Also, we will see how to cover the unit test cases for events by making the mock class for the angular router event.
Router Change Events
Detecting Route state changes can be done by subscribing to the router and listening to the events being emitted. In the example below, you will see all the router events that you can listen to in Angular 8.
List of Router Events:
Events | Description |
---|---|
NavigationStart | Navigation started. |
RoutesRecognized | Router parses the URL and the routes are recognized. |
RouteConfigLoadEnd | Route has been lazy loaded. |
NavigationEnd | Navigation Ended Successfully. |
NavigationCancel | Navigation is canceled as the Route-Guard returned false during navigation. |
NavigationError | Navigation fails due to an unexpected error. |
Router Events implementation:
app.component.ts
import { Component } from '@angular/core';
import { Router, Event, NavigationStart, RoutesRecognized,
RouteConfigLoadStart, RouteConfigLoadEnd,
NavigationEnd, NavigationCancel, NavigationError } from '@angular/router';
@Component({
selector: 'demo-app',
template: `<router-outlet></router-outlet>`
})
export class DemoAppComponent {
constructor(private router: Router) {
router.events.subscribe( (event: Event) =>
if (event instanceof NavigationStart) {
// Navigation started.
console.log(event.url);
}
else if (event instanceof RoutesRecognized) {
// Router parses the URL and the routes are recognized.
}
else if (event instanceof RouteConfigLoadStart) {
// Before the Router lazyloads a route configuration.
}
else if (event instanceof RouteConfigLoadEnd) {
// Route has been lazy loaded.
}
else if (event instanceof NavigationEnd) {
// Navigation Ended Successfully.
console.log(event.url);
}
else if (event instanceof NavigationCancel) {
// Navigation is canceled as the Route-Guard returned false during navigation.
}
else if (event instanceof NavigationError) {
// Navigation fails due to an unexpected error.
console.log(event.error);
}
});
}
}
Note: Events are triggered where ever
console.log()
is mentioned.Unit Testing for Router Events
For the unit testing we will create a mock class for a sencario of NavigationStart
app.component.spec.ts
import { AppComponent } from './app.component';
import { TestBed, ComponentFixture, async } from '@angular/core/testing';
import { CUSTOM_ELEMENTS_SCHEMA } from '@angular/core';
import { Router, NavigationStart } from '@angular/router';
import { Observable, Observer } from 'rxjs';
// mock router service
class MockServices {
public events = Observable.create((observer: Observer<any>) => {
observer.next(new NavigationStart(0, 'http://127.0.0.1:3001/dummy/url', 'imperative'));
return observer;
});
}
describe('AppComponent', () => {
let instance: AppComponent;
let fixture: ComponentFixture<appcomponent>;
beforeEach(async(() => {
TestBed.configureTestingModule({
declarations: [ AppComponent ],
imports: [
],
providers: [
{ provide: Router, useClass: MockServices },
],
schemas: [CUSTOM_ELEMENTS_SCHEMA]
})
.compileComponents();
}));
});
similarly you can also cover other angular router events as per the scenario.
Get More tutorials on Angular 8+