Angular : Les tests et le débogage

Effectuer un test end-to-end

TESTEZ LINKEDIN LEARNING GRATUITEMENT ET SANS ENGAGEMENT

Tester maintenant Afficher tous les abonnements
Vous allez voir la définition et la fonction d'un test end-to-end dans Angular. Apprenez également à réaliser ce type de test à l'aide des outils internes d'Angular.
09:51

Transcription

Je vais maintenant vous introduire à une autre sorte de test. Le test de bout en bout et le fichier correspondant dans l'application d'Angular. Donc, si vous allez directement dans VS code, ici, vous allez voir un fichier qui s'appelle e2e, qui s'appelle « End-to-End » en anglais. Donc, on va fermer tout ça, on va fermer les autres fichiers. Je vais ouvrir celui qui s'appelle app.po.ts. Et, je vais ouvrir celui, ici, app.e2e comme ça, ici, qui sont des specs. Donc, ça ressemble beaucoup aux tests qu'on a fait jusqu'à date. Donc, on utilise encore la librairie Jasmine pour faire ces tests qu'on fait admettons, ici, on décrit le test ang-test App. Et, ensuite, on fait un test. Sauf que la syntaxe change un petit peu avec la mention page. Et c'est ici qu'on utilise les tests End-to-End ou bout en bout en éjectant certaines librairies ou bibliothèques auxquelles on a accès avec Protractor qui est une autre bibliothèque qu'on utilise pour faire des tests qui vient avec Angular encore, qui est similaire à Jasmine et à Karma. Cela me donne accès à des applis de navigateur sans utiliser le navigateur tel que Chrome. Si vous voulez plus d'infos à ce sujet, lisez sur « headless browsers ». Donc, on peut créer des panoplies de test. Donc, on peut faire plusieurs choses dans un même test. Ce type de test qu'on nomme en anglais e2e ou End-to-End si vous faites des recherches sur Internet. Également, la différence entre des tests unitaires ou des tests bout en bout, c'est que pour les unitaires, on teste un bloc de code versus des tests bout en bout où on teste des scénarios avec une ou plusieurs actions et Protractor comme bibliothèque de test qui est déjà intégré à Angular. Je vous montre. Donc, la première chose qu'on va faire, on va créer d'autres fonctions. Donc, la première étape à réaliser, c'est démarrer la panoplie de test qui s'appelle End-to-End ou bout à bout. On va ouvrir le terminal, je vais utiliser le raccourcit Ctrl+`. Je vais arrêter les test ici ng test en faisant Ctrl+C. Et, ensuite, tout ce que je vais faire c'est ng e2e, e2e pour End-to-End. En démarrant ce test, on va faire, spécifiquement, les tests bout en bout. Et on voit qu'on a un succès. Donc, les résultats de ces tests, par exemple, sont tout le temps dans le terminal. On voit que c'est un succès parce que, en ce moment, tout ce qu'on fait comme test, c'est qu'on va injecter la page, ici. On va à la page principale. Et, ensuite, on fait un test qui est avec Jasmine. On se dit qu'avec la fonction de la page getParagraphText, donc, si on va, ici, pour aller voir quelle est la fonction, on retourne un élément par CSS qui s'appelle « app-root h1 ». Donc, si on va, ici, dans le app-root. Donc, si on retourne dans le test, ici, l'élément h1, puis, là, on va chercher le texte, encore, là, c'est toutes des fonctions qui viennent avec Protractor. Puis on va dans les tests, on s'attend que ça dise « Welcome to app! ». Donc, c'est ce qu'il se passe dans l'application, c'est un succès. Donc, qu'est-ce qu'on va faire, là, pour en créer un autre, on va aller créer une fonction qui va aller chercher le même type d'information avec ce qu'on a créé dernièrement, et on va faire d'autres tests. Donc, on va retourner, on va fermer les deux fichiers, ici. On va garder seulement le app.po.ts et le app.e2e-spec.ts. Donc, je vais venir, ici, puis je vais créer deux fonctions. Les deux fonctions qu'on va créer vont être pour tester les éléments d'interface qu'on a. Donc, qu'est-ce que je vais faire ? Je vais copier la ligne huit à dix. Et je vais la coller, ici. On va changer la fonction, ici, on va appeler ça « getLightState ». Et qu'est-ce que je vais faire, ici ? Je vais retourner un élément par CSS que je vais appeler « app-calc », tout simplement. Je vous explique le tout quand j'ai terminé. Je vais rajouter un petit peu de code, ici, qui va être : span et, ensuite, getText. Parfait. Ensuite, on va créer une autre fonction. Et je vous explique le tout quand on va passer au travers de tout ce qu'on a fait. Celle-là on va l'appeler « getLightButton ». Et, celle-là, on va faire quelque chose d'un petit peu plus différent, on va enlever tout ça, ici. Après by on va utiliser la fonction qui vient de Protractor, qui s'appelle « css ContainingText ». Et on va passer la valeur button. Puis, on va passer l'autre valeur qui va s'appeler « Click me ». Encore une fois, je vous explique le tout tout de suite après qu'on aie terminé tout ça. Parfait. On peut sauvegarder les fonctions, ici. Ensuite, on s'en va dans les tests. Quand je vais avoir tout terminé, je vais vous expliquer ce que je viens de faire. Si ça n'a pas de sens en ce moment, ça va en avoir après. Donc, on va y aller encore avec un it. En fait, je vais copier ligne 10 à 13 et on va changer des choses. Coller à ligne 15, ici, on va changer ce qu'on veut faire comme test. « should turn the light on and off ». Et vous allez voir que quand on va commencer à utiliser les fonctions qu'on a créées dans l'autre page, ce que je veux dire. Donc, page.navigateTo, on garde ça. Ensuite, page.getLightButton. Puis, on va passer un click. Donc, le click-ci est passé par la page, c'est une méthode qui est disponible par Protractor. Donc, à chaque fois que vous voulez faire un clique sur un élément d'interface, vous pouvez le faire avec cette fonction. Ensuite, je vais changer ça, ici. En fait, on va tout enlever ça, on va juste garder les parenthèses. Donc, qu'est-ce qu'on fait, c'est qu'on pense la page getLightState. C'est une fonction. Ensuite, toEqual. The light is on. Bon, comment ça marche, ici. Qu'est-ce qu'on fait, c'est qu'on met un bouton. Je vais juste sauvegarder tout ça. On a une fonction qui s'appelle « getLightButton ». Donc, ça, c'est la fonction, ici. On va chercher le bouton avec le cssContainingText qui est un élément qui a le texte Click me! Donc, on a accès à ce bouton, ici. On va le cliquer, ici. Un coup qu'il est cliqué, on s'attend que la page avec le state, je vais aller chercher la fonction, ici. Donc, on va dans le app-calc, ici. Puis, on va dans le span. Donc, si on s'en va dans le HTML, ici, du calc, on va voir. On s'en va dans le span. Et on s'en va dans le message du span, ici, pour aller chercher le message. Donc, on va chercher le message du span, ici, getText. Donc, un coup qu'on a accès à ce texte, on s'attend qu'il soit égal Donc, un coup qu'on a accès à ce texte, on s'attend qu'il soit égal à The light is On. On a cliqué, on s'attend que la lumière soit On. Donc, ça, on sauvegarde tout ça, et on repasse avant dans le terminal une encore une fois. Je vais utiliser le raccourci Ctrl+`. Et on repart End-to-End. Donc, la commande doit être partie à chaque fois que vous voulez faire les tests. On a un succès. Donc, si j'avais mis Off, on n'aurait pas eu un succès parce qu'on s'attend à ce que le message soit On, un coup qu'on a cliqué. Donc, on peut continuer ce test plusieurs fois. On peut changer ça pour qu'il y ait un failure sur le test si vous voulez. Et, ensuite, on peut même faire le Off, aussi, un coup qu'on a cliqué. On pourrait pratiquement rajouter ces deux choses là, ici, une deuxième fois. Je pourrais faire is off. Puis, ici, on pourrait juste faire is on. Comme ça. Et faire un paste, ici. On a cliqué, on s'attend que le message soit Off. On sauvegarde. On pourrait même faire un deuxième it juste pour ça. Pour l'instant qu'est-ce qu'on va faire ? On va juste évaluer le comportement, ici. Donc, je retourne dans mon terminal, le raccourci, c'est Ctrl+`. On fait nos tests. Et on devrait avoir un succès pour tous les tests. Et comme vous pouvez voir, on a un succès. On pourrait même avoir un deuxième test pour faire le On et le Off. Vous faites ça comme vous voulez, mais le principe est le même. Donc, comme vous pouvez voir, c'est très simple de faire des tests bout en bout, et qu'est-ce qui est intéressant avec ces genres de tests, c'est qu'on peut non seulement faire plusieurs tests, mais on pourrait faire un gros test qui évalue une série de click, une série de comportements qu'on fait avec notre application.

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 !