1
00:00:02,939 --> 00:00:07,179
Permettez-moi de vous parler brièvement des tests angulaires.

2
00:00:07,179 --> 00:00:11,125
Comment concevez-vous vos applications angulaires pour être testables ?

3
00:00:11,125 --> 00:00:14,032
Comment concevez-vous les tests pour votre application angulaire ?

4
00:00:14,032 --> 00:00:16,359
Comment exécutez-vous les tests et assurez-vous que

5
00:00:16,359 --> 00:00:20,607
votre application angulaire satisfait tous les tests que vous avez écrit

6
00:00:20,607 --> 00:00:25,210
même lorsque vous développez votre application angulaire ?

7
00:00:25,210 --> 00:00:27,394
Maintenant, c'est là que je parlerais aussi brièvement du développement piloté par les tests

8
00:00:27,394 --> 00:00:31,209
des applications angulaires.

9
00:00:31,209 --> 00:00:37,225
Fait intéressant, angulaire lui-même a été construit à partir de la base pour permettre le test,

10
00:00:37,225 --> 00:00:40,820
pour faire partie de votre développement d'applications angulaires.

11
00:00:40,820 --> 00:00:47,844
La force principale derrière angulaire Misko Hvery était lui-même un ingénieur de test Google et donc,

12
00:00:47,844 --> 00:00:51,850
son influence sur la conception angulaire pour être testable de

13
00:00:51,850 --> 00:00:56,479
ground-up peut facilement être vu partout dans le cadre.

14
00:00:56,479 --> 00:01:04,435
Donc, angulaire lui-même comme vous l'avez compris dans les conférences et exercices précédents,

15
00:01:04,435 --> 00:01:07,224
est de nature modulaire.

16
00:01:07,224 --> 00:01:11,155
Ainsi, les modules d'angulaire avec les composants et

17
00:01:11,155 --> 00:01:17,409
leurs modèles, puis les services et les tuyaux et les directives,

18
00:01:17,409 --> 00:01:23,559
signifient que angulaire se prête facilement pour être testé.

19
00:01:23,559 --> 00:01:29,049
Maintenant, parce que l'application angulaire elle-même est composée de ces différentes parties,

20
00:01:29,049 --> 00:01:32,319
vous pouvez tester chacune de ces parties en isolement premier

21
00:01:32,319 --> 00:01:36,719
avant même qu'elles ne fassent partie de l'application angulaire entière.

22
00:01:36,719 --> 00:01:40,820
Le deuxième aspect est le mécanisme d'injection de dépendance que l'angulaire tire parti de

23
00:01:40,820 --> 00:01:45,969
pour soutenir la combinaison des différentes parties de

24
00:01:45,969 --> 00:01:52,120
votre application angulaire elle-même signifie que vous pouvez facilement remplacer les mocks

25
00:01:52,120 --> 00:01:54,340
pour ces dépendances dans

26
00:01:54,340 --> 00:01:59,165
vos différentes parties de l'angulaire application et effectuer des tests.

27
00:01:59,165 --> 00:02:01,135
J'ai utilisé le mot mock dans,

28
00:02:01,135 --> 00:02:05,409
dans la phrase précédente va venir à comprendre

29
00:02:05,409 --> 00:02:10,194
que dans un peu plus en détail et plus que, plus tard diapositives.

30
00:02:10,194 --> 00:02:14,439
C'est là que nous devons être conscients de

31
00:02:14,439 --> 00:02:19,724
une approche pour faire le développement d'applications appelée développement piloté par les tests.

32
00:02:19,724 --> 00:02:26,155
Dans le développement piloté par les tests, comme vous pouvez le comprendre par le nom lui-même,

33
00:02:26,155 --> 00:02:29,229
signifie que vous écrivez d'abord des tests automatisés pour

34
00:02:29,229 --> 00:02:33,389
toutes les fonctionnalités que vous souhaitez implémenter dans votre application.

35
00:02:33,389 --> 00:02:35,004
Alors vient d'abord le test,

36
00:02:35,004 --> 00:02:39,180
ensuite vous écrivez votre code d'application afin de passer le test.

37
00:02:39,180 --> 00:02:44,634
Donc, le test lui-même spécifie quelle fonctionnalité vous voulez implémenter.

38
00:02:44,634 --> 00:02:47,840
Ensuite, vous écrivez le code pour implémenter cette fonctionnalité.

39
00:02:47,840 --> 00:02:50,165
Puisque vous avez déjà le test en place,

40
00:02:50,165 --> 00:02:58,150
vous pouvez tester pour voir si l'implémentation que vous faites satisfait ou non le test.

41
00:02:58,150 --> 00:03:04,735
Maintenant, bien sûr, une fois que votre réalisation de vos fonctionnalités satisfait le test,

42
00:03:04,735 --> 00:03:10,919
vous pouvez toujours refactoriser le code pour se conformer à leurs normes d'ingénierie logicielle.

43
00:03:10,919 --> 00:03:12,939
Mais même après cela,

44
00:03:12,939 --> 00:03:16,900
vous pouvez retester le code pour vous assurer qu'il satisfait toujours

45
00:03:16,900 --> 00:03:20,844
les exigences spécifiées dans

46
00:03:20,844 --> 00:03:25,914
ce test spécifique que vous utilisez dans votre développement piloté par les tests.

47
00:03:25,914 --> 00:03:28,659
Donc, en effet, le développement piloté par les tests est

48
00:03:28,659 --> 00:03:32,199
une approche très viable pour concevoir

49
00:03:32,199 --> 00:03:36,522
une bonne application à partir de la base pour être entièrement testée.

50
00:03:36,522 --> 00:03:38,340
Maintenant, quand nous parlons de tests,

51
00:03:38,340 --> 00:03:42,009
vous pouvez aborder les tests à partir de plusieurs aspects différents.

52
00:03:42,009 --> 00:03:44,889
Le premier et avant tout est que si votre application

53
00:03:44,889 --> 00:03:48,534
elle-même est implémentée sous forme de différentes pièces,

54
00:03:48,534 --> 00:03:52,620
comme des composants, comme des services, comme des directives,

55
00:03:52,620 --> 00:03:57,760
comme les tuyaux que vous implémentez dans votre application.

56
00:03:57,760 --> 00:04:03,120
Cela signifie que vous pouvez facilement tester chacune de ces unités individuelles en isolement.

57
00:04:03,120 --> 00:04:06,435
C'est donc là que les tests unitaires viennent au premier plan.

58
00:04:06,435 --> 00:04:10,675
Test unitaire signifie que vous testez les unités de code individuelles,

59
00:04:10,675 --> 00:04:13,750
en vous assurant que cette unité individuelle en particulier

60
00:04:13,750 --> 00:04:18,759
satisfait la fonctionnalité qu'elle est censée prendre en charge,

61
00:04:18,759 --> 00:04:25,855
et que la fonctionnalité et la logique dans ce morceau de code sont implémentées correctement.

62
00:04:25,855 --> 00:04:28,870
Maintenant, isoler l'unité et le tester est très,

63
00:04:28,870 --> 00:04:35,401
très utile pour comprendre la plupart des problèmes initiaux dans votre,

64
00:04:35,401 --> 00:04:41,079
dans votre code, puis les réparer avant même d'intégrer ce patch dans le code.

65
00:04:41,079 --> 00:04:44,259
Maintenant, une fois que vous commencez à intégrer ces parties dans l'ensemble,

66
00:04:44,259 --> 00:04:50,860
, il devient encore plus lourd de pouvoir effectuer des tests détaillés de votre code.

67
00:04:50,860 --> 00:04:55,839
Donc, par conséquent, les tests unitaires isolés forment la première ligne

68
00:04:55,839 --> 00:05:01,029
de défense contre les bogues lorsque vous développez votre application,

69
00:05:01,029 --> 00:05:03,904
spécifiquement votre application angulaire.

70
00:05:03,904 --> 00:05:06,189
Maintenant, comme nous le voyons avec un angulaire,

71
00:05:06,189 --> 00:05:10,540
nous avons une séparation claire entre les composants angulaires et le DOM lui-même.

72
00:05:10,540 --> 00:05:13,339
Ainsi, dans un composant, par exemple,

73
00:05:13,339 --> 00:05:16,930
la logique de votre composant est complètement implémentée dans

74
00:05:16,930 --> 00:05:22,101
le code dactylographié que vous avez implémenté dans un composant qui dactylographié fichiers.

75
00:05:22,101 --> 00:05:25,675
Et puis le DOM lui-même est contrôlé via

76
00:05:25,675 --> 00:05:29,660
le modèle que vous avez conçu pour votre composant angulaire.

77
00:05:29,660 --> 00:05:33,475
Donc Beta elle-même, vous voyez la séparation claire entre les deux.

78
00:05:33,475 --> 00:05:36,139
Donc, vous pouvez simplement tester la logique de

79
00:05:36,139 --> 00:05:41,615
votre code de composant lui-même sans écrire un modèle vertical.

80
00:05:41,615 --> 00:05:47,350
Mais alors vous pourriez aussi considérer les deux ensemble et ensuite évaluer ces aspects.

81
00:05:47,350 --> 00:05:50,731
Comme nous le verrons dans l'exercice qui suit cette conférence,

82
00:05:50,731 --> 00:05:53,879
nous allons réellement faire ces deux approches.

83
00:05:53,879 --> 00:05:56,685
Non seulement cela, le fait que angulaire utilise l'injection de dépendance

84
00:05:56,685 --> 00:06:01,910
signifie que vous pouvez injecter des dépendances fictives dans votre application.

85
00:06:01,910 --> 00:06:04,279
Quand je dis faux, je veux dire, par exemple,

86
00:06:04,279 --> 00:06:08,500
si votre composant dépend d'un service particulier, vous pouvez toujours implémenter

87
00:06:08,500 --> 00:06:13,220
un service simulé qui imite le comportement du service

88
00:06:13,220 --> 00:06:17,689
, puis le substituer en place pendant que vous testez le composant afin que vous puissiez garder

89
00:06:17,689 --> 00:06:22,550
votre composant indépendamment de la façon dont le service est réellement mis en œuvre.

90
00:06:22,550 --> 00:06:27,110
Tant que l'interface entre votre composant et le service est correctement conçue

91
00:06:27,110 --> 00:06:32,045
, vous pouvez remplacer un service simulé en place et toujours tester votre composant.

92
00:06:32,045 --> 00:06:33,784
Là, à partir de la maquette,

93
00:06:33,784 --> 00:06:39,470
vous pouvez facilement contrôler ce qui est fourni au composant à partir du service.

94
00:06:39,470 --> 00:06:43,220
Donc, cette approche vous permet de faire des tests unitaires

95
00:06:43,220 --> 00:06:47,990
en détail dans votre application angulaire.

96
00:06:47,990 --> 00:06:53,375
C'est là que la disponibilité des frameworks de test comme « Jasmine ».

97
00:06:53,375 --> 00:06:55,459
Donc, ce que Jasmine fournit est

98
00:06:55,459 --> 00:07:03,110
un framework de test basé sur le comportement qui est complètement conçu en JavaScript.

99
00:07:03,110 --> 00:07:06,170
Maintenant, ce framework Jasmine est un framework général qui

100
00:07:06,170 --> 00:07:09,505
est disponible pour tester toutes les applications JavaScript.

101
00:07:09,505 --> 00:07:18,565
Angular adopte Jasmine comme approche pour spécifier nos tests pour d'autres parties angulaires,

102
00:07:18,565 --> 00:07:23,657
leurs composants, les services et divers aspects de notre application angulaire.

103
00:07:23,657 --> 00:07:30,730
Maintenant, au sein de Jasmine, Jasmine utilise deux choses qui viennent à votre aide.

104
00:07:30,730 --> 00:07:33,722
Un est l'utilisation d'une fonction « description ».

105
00:07:33,722 --> 00:07:38,779
La fonction « description » vous permet de regrouper un ensemble de tests, puis

106
00:07:38,779 --> 00:07:45,110
exécuter ces tests ensemble en un seul groupe de tests.

107
00:07:45,110 --> 00:07:47,884
Quand nous écrivons le code dans l'exercice, vous me verrez

108
00:07:47,884 --> 00:07:52,225
englobant un ensemble de tests dans une fonction de description.

109
00:07:52,225 --> 00:07:55,389
Ensuite, nous écrivons notre code pour notre,

110
00:07:55,389 --> 00:08:00,214
le code Jasmine, pour nos tests angulaires.

111
00:08:00,214 --> 00:08:05,171
Maintenant, dans ces fonctions « décrivez », vous utiliserez également ce qu'on appelle des fonctions « it ».

112
00:08:05,171 --> 00:08:07,550
Les fonctions « it » vous permettent de spécifier

113
00:08:07,550 --> 00:08:11,949
tests individuels que vous souhaitez effectuer sur votre application angulaire.

114
00:08:11,949 --> 00:08:17,509
C'est donc là que vous me verrez spécifier « it » et ensuite spécifier que

115
00:08:17,509 --> 00:08:21,185
la nature du test particulier et puis

116
00:08:21,185 --> 00:08:25,259
concevoir le code pour ce test particulier avec une fonction « it ».

117
00:08:25,259 --> 00:08:29,240
Alors que nous concevons le code dans l'exercice, recherchez le « description » et

118
00:08:29,240 --> 00:08:33,575
le « it » dans vos applications de test angulaires.

119
00:08:33,575 --> 00:08:37,559
Une fois que vous avez conçu le test avec le framework Jasmine,

120
00:08:37,559 --> 00:08:41,600
Karma est un outil de ligne de commande basé sur JavaScript

121
00:08:41,600 --> 00:08:46,174
qui vous permet d'effectuer ces tests automatiquement.

122
00:08:46,174 --> 00:08:48,440
Maintenant, Karma avec Jasmine,

123
00:08:48,440 --> 00:08:53,500
vous permet d'effectuer des tests pour votre application angulaire.

124
00:08:53,500 --> 00:08:56,375
Maintenant avec Karma, ce que Karma prend en charge,

125
00:08:56,375 --> 00:08:59,065
est qu'il vous permet de générer

126
00:08:59,065 --> 00:09:04,409
un serveur web dans lequel vous chargez votre code source d'application et

127
00:09:04,409 --> 00:09:13,370
puis Karma utilise ensuite un navigateur pour effectuer les tests réels de vos différentes unités.

128
00:09:13,370 --> 00:09:17,100
C'est donc là que lorsque vous exécutez vos tests en utilisant Karma,

129
00:09:17,100 --> 00:09:19,774
vous verrez Karma empiler un navigateur,

130
00:09:19,774 --> 00:09:26,120
si c'est une fenêtre de navigateur d'un navigateur existant ou

131
00:09:26,120 --> 00:09:29,174
si vous utiliseriez quelque chose appelé PhantomJS qui démarre

132
00:09:29,174 --> 00:09:32,715
un navigateur fantôme dans les coulisses pour effectuer le test.

133
00:09:32,715 --> 00:09:35,855
Peu importe, mais Karma utilise

134
00:09:35,855 --> 00:09:40,554
le navigateur en un instant pour effectuer le test de votre application angulaire.

135
00:09:40,554 --> 00:09:43,356
Comme vous le verrez dans l'exercice qui suit,

136
00:09:43,356 --> 00:09:50,649
c'est là que si l'un de vos collègues insiste sur le fait que sa mise en œuvre de

137
00:09:50,649 --> 00:09:55,070
un morceau particulier de votre application angulaire est

138
00:09:55,070 --> 00:09:59,659
correct et continue de souligner le point,

139
00:09:59,659 --> 00:10:03,110
vous pouvez toujours concevoir quelques tests en utilisant Jasmine et

140
00:10:03,110 --> 00:10:07,081
Karma puis effectuer les tests et si les tests échouent,

141
00:10:07,081 --> 00:10:11,095
vous pouvez toujours réfuter leur argument.

142
00:10:11,095 --> 00:10:12,615
Alors c'est à ce moment-là que vous pouvez vous tourner,

143
00:10:12,615 --> 00:10:14,465
tourner autour de votre collègue et dire,

144
00:10:14,465 --> 00:10:17,240
mon Karma a couru sur votre dogme.

145
00:10:17,240 --> 00:10:21,664
Maintenant, bien sûr, vos applications angulaires ne sont pas complètement dépourvues

146
00:10:21,664 --> 00:10:26,419
de l'implication du framework angulaire lui-même.

147
00:10:26,419 --> 00:10:29,210
Votre composant ne peut pas être conçu par vous-même sans

148
00:10:29,210 --> 00:10:33,850
en utilisant la plupart des fonctionnalités de bibliothèque que angular vous fournit,

149
00:10:33,850 --> 00:10:39,215
bien qu'une partie de la logique de base puisse être testée indépendamment de angulaire.

150
00:10:39,215 --> 00:10:42,125
Ce que nous appelons des tests isolés.

151
00:10:42,125 --> 00:10:44,450
Mais, de plus en plus,

152
00:10:44,450 --> 00:10:46,659
vous constaterez que, sauf si vous en,

153
00:10:46,659 --> 00:10:49,490
voulez le support de cadre angulaire lui-même, vous

154
00:10:49,490 --> 00:10:52,565
ne serez pas en mesure d'effectuer une grande partie du test de

155
00:10:52,565 --> 00:11:00,639
vos parties angulaires, que ce soit des composants ou des services ou des tuyaux ou des directives.

156
00:11:00,639 --> 00:11:05,524
C'est donc là que les utilitaires de test angulaire fournissent

157
00:11:05,524 --> 00:11:08,690
un environnement de test qui vous permet d'effectuer

158
00:11:08,690 --> 00:11:12,384
les tests unitaires dans votre application angulaire.

159
00:11:12,384 --> 00:11:18,139
Donc, les utilitaires de test angulaire comme vous me verrez utiliser dans les exercices,

160
00:11:18,139 --> 00:11:20,480
dans le tout prochain exercice,

161
00:11:20,480 --> 00:11:27,034
nous fourniront certaines implémentations de fonctionnalités angulaires que vous utilisez

162
00:11:27,034 --> 00:11:33,950
dans vos tests afin de mettre en place l'environnement où vous pouvez effectuer leurs tests.

163
00:11:33,950 --> 00:11:37,319
Donc, c'est là que l'interaction avec l'environnement angulaire,

164
00:11:37,319 --> 00:11:41,404
au lieu d'utiliser les implémentations angulaires réelles,

165
00:11:41,404 --> 00:11:45,740
vous utiliserez ces utilitaires de test qui fourniront

166
00:11:45,740 --> 00:11:50,355
suffisamment de fonctionnalités pour vous permettre d'effectuer les tests.

167
00:11:50,355 --> 00:11:53,840
Et c'est là que le TestBed que nous utiliserons

168
00:11:53,840 --> 00:11:57,825
dans notre application angulaire est très, très utile.

169
00:11:57,825 --> 00:12:02,899
Le TestBed crée essentiellement un test angulaire modulaire.

170
00:12:02,899 --> 00:12:06,205
Comme vous le réalisez, vos composants n'existent pas par eux-mêmes.

171
00:12:06,205 --> 00:12:09,850
Vos composants doivent être inclus dans un module NG.

172
00:12:09,850 --> 00:12:14,264
Maintenant, vous ne pouvez pas simplement utiliser un module NG standard pour effectuer vos tests.

173
00:12:14,264 --> 00:12:16,084
C'est donc là que le TestBed,

174
00:12:16,084 --> 00:12:18,560
qui est pris en charge par l'utilitaire de test angulaire,

175
00:12:18,560 --> 00:12:24,549
vous fournit un environnement de module NG qui vous permet de tester leurs composants.

176
00:12:24,549 --> 00:12:25,850
Donc, dans le TestBed,

177
00:12:25,850 --> 00:12:29,929
, vous utiliserez quelque chose appelé TestBed Create Component pour créer

178
00:12:29,929 --> 00:12:36,139
un composant individuel et une instance du composant pour effectuer les tests à ce sujet.

179
00:12:36,139 --> 00:12:37,940
Et quand vous faites cela

180
00:12:37,940 --> 00:12:42,454
, le TestBed vous donne accès à quelque chose appelé ComponentFixture,

181
00:12:42,454 --> 00:12:48,500
le ComponentFixture est quelque chose qui vous fournit une poignée qui vous permet d'entourer

182
00:12:48,500 --> 00:12:56,419
votre composant avec suffisamment de fonctionnalités pour que le composant puisse être testé par lui-même.

183
00:12:56,419 --> 00:13:00,950
Le luminaire donne accès au composant lui-même et

184
00:13:00,950 --> 00:13:05,299
puis aussi à travers cela, nous allons utiliser quelque chose appelé le DebugElement.

185
00:13:05,299 --> 00:13:08,375
Vous me verrez utiliser cela dans l'exercice qui suit.

186
00:13:08,375 --> 00:13:11,424
Le DebugElement vous donne accès au DOM,

187
00:13:11,424 --> 00:13:16,754
qui est le modèle qui est pris en charge dans le cadre de votre composant.

188
00:13:16,754 --> 00:13:23,899
Ainsi, vous pouvez faire des manipulations sur le DOM comme cliquer sur des éléments dans le DOM,

189
00:13:23,899 --> 00:13:29,315
obtenir l'accès à un élément DOM, puis lire ce qui est enfermé

190
00:13:29,315 --> 00:13:35,600
à l'intérieur de ces éléments Dom et ainsi de suite qui vous permettra d'effectuer les tests.

191
00:13:35,600 --> 00:13:37,669
Maintenant, avant de passer à l'exercice,

192
00:13:37,669 --> 00:13:43,250
je veux que vous soyez au courant de certaines de ces choses afin que lorsque nous les rencontrons dans

193
00:13:43,250 --> 00:13:51,139
l'exercice lui-même vous comprendrez pourquoi je fais usage de chacune de ces différentes pièces.