Angular
Tests Unitaires • Module 3

Tests des Formulaires et des Routes

Vérifier les validations synchrones et asynchrones des formulaires (Reactive Forms) et simuler la navigation avec provideRouter ou RouterTestingHarness.

Inspecteur de Validité de Formulaire de Test
État : VALIDE (form.valid = true)
// Assertion Jasmine sur FormControl
const emailControl = component.form.get('email');
emailControl.setValue('contact@learnweb.fr');
expect(emailControl.valid).toBe(true);
// Simulation de soumission
expect(component.onSubmit).toHaveBeenCalled();
Tester un FormGroup

Pas besoin d'interagir forcément avec le DOM : testez directement l'objet form.valid, form.errors, et vérifiez que les messages d'erreurs n'apparaissent que si le champ est touched ou dirty.

RouterTestingHarness (Angular 15+)

Depuis Angular 15+, RouterTestingHarness.create() simplifie grandement les tests de navigation en initialisant le routeur et en vérifiant l'URL courante via harness.navigateByUrl().

Exemple de Test de Navigation avec provideRouter
import { provideRouter } from '@angular/router';
import { RouterTestingHarness } from '@angular/router/testing';

describe('Navigation Globale', () => {
  beforeEach(() => {
    TestBed.configureTestingModule({
      providers: [
        provideRouter([
          { path: 'dashboard', component: DashboardComponent },
          { path: 'login', component: LoginComponent }
        ])
      ]
    });
  });

  it('devrait naviguer vers /dashboard et charger le composant', async () => {
    const harness = await RouterTestingHarness.create();
    const instance = await harness.navigateByUrl('/dashboard', DashboardComponent);
    expect(instance).toBeInstanceOf(DashboardComponent);
  });
});