Maintenant, nous avons une compréhension rapide des tests de bout en bout
et le rôle que jouent les tests de bout en bout
dans la stratégie globale de test des applications angulaires.
Aussi, une brève introduction au rapporteur.
Poursuivons le prochain exercice où nous pourrions employer un rapporteur
et concevoir nos tests de bout en bout.
Il est chanceux que la CLI angulaire
configure automatiquement tout ce dont nous avons besoin pour effectuer des tests de bout en bout,
comme nous le verrons lorsque nous procédons à l'exercice.
Donc, il s'agit de mettre en œuvre les différents tests et
puis d'effectuer le test en utilisant le rapporteur dans cet exercice.
En allant à notre application angulaire dans Visual Studio,
si vous regardez le paquet de notre fichier JSON,
vous verrez que nous trouvons déjà
la CLI angulaire a mis en place tout ce dont nous avons besoin pour effectuer les tests de bout en bout.
Donc, en faisant défiler vers le bas,
vous verrez que le rapporteur a déjà été installé sur
notre ordinateur dans le projet angulaire.
Aussi, nous remarquons qu'il y a ici un dossier séparé
appelé e2e qui contient quelques fichiers
qui ont déjà été configurés pour effectuer des tests de bout en bout.
Maintenant, si vous avez besoin d'effectuer des tests complets de bout en bout,
, alors il est conseillé de créer
un fichier séparé pour chaque ensemble de tests de bout en bout que vous souhaitez effectuer.
Maintenant, dans cet exercice particulier,
Je vous montre juste comment effectuer des tests de bout en bout.
Donc, je vais m'en tenir à ce qui a déjà été mis en place par l'interface de ligne de commande angulaire.
Nous allons travailler avec les fichiers que nous avons disponibles ici.
Alors, jetons un coup d'œil à ces deux fichiers ici, l'app.e2e-spec.ts,
et vous verrez qu'un certain code a déjà été échafaudé dans ce fichier par angulaire.
Aussi, cet autre fichier appelé app.po.ts,
ce n'est rien d'autre qu'une classe JavaScript standard
qui a été configurée avec quelques méthodes ici.
Maintenant, ce que nous allons faire est d'ajouter quelques méthodes supplémentaires à
cette classe JavaScript et aussi mettre à jour certaines de ces méthodes qui sont données ici.
Nous allons configurer nos tests dans le fichier app.e2e-spec.ts.
Donc, pour aller de l'avant,
allons à l'application.
Po.ts, puis dans ce fichier, mettons à jour ceci.
Donc, ici, vous voyez que nous avons déjà deux méthodes qui ont été mises en place ici.
Je vais mettre à jour ces méthodes pour leur permettre de prendre un paramètre ici.
Donc, je dirai, navigateto avec un lien,
qui est fourni sous forme de chaîne,
et puis je vais mettre à jour ce navigateur obtenir
utiliser le lien qui est le paramètre de cette méthode.
Alors, qu'est-ce que cela fait ?
Donc, comme vous pouvez le voir,
nous utilisons la syntaxe rapporteur ici.
Donc, cela dit navigateur de retour get link.
Donc, cet appel particulier à cette méthode get du navigateur permettra à
notre application de naviguer vers ce lien particulier qui est fourni comme paramètre ici.
Donc, avant cette mise à jour,
vous avez vu que le lien fourni ici était slash,
ce qui signifie que la racine de notre application angulaire.
Maintenant, j'ai mis à jour ceci pour prendre un paramètre ici.
De même, la deuxième méthode que vous voyez est appelée getParagraphText.
Maintenant, cette méthode est utilisée pour obtenir le contenu interne d'un élément HTML ici.
Donc, pour cela, aussi,
je vais mettre en place un paramètre appelé sélecteur,
qui est un sélecteur CSS que je vais fournir ici.
Donc, vous voyez qu'ici,
Je vais changer ceci pour prendre le sélecteur comme paramètre.
Maintenant, à partir de l'expérience précédente avec le test unitaire,
vous voyez ce que signifie et .css.
C'est la même chose que nous utilisons ici aussi.
Ceci par méthode ici utilisé est maintenant importé de la bibliothèque rapporteur ici.
La méthode de l'élément est également importée à partir de la bibliothèque rapporteur.
Donc, cette méthode d'élément vous permet d'accéder à un élément HTML
en fournissant cette sélection pour l'élément HTML comme paramètre ici.
Donc, vous pouvez dire par css, byID,
et beaucoup d'autres méthodes de ce genre disponibles pour la classe by ici.
Ensuite, la méthode getText,
obtient comme nous voyons le texte interne visible de cet élément particulier.
Donc, c'est une façon de récupérer des informations de
l'élément HTML particulier dans notre fenêtre de navigateur,
, puis vérifier si elle correspond à un modèle que nous spécifions ici.
Donc, avec cette mise à jour de l'app.po.ts,
passons au fichier app.e2e-spec.ts.
Donc, dans ce fichier,
vous remarquerez que nous utilisons la syntaxe Jasmine.
Donc, ici, vous me voyez en utilisant describe et puis qui dit laisser la page AppPage.
Donc, ici, la page est où nous créons cette nouvelle classe appelée AppPage,
que nous avons déclaré dans le fichier app.po.ts en tant que classe JavaScript ici.
Maintenant, c'est juste un moyen pratique de configurer toutes les choses en un seul endroit,
et ensuite de pouvoir les utiliser dans mon code de test lui-même.
Donc, ici, je déclare la page pour faire référence à cet AppPage,
et cela me permettra d'accéder à
les méthodes que j'ai construites dans cette classe ici.
Donc, le premier test que je vais faire est de naviguer vers
la racine de mon application angulaire
et ensuite vérifier s'il y a un modèle spécifique dans cela.
Vous remarquerez que dans ma page d'accueil,
vous aurez la chaîne
appelée Ristorante Con Fusion
à l'intérieur d'un élément H1 dans ma page.
Donc, ce que je vais faire est de naviguer jusqu'à la racine de mon élément HTML.
Ensuite, là-dedans, je vais chercher
la route de l'application, puis chercher la balise H1 à l'intérieur de la route de l'application.
Ensuite, cela devrait égaler cette chaîne particulière ici.
Donc, je vais juste copier
la chaîne Ristorante Con Fusion là et ensuite fournir cela comme paramètre ici.
Donc, je suis juste en train de mettre à jour le test pour vérifier
exactement ce que nous avons dans notre application angulaire mise à jour.
Donc, avec cette configuration,
maintenant je vais faire mon premier test de mon application angulaire.
Alors, sauvegardons tous les changements et revenons à notre terminal.
Dans le terminal, dans mon dossier de projet,
à l'invite, je taperai ng e2e.
Vous remarquerez que cela va démarrer un navigateur.
Dans mon cas, il va démarrer une fenêtre Chrome et ensuite effectuer le test dans cette fenêtre.
Alors, faisons le premier test.
Vous verrez que lorsque le test s'exécute après avoir compilé mon application angulaire,
lorsque le test s'exécute,
alors il s'assurera que le test est réussi.
Vous voyez qu'à l'arrière,
mon navigateur est ouvert par le ng e2e,
et ensuite le test a été effectué dans cette fenêtre de navigateur.
Il est dit que le test a été effectué avec succès ici.
Donc, vous remarquez que même dans ce cas,
il doit démarrer le navigateur,
charger dans mon application angulaire dans le navigateur,
toute l'application angulaire dans le navigateur.
Ensuite, faites le test de mon application angulaire.
À ce stade, assurez-vous que votre serveur,
le serveur JSON est opérationnel,
sinon, votre test échouera,
parce que lorsque le test a été effectué,
il va essayer d'accéder au serveur JSON aussi.
Donc, c'est quelque chose que vous devez vous assurer.
La poursuite de nos tests.
Dans la deuxième étape,
nous allons ajouter quelques méthodes supplémentaires dans cet AppPage.
Class ici. Donc, j'utiliserais une nouvelle méthode
appelée getElement, puis en prenant un paramètre d'un sélecteur.
Cette méthode me permet d'accéder à l'élément,
qui est sélectionné en utilisant le même par le sélecteur CSS.
Alors, je vais juste copier ça.
Donc, dans ce cas, au lieu de simplement obtenir le texte,
il retournera en fait la référence à l'élément lui-même,
et ensuite pour que vous puissiez ajouter d'autres façons
d'accéder à l'information à l'intérieur de cet élément comme nous le demandons.
Dans ce cas, le get-text est utilisé uniquement pour récupérer le texte spécifique.
Nous pourrions utiliser d'autres méthodes sur
cet élément pour récupérer des informations supplémentaires à partir de ces éléments.
Donc, c'est la raison pour laquelle je crée cette méthode ici.
De même, je vais implémenter une autre méthode appelée get tous les éléments.
Maintenant, cela utilise également un paramètre appelé sélecteur juste comme avant.
Ce que fait la méthode getAll est de sélectionner
tous les éléments, puis de les retourner au collier,
afin que, par exemple,
si votre page contient de nombreux éléments h1 en référence à tous soient retournés à mon collier.
Donc, qu'il, je peux alors décider de faire
un appel à un particulier dans cette liste d'éléments.
Donc, pour ce faire,
nous allons utiliser le même retour mais ici,
au lieu de dire sélecteur d'élément,
laissez-moi simplement copier cela et ensuite nous avons une autre méthode appelée
element.all qui nous permet de
accéder à tous les éléments qui correspondent à ce sélecteur particulier.
Le premier retournera le premier élément qui correspond à ce sélecteur.
Après ces mises à jour, nous allons maintenant passer à notre fichier de test et ajouter un nouveau test ici.
Donc, ici encore, j'utilise la syntaxe Jasmine pour ajouter dans le nouveau test ici.
Donc, je vais le dire et ensuite donner une description pour ce test.
Dira Il devrait naviguer vers environ
page nous en cliquant sur le lien.
Maintenant, si vous regardez en arrière votre application Angular,
vous remarquerez que dans votre application Angulaire,
vous avez les liens de navigation en haut de la page.
Donc, ce que nous allons faire dans ce test est d'accéder automatiquement
à l'un de ces liens de navigation et de cliquer dessus.
Maintenant, bien sûr, comme vous vous attendez à ce que cela se fasse par programmation,
plutôt qu'en cliquant manuellement sur le lien.
Donc, pour ce faire,
ce que je vais faire est de naviguer à la racine de mon application Angular et ensuite,
je vais accéder aux liens dans ma barre de navigation en haut.
En disant page, getAllElements et
alors je vais obtenir tous les éléments qui ont la balise a dedans.
Maintenant évidemment, vous aurez beaucoup de ces tags a dans notre page, mais les quatre premiers,
sont les quatre liens dans
la barre de navigation en haut de notre page là dans le composant d'en-tête.
Donc, avoir accès à ces
une note maintenant que j'utilise obtenir tous les éléments donc je vais obtenir un certain nombre d'éléments.
Dans ce cas particulier,
il s'avère être environ 16 tags différents qui vont porter dans cette page là-bas.
Alors, je vais aller sélectionner.
Donc, c'est là que j'utilise cette méthode appelée get et puis je peux spécifier
un index pour l'élément spécifique que je veux.
Donc, j'ai vérifié si vous regardez le fichier de modèle de composants d'en-tête,
vous remarquerez que la toute seconde une balise dans
la page HTML du composant d'en-tête fait référence au lien à propos de nous là-bas.
Donc, c'est à cela que j'ai accès en disant en avoir un.
Zero, bien sûr, fait référence au lien home dans
le composant d'en-tête où nous avons créé notre barre d'outils en haut là-bas.
Donc, j'ai accès à la deuxième donc c'est le lien à propos de là.
Maintenant, une fois que vous obtenez ce lien,
il y a une méthode que rapporteur supporte
sur un élément avec un lien là appelé le clic.
Donc, ceci, comme vous le voyez par programme,
provoque un clic sur cet élément particulier dans la fenêtre de mon navigateur là-bas.
Donc, par programmation, nous réalisons ce que vous réaliseriez normalement
manuellement en accédant physiquement à ce lien et en cliquant dessus à l'aide de votre souris.
Maintenant, une fois que nous cliquons sur le lien, évidemment,
, vous allez naviguer à la page À propos de nous.
Maintenant, dans la page À propos de nous,
si vous allez regarder le modèle de la page À propos de nous,
vous trouverez qu'il y a un élément h3 qui contient le nom de cette page.
Dans cet élément h3,
, vous verrez un texte intitulé About space Us.
Donc, c'est ce que je vais vérifier maintenant.
La raison pour laquelle je vais vérifier cela est pour m'assurer que j'ai vraiment navigué vers
la page À propos de nous en faisant ces étapes dans mon application Angular.
Donc, c'est là que je vais utiliser l'attente.
Nous avons déjà vu l'utilisation de la page attendre et attendre.
getParagraphText et je vais obtenir le texte du paragraphe de
h3 et ceci je m'attends à toBe.
Remarquez l'utilisation de la syntaxe Jasmine ici et cela devrait être À propos de nous.
Donc, en introduisant ce deuxième test dans notre fichier de test ici,
sauvegardons les modifications que nous avons apportées, puis allons exécuter ce test.
Aller au terminal.
Encore une fois, laissez-moi exécuter le test en disant ng e2e
et vous remarquerez que cela passera à nouveau par le même ensemble d'étapes,
et ensuite effectuer les deux tests que j'ai maintenant dans le fichier de test.
Il est intéressant de regarder le test en cours dans le navigateur.
Donc, vous voyez que nous sommes sur la page d'accueil,
vous naviguez maintenant à la page À propos et puis succès.
Donc, nous avons navigué avec succès de
la page d'accueil à la page À propos, puis nous avons vérifié que vous avez navigué vers la page À propos en effectuant
le test spécifique où nous avons vérifié que
le À propos de nous est dans une balise h3 à l'intérieur de la page À propos de nous.
Donc, c'est un autre test de bout en bout que nous pouvons effectuer,
et vous avez vu le test se dérouler juste devant
de vos yeux sans votre intervention manuelle.
J'espère que vous apprécierez ces tests de bout en bout.
Soyons un peu plus ambitieux.
Maintenant, ce que nous allons faire est de naviguer vers un plat particulier,
, puis essayer d'insérer un commentaire dans ce plat.
Maintenant, c'est là que je vais prendre l'aide de Protractor support,
et vous me verrez utiliser d'autres méthodes de
Protractor afin de naviguer vers la page de plat,
nous naviguerons vers le tout premier plat dans notre menu en utilisant
le lien vers la page de détail du plat avec le paramètre de ce plat particulier,
l'ID du plat particulier.
Ensuite, nous identifierons les éléments d'entrée du formulaire,
et ensuite nous taperons automatiquement les informations dans
ces éléments d'entrée, puis essayez de soumettre le formulaire et de voir ce qui se passe.
Donc, pour effectuer ce test, encore une fois,
entrer et en utilisant la syntaxe Jasmine,
je vais introduire un it ici et ensuite j'identifierai ce que ce test essaie de faire.
Je dirais, « Il devrait entrer un nouveau commentaire pour le premier plat
» et la fonction flèche
et vous voyez qu'à l'intérieur de cette fonction flèche,
nous allons faire notre première page navigatePour,
nous allons naviguer vers le plat zéro.
Donc, c'est le tout premier plat de notre menu.
Maintenant, une fois que nous naviguerons vers la page de détail de la vaisselle, nous dirons,
« laissez NewAuthor est égal à la page getElement. »
Donc, nous allons trouver cet élément qui est
input et taper du texte ici,
donc cela m'aidera à identifier cet élément d'entrée où le nom de l'auteur est
tapé dans le formulaire que nous avons créé dans notre page de détail.
Si vous êtes curieux,
allez jeter un oeil à ce formulaire,
et alors vous verrez qu'il y a bel et bien
cet élément d'entrée dans cette page de détail.
Donc, en accédant à cela, je vais taper le nom de l'auteur
dans ce champ de saisie là-bas.
Donc, c'est là que la méthode de SendKeys qui est supportée sur notre élément vient à notre aide,
la méthode de SendKeys supportée par Protractor.
Donc ici, je vais taper le nom de l'auteur en tant qu'auteur de test.
Donc, à la fin de ces deux étapes,
l'auteur du test devrait être tapé dans l'élément d'entrée de mon formulaire.
Maintenant, en plus, j'ai aussi besoin de taper le commentaire pour ce formulaire.
Nous pouvons également configurer la valeur de notation,
mais je ne vais pas le faire dans ce test particulier,
Je vais juste taper la valeur de commentaire en utilisant une approche similaire.
Donc, je dirai, « laissez NewComment »,
encore, obtiendra la page,
getElement, et alors c'est là que je cherche
le textarea et NewComment,
SendKeys et tapez « Test Comment ».
Donc, cela va remplir les mots Test Commentaire dans la zone de texte
qui contient les commentaires que
l'auteur est censé soumettre pour ce plat particulier.
Après cela, nous trouverons le SubmitButton.
Donc, pour ce faire, nous allons dire
page.getElement type de bouton soumettre,
et une fois que nous obtenons le bouton, nous disons simplement, NewSubmitButton.Click.
Donc, une fois que nous cliquerons sur le bouton,
le commentaire le soumettra à nouveau.
Maintenant, je vais utiliser une autre méthode que Protractor prend en charge.
Je vais interrompre le test à ce moment-là.
Cela me permettra de passer le test et ensuite d'effectuer le test ou l'usine,
donc cela dit, le navigateur est indéfini,
donc je dois revenir ici et ensuite importer le navigateur
de la bibliothèque Protractor là-bas,
et puis vous voyez que la ligne rouge squiggly a disparu,
donc mon test devrait tous être mis en place correctement là.
Donc, laissez-moi enregistrer les changements,
nous irons et exécuterons ce troisième test aussi,
avec les deux tests restants que nous avons déjà saisis.
Aller au navigateur, laissez-moi exécuter à nouveau le test de bout en bout,
lorsque le navigateur s'ouvre, voilà,
le premier test a été effectué et qui devrait réussir,
le deuxième test a été effectué et le troisième test où nous avons navigué détail plat,
et vous voyez que le commentaire du test a été soumis correctement par notre test.
Donc, avec cela, nous terminons cet exercice.
Dans cet exercice, vous avez effectué trois tests différents en utilisant le support de
Protractor et constaté que notre application réussit tous ces trois tests de bout en bout.
C'est le bon moment pour vous d'enregistrer les modifications dans
votre dépôt Git en utilisant le test de bout en bout du message.