Angular : Les tests et le débogage

Prendre en main les outils nécessaires

TESTEZ LINKEDIN LEARNING GRATUITEMENT ET SANS ENGAGEMENT

Tester maintenant Afficher tous les abonnements
Vous explorerez les différents outils nécessaires pour effectuer les tests et le débogage dans Angular.
05:50

Transcription

Quand nous devons faire des tests et du débogage, nous devons nous armer de quelques outils très utiles pour être efficace dans notre travail. Explorons et installons ces outils. Le premier outil très important pour le développeur avec le navigateur comme par exemple, il y’en a dans Chrome, Safari, Explorer, et tous les autres navigateurs. Donc, si vous avez Chrome comme outil ici, vous pouvez l’accéder en faisant option commande i, et vous devriez voir la même chose qu’ici, si jamais c'est sur le coté, vous pouvez utiliser les trois points ici pour le changer sur le coté ou en bas, moi il est en bas en ce moment. Donc, dans ces outils, vous voyez plusieurs choses. Vous voyez les éléments qui sont la page qui est chargée après qu’elle a été compilée par Angular ici. Donc, vous voyez l’application, vous voyez les éléments qui viennent directement d’Angular et ainsi de suite. Ensuite, la console, c’est ici que vous pouvez rajouter du Javascript ou vous voyez des messages qui ont fait console.log et ainsi de suite. La source est où ce que vous avez vos fichiers qui sont compilés, donc le bundle. Vous avez un inline bundle, main bundle, les polyfills et ainsi de suite. Ceux ci sont des fichiers qui sont générés par Angular. Donc, ensuite, il prend tous vos fichiers TS qui sont TypeScript et les compile dans des bundles qui sont Javascript ici, pour que votre navigateur puisse charger votre application ici. Donc vous avez aussi, le dashboarding et ainsi de suite. Ensuite, le Network ici et la vitesse. Donc, vous pouvez voir à quelle vitesse tous vos systèmes ont été chargés. Donc, on doit recharger l’application pour être en mesure de voir ce qui se passe ici. Donc, si on ouvre un petit peu plus gros, vous allez voir à quelle vitesse chaque item qu’on a vu dans les sources ici, qui ont été loadé, des fichiers qui sont externes, donc un qu’on appelle le fichier externe, de ce qui est le succès ici et ainsi de suite. Et la grossière de chaque fichier et le nombre de temps que ça a prit pour charger ce fichier en question. Ensuite, vous avez performance, mémoire, application, sécurité et les audits, qui sont tous des onglets qu’on n’utilisera pas dans ce cours, mais qui sont des onglets importants à apprendre. Donc, si vous voulez en apprendre plus, vous pouvez aller sur la documentation de votre navigateur ou de Chrome dans ce cas ici. Ou bien donc, vous pouvez aller voir dans notre librairie et prendre un cours plus approfondi sur le débogage pour Chrome spécifiquement. Redux, c’est quelque chose que moi j’utilise pour React, donc aucun lien à ce cours. Ensuite, un autre outil que j’utilise régulièrement quand je fais des applications Angular, c’est Augury. Si vous allez sur augury.angular.io, vous allez atterrir sur cette page ici. Et ensuite, vous cliquez sur Install et vous cliquez Add to Chrome, Ajouter l’extension. Si vous êtes familier avec du développement React, ceci est très similaire à l’outil de React. Donc, en d’autres mots, vous êtes en mesure de pouvoir voir le state de votre application, vous êtes en mesure de voir les composants de votre application tout en gardant votre développement ou votre inspection de votre application directement dans votre navigateur. Donc, là je vous le montre, à l’instant. Donc, si on retourne dans notre application ici, je vais donc voir à partir de mon navigateur pour qu’on puisse voir tout ça. Donc, je ferme mes onglets ici, j’ouvre un nouveau fichier Chrome, je mets pleine page, ensuite je retourne sur mon localhost 4200, j’ouvre les outils de développement en faisant option commande i. Et ensuite, je vais sur l’onglet qui s’appelle Augury, ici. Vous devez absolument avoir une application Angular qui est en marche en ce moment, pour être en mesure de voir les choses ici, mais ça vous donne plusieurs informations comme par exemple, ça vous donne comme les éléments ici, les composants qu’on appelle en anglais component tree. Donc, ici vous avez le AppComponent qui est le composant principal, vous avez le titre ou les boutons ici. Ensuite, vous avez un Router qu’on ne voit pas, mais qui est quand même un composant qui vous donne les routes de votre application. Ensuite, on a le dashboard, on a les items ici, on voit le service hero, service qui se connecte par la méthode http ici et qui vous donne accès directement aux messages et aux héros. On voit le premier hero Narco ici et ainsi de suite. Si on clique sur HeroSearchComponent, il envoit la composante recherche et ainsi de suite. Donc, ça vous donne une bonne idée de votre application, ça vous donne les states de chaque item ici, et ainsi de suite. Ça vous donne aussi le router tree. Ici, ça vous donne chaque route de votre application et ainsi de suite. Donc, vous pouvez cliquer dans chaque route quel est l’URL pour obtenir cette route et ainsi de suite. Ensuite, vous avez les modules qui ont été chargé par NgModules, donc tous les imports, les exports, les providers, les déclarations. Donc, si on regarde ici, on peut voir la même information si on voit dans les modules de l’application dans votre E store. Donc, si on va ici dans app, et puis on clique sur app.module, vous allez voir exactement la même information, donc les imports, les déclarations et ainsi de suite. Tout ce qui est chargé dans cette application. Donc ceux-ci sont les outils que nous allons utiliser tout en faisant notre débogage et les tests dans notre cours ici.

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 !