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.
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.
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.
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
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.
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).
Nous devons donc respecter les étapes suivantes :
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.
