Notre premier test unitaire (Unit Test) avec Angular - Dev to be curious

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 :

1. Créer une liste “en dur” des éléments de retour
2. 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.