Angular : Les tests et le débogage

S'initier aux tests dans Angular

TESTEZ LINKEDIN LEARNING GRATUITEMENT ET SANS ENGAGEMENT

Tester maintenant Afficher tous les abonnements
Emmanuel Henri vous explique pourquoi effectuer des tests dans Angular. Voyez comment travailler avec les différents outils de test.
04:24

Transcription

La plupart des erreurs parcourues dans le chapitre de débugage peuvent être évitées, si vous avez de bons tests définis dans votre application. Comme par exemple, si vous avez un test qui définit que votre application s'attend à recevoir un tel type de données, ou que votre composant se génère avec succès, parcourir un simple test pour tous ces scénarios peut éviter des heures de débugage, identifier exactement où le problème se situe. Angular vient intégrer déjà des tests avec des outils, quand vous êtes en mode développement et également, vous donne un exemple de test. Donc, la première chose, on va créer un nouveau projet, je vais aller dans VS Code et je vais fermer le mot Bienvenue, la première chose que je vais faire, je vais carrément ouvrir le terminal, donc Afficher, Terminal intégré, je vais vérifier où ce que je suis en tapant pwd, donc je vais faire un cd Desktop, qu'est-ce que je vais faire, je vais créer un nouveau projet Angular en faisant ng new ang-test, vous pouvez l'appeler ce que vous voulez, également, si vous voulez pas créer un nouveau, dans les fichiers d'exercice, j'ai ici, dans les ressources, déjà un ang-tests. Au pluriel, moi je l'écris au singulier, ici, pas vraiment d'importance, tout ça pour vous dire, si vous voulez utiliser celui que j'ai dans les fichiers d'exercice, vous pouvez utiliser celui-là, autrement, créez-en un nouveau. Si vous utilisez celui dans les fichiers d'exercice, oubliez-pas de faire mpm-install avant de l'utiliser. Ce qui va se faire automatiquement avec le nouveau fichier. Donc, je retourne dans VS Code, on devrait être sur le point d'avoir fini, parfait, donc qu'est ce qu'on va faire, on va fermer ce terminal, on va aller dans l'explorateur ici, ouvrir le dossier, aller sur ang-test ici, parfait, donc on retourne dans le terminal en faisant Afficher, Terminal intégré, ou en faisant Contrôle accent grave et je devrais être dans le bon fichier ici, oui, donc la commande pour partir les tests, c'est ng test. Pendant qu'il démarre, tout ce que je vais faire, je vais aller dans la source, l'application, je vais aller dans le fichier qui s'appelle app.component.spec.ts. Donc, pour les tests, on a tout le temps le mot spec, quand on va créer un nouveau composant, il va automatiquement créer un fichier de tests et, à chaque fois que vous voulez accéder le fichier de tests, c'est le fichier spec, donc, dans ce cas-ci, c'est celui-là ici. Donc, je vais juste minimiser ici mon terminal, mais je veux toujours avoir accès et on voit ici un exemple de test. La plupart des tests part avec qu'est-ce qu'on appelle un describe. Describe va mettre tous les tests qu'on fait pour un item particulier, quand on veut tester un bloc unitaire, donc des tests qui sont pour une section de votre code, dans ce cas-ci, la section app, qu'est-ce qu'on fait en premier lieu, on describe en disant voici les tests qui sont reliés à component, on peut donner n'importe quel nom pour ce type de describe ici ça pourrait être test for app component ou les tests pour le composant app, comme vous voulez et ensuite on fait les tests à l'intérieur qui sont reliés au app.component, comme par exemple, on teste 'should create the app', 'should have as title 'app'' et ainsi de suite. Donc, en le coup, quand on exécute la commande ng test, on a automatiquement, avec un navigateur qui s'ouvre et puis qui fait le résultat des tests avec nous ici. Donc, qui ouvre l'application et, en plus il nous donne des résultats des tests, les trois tests que vous avez vu avec le describe ici de app.component, on les voit ici, les trois ont un succès donc si vous voyez des dots ici, ça veut dire que c'est un succès, si vous voyez des x rouges, ça veut dire qu'il y a un problème et vous allez voir les commentaires reliés aux tests ici. Donc, voici ce que les tests avec Angular ont de l'air, on va en discuter encore plus, tout au long de ce chapitre.

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 !