Router Testing in Angular

Testing router functionality in Angular ensures that your navigation and routing logic work as expected. This tutorial covers the basics of setting up and performing router testing effectively in your Angular applications.

Setting Up Router Testing

To set up router testing, you need to import the necessary Angular testing modules and configure your routes:

// app.module.ts
import { NgModule } from '@angular/core';
import { BrowserModule } from '@angular/platform-browser';
import { RouterModule, Routes } from '@angular/router';
import { AppComponent } from './app.component';
import { HomeComponent } from './home/home.component';
import { AboutComponent } from './about/about.component';

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

@NgModule({
  declarations: [AppComponent, HomeComponent, AboutComponent],
  imports: [BrowserModule, RouterModule.forRoot(routes)],
  providers: [],
  bootstrap: [AppComponent]
})
export class AppModule { }

// home.component.ts
import { Component } from '@angular/core';

@Component({
  selector: 'app-home',
  template: '
Home Component
',
})
export class HomeComponent { }

// about.component.ts
import { Component } from '@angular/core';

@Component({
  selector: 'app-about',
  template: '
About Component
',
})
export class AboutComponent { }

// app.component.ts
import { Component } from '@angular/core';

@Component({
  selector: 'app-root',
  templateUrl: './app.component.html',
  styleUrls: ['./app.component.css']
})
export class AppComponent { }

// app.component.html

Testing Navigation

Use the Angular testing utilities to test navigation and ensure that the router navigates to the correct routes:

// app.component.spec.ts
import { TestBed, ComponentFixture, waitForAsync } from '@angular/core/testing';
import { RouterTestingModule } from '@angular/router/testing';
import { Router } from '@angular/router';
import { AppComponent } from './app.component';
import { HomeComponent } from './home/home.component';
import { AboutComponent } from './about/about.component';

describe('AppComponent', () => {
  let fixture: ComponentFixture;
  let router: Router;

  beforeEach(waitForAsync(() => {
    TestBed.configureTestingModule({
      imports: [RouterTestingModule.withRoutes([
        { path: '', component: HomeComponent },
        { path: 'about', component: AboutComponent }
      ])],
      declarations: [AppComponent, HomeComponent, AboutComponent]
    }).compileComponents();

    router = TestBed.inject(Router);
    fixture = TestBed.createComponent(AppComponent);
  }));

  it('should navigate to "home" redirects you to /', waitForAsync(() => {
    router.navigate(['']).then(() => {
      expect(router.url).toBe('/');
    });
  }));

  it('should navigate to "about" redirects you to /about', waitForAsync(() => {
    router.navigate(['/about']).then(() => {
      expect(router.url).toBe('/about');
    });
  }));
});

Testing Route Guards

To test route guards, create mock services and test their behavior during navigation:

// auth.guard.ts
import { Injectable } from '@angular/core';
import { CanActivate, Router } from '@angular/router';

@Injectable({
  providedIn: 'root'
})
export class AuthGuard implements CanActivate {
  constructor(private router: Router) {}

  canActivate(): boolean {
    const isAuthenticated = false; // Replace with actual authentication check
    if (isAuthenticated) {
      return true;
    } else {
      this.router.navigate(['/']);
      return false;
    }
  }
}

// auth.guard.spec.ts
import { TestBed } from '@angular/core/testing';
import { RouterTestingModule } from '@angular/router/testing';
import { Router } from '@angular/router';
import { AuthGuard } from './auth.guard';

describe('AuthGuard', () => {
  let guard: AuthGuard;
  let router: Router;

  beforeEach(() => {
    TestBed.configureTestingModule({
      imports: [RouterTestingModule],
      providers: [AuthGuard]
    });

    guard = TestBed.inject(AuthGuard);
    router = TestBed.inject(Router);
  });

  it('should prevent navigation if not authenticated', () => {
    spyOn(router, 'navigate');
    expect(guard.canActivate()).toBe(false);
    expect(router.navigate).toHaveBeenCalledWith(['/']);
  });

  it('should allow navigation if authenticated', () => {
    spyOn(router, 'navigate');
    spyOnProperty(guard, 'isAuthenticated', 'get').and.returnValue(true);
    expect(guard.canActivate()).toBe(true);
    expect(router.navigate).not.toHaveBeenCalled();
  });
});

Key Points

Conclusion

Router testing in Angular provides a powerful way to ensure that your navigation and routing logic work correctly. By understanding and using router testing effectively, you can create robust and user-friendly applications with reliable routing. Happy coding!