Retour au cours

Tester les scénarios de routage

Le Développeur Angular Complet : de Zéro à Héros

76. Tester les scénarios de routage

Tester la logique de routage consiste à s'assurer que les composants naviguent correctement, récupèrent les paramètres de route et que les guards bloquent ou autorisent l'accès.

1. Configuration du Router Testing Module

Pour tester les composants qui interagissent avec le routeur, nous utilisons RouterTestingModule ou des versions simulées des services.

typescript import { RouterTestingModule } from '@angular/router/testing'; import { ActivatedRoute } from '@angular/router'; import { of } from 'rxjs';

const mockActivatedRoute = { snapshot: { paramMap: convertToParamMap({ id: '101' }) }, paramMap: of(convertToParamMap({ id: '101' })) };

TestBed.configureTestingModule({ imports: [RouterTestingModule.withRoutes([{ path: 'home', component: HomeComponent }])], providers: [{ provide: ActivatedRoute, useValue: mockActivatedRoute }] });

2. Tester la navigation du composant

On injecte et on espionne le service Router pour vérifier que router.navigate() est appelé correctement.

typescript it('devrait naviguer vers accueil en cas de succès', inject([Router], (router: Router) => { spyOn(router, 'navigate'); component.loginSuccessful(); expect(router.navigate).toHaveBeenCalledWith(['/home']); }));

3. Tester les Route Guards

On teste les guards en les instanciant via l'injection et en appelant directement la méthode canActivate.

typescript it('devrait renvoyer true si l'utilisateur est connecté', () => { spyOn(authService, 'isLoggedIn').and.returnValue(true); expect(guard.canActivate()).toBe(true); });