Angular : Les tests et le débogage

Préparer les fichiers pour les tests unitaires

TESTEZ LINKEDIN LEARNING GRATUITEMENT ET SANS ENGAGEMENT

Tester maintenant Afficher tous les abonnements
Vous découvrirez comment monter un nouveau projet avec tous les fichiers nécessaires pour la démonstration des tests unitaires.
06:14

Transcription

Maintenant que nous avons une bonne compréhension des outils qui opèrent les tests dans Angular, préparons l'application pour faire notre premier test. Donc, retournez dans VS Code, la première chose qu'on va faire, on va ouvrir le terminal, donc, cliquez sur Afficher, Terminal intégré, ou utilisez le raccourci Contrôle accent grave et je vais mettre mon terminal un petit peu plus gros, ensuite, on va arrêter le serveur de test et on va créer un nouveau composant en faisant ng g ou generate, vous pouvez faire les deux, je vais le faire au complet, puis les prochains je vais faire g. Ensuite, component et le nom je vais l'appeler calc. Donc, automatiquement, Angular ou l'outil Angular rajoute tous les éléments nécessaires et en plus update les app modules. Donc, si on regarde dans le app.module, non seulement, il a déjà faite l'injection ou l'import de calc component, mais l'outil a également rajouté le component dans les déclarations de ng modules, super. Également, nous avons un nouveau fichier qui s'appelle calc et nous avons tous les éléments nécessaires donc on a le css, le template, les tests pour ce composant et ensuite, la classe qui a été créée par le CLI. Donc, la première chose que je vais faire, je veux rajouter quelque chose dans ma classe, je vais, pour commencer, enlever le constructor et le ngOnInit et puis j'enlève le implements OnInit ici, on va faire une classe très simple et ensuite, dans la classe, on va rajouter un petit peu de code. On va rajouter, premièrement, une variable qui va s'appeler isOn, on va la mettre à false, ensuite, on va rajouter une fonction qui s'appelle clicked this dot isOn égal à le contraire avec un point d'exclamation, this, dot, isOn. Donc, à chaque fois que notre fonction, ici, clique, elle va être cliquée, ça va changer de false à true et ainsi de suite. Donc, en dernier, on va faire une fonction, qui va donner un message et puis ce message va apparaître, directement, on va mettre le m en minuscule et puis on va retourner, donc, return, un message, on va utiliser des template strings, The light is et c'est ici qu'on va insérer la variable this.isOn, On, je vous explique dans un instant ce qui se passe ici, parce que, dans le fond, j'utilise du ES 6, ici, pour passer un conditionnel. Donc, qu'est ce qu'on fait ici, c'est qu'à chaque fois que la fonction elle va être cliquée, elle va changer isOn à true or false, puis, ici, qu'est ce qu'on fait, on passe un conditionnel qui va principalement vérifier si c'est true, met le mot On, si c'est false, met le mot Off. Donc, ça va créer un message qui va marquer The light is On ou Off, avec cette fonction, ici, donc, on sauvegarde ça, ensuite, on va dans le HTML, on va changer une couple de choses ici, on va commencer par effacer tout ça, ici et puis on va créer un bouton donc on crée un élément bouton qui va passer la fonction clicked, donc, quand on clique sur le bouton, la fonction clicked, elle va être appelée et ce bouton va marquer Click me, comme ça et puis on va passer le message qu'on a créé en faisant de l'interpolation. Si vous êtes pas familier avec l'interpolation, regardez mon autre cours sur les Templates. On en parle beaucoup dans ce cours. Donc, juste pour revérifier, on a une fonction qui va être cliquée, qui va mettre la variable isOntrue ou false, après ça, on a un message qui retourne The light is On or Off basée ici, la variable est false or true. Parfait. Donc, on va partir l'application juste pour vous montrer qu'est-ce que ça donne, Donc, on ouvre le terminal, je vais faire le Contrôle accent grave et ensuite je vais faire un ng serve, je vais aller dans le navigateur, y'en a pas d'ouvert donc on va en ouvrir un nouveau ici. localhost: 4200 Donc, la raison pourquoi on ne voit pas ce qu'on a fait ici est parce qu'on a pas inséré le composant dans l'application donc, on va aller faire ça maintenant, en faisant, ici, je vais juste fermer mon terminal deux petites secondes, je vais enlever tout ça, ici et puis on va enlever l'image aussi et juste après le h1, ici, sur la ligne six, on va retourner et puis on va rajouter le app-calc et juste pour vous informer si vous cherchez c'est quoi l'élément qu'on doit rentrer ici, vous allez dans le calc.component, ici et vous allez chercher le selector, comme ça. Donc, en sauvegardant ça, tout devrait être bon, on va aller voir encore le terminal ici, pour s'assurer que tout est bien, ensuite, on retourne dans l'application, on voit ici le bouton The light is Off, on clique, The light is On et voilà, l'application marche comme prévu.

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 !