Testing routing and navigation in Angular

Introduction

Testing routing and navigation helps make sure your app moves between pages correctly. It checks if users reach the right screens when they click links or buttons.

When you want to confirm a button click sends users to the correct page.

When you add new routes and want to verify they work as expected.

When you fix navigation bugs and want to prevent them from coming back.

When you want to check that URL changes load the right components.

When you want to test route guards that control access to pages.

Syntax

Angular

import { TestBed } from '@angular/core/testing';
import { RouterTestingModule } from '@angular/router/testing';
import { Router } from '@angular/router';
import { Location } from '@angular/common';

const routes = [
  { path: 'path', component: YourComponent }
];

TestBed.configureTestingModule({
  imports: [RouterTestingModule.withRoutes(routes)],
  declarations: [YourComponent]
});

const router = TestBed.inject(Router);
const location = TestBed.inject(Location);

router.navigate(['/path']);
expect(location.path()).toBe('/path');

Use RouterTestingModule to simulate routing in tests without a real browser.

Inject Router and Location to control and check navigation.

Examples

Navigate to the '/home' route and check if the URL path updates correctly.

Angular

router.navigate(['/home']);
expect(location.path()).toBe('/home');

Use navigateByUrl to go to '/about' and verify the path.

Angular

router.navigateByUrl('/about');
expect(location.path()).toBe('/about');

Navigate to a route with a parameter and check the full path.

Angular

router.navigate(['/user', 42]);
expect(location.path()).toBe('/user/42');

Sample Program

This test setup creates two simple pages: Home and About. It uses Angular's RouterTestingModule to simulate navigation. The tests check if navigating to '/home' and '/about' updates the URL path correctly.

Angular

import { Component } from '@angular/core';
import { TestBed, fakeAsync, tick } from '@angular/core/testing';
import { RouterTestingModule } from '@angular/router/testing';
import { Router, Routes } from '@angular/router';
import { Location } from '@angular/common';

@Component({ selector: 'app-home', template: '<h1>Home</h1>' })
class HomeComponent {}

@Component({ selector: 'app-about', template: '<h1>About</h1>' })
class AboutComponent {}

const routes: Routes = [
  { path: 'home', component: HomeComponent },
  { path: 'about', component: AboutComponent }
];

describe('Router navigation test', () => {
  let router: Router;
  let location: Location;

  beforeEach(() => {
    TestBed.configureTestingModule({
      imports: [RouterTestingModule.withRoutes(routes)],
      declarations: [HomeComponent, AboutComponent]
    });

    router = TestBed.inject(Router);
    location = TestBed.inject(Location);

    router.initialNavigation();
  });

  it('should navigate to /home', fakeAsync(() => {
    router.navigate(['/home']);
    tick();
    expect(location.path()).toBe('/home');
  }));

  it('should navigate to /about', fakeAsync(() => {
    router.navigateByUrl('/about');
    tick();
    expect(location.path()).toBe('/about');
  }));
});

Important Notes

Use fakeAsync and tick() to handle asynchronous navigation in tests.

Always import RouterTestingModule with your app routes for realistic routing tests.

Check location.path() to verify the current URL after navigation.

Summary

Testing routing ensures users reach the right pages.

Use RouterTestingModule to simulate routes in tests.

Check navigation results by inspecting the URL path with Location.