Angular : Les tests et le débogage

Pratiquer les tests unitaires de base

TESTEZ LINKEDIN LEARNING GRATUITEMENT ET SANS ENGAGEMENT

Tester maintenant Afficher tous les abonnements
Abordez ici la base d'un test unitaire. Emmanuel Henri écrit un simple test et le modifie pour vous expliquer plusieurs scénarios.
06:30

Transcription

Maintenant que vous avons un projet avec les fichiers nécessaires, écrivons notre premier test unitaire dans l'application. Donc, retournons dans VS Code, la première chose que je vais faire ici, je vais arrêter le serveur en faisant un Contrôle C et on va démarrer le serveur de test, donc ng test. Et, aussitôt que le serveur de test démarre, il va y avoir une erreur et je vais aller vous montrer pourquoi. La première chose qu'on va faire, on va venir ici, puis on va regarder qu'est ce qui se passe. Donc, ici, il dit : Failed: Template parse errors: 'app-calc' is not a known element. Si jamais vous voyez ça ici, c'est parce que, dans le app-component, on fait référence à app-calc mais y'a pas de déclaration dans le fichier de test qui est relié à app-calc. Et c'est pour ça, y'a pas d'importation, y'a pas d'injection de ce composant là particulier, donc, on doit aller faire ça. Et vous allez voir dans quelques secondes pourquoi qu'on a ce problème là. Donc, je vais minimiser ici mon terminal, je vais aller dans mon test ici de app.component. Donc, vous voyez ici au top y'a une déclaration de AppComponent. Donc, tous les composants qui font partie de l'application doivent être déclarés ici dans les decorations de TestBed. Donc, on va rajouter ici, en premier lieu, en faisant un import de calcComponent, Component fromcalccalc.component. Donc, si y'a pas d'erreur dans mon texte ici, c'est bien comme ça qu'on l'a exporté ici, CalcComponent, on va être correct, donc l'injection est bonne, ensuite faut la rajouter dans les déclarations, CalcComponent, si vous utilisez VS Code, comme moi, vous allez voir que, bien souvent, vous allez commencer à taper le nom et vous allez avoir des suggestions, donc vous pouvez utiliser ces suggestions, donc, on sauvegarde ça et on devrait avoir un résultat quatre sur quatre succès, on revient ici, donc, tout est beau ici, parfait. Maintenant, on va faire le premier test unitaire. On va aller dans les specs, je vais juste fermer ça deux secondes, on va aller dans les specs du calc.component ici et qu'est ce qu'on va faire, on va descendre, juste en bas du 'should create', on va créer un nouveau test et ça va être notre premier test unitaire. On va en faire un très, très simple. Donc, on va faire it, encore une fois je vous explique que quand on fait une panoplie de tests pour un composant particulier, la bonne pratique c'est de faire un describe en premier, ensuite on fait le test. Avant de commencer à faire les tests, ou si vous voulez avoir tout ce que vous avez besoin pour avoir un succès avec vos tests, comme en ce moment on a besoin de faire un TestBed, ces choses-là sont déjà chargées pour vous donc on a pas besoin de le faire, mais, si jamais vous créez vos tests vous autres mêmes, assurez-vous d'avoir tous les composants dont vous avez besoin à l'intérieur du describe et ensuite on fait vos tests avec la mention ou la méthode it. Donc, j'en commence un autre ici et celui-là je vais dire 'Expects a 5', donc, on va faire une simple addition, vraiment simple, mais juste pour vous montrer la magie de faire des tests unitaires, donc, encore une fois on fait un test d'un bloc de codes à l'intérieur de notre composant, ici, donc, on fait let calc, encore une fois, ça pourrait être une variable qui est calculée à l'extérieur, dans notre classe, ça pourrait être des valeurs qui sont calculées à l'extérieur dans notre classe, donc, tout ce qu'on a à faire c'est d'importer ces valeurs-là ici et de l'utiliser dans la fonction it, dans ce cas-ci, je fais une valeur locale pour rendre le test plus simple pour la compréhension mais vous pourriez faire toute valeur ou toute variable qui est à l'extérieur tant aussi longtemps que vous l'exportez et que vous l'importez ici. Donc, je m'attends à ce que la variable calc soit à cinq, donc la syntaxe qu'on utilise ici, expect la variable calc.toBe à cinq. Donc, en faisant une sauvegarde, notre serveur de test va redémarrer et on va aller voir dans le navigateur. Et nous avons un succès. Donc, si je changeais a valeur, comme par exemple ici, je ferais une multiplication au lieu d'une addition qui donnerait six, j'aurais une erreur. Donc, expect is 6 to be 5, donc ça donne la valeur que vous avez. Donc, si des fois vous faites des variables ou vous faites des fonctions ou des calculs qui sont beaucoup plus complexes qu'une simple addition ou multiplication, vous allez voir qu'est-ce que la variable ou qu'est-ce qui est donné puis après ça ils vont dire to be, qu'est-ce qu'on demande qu'elle soit. Donc, en ce moment on demande que la valeur ici soit cinq et non six. Donc, si on change notre test à six, ici, maintenant on va avoir un succès. Donc, ici, il faut changer la description du test si jamais on veut changer le résultat du test et dans ce cas-ci, on va le garder à cinq et on va garder un plus, juste pour s'assurer qu'on est dans les bonnes normes ici. Donc, voici comment on fait un test unitaire on en fait encore plus ou on en fait avec des services ou on en fait avec des composants et ensuite, vous pouvez explorer tous les types de choses que vous pouvez faire à travers de Jasmine, y'en a des dizaines de choses que vous pouvez faire donc explorer toutes ces différentes options ça serait un cours de quatre heures et plus, donc, moi aujourd'hui, je vous donne la base après ça, je vous fais explorer, la syntaxe est la même, on fait un describe, on importe et on fait le setup de tout ce qu'on a besoin on fait les déclarations en cas qu'on a besoin d'autres composantes dans ce composant, donc, si on importait, d'autres composantes à l'intérieur de calc, on aurait besoin de faire les déclarations ici et ensuite on fait nos tests qui sont très simples, on nomme le test, on fait une fonction et ensuite on prend la valeur et puis après ça, on utilise les méthodes de Jasmine.

Angular : Les tests et le débogage

Découvrez les erreurs communes de cet environnement de développement telles que les erreurs d'injection ou de transformation de données, ainsi que les bonnes pratiques de conduite de tests.

1h24 (20 vidéos)
Aucun commentaire n´est disponible actuellement
Logiciel :
Spécial abonnés
Date de parution :7 juin 2018

Votre formation est disponible en ligne avec option de téléchargement. Bonne nouvelle : vous ne devez pas choisir entre les deux. Dès que vous achetez une formation, vous disposez des deux options de consultation !

Le téléchargement vous permet de consulter la formation hors ligne et offre une interface plus conviviale. Si vous travaillez sur différents ordinateurs ou que vous ne voulez pas regarder la formation en une seule fois, connectez-vous sur cette page pour consulter en ligne les vidéos de la formation. Nous vous souhaitons un excellent apprentissage avec cette formation vidéo.

N'hésitez pas à nous contacter si vous avez des questions !