Angular
Tests Unitaires • Module 2

Tests des Composants et Services

Utiliser ComponentFixture, déclencher la détection de changements avec fixture.detectChanges() et créer des espions avec jasmine.createSpyObj.

Simulation : Cycle de test d'un Composant
Rendu DOM du Composant

Compteur : 0

// État du Test Jasmine
const fixture = TestBed.createComponent(CompteurComponent);
const component = fixture.componentInstance;
expect(component.count).toBe(0); // ✅ Valide
fixture.detectChanges(); // Met à jour le DOM
expect(compiled.querySelector('#compteur-display').textContent)
.toContain('Compteur : 0');
Tester un Composant
  • ComponentFixture : Wrapper qui donne accès à l'instance TypeScript (fixture.componentInstance) et au DOM (fixture.nativeElement ou debugElement).
  • detectChanges() : Indispensable pour forcer la mise à jour des liaisons de templates.
  • triggerEventHandler : Simule des clics ou des frappes de clavier sur les éléments.
Mocker un Service avec un Spy
  • createSpyObj : Isole le composant de ses vraies dépendances backend ou services complexes.
  • returnValue : Permet de simuler un résultat prévisible ou un Observable (of(data)).
  • toHaveBeenCalledWith : Vérifie que le service a été invoqué avec les bons arguments.
Exemple de Mock Service avec Jasmine Spy
describe('ProfilComponent', () => {
  let component: ProfilComponent;
  let fixture: ComponentFixture<ProfilComponent>;
  let authSpy: jasmine.SpyObj<AuthService>;

  beforeEach(async () => {
    authSpy = jasmine.createSpyObj('AuthService', ['getUserName', 'deconnexion']);
    authSpy.getUserName.and.returnValue('Alice');

    await TestBed.configureTestingModule({
      imports: [ProfilComponent],
      providers: [{ provide: AuthService, useValue: authSpy }]
    }).compileComponents();

    fixture = TestBed.createComponent(ProfilComponent);
    component = fixture.componentInstance;
    fixture.detectChanges();
  });

  it('devrait afficher le nom de l\'utilisateur injecté par le mock', () => {
    const banner = fixture.nativeElement.querySelector('.user-name');
    expect(banner.textContent).toContain('Alice');
    expect(authSpy.getUserName).toHaveBeenCalledTimes(1);
  });
});