Angular : Les tests et le débogage

Tester les composants

TESTEZ LINKEDIN LEARNING GRATUITEMENT ET SANS ENGAGEMENT

Tester maintenant Afficher tous les abonnements
Vous apprendrez à effectuer un test du composant Angular et du UI (Unit Testing) avec du code plus complexe.
04:23

Transcription

Maintenant, testons un composant et un élément d'une autre interface. Si vous ouvrez l'application, vous allez dans le calc, on va ouvrir le HTML, les tests et puis la classe. La première chose que je veux regarder, ici, on a un bouton. Donc, on aimerait tester le bouton. Quand on clique dessus, on s'attend à ce que la valeur soit à false avant qu'on clique dessus. Quand on clique dessus, on veut que la valeur soit à true. Et le message va aussi refléter la valeur de notre variable ici donc, automatiquement, The light is On ou Off. Donc, on va tester ce composant, ici. Donc, qu'est-ce que je vous montre, ici ? C'est comment tester des éléments de votre interface. Donc, si on clique sur quelque chose qu'est-ce qu'il se passe, qu'est-ce qu'on s'attend qui va être le résultat et ainsi de suite. Donc, on va rajouter un test, ici. Et on va, encore une fois, utiliser la méthode it, et, celui-là, je vais l'appeler « Clicked button should set the #message to on ». Donc, encore une fois, on utilise fonction. Et, dans cette fonction, on va créer le composant. Donc, on va créer une variable qu'on va appeler « component ». Vous pouvez appeler la variable comme vous voulez, et on créer un nouveau CalcComponent qui est déjà importé, ici. Donc, on a accès à cet objet. On créé un nouveau composant qu'on va utiliser ensuite. On s'attend que le component et le message de ce component va matcher, donc, il va être égal à qu'est ce qu'on va mettre. Donc, toMatch. Donc, ceci est une nouvelle fonction qu'on peut utiliser qui fait partie de la bibliothèque de Jasmine, et on s'attend que le message soit à Off avant qu'on clique. Ensuite, on va avoir une fonction, je vais juste ajouter un petit commentaire, ici, before click. Donc, ici, on va faire un clique. Donc, le component. On va utiliser la fonction clicked. Donc, encore une fois, on prend de la classe, la fonction clicked qui va changer automatiquement la variable, ici, et donc, le message. Donc, on vient d'utiliser cette fonction dans component, clicked. Ça veut dire qu'on vient de cliquer. On vient d'effectuer la fonction qu'on fait normalement dans un navigateur avec le bouton. Et, ensuite, on peut faire la même chose, ici, on peut copier et la coller à la ligne 36. Et, encore, on s'attend que le message du component, qui est le CalcComponent, toMatch On. Donc, à ce point, on s'attend à ce que ça soit On. Si c'est pas ça, en quelque part, il y a un problème dans notre cas. Donc, dès fois, ce que vous pouvez faire, c'est avoir vos tests écrits, vos test avant même de créer les fonctions, même dans l'application. Donc, cela va vous permettre d'avoir les bons comportements ou d'évaluer les comportements que vous voulez avoir dans votre application avant même de les créer. Donc, tant que vos tests ne passeront pas, ça veut dire que les comportements que vous voulez faire dans vos fonctions ne sont pas tels que les tests ont été définis. Donc, ensuite, on va sauvegarder tout ça, on va aller voir dans notre navigateur qu'est-ce qu'il se passe, et les tests sont tous valides. Donc, « Clicked button should set the message to on », ça veut dire que le comportement qu'on voulait dans notre interface est bien comme cela. Donc, si on faisait le contraire, donc, on s'attend que l'application est On en premier, Off après. On sauvegarde. On va avoir un test qui n'est pas valide. Donc, on va remettre ça comme c'était. On sauvegarde, et tout est bon. Donc, voici comment qu'on fait des tests pour les interfaces et les composantes.

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 !