Introduction

Généralement aussi importants que négligés, les tests, qu’ils soient unitaires ou end-to-end (de bout en bout), sont facilement intégrables dans un projet Angular, notamment grâce à Angular CLI et ses commandes. L’objectif de ce chapitre est de voir comment il est possible de créer et exécuter des tests unitaires, grâce à Karma et Jasmine, ainsi que des tests end-to-end, avec Protractor.

Les tests unitaires

L’objectif d’un test unitaire est d’isoler une partie du code pour le tester. Cela permet de s’assurer qu’une fonctionnalité précise, aussi minime soit-elle, est opérationnelle. Une application étant la combinaison de multiples fonctionnalités, il arrive souvent que des modifications sur une fonctionnalité altèrent une autre fonctionnalité. Pour une petite application, ce n’est pas un problème réellement majeur, mais pour une application moyenne, voire conséquente, cela devient problématique.

C’est à ce moment-là qu’il est intéressant d’avoir des tests unitaires qui permettent de s’assurer que chaque brique continue de fonctionner correctement tout au long du processus de développement, indépendamment de ses dépendances.

Pour exécuter les tests unitaires avec Angular CLI, il suffit d’utiliser la commande ng test.

1. Introduction aux tests avec Jasmine

Les tests unitaires sont rédigés dans des fichiers TypeScript grâce au framework de test Jasmine. La commande ng test utilise le task runner Karma pour lancer les tests dans le navigateur choisi, selon la configuration Karma au niveau des fichiers karma.conf.js et app/test.ts.

Par défaut, avec Angular CLI, ce sont tous les fichiers ayant l’extension .spec.ts et qui correspondent à un fichier TypeScript, qui vont être exécutés :

sample.component.ts
sample.component.spec.ts

Pour un fichier sample.component.ts existant, le fichier correspondant sample.component.spec.ts est alors exécuté par Karma.

L’objectif est que chaque fichier TypeScript possède un fichier de test, pour avoir une couverture de code maximum.

Jasmine est un framework de test open source basé...

Les tests e2e

L’objectif du test e2e est de s’assurer du bon fonctionnement de ce composant. Pour cela, il doit simuler un clic sur le bouton puis vérifier que le composant affiche bien la nouvelle valeur incrémentée.

Il faut alors écrire le test en se mettant à la place d’un utilisateur qui utilisera cette application. Voici les étapes d’utilisation :

Je dois naviguer vers la page de l’application.
Je vois mon compteur qui est initialisé à 0.
Je clique sur le bouton "Incrémenter !" .
Je constate que mon compteur est passé à 1.

Trois besoins sont alors identifiés pour écrire le test e2e :

Interagir avec le navigateur
Récupérer un élément du DOM
Interagir avec un élément du DOM

1. Ajouter Cypress à son projet

Historiquement, Protactor était utilisé pour les tests e2e sur Angular. Tout était préconfiguré et il suffisait de lancer la commande ng e2e.

Récemment, le choix de se passer de Protactor par défaut a été fait pour permettre aux développeurs de choisir leur librairie, notamment Cypress, qui est plus récent et plus fiable.

Pour cela, il suffit de lancer la commande ng add @cypress/schematic qui installe Cypress et configure le projet en ajoutant un dossier cypress et en configurant le fichier angular.json. La commande demande s’il faut utiliser ng e2e pour utiliser Cypress et propose même un guide de migration de Protractor vers Cypress.

2. Interagir avec le navigateur

Il est possible de naviguer sur une URL précise :

cy.visit('/'); 
cy.visit('/login');

Il est aussi possible de rafraîchir le navigateur :

cy.reload(); 
cy.reload(true); // reload sans utiliser le cache

Avec cy.location() il est possible d’effectuer des tests...

Tester son application