Aller au contenu principal

Angular Testing Library

[Traduction Bêta Non Officielle]

Cette page a été traduite par PageTurner AI (bêta). Non approuvée officiellement par le projet. Vous avez trouvé une erreur ? Signaler un problème →

La Angular Testing Library s'appuie sur la DOM Testing Library en ajoutant des API spécifiques pour les composants Angular. À partir de la version 17 d'ATL, vous devez également installer @testing-library/dom :

npm install --save-dev @testing-library/angular @testing-library/dom

Vous pouvez également utiliser la commande ng add. Cette commande configure votre projet pour utiliser Angular Testing Library, ce qui inclut également l'installation de @testing-library/dom.

ng add @testing-library/angular

Le problème​

Vous souhaitez écrire des tests maintenables pour vos composants Angular. Dans cette optique, vos tests doivent éviter de reposer sur les détails d'implémentation de vos composants et se concentrer plutôt sur vous donner le niveau de confiance attendu. Vous voulez également que votre suite de tests reste maintenable à long terme, afin que les refontes de composants (modifications d'implémentation sans changement de fonctionnalité) ne cassent pas vos tests et ne ralentissent pas votre équipe.

Cette solution​

La Angular Testing Library est une solution extrêmement légère pour tester des composants Angular. Elle fournit des fonctions utilitaires minimalistes basées sur la DOM Testing Library pour encourager de meilleures pratiques de test. Son principe directeur fondamental est :

Plus vos tests ressemblent à la façon dont votre logiciel est utilisé, plus ils vous donnent de confiance.

Plutôt que de manipuler des instances de composants Angular rendus, vos tests interagiront directement avec les nœuds DOM. Les utilitaires fournis facilitent l'interrogation du DOM comme le ferait un utilisateur : trouver des éléments de formulaire par leur label, localiser des liens et boutons via leur texte. La bibliothèque propose également une méthode de secours via data-testid pour les éléments où le contenu textuel ou le label ne sont pas pertinents ou pratiques.

Cette bibliothèque encourage le développement d'applications plus accessibles et permet de concevoir des tests qui utilisent vos composants comme le ferait un utilisateur. Cela renforce la confiance dans le bon fonctionnement de votre application en conditions réelles.

La Angular Testing Library :

  • Réexporte les fonctions utilitaires query et fireEvent de la DOM Testing Library.

  • Encapsule les fonctions fireEvent pour appeler automatiquement detectChanges() après chaque événement

  • Est agnostique aux frameworks de test et fonctionne avec tous