74. Tests unitaires de composants (Shallow Testing)

Lors du test unitaire d'un composant, nous nous concentrons uniquement sur sa logique et son interaction avec le template, en ignorant ses composants enfants pour garder le test ciblé (Shallow Testing).

Tester la logique du composant

Nous interagissons directement avec l'instance component.

typescript it('devrait calculer correctement le prix total', () => { component.price = 100; component.taxRate = 0.1; expect(component.calculateTotal()).toBe(110); });

Tester l'interaction avec le template (Le DOM)

Nous utilisons l'objet fixture pour requêter le DOM et déclencher la détection de changement.

1. fixture.detectChanges() : Force Angular à lancer la détection de changement et mettre à jour le DOM.
2. fixture.nativeElement : L'élément DOM brut du composant.
3. DebugElement : Enveloppe Angular pour l'élément DOM, utilisée pour requêter et déclencher des événements.

typescript it('devrait afficher le titre dans une balise H1', () => { component.title = 'Test App'; fixture.detectChanges();

const compiled = fixture.nativeElement as HTMLElement; const h1 = compiled.querySelector('h1'); expect(h1?.textContent).toContain('Test App'); });

it('devrait appeler increment() lors du clic sur le bouton', () => { spyOn(component, 'increment'); fixture.detectChanges();

const button = fixture.debugElement.query(By.css('button')); button.triggerEventHandler('click', null);

expect(component.increment).toHaveBeenCalled(); });

Le shallow testing garantit que votre test ne casse que si le composant que vous testez change, et non si un composant enfant éloigné est modifié.