1
00:00:00,000 --> 00:00:04,858
[MUSIQUE]

2
00:00:04,858 --> 00:00:09,967
Le parfum du jasmin de toutes ces guirlandes de fleurs

3
00:00:09,967 --> 00:00:14,218
sur la rue du temple qui se répandait dans les airs.

4
00:00:14,218 --> 00:00:17,684
Quel sentiment de règlement.

5
00:00:17,684 --> 00:00:20,510
Ça doit être le bon karma de ma vie passée.

6
00:00:23,749 --> 00:00:25,857
Désolé, où étais-je ?

7
00:00:25,857 --> 00:00:29,703
Je te parlais de tests angulaires, non ?

8
00:00:29,703 --> 00:00:34,743
Et nous allons utiliser l'ajustement du karma pour faire nos tests angulaires.

9
00:00:34,743 --> 00:00:37,769
Alors allons-y.

10
00:00:37,769 --> 00:00:45,571
Une bonne chose à propos de l'utilisation de l'interface de ligne de commande Angular est qu'il configure tous les échafaudages pour

11
00:00:45,571 --> 00:00:49,869
vous pour inclure automatiquement le support pour

12
00:00:49,869 --> 00:00:53,393
tester votre application Angular.

13
00:00:53,393 --> 00:00:59,108
Donc, vous remarquerez que chaque fois que vous générez un composant ou

14
00:00:59,108 --> 00:01:03,454
un service avec les fichiers ts du composant,

15
00:01:03,454 --> 00:01:08,942
vous remarquerez également un fichier appelé component.spect.ts

16
00:01:08,942 --> 00:01:13,422
déjà inclus dans vos dossiers de projet.

17
00:01:13,422 --> 00:01:17,423
Et aussi, si vous allez dans le fichier package.json,

18
00:01:17,423 --> 00:01:24,434
vous verrez qu'il y a déjà un support pour les tests Angular inclus.

19
00:01:24,434 --> 00:01:30,640
Donc, si vous allez dans les dépendances de dev, vous verrez que le noyau jasmin,

20
00:01:30,640 --> 00:01:34,201
le reporter spec jasmin, les modules npm liés au karma et

21
00:01:34,201 --> 00:01:39,394
karma sont déjà installés dans votre application angulaire

22
00:01:39,394 --> 00:01:44,414
qui est échafaudage par Angular CLI.

23
00:01:44,414 --> 00:01:47,716
Donc, nous avons toutes les choses et la place pour

24
00:01:47,716 --> 00:01:53,538
nous pour simplement faire nos tests pour notre application angulaire.

25
00:01:53,538 --> 00:01:58,617
Donc, si vous regardez autour, vous verrez qu'il y a

26
00:01:58,617 --> 00:02:03,572
un fichier appelé test.ts dans votre dossier source,

27
00:02:03,572 --> 00:02:07,269
alors ouvrons le fichier test.ts.

28
00:02:07,269 --> 00:02:11,518
Vous verrez également qu'il y a un autre dossier appelé à e2e.

29
00:02:11,518 --> 00:02:16,409
Nous reviendrons à cela dans le prochain exercice.

30
00:02:16,409 --> 00:02:21,232
Mais dans le dossier test.ts, vous verrez que c'est là que

31
00:02:21,232 --> 00:02:25,084
votre support karma est configuré ici.

32
00:02:25,084 --> 00:02:29,551
Donc, en entrant dans ce fichier test.ts, par défaut,

33
00:02:29,551 --> 00:02:33,907
lorsque vous utilisez le support CLS angulaire pour le test,

34
00:02:33,907 --> 00:02:38,261
il exécutera les tests pour tous les composants et services

35
00:02:38,261 --> 00:02:43,750
qui sont inclus dans votre application angulaire.

36
00:02:43,750 --> 00:02:49,017
Maintenant, je vais vous illustrer comment faire des tests pour

37
00:02:49,017 --> 00:02:53,516
un composant spécifique, le MenuComponent.

38
00:02:53,516 --> 00:03:00,469
Donc, je veux me limiter à utiliser uniquement le composant de menu .spec fichier et

39
00:03:00,469 --> 00:03:04,696
faire les tests pour seulement le composant de menu.

40
00:03:04,696 --> 00:03:07,823
Alors, allez dans le fichier test.ts.

41
00:03:07,823 --> 00:03:16,388
Une façon de configurer le test des CLIS angulaires pour exécuter le test uniquement pour

42
00:03:16,388 --> 00:03:22,397
un composant spécifique est d'aller à cette ligne ici,

43
00:03:22,397 --> 00:03:29,308
qui dit contexte const et puis changer ceci en menu,

44
00:03:29,308 --> 00:03:36,088
vous pouvez voir /menu \ .component et fichier spec.ts.

45
00:03:36,088 --> 00:03:41,615
Auparavant, c'était juste le fichier/ \ .spec.ts, ce qui signifiait que vous

46
00:03:41,615 --> 00:03:47,992
exécuterez tous les fichiers spec qui se trouvent dans votre dossier source de projet.

47
00:03:47,992 --> 00:03:51,379
Donc, en ce moment, en spécifiant ceci ici,

48
00:03:51,379 --> 00:03:57,225
Je suis intéressé à exécuter le test uniquement pour le fichier de spécification du composant de menu ici.

49
00:03:57,225 --> 00:04:02,285
Maintenant, je comprends en cherchant autour du débordement de pile

50
00:04:02,285 --> 00:04:08,268
où j'ai trouvé quelqu'un me donnant la réponse à cela,

51
00:04:08,268 --> 00:04:12,985
pointant vers une ressource sur Angular CLI, et donc

52
00:04:12,985 --> 00:04:18,393
c'est ainsi que j'ai compris que c'est la façon de restreindre

53
00:04:18,393 --> 00:04:23,019
le test au fichier de test d'un composant spécifique.

54
00:04:23,019 --> 00:04:28,465
Donc, après avoir apporté une modification au fichier test.ts, sauvegardons la modification.

55
00:04:28,465 --> 00:04:32,622
Maintenant, nous allons essayer d'exécuter notre test sur le composant de menu.

56
00:04:32,622 --> 00:04:37,198
Ainsi, comme vous le voyez, dans le composant menu, nous avons déjà le fichier .spec.ts du composant menu

57
00:04:37,198 --> 00:04:42,051
, qui contient déjà du code.

58
00:04:42,051 --> 00:04:45,631
Essayons de faire ce test et de voir ce qui se passe.

59
00:04:45,631 --> 00:04:50,650
En allant au terminal, ajoutez l'invite, tapez ng test, et ce

60
00:04:50,650 --> 00:04:56,644
entraînera une CLI angulaire démarrant le test pour le composant de menu.

61
00:04:56,644 --> 00:04:59,875
Donc, lorsque vous tapez ceci et appuyez sur le retour,

62
00:04:59,875 --> 00:05:05,216
alors Angular CLI commencera à compiler votre application angulaire.

63
00:05:05,216 --> 00:05:10,129
Il va également ouvrir une fenêtre de navigateur, dans mon cas, il va ouvrir une fenêtre de navigateur Chrome

64
00:05:10,129 --> 00:05:13,874
et ensuite utiliser cette fenêtre de navigateur pour exécuter le test.

65
00:05:13,874 --> 00:05:20,992
Et vous voyez que dans le dos, vous avez la fenêtre du navigateur Chrome en cours d'exécution et

66
00:05:20,992 --> 00:05:25,980
il est plein de rouge et tout un tas de mots là-bas.

67
00:05:25,980 --> 00:05:30,937
Les mêmes informations seront également imprimées dans votre fenêtre de console,

68
00:05:30,937 --> 00:05:34,980
et à partir de cela, je peux voir que mon test n'a pas fonctionné correctement.

69
00:05:34,980 --> 00:05:41,070
Il y a quelque chose qui n'est pas configuré correctement dans mon fichier de test, donc je vais devoir aller et

70
00:05:41,070 --> 00:05:47,272
modifier mon fichier de test pour inclure le support approprié pour exécuter ce test correctement.

71
00:05:47,272 --> 00:05:51,425
Alors allons au fichier spec.ts du composant de menu et

72
00:05:51,425 --> 00:05:54,430
, puis préparons notre test en conséquence.

73
00:05:54,430 --> 00:06:00,134
Maintenant, nous pouvons laisser le test ng courir ici.

74
00:06:00,134 --> 00:06:04,337
Chaque fois que vous apportez des modifications au fichier mini component.ts ou

75
00:06:04,337 --> 00:06:07,169
au fichier mini component.spec.ts et

76
00:06:07,169 --> 00:06:12,078
enregistrez les modifications, ce test s'exécutera automatiquement à ce moment-là.

77
00:06:12,078 --> 00:06:17,011
Alors, allons au fichier MenuComponent.spect.ts.

78
00:06:17,011 --> 00:06:21,882
En allant dans le fichier MenuComponent.spect.ts,

79
00:06:21,882 --> 00:06:30,417
, nous comprenons que le fichier spect utilise la syntaxe Jasmine pour décrire le test.

80
00:06:30,417 --> 00:06:33,478
Donc, vous avez déjà remarqué qu'il y a quelque chose ici

81
00:06:33,478 --> 00:06:38,118
qui commence par décrire et puis il y a une fonction définie là-dedans.

82
00:06:38,118 --> 00:06:43,174
C'est donc ce à quoi je faisais allusion quand j'ai parlé de la syntaxe Jasmine plus tôt.

83
00:06:43,174 --> 00:06:47,961
Et aussi si vous faites défiler vers le bas, vous verrez un ou deux là-dedans.

84
00:06:47,961 --> 00:06:53,922
Et en plus, vous verrez quelque chose appelé BeforeEach, ici.

85
00:06:53,922 --> 00:06:59,594
Examinons ce fichier un peu plus en détail pour comprendre comment ce fichier

86
00:06:59,594 --> 00:07:05,794
est configuré, et comment ce test est configuré dans ce fichier particulier.

87
00:07:05,794 --> 00:07:10,843
Donc, dans ce fichier de test, vous remarquerez que

88
00:07:10,843 --> 00:07:17,979
nous importons ici un ensemble de classes de test de noyau angulaire.

89
00:07:17,979 --> 00:07:22,874
Ainsi, ce module vous permet de fournir le support de test pour

90
00:07:22,874 --> 00:07:29,603
votre application angulaire, et vous permet de concevoir le test pour votre composant.

91
00:07:29,603 --> 00:07:33,304
Donc, vous voyez que j'importe async et

92
00:07:33,304 --> 00:07:39,105
ComponentFixture et TestBed à partir de cette bibliothèque de tests.

93
00:07:39,105 --> 00:07:40,955
Je vais l'appeler bibliothèque de tests.

94
00:07:40,955 --> 00:07:44,783
Vous voyez également que MenuComponent est également importé ici.

95
00:07:44,783 --> 00:07:47,220
Maintenant, une fois que nous avons compris ces deux-là,

96
00:07:47,220 --> 00:07:51,788
nous allons descendre le code pour comprendre ce que nous essayons de faire ici.

97
00:07:51,788 --> 00:07:56,358
Donc, ici, comme vous vous y attendez, cette description ici est

98
00:07:56,358 --> 00:08:02,330
spécifiant que cette fonction particulière décrit,

99
00:08:02,330 --> 00:08:08,129
Un test basé sur Jasmine que nous spécifions pour notre application Angular.

100
00:08:08,129 --> 00:08:11,056
Donc, quand vous regardez la description ici,

101
00:08:11,056 --> 00:08:15,181
vous verrez que cela inclut tout ce code ici.

102
00:08:15,181 --> 00:08:19,950
Donc, cela fait partie d'un seul ensemble de tests que nous exécutons sont notre composant de menu

103
00:08:19,950 --> 00:08:21,670
.

104
00:08:21,670 --> 00:08:26,670
Donc, à l'intérieur de la description, vous verrez qu'il y a une chaîne ici.

105
00:08:26,670 --> 00:08:32,120
Ceci spécifie cet ensemble particulier de tests que vous exécutez ici.

106
00:08:32,120 --> 00:08:34,130
Donc, il est dit sur le composant de menu.

107
00:08:34,130 --> 00:08:36,770
Donc ici, vous pouvez spécifier la chaîne que vous voulez.

108
00:08:36,770 --> 00:08:39,930
Vous pouvez l'utiliser comme description pour

109
00:08:39,930 --> 00:08:43,610
spécifier ce que fait cet ensemble de tests particulier.

110
00:08:43,610 --> 00:08:46,930
Alors ici, je vais rester avec une chose avant.

111
00:08:46,930 --> 00:08:49,380
Nous essayons de tester le composant de menu.

112
00:08:49,380 --> 00:08:53,320
Et après cela, vous voyez que nous spécifions une fonction addo ici.

113
00:08:53,320 --> 00:08:57,036
Dans cette fonction addo, nous allons construire le test.

114
00:08:57,036 --> 00:09:00,700
Pour notre MenuComponent ici.

115
00:09:00,700 --> 00:09:05,670
Donc, après cela, vous verrez que nous déclarons une variable appelée composant,

116
00:09:05,670 --> 00:09:08,080
qui est du type MenuComponent.

117
00:09:08,080 --> 00:09:11,950
De temps en temps, nous déclarons également une variable d'installation,

118
00:09:11,950 --> 00:09:14,140
qui est du type ComponentFixture.

119
00:09:15,390 --> 00:09:19,060
Qui est du type MenuComponent.

120
00:09:19,060 --> 00:09:21,180
Maintenant, pourquoi est-ce intéressant ?

121
00:09:21,180 --> 00:09:24,450
Maintenant, dans notre application Angular,

122
00:09:24,450 --> 00:09:27,130
nous avons le MenuComponent que nous avons déjà conçu.

123
00:09:27,130 --> 00:09:29,990
Donc, dans ce fichier de test,

124
00:09:29,990 --> 00:09:35,310
, nous allons créer ce MenuComponent en utilisant le TestBed angulaire,

125
00:09:35,310 --> 00:09:38,110
et ensuite nous allons effectuer les tests sur le MenuComponent.

126
00:09:38,110 --> 00:09:40,580
Nous allons donc isoler le composant MenuComponent, et

127
00:09:40,580 --> 00:09:45,760
ensuite effectuer des tests unitaires sur ce composant spécifique.

128
00:09:45,760 --> 00:09:50,470
Maintenant, c'est là que les utilitaires de test angulaires

129
00:09:50,470 --> 00:09:54,900
qui viennent avec le support en utilisant TestBed.

130
00:09:54,900 --> 00:09:58,890
Le TestBed me permet de configurer l'environnement dans lequel

131
00:09:58,890 --> 00:10:01,280
je peux tester mon composant angulaire.

132
00:10:01,280 --> 00:10:04,935
Donc, ici, vous voyez que nous disons TestBed et

133
00:10:04,935 --> 00:10:11,049
, puis appelons la méthode du module de test de configuration de la classe TestBed ici.

134
00:10:11,049 --> 00:10:14,233
Et à l'intérieur de ce module de test de configuration,

135
00:10:14,233 --> 00:10:19,406
vous pouvez déclarer un tas de choses, et vous me verrez en ajouter plus ici.

136
00:10:19,406 --> 00:10:24,296
Cela agit exactement comme la configuration du module NG

137
00:10:24,296 --> 00:10:27,714
que vous faites pour notre module at là-bas.

138
00:10:27,714 --> 00:10:30,950
Donc toutes les informations dont vous avez besoin pour

139
00:10:30,950 --> 00:10:35,375
configurer le MenuComponent seront déclarées ici.

140
00:10:35,375 --> 00:10:40,022
Donc, la partie de modèle NG que vous avez vu dans le module d'application,

141
00:10:40,022 --> 00:10:45,999
type similaire de syntaxe peut être utilisée ici pour déclarer le support pour

142
00:10:45,999 --> 00:10:49,690
tester le MenuComponent ici.

143
00:10:49,690 --> 00:10:55,849
Et aussi après cela, vous verrez cette fonction appelée à CompileComponents.

144
00:10:55,849 --> 00:11:00,205
Donc, cette méthode compilera le MenuComponent et

145
00:11:00,205 --> 00:11:03,427
le rendra prêt pour faire les tests.

146
00:11:03,427 --> 00:11:08,852
Notez aussi que toute cette chose, cette fonction ici,

147
00:11:08,852 --> 00:11:14,250
est enfermée dans quelque chose appelé asynchrone ici.

148
00:11:14,250 --> 00:11:16,548
Maintenant, pourquoi avons-nous besoin de cet asynchrone ?

149
00:11:16,548 --> 00:11:21,315
Maintenant, parce que la préparation des composants à l'aide de cette méthode

150
00:11:21,315 --> 00:11:25,711
CompileComponents prend un certain temps.

151
00:11:25,711 --> 00:11:30,643
Et tant que ce n'est pas terminé, nous ne pouvons pas poursuivre les tests.

152
00:11:30,643 --> 00:11:34,583
Donc, en utilisant le module asynchrone, nous spécifions essentiellement que

153
00:11:34,583 --> 00:11:39,432
je vais attendre que tout cela se termine avant de continuer.

154
00:11:39,432 --> 00:11:42,107
Donc, le module asynchrone comme vous le voyez,

155
00:11:42,107 --> 00:11:47,690
enveloppe une fonction de test dans une zone de test asynchrone.

156
00:11:47,690 --> 00:11:52,510
Donc, ce que cela signifie est que ce test terminera automatiquement

157
00:11:52,510 --> 00:11:56,830
lorsque tous les appels asynchrones à l'intérieur de cette zone sont terminés.

158
00:11:56,830 --> 00:12:03,755
Donc, c'est ce que fait l'utilisation de l'asynchrone que nous avons ici.

159
00:12:03,755 --> 00:12:08,206
Donc ce que cela signifie est que vous pouvez utiliser cette fonction de synchronisation,

160
00:12:08,206 --> 00:12:14,442
soit dans le avant chaque ou dans le il aussi, donc dans le dedans, notre déclaration.

161
00:12:14,442 --> 00:12:20,032
Donc, quand vous le voyez aussi, vous verrez que vous pouvez utiliser l'asynchrone.

162
00:12:20,032 --> 00:12:24,160
Donc, au cas où vous auriez des opérations ici qui se sont faites de manière asynchrone.

163
00:12:24,160 --> 00:12:29,500
Ensuite, vous devez attendre que ces opérations se terminent pour que ce test soit terminé.

164
00:12:29,500 --> 00:12:33,996
Donc, par exemple, si vous appelez un service et attendez que

165
00:12:33,996 --> 00:12:37,070
le service renvoie la valeur alors.

166
00:12:37,070 --> 00:12:41,997
Tout ce qui doit être complété avant de pouvoir continuer.

167
00:12:41,997 --> 00:12:48,603
Donc, ceux-ci sont activés en utilisant cette asynchrone, pour entourer cette fonction ici.

168
00:12:48,603 --> 00:12:53,726
Maintenant, en plus, le second avantChaque, maintenant nous avons séparé

169
00:12:53,726 --> 00:12:59,592
ceci en deux séparés avantChaque ici, parce que nous voulons que cela se termine.

170
00:12:59,592 --> 00:13:04,592
Et ce CompileComponents va prendre un certain temps,

171
00:13:04,592 --> 00:13:09,000
surtout si votre composant utilise un modèle externe,

172
00:13:09,000 --> 00:13:11,570
comme nous le faisons dans notre MenuComponents.

173
00:13:11,570 --> 00:13:16,850
Donc, il faut un certain temps pour que le modèle externe se prépare pour

174
00:13:16,850 --> 00:13:19,430
mes tests pour aller de l'avant.

175
00:13:19,430 --> 00:13:22,210
Donc, nous devons attendre que tout cela se termine.

176
00:13:22,210 --> 00:13:25,634
Alors c'est pourquoi une fois que cela est terminé,

177
00:13:25,634 --> 00:13:30,449
alors nous arriverons à la deuxième partie où nous allons

178
00:13:30,449 --> 00:13:35,710
obtenir quelques références à certaines valeurs du banc d'essai.

179
00:13:35,710 --> 00:13:40,752
Maintenant, qu'est-ce que c'est avantChaque fonction que vous faites ici ?

180
00:13:40,752 --> 00:13:45,718
Ce que le BeforeEach signifie est que tout ce que vous déclarez à l'intérieur ici,

181
00:13:45,718 --> 00:13:49,313
cette fonction sera exécutée avantEach test,

182
00:13:49,313 --> 00:13:53,012
que vous allez spécifier plus tard en utilisant le.

183
00:13:53,012 --> 00:13:57,734
Donc, en utilisant ce BeforeEach, vous pouvez configurer la configuration initiale

184
00:13:57,734 --> 00:14:02,253
pour que votre test continue.

185
00:14:02,253 --> 00:14:05,923
Donc, ce qui signifie qu'ici, nous sommes en train de mettre en place notre TestBed,

186
00:14:05,923 --> 00:14:10,330
préparer notre composant de menu, puis mettre en place quelques choses pour

187
00:14:10,330 --> 00:14:14,752
notre composant de menu, avant de procéder au test.

188
00:14:14,752 --> 00:14:19,292
Donc, pour chacun des tests que vous allez spécifier en utilisant un it ici,

189
00:14:19,292 --> 00:14:23,428
ceux-ci avant chaque ce que vous spécifiez dans ce avant chaque,

190
00:14:23,428 --> 00:14:26,692
sera exécuté avant que le test ne soit effectué.

191
00:14:26,692 --> 00:14:30,008
Donc, comme vous pouvez le voir, je prépare le TestBed.

192
00:14:30,008 --> 00:14:34,980
Puis après, j'ai accès au luminaire.

193
00:14:34,980 --> 00:14:39,143
Donc j'utilise le TestBed, je dis CreateComponent et MenuComponent.

194
00:14:39,143 --> 00:14:43,782
Donc, cela me retournera une référence au MenuComponent que

195
00:14:43,782 --> 00:14:47,215
je crée dans mon script de test ici et

196
00:14:47,215 --> 00:14:52,130
ensuite obtenir une référence à cela, car j'aurai besoin d'une référence à

197
00:14:52,130 --> 00:14:57,178
cela pour y faire quelques manipulations.

198
00:14:57,178 --> 00:15:02,608
De plus, à partir du luminaire, je reçois un accès à l'instance de composant

199
00:15:02,608 --> 00:15:07,324
qui est créée par mon luminaire de composant ici.

200
00:15:07,324 --> 00:15:12,828
Donc, comme vous pouvez le voir, l'appareil de composant du type MenuComponent et

201
00:15:12,828 --> 00:15:18,799
appelant ensuite ComponentInstance, me donne accès à ce composant de menu spécifique

202
00:15:18,799 --> 00:15:25,259
que j'ai créé à l'intérieur du TestBed pour effectuer les tests unitaires.

203
00:15:25,259 --> 00:15:30,004
Maintenant, après cela, nous appelons ça ça DétectChanges.

204
00:15:30,004 --> 00:15:35,482
Maintenant, ce que cela signifie, c'est que cela ne se poursuivra qu'une fois tous les changements

205
00:15:35,482 --> 00:15:40,254
terminés, puis reconnaîtront que les changements sont terminés.

206
00:15:40,254 --> 00:15:45,686
Ainsi, cela déclenchera un cycle de détection des modifications pour ce composant.

207
00:15:45,686 --> 00:15:50,323
Donc ce que cela signifie est que cela garantira que vous avez fait des changements

208
00:15:50,323 --> 00:15:54,086
plus tôt, que tous les changements sont détectés et

209
00:15:54,086 --> 00:16:00,170
tout est stabilisé avant de pouvoir poursuivre votre test.

210
00:16:00,170 --> 00:16:07,500
Maintenant, après cela, nous allons l'utiliser pour configurer notre premier test ici.

211
00:16:07,500 --> 00:16:10,500
Quel est le premier test que nous faisons ici ?

212
00:16:10,500 --> 00:16:11,520
Le premier test,

213
00:16:11,520 --> 00:16:15,670
, ce que nous allons tester est de s'assurer que le composant a été créé.

214
00:16:15,670 --> 00:16:21,848
Donc, ici, j'utilise la syntaxe Jasmin et je le dis.

215
00:16:21,848 --> 00:16:27,035
Et puis ici vous pouvez donner une description sous la forme d'une chaîne

216
00:16:27,035 --> 00:16:31,760
pour spécifier ce que ce test teste réellement.

217
00:16:31,760 --> 00:16:33,640
Donc, ce que nous disons est,

218
00:16:33,640 --> 00:16:37,540
, nous testons pour voir si le composant a été créé ou non.

219
00:16:37,540 --> 00:16:40,810
Donc, pour ce faire, je dis que cela devrait créer un sens que,

220
00:16:40,810 --> 00:16:44,610
cette configuration ici aurait dû créer le composant correctement.

221
00:16:44,610 --> 00:16:49,350
Donc c'est pourquoi à l'intérieur ici, j'utilise cette méthode appelée attendre.

222
00:16:49,350 --> 00:16:53,760
Donc, la méthode attendue à l'intérieur ici prend une valeur ici, et

223
00:16:53,760 --> 00:16:57,840
alors vous pouvez tester pour voir si cette valeur satisfait quelque chose.

224
00:16:57,840 --> 00:17:04,640
Donc, ici, nous disons tobeTruthy, ce qui signifie que cette valeur particulière doit être vraie.

225
00:17:04,640 --> 00:17:09,950
C'est ce qui est spécifié par cette méthode appelée ici TobeTruthy.

226
00:17:09,950 --> 00:17:15,010
Vous pouvez également dire TobeFalsy, ce qui signifie que devrait évaluer à faux.

227
00:17:15,010 --> 00:17:15,873
Mais dans ce cas,

228
00:17:15,873 --> 00:17:19,510
nous testons pour nous assurer que le composant a été créé correctement.

229
00:17:19,510 --> 00:17:24,000
C'est pourquoi nous disons que nous attendions à BeTruthy ici.

230
00:17:24,000 --> 00:17:28,877
C'est donc un test simple que nous faisons pour nous assurer que notre composant

231
00:17:28,877 --> 00:17:32,404
est correctement créé.

232
00:17:32,404 --> 00:17:37,713
Mais comme nous le réalisons quand je lance ce test, il ne fonctionne pas correctement.

233
00:17:37,713 --> 00:17:42,638
Regardons rapidement et voyons quel est le problème dans

234
00:17:42,638 --> 00:17:47,770
notre création de composants dans la fenêtre de la console là-bas.

235
00:17:47,770 --> 00:17:51,390
En revenant à la fenêtre de la console, laissez-moi simplement revenir en arrière et

236
00:17:51,390 --> 00:17:54,840
voir où est le problème.

237
00:17:54,840 --> 00:17:59,820
Et je commence à remarquer que cela spécifie qu'il ne semble pas

238
00:17:59,820 --> 00:18:04,480
reconnaître certaines des choses que mon composant utilise.

239
00:18:04,480 --> 00:18:09,065
En particulier, il dit que le MDSpinach

240
00:18:09,065 --> 00:18:13,191
est quelque chose qu'il ne reconnaît pas,

241
00:18:13,191 --> 00:18:17,330
la MDGetGridList et quelques autres choses.

242
00:18:17,330 --> 00:18:21,289
Cela me suggère immédiatement que j'ai besoin de faire quelques autres configurations

243
00:18:21,289 --> 00:18:26,170
dans mon fichier de test avant que mon test puisse fonctionner correctement.

244
00:18:26,170 --> 00:18:30,994
Alors, revenons à notre fichier de spécifications et y apportons quelques modifications.

245
00:18:30,994 --> 00:18:34,142
En revenant à notre fichier de spécifications,

246
00:18:34,142 --> 00:18:40,182
à partir de notre mémoire de la façon dont nous avons créé le modèle.

247
00:18:40,182 --> 00:18:44,865
Nous savons que dans le modèle, nous avions un lien de routeur dans le modèle

248
00:18:44,865 --> 00:18:45,605
du MenuComponent.

249
00:18:45,605 --> 00:18:50,325
J'ai donc besoin d'un support pour le routage afin de reconnaître ce lien du routeur

250
00:18:50,325 --> 00:18:54,698
que nous avons utilisé dans le fichier MenuComponent.html.

251
00:18:54,698 --> 00:18:59,640
C'est donc là que je vais importer

252
00:18:59,640 --> 00:19:03,926
un autre support de test fourni

253
00:19:03,926 --> 00:19:09,199
appelé RouterTesttingModule,

254
00:19:09,199 --> 00:19:18,615
qui est disponible à partir de la bibliothèque Angular/router/testing ici.

255
00:19:18,615 --> 00:19:21,625
Donc, ce module de test de routeur me permettra de

256
00:19:21,625 --> 00:19:24,135
configurer certains aspects de mon routeur.

257
00:19:24,135 --> 00:19:28,235
Nous verrons que la façon dont nous l'utilisons est un peu différente du module de routeur

258
00:19:28,235 --> 00:19:30,195
que nous avons utilisé dans notre application.

259
00:19:30,195 --> 00:19:34,835
Donc, nous allons importer le module de test de routage, aussi vous notez

260
00:19:34,835 --> 00:19:39,640
que nous utilisons des animations, et

261
00:19:39,640 --> 00:19:45,660
utilisant également le composant de matériau angulaire dans notre modèle.

262
00:19:45,660 --> 00:19:49,410
J'ai donc besoin d'importer

263
00:19:49,410 --> 00:19:57,079
le BrowserAnimationsModule dans mon fichier de test.

264
00:19:58,490 --> 00:20:05,070
Donc, cela vient de l'angulaire/plateforme/navigateur.

265
00:20:05,070 --> 00:20:09,619
Maintenant, vous remarquerez que nous devons le faire explicitement ici simplement parce que,

266
00:20:10,700 --> 00:20:16,960
dans l'application Angular réelle tout cela était dans le module d'application,

267
00:20:16,960 --> 00:20:20,310
et donc cela était disponible pour les composants.

268
00:20:20,310 --> 00:20:24,340
En ce moment, nous testons ce composant, le MenuComponent en isolement, donc

269
00:20:24,340 --> 00:20:27,500
c'est pourquoi il ne connaît pas toutes ces choses, donc

270
00:20:27,500 --> 00:20:31,190
nous devons spécifier explicitement toutes ces choses ici.

271
00:20:31,190 --> 00:20:38,569
Donc, je vais importer cela à partir de l'animation du navigateur de la plate-forme de messagerie instantanée ici.

272
00:20:38,569 --> 00:20:43,358
Donc angular.platform.browser animations importer le module

273
00:20:43,358 --> 00:20:44,220
animations navigateur ici.

274
00:20:44,220 --> 00:20:47,300
Laissez-moi inclure le module de couche flex, donc

275
00:20:47,300 --> 00:20:53,060
J'inclurai Angular FlexLayout.

276
00:20:53,060 --> 00:20:58,525
Donc, ceux-ci sont nécessaires parce que j'ai besoin d'eux dans le modèle,

277
00:20:58,525 --> 00:21:02,605
Je vais également importer ce plat de,

278
00:21:06,495 --> 00:21:09,348
partagé/Dish parce que comme vous le verrez plus tard,

279
00:21:09,348 --> 00:21:14,125
J'ai besoin de configurer, A,

280
00:21:20,002 --> 00:21:26,070
DishService parce que mon MenuComponent

281
00:21:26,070 --> 00:21:31,033
dépend du DishService donc

282
00:21:31,033 --> 00:21:35,170
J'ai besoin que aussi en place.

283
00:21:35,170 --> 00:21:39,170
Bien que vous verrez que je vais arrêter ça.

284
00:21:39,170 --> 00:21:44,860
Je vais expliquer cela dans un court moment, et aussi j'ai besoin d'importer quelques autres choses.

285
00:21:44,860 --> 00:21:47,410
Je vais importer des plats de,

286
00:21:48,530 --> 00:21:53,260
vous vous rappelez que nous utilisons cette constante appelée DISKS

287
00:21:56,870 --> 00:22:01,640
que nous avons exporté à partir du fichier shared/dishes.ts.

288
00:22:01,640 --> 00:22:05,650
J'en aurai besoin pour configurer quelques autres choses.

289
00:22:05,650 --> 00:22:09,702
Je vais aussi importer le BaseURL.

290
00:22:11,343 --> 00:22:19,105
Que j'ai déclaré dans le fichier url, Shared/Base

291
00:22:21,057 --> 00:22:23,368
.

292
00:22:23,368 --> 00:22:28,692
Et aussi, j'ai besoin d'importer

293
00:22:28,692 --> 00:22:33,294
l'Observable de,

294
00:22:35,992 --> 00:22:41,319
rxjs, slash, Parce que j'

295
00:22:41,319 --> 00:22:47,220
utiliserai aussi Observable un peu plus tard, quand je configurerai quelques choses.

296
00:22:47,220 --> 00:22:50,806
Alors maintenant, j'ai importé toutes ces choses.

297
00:22:50,806 --> 00:22:56,157
En descendant dans la configuration TestBed, vous voyez que cette partie

298
00:22:56,157 --> 00:23:02,813
est exactement comme le décorateur de module moteur que nous avons dans le module app.

299
00:23:02,813 --> 00:23:07,450
C'est donc là que je peux aussi utiliser les importations juste

300
00:23:07,450 --> 00:23:11,000
comme je l'ai fait avec le module moteur.

301
00:23:11,000 --> 00:23:16,900
Et dans les importations, je vais importer le module BrowserAnimation

302
00:23:16,900 --> 00:23:21,765
parce que c'est quelque chose que j'ai besoin, et

303
00:23:21,765 --> 00:23:25,090
puis importer aussi le module FlexLayout.

304
00:23:26,660 --> 00:23:32,690
Et aussi le RouterTesttingModule parce que

305
00:23:32,690 --> 00:23:36,540
j'aurais besoin du RouterTesttingModule pour configurer quelques choses.

306
00:23:36,540 --> 00:23:40,705
Maintenant, lorsque vous utilisez le RouterTesttingModule, vous devez utiliser cette méthode

307
00:23:40,705 --> 00:23:46,950
appelleWithRoutes au lieu d'utiliser ForRoot comme nous l'avons utilisé avec le module de routeur ici.

308
00:23:46,950 --> 00:23:52,400
Donc, dans ce WithRoutes, vous pouvez spécifier quelques routes

309
00:23:52,400 --> 00:23:58,460
par défaut dont vous avez besoin pour votre application spécifique ici.

310
00:23:58,460 --> 00:24:03,737
Je vais juste configurer un seul chemin ici,

311
00:24:03,737 --> 00:24:09,359
et c'est assez bon pour moi pour tester ce module ici.

312
00:24:09,359 --> 00:24:14,497
Donc, je vais juste dire chemin : 'menu',

313
00:24:14,497 --> 00:24:19,021
et composant : MenuComponent.

314
00:24:19,021 --> 00:24:24,235
Puisque les modèles MenuComponent utilisent certains composants matériels,

315
00:24:24,235 --> 00:24:26,523
allons-y et importez-les.

316
00:24:26,523 --> 00:24:35,263
Nous allons donc importer le MatGridListModule

317
00:24:35,263 --> 00:24:45,034
de @angular /material/grid-list et

318
00:24:45,034 --> 00:24:54,033
aussi le MatProgressSpinnerModule de

319
00:24:54,033 --> 00:25:03,747
@angular /matériel/progress-spinner.

320
00:25:04,327 --> 00:25:09,123
Et une fois que nous les avons importés, alors allons de l'avant et

321
00:25:09,123 --> 00:25:13,322
les inclure dans les importations en bas là-bas.

322
00:25:13,322 --> 00:25:19,568
Alors ajoutons dans le MatGridListModule et le MatProgressSpinnerModule.

323
00:25:19,568 --> 00:25:23,047
Et c'est tout ce dont j'ai besoin pour que

324
00:25:23,047 --> 00:25:28,997
ces importations particulières soient configurées ici.

325
00:25:28,997 --> 00:25:34,422
Donc, avec les importations, nous avons les déclarations où j'ai

326
00:25:34,422 --> 00:25:41,067
le MenuComponent étant utilisé ici, je peux également configurer les fournisseurs ici.

327
00:25:41,067 --> 00:25:43,295
J'ai donc besoin de configurer les fournisseurs ici.

328
00:25:43,295 --> 00:25:47,998
Maintenant, c'est là que nous allons

329
00:25:47,998 --> 00:25:52,898
pour créer quelques talons ici, donc

330
00:25:52,898 --> 00:25:58,779
je dirai fournir : DishService.

331
00:25:58,779 --> 00:26:02,825
Maintenant, le DishService que nous allons utiliser ici ne sera pas le vrai DishService

332
00:26:02,825 --> 00:26:03,713
.

333
00:26:03,713 --> 00:26:08,422
Lorsque vous testez un composant, vous ne voulez pas utiliser un vrai service.

334
00:26:08,422 --> 00:26:12,750
Au lieu de cela, vous risquez de casser le service, et

335
00:26:12,750 --> 00:26:19,262
utilisez ensuite un DishService stub, que je vais appeler en tant que DishServicesTub.

336
00:26:19,262 --> 00:26:27,040
Donc, je dirai, UseValue : DishServicesTub.

337
00:26:27,040 --> 00:26:32,018
Donc, ce serait une fonction stub que j'utiliserai dans l'ordre

338
00:26:32,018 --> 00:26:34,904
pour marquer le DishService ici.

339
00:26:34,904 --> 00:26:38,272
C'est donc celui dont je vais faire usage.

340
00:26:38,272 --> 00:26:42,776
Et aussi le second que je vais utiliser est BaseURL,

341
00:26:42,776 --> 00:26:47,455
que je vais utiliser comme base

342
00:26:47,455 --> 00:26:59,951
que nous avons déjà importé plus tôt.

343
00:26:59,951 --> 00:27:06,280
Donc, maintenant, avec cela, j'ai réellement configuré mon module de test,

344
00:27:06,280 --> 00:27:11,644
alors notez que la façon dont nous spécifions cela est exactement comme la façon dont

345
00:27:11,644 --> 00:27:17,160
nous spécifions le décorateur de module NG pour notre module d'application.

346
00:27:17,160 --> 00:27:22,250
Et ici, nous ne configurons que ceux qui sont requis par le MenuComponent, donc

347
00:27:22,250 --> 00:27:27,890
Je n'ai pas les autres que nous utilisons dans le module d'application lui-même.

348
00:27:27,890 --> 00:27:32,220
C'est ainsi que nous allons configurer le module de test.

349
00:27:32,220 --> 00:27:36,600
Maintenant, la seule chose qui manque est ce DishServicesTub.

350
00:27:36,600 --> 00:27:41,718
Donc, ce que je vais faire est de

351
00:27:41,718 --> 00:27:47,283
implémenter une fonction ici et

352
00:27:47,283 --> 00:27:53,072
appel qui laisse DishServicesTub

353
00:27:53,072 --> 00:27:59,973
être un simple objet JavaScript ici,

354
00:27:59,973 --> 00:28:05,537
que je vais le laisser agir à

355
00:28:05,537 --> 00:28:10,679
place du vrai service.

356
00:28:10,679 --> 00:28:13,067
Nous pouvons casser des services comme celui-ci comme on le voit ici.

357
00:28:13,067 --> 00:28:17,807
Donc à l'intérieur ici, je vais juste à

358
00:28:17,807 --> 00:28:21,846
fournir une fonction simple,

359
00:28:21,846 --> 00:28:26,412
la fonction GetDays ici,

360
00:28:26,412 --> 00:28:33,803
qui retournera Observable du type de tableau Dish.

361
00:28:33,803 --> 00:28:38,133
C'est donc exactement comment la valeur de retour a été configurée là.

362
00:28:38,133 --> 00:28:42,776
Et je vais retourner

363
00:28:42,776 --> 00:28:48,819
un observable de plats ici.

364
00:28:48,819 --> 00:28:51,692
Donc, en utilisant cette fonction stub ici,

365
00:28:51,692 --> 00:28:56,349
ce que je fais est que je tache le DishService, et

366
00:28:56,349 --> 00:29:00,906
puis le configurer avec cette seule méthode dont j'ai besoin pour

367
00:29:00,906 --> 00:29:06,158
mon cache, en disant getDish, et quand cette méthode est appelée,

368
00:29:06,158 --> 00:29:09,355
je vais juste retourner cette valeur.

369
00:29:09,355 --> 00:29:11,334
La constante des plats, ici.

370
00:29:11,334 --> 00:29:16,740
Donc de cette façon, maintenant vous pouvez voir que comment je contrôle ce qui est

371
00:29:16,740 --> 00:29:23,449
fourni au composant à partir d'un DishService stub que je viens de créer ici.

372
00:29:23,449 --> 00:29:27,333
C'est ainsi que vous allez créer des talons pour votre DishService.

373
00:29:27,333 --> 00:29:30,570
L'autre approche que nous pouvons utiliser pour les cas

374
00:29:30,570 --> 00:29:35,910
où nous utilisons des services est appelée comme utilisant l'espion.

375
00:29:37,300 --> 00:29:42,840
Jasmine supporte quelque chose appelé Spy, qui nous permet d'espionner les appels de fonction,

376
00:29:42,840 --> 00:29:47,040
, puis de capturer les appels de fonction, puis de répondre à ces appels de fonction.

377
00:29:47,040 --> 00:29:52,981
C'est donc une autre façon d'utiliser un faux service à la place du vrai service.

378
00:29:52,981 --> 00:29:59,778
Maintenant, nous sommes en mesure de contrôler ce qui est fourni à notre composant de menu.

379
00:29:59,778 --> 00:30:04,410
Donc, après ces modifications, alors nous allons

380
00:30:04,410 --> 00:30:09,424
aller dans notre avant chaque méthode ici.

381
00:30:09,424 --> 00:30:14,172
Après l'asynchrone, ce que je vais faire

382
00:30:14,172 --> 00:30:19,085
est que je vais mettre la main sur le DishService.

383
00:30:19,085 --> 00:30:24,187
Donc vous voyez que j'utilise le banc d'essai, puis j'utilise la méthode get

384
00:30:24,187 --> 00:30:31,415
du banc d'essai pour obtenir un DishService qui a été créé ici,

385
00:30:31,415 --> 00:30:37,819
de ce talon particulier que nous avons déclaré ici dans les fournisseurs.

386
00:30:39,520 --> 00:30:43,140
Donc cela me donne une référence au DishService afin

387
00:30:43,140 --> 00:30:47,870
que je puisse appeler les méthodes du DishService partout où j'ai besoin ici.

388
00:30:47,870 --> 00:30:52,453
Donc, après avoir apporté ces modifications, sauvegardons les modifications et

389
00:30:52,453 --> 00:30:57,679
puis voyons comment notre CLI Angular exécutera ce test après ces changements,

390
00:30:57,679 --> 00:31:02,369
et si notre test réussira à ce stade ou non.

391
00:31:02,369 --> 00:31:04,462
Alors sauvegardons les modifications.

392
00:31:04,462 --> 00:31:09,412
Dès que vous enregistrez les modifications, vous remarquerez que votre test NG

393
00:31:09,412 --> 00:31:13,060
recommencera à relancer notre test.

394
00:31:13,060 --> 00:31:16,310
Donc, il compilera l'application, puis réexécutera le test.

395
00:31:16,310 --> 00:31:21,450
Et voilà, notre test a passé avec succès après

396
00:31:22,540 --> 00:31:27,574
en apportant les modifications à notre fichier component.spec.ts.

397
00:31:27,574 --> 00:31:33,270
Donc, notre premier test, ce qui signifie que nous sommes maintenant en mesure de créer un composant de menu

398
00:31:33,270 --> 00:31:37,950
à partir de notre menu, le fichier component.spec.ts là-bas.

399
00:31:37,950 --> 00:31:40,990
Donc, notre configuration de test fonctionne correctement.

400
00:31:40,990 --> 00:31:48,460
Maintenant, je peux entrer et faire des tests plus intenses dans mon composant de test.

401
00:31:48,460 --> 00:31:53,790
En revenant à ce fichier de menu component.spec, permettez-moi d'ajouter dans un autre test.

402
00:31:53,790 --> 00:32:00,420
Maintenant, vous voyez que parce que j'ai maintenant un service établi ici

403
00:32:00,420 --> 00:32:07,292
qui retourne cette valeur DISS, je peux maintenant utiliser mon DishService,

404
00:32:07,292 --> 00:32:11,290
auquel j'ai la référence ici.

405
00:32:11,290 --> 00:32:15,934
Inside était avant chacun, puis appelez la méthode getDats et

406
00:32:15,934 --> 00:32:18,830
alors je serai en mesure d'obtenir la valeur.

407
00:32:18,830 --> 00:32:23,800
Et cela sera disponible dans mon composant de menu que je viens de créer.

408
00:32:23,800 --> 00:32:28,615
Donc, mon MenuComponent devrait maintenant avoir accès à la constante de vaisselle que

409
00:32:28,615 --> 00:32:32,856
lui a été fourni à travers cet arrêt de service à vaisselle.

410
00:32:32,856 --> 00:32:37,608
Donc, je peux maintenant tester pour voir si la variable vaisselle dans mon

411
00:32:37,608 --> 00:32:43,642
MenuComponent reçoit réellement les valeurs correctement ou non.

412
00:32:43,642 --> 00:32:46,982
Alors, en allant, laissez-moi créer un autre test ici.

413
00:32:46,982 --> 00:32:52,413
Donc, je vais créer un test ici, Avec le it,

414
00:32:52,413 --> 00:32:57,228
comme vous l'avez vu plus tôt, donc tout comme le précédent.

415
00:32:57,228 --> 00:33:03,447
Ce deuxième test, je vais appeler que comme elle et

416
00:33:03,447 --> 00:33:09,460
plats, Les articles devraient être 4,

417
00:33:09,460 --> 00:33:14,605
parce que la constante de plats que nous avons déclaré dans

418
00:33:14,605 --> 00:33:21,562
le fichier shared.plats a quatre plats dans la constante là.

419
00:33:21,562 --> 00:33:26,232
Donc, quand ma variable vaisselle à l'intérieur de mon fichier MenuComponent ou

420
00:33:26,232 --> 00:33:31,018
ts est initialisée en appelant le service de vaisselle.

421
00:33:31,018 --> 00:33:34,632
Il aurait dû recevoir ces quatre plats et

422
00:33:34,632 --> 00:33:37,970
s'est initialisé avec ces quatre plats.

423
00:33:37,970 --> 00:33:43,182
Donc, je vais faire quelques tests sur cette variable de plats là.

424
00:33:43,182 --> 00:33:46,492
Alors, comment puis-je accéder à la variable vaisselle ici ?

425
00:33:46,492 --> 00:33:50,431
Donc, je dirais qu'il plats articles devraient être 4, et

426
00:33:50,431 --> 00:33:54,171
alors je vais déclarer une fonction de flèche ici.

427
00:33:54,171 --> 00:33:59,453
Et à l'intérieur de cette fonction de flèche, je vais spécifier

428
00:33:59,453 --> 00:34:04,024
les différents tests que je vais effectuer.

429
00:34:04,024 --> 00:34:10,348
Donc ici, je vais maintenant dire attendre (composant.,

430
00:34:10,348 --> 00:34:15,378
et remarquez qu'il me donne automatiquement un accès

431
00:34:15,378 --> 00:34:22,290
à cette propriété de vaisselle à partir du MenuComponent.

432
00:34:22,290 --> 00:34:27,400
Donc, je peux dire que component.plats, puis je peux tester

433
00:34:27,400 --> 00:34:34,053
pour voir que la longueur de ce tableau d'objets JavaScript devrait être.

434
00:34:34,053 --> 00:34:38,367
C'est donc là que j'utilise la méthode ToBe de Jasmine ici.

435
00:34:38,367 --> 00:34:41,517
Et puis je peux spécifier la valeur 4,

436
00:34:41,517 --> 00:34:46,347
parce que je fournissais 4 plats dans mes plats constant

437
00:34:46,347 --> 00:34:51,284
que j'ai déclaré dans le fichier shared.plats là-bas.

438
00:34:51,284 --> 00:34:54,709
C'est donc le premier test que je vais faire,

439
00:34:54,709 --> 00:34:56,867
cela devrait s'avérer vrai.

440
00:34:56,867 --> 00:35:01,096
Sinon, la configuration n'a pas fonctionné correctement, donc

441
00:35:01,096 --> 00:35:05,120
je sais que mon code ne fonctionne pas correctement.

442
00:35:05,120 --> 00:35:09,891
Mais je sais avec certitude que ce test devrait fonctionner correctement.

443
00:35:09,891 --> 00:35:11,547
Si vous voulez en être sûr,

444
00:35:11,547 --> 00:35:16,011
sauvegardons les modifications et allons voir notre test en cours d'exécution.

445
00:35:16,011 --> 00:35:18,084
En allant à ce terminal,

446
00:35:18,084 --> 00:35:23,323
vous voyez que maintenant mon application est recompilée, et le test s'exécute.

447
00:35:23,323 --> 00:35:27,941
Et remarquez tous les verts dans la fenêtre du terminal.

448
00:35:27,941 --> 00:35:32,355
Il dit exécuté 1 de 2 succès, exécuté 2 de 2 succès.

449
00:35:32,355 --> 00:35:36,021
Ce qui signifie que mes deux tests ont été couronnés de succès.

450
00:35:36,021 --> 00:35:41,221
Si je regarde mon navigateur, de sorte que vous voyez que le MenuComponent,

451
00:35:41,221 --> 00:35:44,031
les deux tests sont réussis.

452
00:35:44,031 --> 00:35:46,189
Permettez-moi d'en créer quelques autres et

453
00:35:46,189 --> 00:35:51,994
ajoutez-les à cet ensemble de deuxième groupe de tests que je crée là.

454
00:35:51,994 --> 00:35:58,106
En allant au fichier menu_component_spec.ts, j'en ajouterai un de plus.

455
00:35:58,106 --> 00:36:05,535
Je dirai que le composant attend.,

456
00:36:05,535 --> 00:36:12,420
et je dirai des plats [1].

457
00:36:12,420 --> 00:36:16,105
Rappelez-vous que le nom du premier plat était,

458
00:36:18,858 --> 00:36:22,552
Donc c'est ce que je vais tester, les plats [1] .name.

459
00:36:22,552 --> 00:36:26,774
C'est donc ainsi que je peux tester pour voir s'il reçoit les valeurs correctement.

460
00:36:26,774 --> 00:36:28,431
Quelles sont les façons que je peux tester ?

461
00:36:28,431 --> 00:36:34,594
Si je mets un point là, ça me donnera une suggestion de toutes les possibilités ici.

462
00:36:34,594 --> 00:36:42,862
Donc, je dirai, je vais également utiliser à nouveau la méthode ToBe ici.

463
00:36:42,862 --> 00:36:45,623
Et puis le deuxième nom du plat est,

464
00:36:51,916 --> 00:36:55,779
Juste ça là, donc c'est le deuxième lanceur que je vais réaliser.

465
00:36:55,779 --> 00:36:59,819
Donc, si mon code a fonctionné correctement, cela devrait également passer.

466
00:36:59,819 --> 00:37:03,389
De même, permettez-moi d'en mettre un de plus ici.

467
00:37:03,389 --> 00:37:06,072
Donc, je dirai attendre,

468
00:37:09,579 --> 00:37:16,457
component.plats et je dirai 3.

469
00:37:16,457 --> 00:37:21,520
Et ici, la propriété

470
00:37:21,520 --> 00:37:26,819
en vedette devrait être Falsy.

471
00:37:26,819 --> 00:37:33,572
Que vous soyez faux, ce n'est pas vrai dans ce cas, alors permettez-moi d'ajouter un autre.

472
00:37:33,572 --> 00:37:35,748
Vous pouvez commencer à ajouter plus si vous le souhaitez,

473
00:37:35,748 --> 00:37:38,405
jouez avec elle jusqu'à ce que vous soyez satisfait.

474
00:37:38,405 --> 00:37:40,936
Alors faites ces ajouts. Laissez-moi enregistrer les modifications que j'ai faites

475
00:37:40,936 --> 00:37:44,292
ici, allons voir si ce test fonctionne correctement.

476
00:37:44,292 --> 00:37:50,041
Et en revenant à mon terminal, vous voyez que mon test est à nouveau en cours d'exécution.

477
00:37:50,041 --> 00:37:52,720
Vous voyez que les deux tests ont été couronnés de succès,

478
00:37:52,720 --> 00:37:55,551
maintenant je vais faire échouer une de ces choses.

479
00:37:55,551 --> 00:37:59,754
Alors je vais entrer et changer ça en vérité.

480
00:37:59,754 --> 00:38:03,950
Voir, c'est le plaisir de jouer avec du code.

481
00:38:03,950 --> 00:38:08,111
Je vais changer cela en vérité et je sais que ce test va échouer.

482
00:38:08,111 --> 00:38:10,186
Alors sauvegardons les modifications.

483
00:38:10,186 --> 00:38:15,977
En regardant le terminal, vous voyez que le test a échoué.

484
00:38:15,977 --> 00:38:23,603
Vous voyez tout ce rouge ici, ce qui signifie que le deuxième test n'a pas réussi correctement.

485
00:38:23,603 --> 00:38:30,750
Et si vous faites défiler vers l'arrière, vous verrez ce test particulier échouer,

486
00:38:30,750 --> 00:38:36,295
parce que quelque part là-bas, il dira que ce n'est pas le cas.

487
00:38:36,295 --> 00:38:42,119
Ok, voyez cette déclaration ici il dit que faux attendu pour être véridique,

488
00:38:42,119 --> 00:38:44,378
donc c'est pourquoi il a échoué.

489
00:38:44,378 --> 00:38:47,978
Donc, ce n'était pas censé être vrai, mais j'ai dit que ça devrait être vrai, et

490
00:38:47,978 --> 00:38:51,393
évidemment le test est faux, donc c'est pourquoi le test a échoué.

491
00:38:51,393 --> 00:38:55,865
Donc, c'est ainsi que vous pouvez même tester pour voir si le test échoue,

492
00:38:55,865 --> 00:38:59,086
si vous avez demandé les mauvaises choses aussi.

493
00:38:59,086 --> 00:39:04,107
Mais encore une fois, permettez-moi de revenir en arrière et de corriger cela encore une fois.

494
00:39:04,107 --> 00:39:09,068
Alors, revenant à mon fichier, je vais les changer

495
00:39:09,068 --> 00:39:13,529
en falsy, parce que je veux que ce test fonctionne correctement.

496
00:39:13,529 --> 00:39:15,517
Maintenant, nous ne sommes pas encore satisfaits.

497
00:39:15,517 --> 00:39:20,117
Maintenant, dans ce test particulier, je teste seulement la variable vaisselle

498
00:39:20,117 --> 00:39:23,825
qui est à l'intérieur de mon MenuComponent.

499
00:39:23,825 --> 00:39:29,777
Comment puis-je jouer avec le modèle lui-même ?

500
00:39:29,777 --> 00:39:35,454
C'est donc là que nous avons besoin de plus d'aide d'Angular.

501
00:39:35,454 --> 00:39:40,216
Pour effectuer quelques tests sur le modèle, je vais entrer et

502
00:39:40,216 --> 00:39:42,972
tirer quelques importations supplémentaires ici.

503
00:39:42,972 --> 00:39:49,896
Alors, en allant à mon sommet de ce fichier, menu_component_spec.tsfile.

504
00:39:49,896 --> 00:39:55,105
Je vais importer, Un

505
00:39:55,105 --> 00:40:00,594
plus appelé By, qui est une méthode.

506
00:40:00,594 --> 00:40:03,044
Vous me verrez utiliser ceci dans un court moment.

507
00:40:03,044 --> 00:40:10,855
Cela doit être importé depuis, Angular,

508
00:40:15,209 --> 00:40:18,863
/platform-browser.

509
00:40:18,863 --> 00:40:27,301
Et aussi, je vais en importer un de plus qui est un élément de débogage.

510
00:40:27,301 --> 00:40:32,009
L'élément debug me permet d'avoir accès au DOM afin

511
00:40:32,009 --> 00:40:37,040
que je puisse effectuer des tests sur les éléments DOM directement.

512
00:40:37,040 --> 00:40:44,548
Alors c'est là que je vais importer ceci de, le code angulaire ici, donc ces deux-là.

513
00:40:44,548 --> 00:40:49,580
Alors ajoutez le By et le DebugElement aux importations, et

514
00:40:49,580 --> 00:40:54,947
une fois que vous faites cela, nous descendrons dans le code ici.

515
00:40:54,947 --> 00:40:59,338
Et puis nous allons ajouter dans un autre test où nous allons aller dans le DOM et

516
00:40:59,338 --> 00:41:01,690
chercher un des éléments du doc.

517
00:41:01,690 --> 00:41:06,404
Donc je le dirais, donc un test de plus ici,

518
00:41:06,404 --> 00:41:09,889
qu'est-ce que ce test va faire ?

519
00:41:09,889 --> 00:41:14,970
Pour ce test, je vais spécifier

520
00:41:14,970 --> 00:41:22,903
le test comme devrait utiliser des plats dans le gabarit.

521
00:41:22,903 --> 00:41:25,838
Je dis juste quelque chose au hasard ici,

522
00:41:25,838 --> 00:41:29,804
parce que je veux juste vérifier que la variable vaisselle,

523
00:41:29,804 --> 00:41:34,905
tout ce qu'elle rend disponible, est utilisée correctement dans le modèle.

524
00:41:34,905 --> 00:41:38,412
Donc c'est la partie que je mets en place, et

525
00:41:38,412 --> 00:41:42,104
puis la deuxième partie est la fonction flèche, et

526
00:41:42,104 --> 00:41:47,760
dans cette fonction flèche, je vais fournir le code pour le prochain test.

527
00:41:47,760 --> 00:41:52,734
Donc, à l'intérieur de cette fonction de flèche, ce que je vais faire

528
00:41:52,734 --> 00:41:58,008
est que je vais d'abord appeler fixture et

529
00:41:58,008 --> 00:42:00,880
puis détecter les changements.

530
00:42:00,880 --> 00:42:05,990
Et puis après cela, je dirai laisser de :,

531
00:42:12,226 --> 00:42:13,908
Est un DebugElement.

532
00:42:13,908 --> 00:42:20,748
Grâce à cela, je vais avoir accès au DOM et

533
00:42:20,748 --> 00:42:26,566
alors l'élément serait HTMLElement.

534
00:42:26,566 --> 00:42:33,243
Donc, je veux avoir accès à l'un des HTMLElements de mon DOM.

535
00:42:33,243 --> 00:42:35,369
Alors, quel élément je veux ?

536
00:42:35,369 --> 00:42:38,846
Donc, pour ce faire, j'aurai accès au,

537
00:42:41,533 --> 00:42:48,138
DebugElement en disant fixture et DebugElement.

538
00:42:48,138 --> 00:42:54,933
Donc, cela me permet d'avoir accès aux éléments de mon DOM ici donc DebugElement.

539
00:42:54,933 --> 00:43:02,220
Et puis je peux interroger et ensuite choisir seulement ceux qui seront d'intérêt pour moi.

540
00:43:02,220 --> 00:43:08,690
Donc, je vais interroger et ensuite je vais demander en utilisant le By.

541
00:43:08,690 --> 00:43:15,908
Alors remarquez où j'utilise le By que j'ai inclus en l'important.

542
00:43:15,908 --> 00:43:20,780
Donc By, le By supporte un tas de mesures par lesquelles je peux

543
00:43:20,780 --> 00:43:25,020
demander d'accéder à des éléments particuliers dans le DOM.

544
00:43:25,020 --> 00:43:31,824
Donc, comme vous pouvez le voir, cela me dira ce que je peux importer et

545
00:43:31,824 --> 00:43:36,846
alors le .css me permet d'avoir accès

546
00:43:36,846 --> 00:43:43,018
pour faire correspondre les éléments par le sélecteur css donné.

547
00:43:43,018 --> 00:43:45,789
Alors quel est le sélecteur css que je vais utiliser ?

548
00:43:45,789 --> 00:43:50,503
Je sais qu'il y a un élément h1, un élément html dans le DOM et

549
00:43:50,503 --> 00:43:55,750
que je vais avoir accès au premier élément h1 du DOM.

550
00:43:55,750 --> 00:44:00,764
Et l'un des éléments h1 là-dedans est celui que

551
00:44:00,764 --> 00:44:05,670
va afficher le nom de chaque plat là-bas.

552
00:44:05,670 --> 00:44:10,459
Regardez en arrière et vous voyez qu'à l'intérieur de la grille chronologique en utilisant un h1 et

553
00:44:10,459 --> 00:44:13,839
que h1 contient le nom du plat là.

554
00:44:13,839 --> 00:44:16,723
Donc, je vais mettre la main sur cela et

555
00:44:16,723 --> 00:44:21,198
puis je vais obtenir un élément et puis je dirais de,

556
00:44:21,198 --> 00:44:26,385
de l'élément de débogage, puis je dirais nativeElement.

557
00:44:26,385 --> 00:44:31,572
Et cela me donne accès à l'élément spécifiquement dans le DOM

558
00:44:31,572 --> 00:44:37,873
auquel je fais référence et j'ai sélectionné en utilisant cette instruction plus tôt.

559
00:44:37,873 --> 00:44:43,091
Donc, quand je interroge le DOM et puis dis, renvoyez-moi tous

560
00:44:43,091 --> 00:44:48,964
ceux qui utilisent la balise h1 pour l'élément HTML.

561
00:44:48,964 --> 00:44:54,077
Et j'ai accès à cela, et je peux interroger et

562
00:44:54,077 --> 00:44:58,349
dire attendre (el.textContent).

563
00:44:58,349 --> 00:45:02,869
Donc, je cherche le contenu à l'intérieur de ce h1 dans mon contenu fixe de modèle

564
00:45:02,869 --> 00:45:07,718
et puis je dirai toContent.

565
00:45:07,718 --> 00:45:12,596
Donc, c'est une autre méthode, toContient, c'est une méthode Jasmine appelée toContient.

566
00:45:12,596 --> 00:45:18,352
Cela vérifie si cela contient une valeur particulière,

567
00:45:18,352 --> 00:45:23,262
, puis je vérifierai les plats (0) .name.

568
00:45:23,262 --> 00:45:29,360
Alors le premier plat est-il créé dans le DOM et ajouté dans le DOM ?

569
00:45:29,360 --> 00:45:33,981
Si mon modèle fonctionne correctement, cela doit être présent dans le DOM.

570
00:45:33,981 --> 00:45:38,626
Alors c'est ce que je vais vérifier pour voir si la grille correspondant à

571
00:45:38,626 --> 00:45:42,658
le premier DISH a été créée et ajoutée dans le DOM ou non.

572
00:45:42,658 --> 00:45:47,521
Alors je dis plats (0) .name, et dis en majuscules.

573
00:45:47,521 --> 00:45:52,395
Rappelons que j'ai utilisé le tuyau en majuscules pour afficher le nom

574
00:45:52,395 --> 00:45:56,647
du DISH en convertissant le nom du plat en

575
00:45:56,647 --> 00:46:01,450
toutes les majuscules dans la tuile de grille dans le composant de menu.

576
00:46:01,450 --> 00:46:05,830
Alors c'est ce que je vais vérifier, ok, donc je ne vérifie que pour

577
00:46:05,830 --> 00:46:07,200
qu'un seul d'entre eux.

578
00:46:07,200 --> 00:46:10,983
Vous pouvez effectuer beaucoup de ces tests, vous pouvez vérifier

579
00:46:10,983 --> 00:46:16,016
plats (1) .name, puis plats (2) .name et plus si vous voulez.

580
00:46:16,016 --> 00:46:21,683
Je ne fais qu'illustrer un exemple de la façon dont vous accéderiez aux éléments du DOM et

581
00:46:21,683 --> 00:46:24,783
puis vérifierez ce qu'ils contiennent à l'intérieur.

582
00:46:24,783 --> 00:46:29,585
Donc c'est un test que je vais effectuer ici, alors laissez-moi enregistrer les changements,

583
00:46:29,585 --> 00:46:32,930
et voir si le test fonctionne correctement.

584
00:46:32,930 --> 00:46:35,951
Allez dans ce terminal et quand le test s'exécute,

585
00:46:35,951 --> 00:46:41,039
vous voyez que mon premier test a été réussi, le deuxième test a été réussi,

586
00:46:41,039 --> 00:46:44,635
et le troisième test a également été réussi, merveilleux.

587
00:46:44,635 --> 00:46:48,374
Maintenant, laissez-moi faire échouer le troisième test.

588
00:46:48,374 --> 00:46:52,273
En allant dans le fichier menucomponentspec.ts,

589
00:46:52,273 --> 00:46:58,818
Je vais supprimer ceci en majuscules, puis effectuer le même test.

590
00:46:58,818 --> 00:47:02,269
Vous verrez que ce test échouera, enregistrez les modifications.

591
00:47:02,269 --> 00:47:06,941
Et quand le test sera exécuté, vous verrez que le troisième test échouera.

592
00:47:06,941 --> 00:47:11,251
Parce que je le fais échouer en vérifiant la mauvaise chose là-bas et

593
00:47:11,251 --> 00:47:13,894
là vous allez, le troisième test a échoué ici.

594
00:47:13,894 --> 00:47:18,490
Voici donc comment vous pouvez vérifier si certaines choses que

595
00:47:18,490 --> 00:47:22,471
sont censées être là sont là correctement ou non.

596
00:47:22,471 --> 00:47:28,360
Pourquoi est ce cas, donc vous pouvez voir ici, la raison pour laquelle ce test a échoué.

597
00:47:28,360 --> 00:47:34,750
Il s'attend à ce que ce soit dans le DOM,

598
00:47:34,750 --> 00:47:40,670
mais c'est ce qui est dans le DOM dans l'élément h1 dans le DOM.

599
00:47:40,670 --> 00:47:43,929
C'est donc la raison pour laquelle le test a échoué ici.

600
00:47:43,929 --> 00:47:47,718
Donc, en revenant, laissez-moi corriger l'erreur et

601
00:47:47,718 --> 00:47:53,922
alors quand je réexécuterai le test, vous devriez maintenant voir que le test passe avec succès.

602
00:47:53,922 --> 00:47:59,875
En revenant au terminal, vous verrez que lorsque ce test s'exécute maintenant, il fonctionnera correctement.

603
00:48:03,610 --> 00:48:08,670
Et voilà, les trois tests sont passés par ma candidature.

604
00:48:08,670 --> 00:48:13,970
Aussi, en regardant le navigateur, vous pouvez voir que les trois tests

605
00:48:13,970 --> 00:48:19,770
ont été exécutés avec succès sur le fichier modèle de composants de menu et

606
00:48:19,770 --> 00:48:22,571
aussi le composant de menu lui-même.

607
00:48:22,571 --> 00:48:28,398
Maintenant évidemment, ce n'est pas nécessairement le test le plus complet mais

608
00:48:28,398 --> 00:48:32,407
Je voulais juste vous donner une idée de la façon dont vous alliez

609
00:48:32,407 --> 00:48:37,398
pour construire des tests dans votre application Angular.

610
00:48:37,398 --> 00:48:42,025
Si vous vous faites emporter, vous pouvez aller dans tous les fichiers spec.ts que vous avez et

611
00:48:42,025 --> 00:48:49,580
puis écrire votre propre test pour chacun de ces composants en utilisant les connaissances que vous avez acquises ici.

612
00:48:49,580 --> 00:48:55,150
Aussi, vous pouvez en savoir plus sur les tests dans la documentation Angular et

613
00:48:55,150 --> 00:49:00,590
puis apprendre plus de façons d'effectuer des tests sur votre application Angular.

614
00:49:00,590 --> 00:49:05,190
Testing est un domaine à part entière donc si j'ai besoin de vous apprendre tout sur les tests

615
00:49:05,190 --> 00:49:10,410
qui viendront tout un cours en soi pour Angular.

616
00:49:10,410 --> 00:49:14,500
Et dans ce cours, je voulais juste vous donner une idée de la façon dont

617
00:49:14,500 --> 00:49:17,820
vous allez effectuer des tests dans votre application Angular.

618
00:49:17,820 --> 00:49:21,585
Et ceci est un exemple de la façon dont nous pouvons configurer et

619
00:49:21,585 --> 00:49:27,441
effectuer un test unitaire sur l'un des composants de notre application Angular.

620
00:49:27,441 --> 00:49:33,901
C'est le bon moment pour vous de faire un bon commentaire avec le test des composants du message.

621
00:49:33,901 --> 00:49:37,750
[MUSIQUE]