1
00:00:00,000 --> 00:00:07,245
Maintenant, nous avons une compréhension rapide des tests de bout en bout

2
00:00:07,245 --> 00:00:10,140
et le rôle que jouent les tests de bout en bout

3
00:00:10,140 --> 00:00:15,555
dans la stratégie globale de test des applications angulaires.

4
00:00:15,555 --> 00:00:18,929
Aussi, une brève introduction au rapporteur.

5
00:00:18,929 --> 00:00:22,835
Poursuivons le prochain exercice où nous pourrions employer un rapporteur

6
00:00:22,835 --> 00:00:26,825
et concevoir nos tests de bout en bout.

7
00:00:26,825 --> 00:00:30,960
Il est chanceux que la CLI angulaire

8
00:00:30,960 --> 00:00:35,050
configure automatiquement tout ce dont nous avons besoin pour effectuer des tests de bout en bout,

9
00:00:35,050 --> 00:00:37,935
comme nous le verrons lorsque nous procédons à l'exercice.

10
00:00:37,935 --> 00:00:43,430
Donc, il s'agit de mettre en œuvre les différents tests et

11
00:00:43,430 --> 00:00:50,035
puis d'effectuer le test en utilisant le rapporteur dans cet exercice.

12
00:00:50,035 --> 00:00:53,865
En allant à notre application angulaire dans Visual Studio,

13
00:00:53,865 --> 00:00:56,305
si vous regardez le paquet de notre fichier JSON,

14
00:00:56,305 --> 00:00:59,965
vous verrez que nous trouvons déjà

15
00:00:59,965 --> 00:01:05,640
la CLI angulaire a mis en place tout ce dont nous avons besoin pour effectuer les tests de bout en bout.

16
00:01:05,640 --> 00:01:07,295
Donc, en faisant défiler vers le bas,

17
00:01:07,295 --> 00:01:10,550
vous verrez que le rapporteur a déjà été installé sur

18
00:01:10,550 --> 00:01:16,110
notre ordinateur dans le projet angulaire.

19
00:01:16,110 --> 00:01:23,420
Aussi, nous remarquons qu'il y a ici un dossier séparé

20
00:01:23,420 --> 00:01:26,780
appelé e2e qui contient quelques fichiers

21
00:01:26,780 --> 00:01:30,350
qui ont déjà été configurés pour effectuer des tests de bout en bout.

22
00:01:30,350 --> 00:01:33,890
Maintenant, si vous avez besoin d'effectuer des tests complets de bout en bout,

23
00:01:33,890 --> 00:01:36,620
, alors il est conseillé de créer

24
00:01:36,620 --> 00:01:41,985
un fichier séparé pour chaque ensemble de tests de bout en bout que vous souhaitez effectuer.

25
00:01:41,985 --> 00:01:43,785
Maintenant, dans cet exercice particulier,

26
00:01:43,785 --> 00:01:47,090
Je vous montre juste comment effectuer des tests de bout en bout.

27
00:01:47,090 --> 00:01:51,670
Donc, je vais m'en tenir à ce qui a déjà été mis en place par l'interface de ligne de commande angulaire.

28
00:01:51,670 --> 00:01:55,710
Nous allons travailler avec les fichiers que nous avons disponibles ici.

29
00:01:55,710 --> 00:02:01,405
Alors, jetons un coup d'œil à ces deux fichiers ici, l'app.e2e-spec.ts,

30
00:02:01,405 --> 00:02:09,070
et vous verrez qu'un certain code a déjà été échafaudé dans ce fichier par angulaire.

31
00:02:09,070 --> 00:02:14,035
Aussi, cet autre fichier appelé app.po.ts,

32
00:02:14,035 --> 00:02:17,780
ce n'est rien d'autre qu'une classe JavaScript standard

33
00:02:17,780 --> 00:02:21,170
qui a été configurée avec quelques méthodes ici.

34
00:02:21,170 --> 00:02:24,380
Maintenant, ce que nous allons faire est d'ajouter quelques méthodes supplémentaires à

35
00:02:24,380 --> 00:02:31,375
cette classe JavaScript et aussi mettre à jour certaines de ces méthodes qui sont données ici.

36
00:02:31,375 --> 00:02:40,095
Nous allons configurer nos tests dans le fichier app.e2e-spec.ts.

37
00:02:40,095 --> 00:02:41,860
Donc, pour aller de l'avant,

38
00:02:41,860 --> 00:02:44,875
allons à l'application.

39
00:02:44,875 --> 00:02:49,890
Po.ts, puis dans ce fichier, mettons à jour ceci.

40
00:02:49,890 --> 00:02:55,140
Donc, ici, vous voyez que nous avons déjà deux méthodes qui ont été mises en place ici.

41
00:02:55,140 --> 00:03:01,160
Je vais mettre à jour ces méthodes pour leur permettre de prendre un paramètre ici.

42
00:03:01,160 --> 00:03:05,250
Donc, je dirai, navigateto avec un lien,

43
00:03:05,250 --> 00:03:06,760
qui est fourni sous forme de chaîne,

44
00:03:06,760 --> 00:03:10,970
et puis je vais mettre à jour ce navigateur obtenir

45
00:03:10,970 --> 00:03:15,615
utiliser le lien qui est le paramètre de cette méthode.

46
00:03:15,615 --> 00:03:17,090
Alors, qu'est-ce que cela fait ?

47
00:03:17,090 --> 00:03:18,330
Donc, comme vous pouvez le voir,

48
00:03:18,330 --> 00:03:22,490
nous utilisons la syntaxe rapporteur ici.

49
00:03:22,490 --> 00:03:26,450
Donc, cela dit navigateur de retour get link.

50
00:03:26,450 --> 00:03:32,075
Donc, cet appel particulier à cette méthode get du navigateur permettra à

51
00:03:32,075 --> 00:03:41,440
notre application de naviguer vers ce lien particulier qui est fourni comme paramètre ici.

52
00:03:41,440 --> 00:03:43,650
Donc, avant cette mise à jour,

53
00:03:43,650 --> 00:03:47,200
vous avez vu que le lien fourni ici était slash,

54
00:03:47,200 --> 00:03:50,595
ce qui signifie que la racine de notre application angulaire.

55
00:03:50,595 --> 00:03:54,650
Maintenant, j'ai mis à jour ceci pour prendre un paramètre ici.

56
00:03:54,650 --> 00:04:00,490
De même, la deuxième méthode que vous voyez est appelée getParagraphText.

57
00:04:00,490 --> 00:04:08,685
Maintenant, cette méthode est utilisée pour obtenir le contenu interne d'un élément HTML ici.

58
00:04:08,685 --> 00:04:11,680
Donc, pour cela, aussi,

59
00:04:11,680 --> 00:04:14,770
je vais mettre en place un paramètre appelé sélecteur,

60
00:04:14,770 --> 00:04:20,260
qui est un sélecteur CSS que je vais fournir ici.

61
00:04:20,260 --> 00:04:22,430
Donc, vous voyez qu'ici,

62
00:04:22,430 --> 00:04:28,775
Je vais changer ceci pour prendre le sélecteur comme paramètre.

63
00:04:28,775 --> 00:04:32,885
Maintenant, à partir de l'expérience précédente avec le test unitaire,

64
00:04:32,885 --> 00:04:37,285
vous voyez ce que signifie et .css.

65
00:04:37,285 --> 00:04:40,130
C'est la même chose que nous utilisons ici aussi.

66
00:04:40,130 --> 00:04:47,820
Ceci par méthode ici utilisé est maintenant importé de la bibliothèque rapporteur ici.

67
00:04:47,820 --> 00:04:52,610
La méthode de l'élément est également importée à partir de la bibliothèque rapporteur.

68
00:04:52,610 --> 00:04:56,915
Donc, cette méthode d'élément vous permet d'accéder à un élément HTML

69
00:04:56,915 --> 00:05:02,510
en fournissant cette sélection pour l'élément HTML comme paramètre ici.

70
00:05:02,510 --> 00:05:05,760
Donc, vous pouvez dire par css, byID,

71
00:05:05,760 --> 00:05:11,855
et beaucoup d'autres méthodes de ce genre disponibles pour la classe by ici.

72
00:05:11,855 --> 00:05:13,935
Ensuite, la méthode getText,

73
00:05:13,935 --> 00:05:19,580
obtient comme nous voyons le texte interne visible de cet élément particulier.

74
00:05:19,580 --> 00:05:22,985
Donc, c'est une façon de récupérer des informations de

75
00:05:22,985 --> 00:05:28,520
l'élément HTML particulier dans notre fenêtre de navigateur,

76
00:05:28,520 --> 00:05:33,780
, puis vérifier si elle correspond à un modèle que nous spécifions ici.

77
00:05:33,780 --> 00:05:37,035
Donc, avec cette mise à jour de l'app.po.ts,

78
00:05:37,035 --> 00:05:43,060
passons au fichier app.e2e-spec.ts.

79
00:05:43,060 --> 00:05:44,755
Donc, dans ce fichier,

80
00:05:44,755 --> 00:05:48,630
vous remarquerez que nous utilisons la syntaxe Jasmine.

81
00:05:48,630 --> 00:05:54,730
Donc, ici, vous me voyez en utilisant describe et puis qui dit laisser la page AppPage.

82
00:05:54,730 --> 00:06:01,725
Donc, ici, la page est où nous créons cette nouvelle classe appelée AppPage,

83
00:06:01,725 --> 00:06:08,330
que nous avons déclaré dans le fichier app.po.ts en tant que classe JavaScript ici.

84
00:06:08,330 --> 00:06:13,540
Maintenant, c'est juste un moyen pratique de configurer toutes les choses en un seul endroit,

85
00:06:13,540 --> 00:06:18,950
et ensuite de pouvoir les utiliser dans mon code de test lui-même.

86
00:06:18,950 --> 00:06:24,445
Donc, ici, je déclare la page pour faire référence à cet AppPage,

87
00:06:24,445 --> 00:06:26,809
et cela me permettra d'accéder à

88
00:06:26,809 --> 00:06:30,230
les méthodes que j'ai construites dans cette classe ici.

89
00:06:30,230 --> 00:06:37,680
Donc, le premier test que je vais faire est de naviguer vers

90
00:06:37,680 --> 00:06:42,140
la racine de mon application angulaire

91
00:06:42,140 --> 00:06:46,440
et ensuite vérifier s'il y a un modèle spécifique dans cela.

92
00:06:46,440 --> 00:06:51,375
Vous remarquerez que dans ma page d'accueil,

93
00:06:51,375 --> 00:06:56,170
vous aurez la chaîne

94
00:06:56,170 --> 00:07:03,550
appelée Ristorante Con Fusion

95
00:07:03,550 --> 00:07:06,480
à l'intérieur d'un élément H1 dans ma page.

96
00:07:06,480 --> 00:07:14,370
Donc, ce que je vais faire est de naviguer jusqu'à la racine de mon élément HTML.

97
00:07:14,370 --> 00:07:18,340
Ensuite, là-dedans, je vais chercher

98
00:07:18,340 --> 00:07:23,955
la route de l'application, puis chercher la balise H1 à l'intérieur de la route de l'application.

99
00:07:23,955 --> 00:07:28,210
Ensuite, cela devrait égaler cette chaîne particulière ici.

100
00:07:28,210 --> 00:07:29,620
Donc, je vais juste copier

101
00:07:29,620 --> 00:07:34,530
la chaîne Ristorante Con Fusion là et ensuite fournir cela comme paramètre ici.

102
00:07:34,530 --> 00:07:37,000
Donc, je suis juste en train de mettre à jour le test pour vérifier

103
00:07:37,000 --> 00:07:41,585
exactement ce que nous avons dans notre application angulaire mise à jour.

104
00:07:41,585 --> 00:07:43,200
Donc, avec cette configuration,

105
00:07:43,200 --> 00:07:48,860
maintenant je vais faire mon premier test de mon application angulaire.

106
00:07:48,860 --> 00:07:55,454
Alors, sauvegardons tous les changements et revenons à notre terminal.

107
00:07:55,454 --> 00:08:00,715
Dans le terminal, dans mon dossier de projet,

108
00:08:00,715 --> 00:08:05,965
à l'invite, je taperai ng e2e.

109
00:08:05,965 --> 00:08:11,010
Vous remarquerez que cela va démarrer un navigateur.

110
00:08:11,010 --> 00:08:19,445
Dans mon cas, il va démarrer une fenêtre Chrome et ensuite effectuer le test dans cette fenêtre.

111
00:08:19,445 --> 00:08:21,710
Alors, faisons le premier test.

112
00:08:21,710 --> 00:08:27,100
Vous verrez que lorsque le test s'exécute après avoir compilé mon application angulaire,

113
00:08:27,100 --> 00:08:28,705
lorsque le test s'exécute,

114
00:08:28,705 --> 00:08:33,725
alors il s'assurera que le test est réussi.

115
00:08:33,725 --> 00:08:36,295
Vous voyez qu'à l'arrière,

116
00:08:36,295 --> 00:08:42,055
mon navigateur est ouvert par le ng e2e,

117
00:08:42,055 --> 00:08:46,880
et ensuite le test a été effectué dans cette fenêtre de navigateur.

118
00:08:46,880 --> 00:08:52,025
Il est dit que le test a été effectué avec succès ici.

119
00:08:52,025 --> 00:08:54,390
Donc, vous remarquez que même dans ce cas,

120
00:08:54,390 --> 00:08:56,485
il doit démarrer le navigateur,

121
00:08:56,485 --> 00:08:59,310
charger dans mon application angulaire dans le navigateur,

122
00:08:59,310 --> 00:09:02,370
toute l'application angulaire dans le navigateur.

123
00:09:02,370 --> 00:09:07,210
Ensuite, faites le test de mon application angulaire.

124
00:09:07,210 --> 00:09:12,595
À ce stade, assurez-vous que votre serveur,

125
00:09:12,595 --> 00:09:15,025
le serveur JSON est opérationnel,

126
00:09:15,025 --> 00:09:16,510
sinon, votre test échouera,

127
00:09:16,510 --> 00:09:18,915
parce que lorsque le test a été effectué,

128
00:09:18,915 --> 00:09:22,140
il va essayer d'accéder au serveur JSON aussi.

129
00:09:22,140 --> 00:09:25,300
Donc, c'est quelque chose que vous devez vous assurer.

130
00:09:25,300 --> 00:09:28,035
La poursuite de nos tests.

131
00:09:28,035 --> 00:09:29,915
Dans la deuxième étape,

132
00:09:29,915 --> 00:09:35,290
nous allons ajouter quelques méthodes supplémentaires dans cet AppPage.

133
00:09:35,290 --> 00:09:41,330
Class ici. Donc, j'utiliserais une nouvelle méthode

134
00:09:41,330 --> 00:09:50,730
appelée getElement, puis en prenant un paramètre d'un sélecteur.

135
00:09:51,160 --> 00:09:58,520
Cette méthode me permet d'accéder à l'élément,

136
00:09:58,520 --> 00:10:04,500
qui est sélectionné en utilisant le même par le sélecteur CSS.

137
00:10:04,500 --> 00:10:06,545
Alors, je vais juste copier ça.

138
00:10:06,545 --> 00:10:09,785
Donc, dans ce cas, au lieu de simplement obtenir le texte,

139
00:10:09,785 --> 00:10:13,750
il retournera en fait la référence à l'élément lui-même,

140
00:10:13,750 --> 00:10:17,290
et ensuite pour que vous puissiez ajouter d'autres façons

141
00:10:17,290 --> 00:10:20,910
d'accéder à l'information à l'intérieur de cet élément comme nous le demandons.

142
00:10:20,910 --> 00:10:25,340
Dans ce cas, le get-text est utilisé uniquement pour récupérer le texte spécifique.

143
00:10:25,340 --> 00:10:28,470
Nous pourrions utiliser d'autres méthodes sur

144
00:10:28,470 --> 00:10:31,520
cet élément pour récupérer des informations supplémentaires à partir de ces éléments.

145
00:10:31,520 --> 00:10:37,220
Donc, c'est la raison pour laquelle je crée cette méthode ici.

146
00:10:37,220 --> 00:10:45,595
De même, je vais implémenter une autre méthode appelée get tous les éléments.

147
00:10:45,595 --> 00:10:52,040
Maintenant, cela utilise également un paramètre appelé sélecteur juste comme avant.

148
00:10:52,040 --> 00:10:56,115
Ce que fait la méthode getAll est de sélectionner

149
00:10:56,115 --> 00:11:01,910
tous les éléments, puis de les retourner au collier,

150
00:11:01,910 --> 00:11:03,720
afin que, par exemple,

151
00:11:03,720 --> 00:11:12,990
si votre page contient de nombreux éléments h1 en référence à tous soient retournés à mon collier.

152
00:11:12,990 --> 00:11:16,790
Donc, qu'il, je peux alors décider de faire

153
00:11:16,790 --> 00:11:20,940
un appel à un particulier dans cette liste d'éléments.

154
00:11:20,940 --> 00:11:22,505
Donc, pour ce faire,

155
00:11:22,505 --> 00:11:25,525
nous allons utiliser le même retour mais ici,

156
00:11:25,525 --> 00:11:28,395
au lieu de dire sélecteur d'élément,

157
00:11:28,395 --> 00:11:33,165
laissez-moi simplement copier cela et ensuite nous avons une autre méthode appelée

158
00:11:33,165 --> 00:11:37,340
element.all qui nous permet de

159
00:11:37,340 --> 00:11:41,750
accéder à tous les éléments qui correspondent à ce sélecteur particulier.

160
00:11:41,750 --> 00:11:45,790
Le premier retournera le premier élément qui correspond à ce sélecteur.

161
00:11:45,790 --> 00:11:55,805
Après ces mises à jour, nous allons maintenant passer à notre fichier de test et ajouter un nouveau test ici.

162
00:11:55,805 --> 00:12:01,755
Donc, ici encore, j'utilise la syntaxe Jasmine pour ajouter dans le nouveau test ici.

163
00:12:01,755 --> 00:12:06,980
Donc, je vais le dire et ensuite donner une description pour ce test.

164
00:12:06,980 --> 00:12:13,510
Dira Il devrait naviguer vers environ

165
00:12:13,510 --> 00:12:22,645
page nous en cliquant sur le lien.

166
00:12:22,645 --> 00:12:25,705
Maintenant, si vous regardez en arrière votre application Angular,

167
00:12:25,705 --> 00:12:28,530
vous remarquerez que dans votre application Angulaire,

168
00:12:28,530 --> 00:12:36,735
vous avez les liens de navigation en haut de la page.

169
00:12:36,735 --> 00:12:40,680
Donc, ce que nous allons faire dans ce test est d'accéder automatiquement

170
00:12:40,680 --> 00:12:45,500
à l'un de ces liens de navigation et de cliquer dessus.

171
00:12:45,500 --> 00:12:49,545
Maintenant, bien sûr, comme vous vous attendez à ce que cela se fasse par programmation,

172
00:12:49,545 --> 00:12:54,320
plutôt qu'en cliquant manuellement sur le lien.

173
00:12:54,320 --> 00:12:55,630
Donc, pour ce faire,

174
00:12:55,630 --> 00:13:05,325
ce que je vais faire est de naviguer à la racine de mon application Angular et ensuite,

175
00:13:05,325 --> 00:13:23,430
je vais accéder aux liens dans ma barre de navigation en haut.

176
00:13:23,430 --> 00:13:27,850
En disant page, getAllElements et

177
00:13:27,850 --> 00:13:32,815
alors je vais obtenir tous les éléments qui ont la balise a dedans.

178
00:13:32,815 --> 00:13:40,994
Maintenant évidemment, vous aurez beaucoup de ces tags a dans notre page, mais les quatre premiers,

179
00:13:40,994 --> 00:13:44,950
sont les quatre liens dans

180
00:13:44,950 --> 00:13:52,100
la barre de navigation en haut de notre page là dans le composant d'en-tête.

181
00:13:52,100 --> 00:13:54,420
Donc, avoir accès à ces

182
00:13:54,420 --> 00:14:00,710
une note maintenant que j'utilise obtenir tous les éléments donc je vais obtenir un certain nombre d'éléments.

183
00:14:00,710 --> 00:14:01,770
Dans ce cas particulier,

184
00:14:01,770 --> 00:14:07,850
il s'avère être environ 16 tags différents qui vont porter dans cette page là-bas.

185
00:14:07,850 --> 00:14:10,640
Alors, je vais aller sélectionner.

186
00:14:10,640 --> 00:14:15,800
Donc, c'est là que j'utilise cette méthode appelée get et puis je peux spécifier

187
00:14:15,800 --> 00:14:20,490
un index pour l'élément spécifique que je veux.

188
00:14:20,490 --> 00:14:26,460
Donc, j'ai vérifié si vous regardez le fichier de modèle de composants d'en-tête,

189
00:14:26,460 --> 00:14:30,840
vous remarquerez que la toute seconde une balise dans

190
00:14:30,840 --> 00:14:38,950
la page HTML du composant d'en-tête fait référence au lien à propos de nous là-bas.

191
00:14:38,950 --> 00:14:42,905
Donc, c'est à cela que j'ai accès en disant en avoir un.

192
00:14:42,905 --> 00:14:46,410
Zero, bien sûr, fait référence au lien home dans

193
00:14:46,410 --> 00:14:51,155
le composant d'en-tête où nous avons créé notre barre d'outils en haut là-bas.

194
00:14:51,155 --> 00:14:55,745
Donc, j'ai accès à la deuxième donc c'est le lien à propos de là.

195
00:14:55,745 --> 00:14:59,100
Maintenant, une fois que vous obtenez ce lien,

196
00:14:59,100 --> 00:15:03,030
il y a une méthode que rapporteur supporte

197
00:15:03,030 --> 00:15:08,045
sur un élément avec un lien là appelé le clic.

198
00:15:08,045 --> 00:15:11,335
Donc, ceci, comme vous le voyez par programme,

199
00:15:11,335 --> 00:15:17,160
provoque un clic sur cet élément particulier dans la fenêtre de mon navigateur là-bas.

200
00:15:17,160 --> 00:15:21,840
Donc, par programmation, nous réalisons ce que vous réaliseriez normalement

201
00:15:21,840 --> 00:15:27,160
manuellement en accédant physiquement à ce lien et en cliquant dessus à l'aide de votre souris.

202
00:15:27,160 --> 00:15:29,790
Maintenant, une fois que nous cliquons sur le lien, évidemment,

203
00:15:29,790 --> 00:15:33,400
, vous allez naviguer à la page À propos de nous.

204
00:15:33,400 --> 00:15:35,020
Maintenant, dans la page À propos de nous,

205
00:15:35,020 --> 00:15:37,780
si vous allez regarder le modèle de la page À propos de nous,

206
00:15:37,780 --> 00:15:45,105
vous trouverez qu'il y a un élément h3 qui contient le nom de cette page.

207
00:15:45,105 --> 00:15:46,810
Dans cet élément h3,

208
00:15:46,810 --> 00:15:51,640
, vous verrez un texte intitulé About space Us.

209
00:15:51,640 --> 00:15:53,990
Donc, c'est ce que je vais vérifier maintenant.

210
00:15:53,990 --> 00:15:58,440
La raison pour laquelle je vais vérifier cela est pour m'assurer que j'ai vraiment navigué vers

211
00:15:58,440 --> 00:16:04,200
la page À propos de nous en faisant ces étapes dans mon application Angular.

212
00:16:04,200 --> 00:16:07,685
Donc, c'est là que je vais utiliser l'attente.

213
00:16:07,685 --> 00:16:14,375
Nous avons déjà vu l'utilisation de la page attendre et attendre.

214
00:16:14,375 --> 00:16:18,990
getParagraphText et je vais obtenir le texte du paragraphe de

215
00:16:18,990 --> 00:16:25,365
h3 et ceci je m'attends à toBe.

216
00:16:25,365 --> 00:16:33,430
Remarquez l'utilisation de la syntaxe Jasmine ici et cela devrait être À propos de nous.

217
00:16:34,460 --> 00:16:42,895
Donc, en introduisant ce deuxième test dans notre fichier de test ici,

218
00:16:42,895 --> 00:16:48,950
sauvegardons les modifications que nous avons apportées, puis allons exécuter ce test.

219
00:16:49,510 --> 00:16:52,915
Aller au terminal.

220
00:16:52,915 --> 00:16:57,680
Encore une fois, laissez-moi exécuter le test en disant ng e2e

221
00:16:57,680 --> 00:17:03,220
et vous remarquerez que cela passera à nouveau par le même ensemble d'étapes,

222
00:17:03,220 --> 00:17:09,880
et ensuite effectuer les deux tests que j'ai maintenant dans le fichier de test.

223
00:17:09,880 --> 00:17:15,110
Il est intéressant de regarder le test en cours dans le navigateur.

224
00:17:15,110 --> 00:17:17,390
Donc, vous voyez que nous sommes sur la page d'accueil,

225
00:17:17,390 --> 00:17:22,595
vous naviguez maintenant à la page À propos et puis succès.

226
00:17:22,595 --> 00:17:25,840
Donc, nous avons navigué avec succès de

227
00:17:25,840 --> 00:17:29,290
la page d'accueil à la page À propos, puis nous avons vérifié que vous avez navigué vers la page À propos en effectuant

228
00:17:29,290 --> 00:17:31,450
le test spécifique où nous avons vérifié que

229
00:17:31,450 --> 00:17:39,515
le À propos de nous est dans une balise h3 à l'intérieur de la page À propos de nous.

230
00:17:39,515 --> 00:17:43,270
Donc, c'est un autre test de bout en bout que nous pouvons effectuer,

231
00:17:43,270 --> 00:17:46,320
et vous avez vu le test se dérouler juste devant

232
00:17:46,320 --> 00:17:49,855
de vos yeux sans votre intervention manuelle.

233
00:17:49,855 --> 00:17:53,840
J'espère que vous apprécierez ces tests de bout en bout.

234
00:17:53,840 --> 00:17:55,725
Soyons un peu plus ambitieux.

235
00:17:55,725 --> 00:18:00,280
Maintenant, ce que nous allons faire est de naviguer vers un plat particulier,

236
00:18:00,280 --> 00:18:04,615
, puis essayer d'insérer un commentaire dans ce plat.

237
00:18:04,615 --> 00:18:09,155
Maintenant, c'est là que je vais prendre l'aide de Protractor support,

238
00:18:09,155 --> 00:18:13,020
et vous me verrez utiliser d'autres méthodes de

239
00:18:13,020 --> 00:18:17,675
Protractor afin de naviguer vers la page de plat,

240
00:18:17,675 --> 00:18:23,570
nous naviguerons vers le tout premier plat dans notre menu en utilisant

241
00:18:23,570 --> 00:18:30,185
le lien vers la page de détail du plat avec le paramètre de ce plat particulier,

242
00:18:30,185 --> 00:18:31,995
l'ID du plat particulier.

243
00:18:31,995 --> 00:18:39,385
Ensuite, nous identifierons les éléments d'entrée du formulaire,

244
00:18:39,385 --> 00:18:42,990
et ensuite nous taperons automatiquement les informations dans

245
00:18:42,990 --> 00:18:47,425
ces éléments d'entrée, puis essayez de soumettre le formulaire et de voir ce qui se passe.

246
00:18:47,425 --> 00:18:49,975
Donc, pour effectuer ce test, encore une fois,

247
00:18:49,975 --> 00:18:52,830
entrer et en utilisant la syntaxe Jasmine,

248
00:18:52,830 --> 00:18:59,595
je vais introduire un it ici et ensuite j'identifierai ce que ce test essaie de faire.

249
00:18:59,595 --> 00:19:07,904
Je dirais, « Il devrait entrer un nouveau commentaire pour le premier plat

250
00:19:07,904 --> 00:19:15,470
» et la fonction flèche

251
00:19:15,470 --> 00:19:20,450
et vous voyez qu'à l'intérieur de cette fonction flèche,

252
00:19:20,450 --> 00:19:27,985
nous allons faire notre première page navigatePour,

253
00:19:27,985 --> 00:19:35,660
nous allons naviguer vers le plat zéro.

254
00:19:35,660 --> 00:19:39,235
Donc, c'est le tout premier plat de notre menu.

255
00:19:39,235 --> 00:19:43,060
Maintenant, une fois que nous naviguerons vers la page de détail de la vaisselle, nous dirons,

256
00:19:43,060 --> 00:19:52,030
« laissez NewAuthor est égal à la page getElement. »

257
00:19:52,030 --> 00:19:56,860
Donc, nous allons trouver cet élément qui est

258
00:19:56,860 --> 00:20:03,990
input et taper du texte ici,

259
00:20:03,990 --> 00:20:10,010
donc cela m'aidera à identifier cet élément d'entrée où le nom de l'auteur est

260
00:20:10,010 --> 00:20:17,115
tapé dans le formulaire que nous avons créé dans notre page de détail.

261
00:20:17,115 --> 00:20:19,885
Si vous êtes curieux,

262
00:20:19,885 --> 00:20:21,380
allez jeter un oeil à ce formulaire,

263
00:20:21,380 --> 00:20:23,645
et alors vous verrez qu'il y a bel et bien

264
00:20:23,645 --> 00:20:27,730
cet élément d'entrée dans cette page de détail.

265
00:20:27,730 --> 00:20:33,700
Donc, en accédant à cela, je vais taper le nom de l'auteur

266
00:20:33,700 --> 00:20:39,890
dans ce champ de saisie là-bas.

267
00:20:39,890 --> 00:20:47,590
Donc, c'est là que la méthode de SendKeys qui est supportée sur notre élément vient à notre aide,

268
00:20:47,590 --> 00:20:50,170
la méthode de SendKeys supportée par Protractor.

269
00:20:50,170 --> 00:20:56,805
Donc ici, je vais taper le nom de l'auteur en tant qu'auteur de test.

270
00:20:56,805 --> 00:21:01,750
Donc, à la fin de ces deux étapes,

271
00:21:01,750 --> 00:21:07,105
l'auteur du test devrait être tapé dans l'élément d'entrée de mon formulaire.

272
00:21:07,105 --> 00:21:11,475
Maintenant, en plus, j'ai aussi besoin de taper le commentaire pour ce formulaire.

273
00:21:11,475 --> 00:21:14,660
Nous pouvons également configurer la valeur de notation,

274
00:21:14,660 --> 00:21:16,770
mais je ne vais pas le faire dans ce test particulier,

275
00:21:16,770 --> 00:21:21,530
Je vais juste taper la valeur de commentaire en utilisant une approche similaire.

276
00:21:21,530 --> 00:21:26,250
Donc, je dirai, « laissez NewComment »,

277
00:21:26,250 --> 00:21:29,650
encore, obtiendra la page,

278
00:21:29,660 --> 00:21:34,690
getElement, et alors c'est là que je cherche

279
00:21:34,690 --> 00:21:42,080
le textarea et NewComment,

280
00:21:43,170 --> 00:21:52,340
SendKeys et tapez « Test Comment ».

281
00:21:52,650 --> 00:21:59,990
Donc, cela va remplir les mots Test Commentaire dans la zone de texte

282
00:21:59,990 --> 00:22:02,380
qui contient les commentaires que

283
00:22:02,380 --> 00:22:07,130
l'auteur est censé soumettre pour ce plat particulier.

284
00:22:07,130 --> 00:22:12,530
Après cela, nous trouverons le SubmitButton.

285
00:22:12,990 --> 00:22:15,430
Donc, pour ce faire, nous allons dire

286
00:22:15,430 --> 00:22:33,050
page.getElement type de bouton soumettre,

287
00:22:33,570 --> 00:22:44,390
et une fois que nous obtenons le bouton, nous disons simplement, NewSubmitButton.Click.

288
00:22:44,390 --> 00:22:46,330
Donc, une fois que nous cliquerons sur le bouton,

289
00:22:46,330 --> 00:22:48,610
le commentaire le soumettra à nouveau.

290
00:22:48,610 --> 00:22:55,930
Maintenant, je vais utiliser une autre méthode que Protractor prend en charge.

291
00:22:55,930 --> 00:23:00,200
Je vais interrompre le test à ce moment-là.

292
00:23:00,200 --> 00:23:06,170
Cela me permettra de passer le test et ensuite d'effectuer le test ou l'usine,

293
00:23:06,170 --> 00:23:09,160
donc cela dit, le navigateur est indéfini,

294
00:23:09,160 --> 00:23:14,210
donc je dois revenir ici et ensuite importer le navigateur

295
00:23:18,930 --> 00:23:32,155
de la bibliothèque Protractor là-bas,

296
00:23:32,155 --> 00:23:35,840
et puis vous voyez que la ligne rouge squiggly a disparu,

297
00:23:35,840 --> 00:23:39,175
donc mon test devrait tous être mis en place correctement là.

298
00:23:39,175 --> 00:23:40,935
Donc, laissez-moi enregistrer les changements,

299
00:23:40,935 --> 00:23:44,320
nous irons et exécuterons ce troisième test aussi,

300
00:23:44,320 --> 00:23:48,505
avec les deux tests restants que nous avons déjà saisis.

301
00:23:48,505 --> 00:23:54,375
Aller au navigateur, laissez-moi exécuter à nouveau le test de bout en bout,

302
00:23:54,375 --> 00:23:57,765
lorsque le navigateur s'ouvre, voilà,

303
00:23:57,765 --> 00:24:02,810
le premier test a été effectué et qui devrait réussir,

304
00:24:02,810 --> 00:24:08,780
le deuxième test a été effectué et le troisième test où nous avons navigué détail plat,

305
00:24:08,780 --> 00:24:18,145
et vous voyez que le commentaire du test a été soumis correctement par notre test.

306
00:24:18,145 --> 00:24:21,195
Donc, avec cela, nous terminons cet exercice.

307
00:24:21,195 --> 00:24:27,730
Dans cet exercice, vous avez effectué trois tests différents en utilisant le support de

308
00:24:27,730 --> 00:24:35,430
Protractor et constaté que notre application réussit tous ces trois tests de bout en bout.

309
00:24:35,430 --> 00:24:39,075
C'est le bon moment pour vous d'enregistrer les modifications dans

310
00:24:39,075 --> 00:24:46,420
votre dépôt Git en utilisant le test de bout en bout du message.