On ne le répétera jamais assez : les tests unitaires, c’est la vie. Ah non pardon, c’est la protection de la vie …toujours pas, c’est la protection de votre future vie.
Oui, voilà, on y est ! Pensez à faire des tests unitaires, que ce soit avant ou après, le vrai code, l’essentiel c’est de coder son premier test unitaire avec Angular.
Mise en place d’un test unitaire avec Angular
Ce qui est bien avec le client Angular (Angular Cli), c’est qu’il nous génère automatiquement un fichier de test, à chaque fois que nous ajoutons un Component, un Service.
Ainsi, pas d’excuse pour avoir au moins un tests unitaire dans notre projet Angular !
Chaque fichier de test respecte la norme : {nom du fichier}.spec.ts.
Lancer le moteur de tests unitaires
De base, Angular utilise Karma pour vérifier l’ensemble des fichiers avec l’extension .spec.ts.
Nous pouvons lancer nos tests unitaires avec la commande : ng test.
Résultats depuis une page web
ng test va lancer un serveur web pour exécuter les tests unitaires, avec karma.
NOTE: tout est configurable depuis le fichier karma.config.js
Tester un Service
Nous allons tester que notre service renvoie bien le bon nombre d’éléments.
Or, notre service appelle une API. API qui va être requêter via du HTTP, et donc depuis le HttpClient d’Angular.
Ne pas être dépendant des auxiliaires
Nous ne souhaitons pas être dépendant du bon vouloir de l’API (est-elle disponible, est-elle finie d’être développée, …).
Ainsi, première étape : mocker le comportement de HttpClient.
L’idée ici est de simuler la requête et la réponse du HttpClient.
Ca sera donc nous qui renverrons la bonne liste, à la place de l’API !
La règle ici est de maîtriser les données en entrée (Input) et en sortie (Output).
Etapes à respecter
Nous devons donc respecter les étapes suivantes :
- Créer une liste “en dur” des éléments de retour
- Indiquer au Mock que lors de l’appel à la méthode du service, on renverra cette liste
Ce qui nous donne le code suivant :
Enfin, il nous rester à tester, avec la méthode expect.
Nous reviendrons très vite vers vous pour d’autres tests unitaires avec Karma et Angular !
__________
Tips – Async callback was not invoked within timeout specified by jasmine.DEFAULT_TIMEOUT_INTERVAL.
Si vous avez cette erreur, vous avez peut-être préciser un paramètre de retour, dans l’appel du callback de la méthode « it()”
it(‘should returns list of appointment’, (done) => { … });
Enlevez ce paramètre « done”, si vous ne l’utilisez pas dans votre méthode.
Ca titille votre curiosité ?
Vous souhaitez en savoir plus sur Angular ? Découvrir les fondamentaux, ou les parties avancées d'angular vnext ?
Nous vous proposons des formations :
- courtes (une compétence d'angular)
- longues (apprendre les fondamentaux ou les parties avancées d'angular)