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

2
00:00:04,858 --> 00:00:09,967
La fragancia del jazmín de todas esas guirnaldas de flores

3
00:00:09,967 --> 00:00:14,218
en la calle del templo flotando por el aire.

4
00:00:14,218 --> 00:00:17,684
Qué sensación de asentamiento.

5
00:00:17,684 --> 00:00:20,510
Debe ser el buen karma de mi vida pasada.

6
00:00:23,749 --> 00:00:25,857
Lo siento, ¿dónde estaba?

7
00:00:25,857 --> 00:00:29,703
Te estaba hablando de pruebas angulares, ¿verdad?

8
00:00:29,703 --> 00:00:34,743
Y vamos a usar el ajuste del karma para hacer nuestras pruebas angulares.

9
00:00:34,743 --> 00:00:37,769
Así que sigamos con ello.

10
00:00:37,769 --> 00:00:45,571
Una buena cosa sobre el uso de la CLI angular es que configura todo el andamio para

11
00:00:45,571 --> 00:00:49,869
para que incluya automáticamente el soporte para

12
00:00:49,869 --> 00:00:53,393
probar su aplicación Angular.

13
00:00:53,393 --> 00:00:59,108
Así que notará que cada vez que genere un componente o

14
00:00:59,108 --> 00:01:03,454
un servicio junto con los archivos ts del componente,

15
00:01:03,454 --> 00:01:08,942
también notará un archivo llamado component.spect.ts

16
00:01:08,942 --> 00:01:13,422
ya incluido en sus carpetas del proyecto.

17
00:01:13,422 --> 00:01:17,423
Y también, si va al archivo package.json,

18
00:01:17,423 --> 00:01:24,434
verá que ya hay soporte para las pruebas angulares incluidas allí.

19
00:01:24,434 --> 00:01:30,640
Entonces, si entra en las dependencias de desarrollo, verá que el núcleo de jazmín,

20
00:01:30,640 --> 00:01:34,201
el reportero de especificación de jazmín, los módulos npm relacionados con karma y

21
00:01:34,201 --> 00:01:39,394
karma ya están instalados dentro de su aplicación angular

22
00:01:39,394 --> 00:01:44,414
que es andamio por Angular CLI.

23
00:01:44,414 --> 00:01:47,716
Por lo tanto, tenemos todas las cosas y lugar para

24
00:01:47,716 --> 00:01:53,538
nosotros para seguir haciendo nuestras pruebas para nuestra aplicación angular.

25
00:01:53,538 --> 00:01:58,617
Entonces, si miras a tu alrededor verás que hay

26
00:01:58,617 --> 00:02:03,572
un archivo llamado test.ts en tu carpeta fuente,

27
00:02:03,572 --> 00:02:07,269
así que abramos el archivo test.ts.

28
00:02:07,269 --> 00:02:11,518
También verá que hay otra carpeta aquí llamada a e2e.

29
00:02:11,518 --> 00:02:16,409
Volveremos a eso en el próximo ejercicio.

30
00:02:16,409 --> 00:02:21,232
Pero en la carpeta test.ts, verás que aquí es donde

31
00:02:21,232 --> 00:02:25,084
tu soporte karma está siendo configurado aquí.

32
00:02:25,084 --> 00:02:29,551
Así que entrando en este archivo test.ts, por defecto,

33
00:02:29,551 --> 00:02:33,907
cuando use el soporte angular CLS para test,

34
00:02:33,907 --> 00:02:38,261
ejecutará las pruebas para todos los componentes y

35
00:02:38,261 --> 00:02:43,750
servicios que están incluidos en su aplicación angular.

36
00:02:43,750 --> 00:02:49,017
Ahora, voy a ilustrar cómo hacer pruebas para

37
00:02:49,017 --> 00:02:53,516
un componente específico, el MenuComponent.

38
00:02:53,516 --> 00:03:00,469
Así que quiero restringirme para usar solo el archivo.spec del componente de menú y

39
00:03:00,469 --> 00:03:04,696
hacer las pruebas solo para el componente de menú.

40
00:03:04,696 --> 00:03:07,823
Entonces, entra en el archivo test.ts.

41
00:03:07,823 --> 00:03:16,388
Una forma de configurar la prueba CLI angular para ejecutar la prueba solo para

42
00:03:16,388 --> 00:03:22,397
un componente específico es ir a esta línea aquí,

43
00:03:22,397 --> 00:03:29,308
que dice contexto const y luego cambiar esto a menú,

44
00:03:29,308 --> 00:03:36,088
puede ver /menu\ .component y spec.ts file.

45
00:03:36,088 --> 00:03:41,615
Anteriormente era solo el archivo/\ .spec.ts, lo que significaba que

46
00:03:41,615 --> 00:03:47,992
ejecutará todos los archivos de especificación que están allí en la carpeta de origen del proyecto.

47
00:03:47,992 --> 00:03:51,379
Entonces, en este momento, especificando esto aquí,

48
00:03:51,379 --> 00:03:57,225
estoy interesado en ejecutar la prueba solo para el archivo de especificación del componente de menú aquí.

49
00:03:57,225 --> 00:04:02,285
Ahora esto lo descubro buscando en el desbordamiento de la pila

50
00:04:02,285 --> 00:04:08,268
donde encontré a alguien dándome la respuesta a esto,

51
00:04:08,268 --> 00:04:12,985
apuntando a algún recurso en Angular CLI, y así

52
00:04:12,985 --> 00:04:18,393
así es como descubrí que esta es la forma de restringir

53
00:04:18,393 --> 00:04:23,019
la prueba al archivo de prueba de un componente específico.

54
00:04:23,019 --> 00:04:28,465
Así que después de hacer un cambio en el archivo test.ts, vamos a guardar el cambio.

55
00:04:28,465 --> 00:04:32,622
Ahora, intentaremos ejecutar nuestra prueba en el componente de menú.

56
00:04:32,622 --> 00:04:37,198
Así que como ves, en el componente de menú, ya tenemos el archivo menu

57
00:04:37,198 --> 00:04:42,051
componente.spec.ts, que ya contiene algún código.

58
00:04:42,051 --> 00:04:45,631
Vamos a tratar de ejecutar esta prueba y ver qué sucede.

59
00:04:45,631 --> 00:04:50,650
Al ir a la terminal, agregue el prompt, escriba ng test, y este

60
00:04:50,650 --> 00:04:56,644
dará como resultado una CLI angular que inicie la prueba para el componente de menú.

61
00:04:56,644 --> 00:04:59,875
Entonces, cuando escriba esto y presione Return,

62
00:04:59,875 --> 00:05:05,216
, entonces Angular CLI comenzará a compilar su aplicación angular.

63
00:05:05,216 --> 00:05:10,129
También abrirá una ventana del navegador, en mi caso abrirá una ventana

64
00:05:10,129 --> 00:05:13,874
del navegador Chrome y luego usará esa ventana del navegador para ejecutar la prueba.

65
00:05:13,874 --> 00:05:20,992
Y ves que en la parte posterior, tienes la ventana del navegador Chrome ejecutándose y

66
00:05:20,992 --> 00:05:25,980
está llena de rojo y un montón de palabras allí.

67
00:05:25,980 --> 00:05:30,937
La misma información también se imprimirá en la ventana de la consola,

68
00:05:30,937 --> 00:05:34,980
y de esto puedo ver que mi prueba no se ejecutó correctamente.

69
00:05:34,980 --> 00:05:41,070
Hay algo que no está configurado correctamente en mi archivo de prueba, así que tendré que ir y

70
00:05:41,070 --> 00:05:47,272
editar mi archivo de prueba para incluir el soporte adecuado para ejecutar esta prueba correctamente.

71
00:05:47,272 --> 00:05:51,425
Así que vayamos al archivo spec.ts del componente de menú y

72
00:05:51,425 --> 00:05:54,430
luego preparemos nuestra prueba en consecuencia.

73
00:05:54,430 --> 00:06:00,134
Ahora podemos dejar la prueba ng corriendo justo aquí.

74
00:06:00,134 --> 00:06:04,337
Cada vez que realice cambios en el archivo mini component.ts o

75
00:06:04,337 --> 00:06:07,169
el archivo mini component.spec.ts y

76
00:06:07,169 --> 00:06:12,078
guarde los cambios, esta prueba se ejecutará automáticamente en ese momento.

77
00:06:12,078 --> 00:06:17,011
Entonces, vamos al archivo MenuComponent.spect.ts.

78
00:06:17,011 --> 00:06:21,882
Al ir al archivo MenuComponent.spect.ts,

79
00:06:21,882 --> 00:06:30,417
entendemos que el archivo spect utiliza la sintaxis de Jasmine para describir la prueba.

80
00:06:30,417 --> 00:06:33,478
Así que ya notaste que hay algo aquí

81
00:06:33,478 --> 00:06:38,118
que comienza con describir y luego hay una función definida allí.

82
00:06:38,118 --> 00:06:43,174
Así que esto es a lo que me refería cuando hablé antes sobre la sintaxis de Jasmine.

83
00:06:43,174 --> 00:06:47,961
Y también si te desplazas hacia abajo verás un o algo así allí.

84
00:06:47,961 --> 00:06:53,922
Y además, verás algo llamado beforeEach, aquí.

85
00:06:53,922 --> 00:06:59,594
Examinemos este archivo con un poco más de detalle para entender cómo se configura este archivo

86
00:06:59,594 --> 00:07:05,794
, y cómo se configura esta prueba en este archivo en particular.

87
00:07:05,794 --> 00:07:10,843
Así que dentro de este archivo de prueba, se dará cuenta de que

88
00:07:10,843 --> 00:07:17,979
estamos importando aquí un conjunto de clases de Angular core testing.

89
00:07:17,979 --> 00:07:22,874
Así que este módulo le permite proporcionar el soporte de pruebas para

90
00:07:22,874 --> 00:07:29,603
su aplicación angular, y le permite diseñar la prueba para su componente.

91
00:07:29,603 --> 00:07:33,304
Entonces verá que estoy importando async y

92
00:07:33,304 --> 00:07:39,105
ComponentFixture y TestBed de esta biblioteca de pruebas.

93
00:07:39,105 --> 00:07:40,955
Voy a llamarlo biblioteca de pruebas.

94
00:07:40,955 --> 00:07:44,783
También ve que el MenuComponent también se importa aquí.

95
00:07:44,783 --> 00:07:47,220
Ahora, una vez que comprendamos estos dos,

96
00:07:47,220 --> 00:07:51,788
vamos a caminar por el código para entender lo que estamos tratando de hacer aquí.

97
00:07:51,788 --> 00:07:56,358
Así que, aquí, como usted espera, esta descripción aquí es

98
00:07:56,358 --> 00:08:02,330
especificando que esta función en particular está describiendo,

99
00:08:02,330 --> 00:08:08,129
Una prueba basada en Jasmine que estamos especificando para nuestra aplicación Angular.

100
00:08:08,129 --> 00:08:11,056
Así que cuando mires la descripción aquí,

101
00:08:11,056 --> 00:08:15,181
verás que esto incluye todo este código aquí.

102
00:08:15,181 --> 00:08:19,950
Así que esto es parte de un solo conjunto de pruebas que estamos ejecutando son nuestro componente de menú

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

104
00:08:21,670 --> 00:08:26,670
Así que dentro de la descripción, verá que hay una cadena aquí.

105
00:08:26,670 --> 00:08:32,120
Esto especifica este conjunto particular de pruebas que está ejecutando aquí.

106
00:08:32,120 --> 00:08:34,130
Entonces, dice en el componente de menú.

107
00:08:34,130 --> 00:08:36,770
Así que aquí puede especificar cualquier cadena que desee.

108
00:08:36,770 --> 00:08:39,930
Puede usar esto como una descripción para

109
00:08:39,930 --> 00:08:43,610
especificar lo que está haciendo este conjunto particular de pruebas.

110
00:08:43,610 --> 00:08:46,930
Así que aquí, me voy a quedar con una cosa antes.

111
00:08:46,930 --> 00:08:49,380
Estamos tratando de probar el componente de menú.

112
00:08:49,380 --> 00:08:53,320
Y después de eso, verá que estamos especificando una función addo aquí.

113
00:08:53,320 --> 00:08:57,036
Dentro de esta función addo, vamos a construir la prueba.

114
00:08:57,036 --> 00:09:00,700
Para nuestro MenuComponent aquí.

115
00:09:00,700 --> 00:09:05,670
Así que después de esto, verá que estamos declarando una variable llamada componente,

116
00:09:05,670 --> 00:09:08,080
que es del tipo MenuComponent.

117
00:09:08,080 --> 00:09:11,950
De vez en cuando, también estamos declarando una variable de fixture,

118
00:09:11,950 --> 00:09:14,140
que es del tipo ComponentFixture.

119
00:09:15,390 --> 00:09:19,060
Que es del tipo MenuComponent.

120
00:09:19,060 --> 00:09:21,180
Ahora, ¿por qué es esto interesante?

121
00:09:21,180 --> 00:09:24,450
Ahora, dentro de nuestra aplicación Angular,

122
00:09:24,450 --> 00:09:27,130
tenemos el MenuComponent que ya hemos diseñado.

123
00:09:27,130 --> 00:09:29,990
Así que en este archivo de prueba,

124
00:09:29,990 --> 00:09:35,310
vamos a crear ese MenuComponent usando el testBed angular,

125
00:09:35,310 --> 00:09:38,110
y luego vamos a llevar a cabo las pruebas en el MenuComponent.

126
00:09:38,110 --> 00:09:40,580
Así que vamos a aislar el MenuComponent, y

127
00:09:40,580 --> 00:09:45,760
luego llevar a cabo pruebas unitarias en ese componente específico.

128
00:09:45,760 --> 00:09:50,470
Ahora, aquí es donde las utilidades angulares de prueba

129
00:09:50,470 --> 00:09:54,900
que vienen con soporte usando TestBed.

130
00:09:54,900 --> 00:09:58,890
El TestBed me permite configurar el entorno dentro del cual

131
00:09:58,890 --> 00:10:01,280
puedo probar mi componente angular.

132
00:10:01,280 --> 00:10:04,935
Así que aquí, verá que estamos diciendo TestBed y

133
00:10:04,935 --> 00:10:11,049
luego llamando al método del módulo de configuración de prueba de la clase TestBed aquí.

134
00:10:11,049 --> 00:10:14,233
Y dentro de este módulo de prueba de configuración,

135
00:10:14,233 --> 00:10:19,406
puedes declarar un montón de cosas, y me verás agregando más aquí.

136
00:10:19,406 --> 00:10:24,296
Esto actúa exactamente como la configuración del módulo NG

137
00:10:24,296 --> 00:10:27,714
que usted hace para nuestro módulo en allí.

138
00:10:27,714 --> 00:10:30,950
Así que toda la información que necesita para

139
00:10:30,950 --> 00:10:35,375
configurar el MenuComponent se declarará aquí.

140
00:10:35,375 --> 00:10:40,022
Entonces, la parte del modelo NG que vio en el módulo de la aplicación,

141
00:10:40,022 --> 00:10:45,999
tipo similar de sintaxis se puede usar aquí para declarar el soporte para

142
00:10:45,999 --> 00:10:49,690
probar el MenuComponent aquí.

143
00:10:49,690 --> 00:10:55,849
Y también después de esto, verá esta función llamada a CompileComponents.

144
00:10:55,849 --> 00:11:00,205
Así que este método compilará el MenuComponent y

145
00:11:00,205 --> 00:11:03,427
lo preparará para hacer las pruebas.

146
00:11:03,427 --> 00:11:08,852
Tenga en cuenta también, que todo esto, esta función aquí,

147
00:11:08,852 --> 00:11:14,250
está encerrado dentro de algo llamado asíncrono aquí.

148
00:11:14,250 --> 00:11:16,548
Ahora, ¿por qué necesitamos este asincrónico?

149
00:11:16,548 --> 00:11:21,315
Ahora, porque la preparación de los componentes usando este método

150
00:11:21,315 --> 00:11:25,711
CompileComponents lleva algo de tiempo.

151
00:11:25,711 --> 00:11:30,643
Y hasta que esto se complete, no podemos continuar con las pruebas.

152
00:11:30,643 --> 00:11:34,583
Entonces, usando el módulo asíncrono, esencialmente estamos especificando que

153
00:11:34,583 --> 00:11:39,432
voy a esperar a que todo esto se complete antes de continuar.

154
00:11:39,432 --> 00:11:42,107
Entonces, el módulo asynch como ves,

155
00:11:42,107 --> 00:11:47,690
envuelve una función de prueba dentro de una zona de prueba asíncrona.

156
00:11:47,690 --> 00:11:52,510
Entonces, lo que esto significa es que esta prueba completará automáticamente

157
00:11:52,510 --> 00:11:56,830
cuando se realicen todas las llamadas asincrónicas dentro de esta zona.

158
00:11:56,830 --> 00:12:03,755
Así que esto es lo que hace el uso de la asíncrona que tenemos aquí.

159
00:12:03,755 --> 00:12:08,206
Entonces, lo que esto significa es que puedes usar esta función de sincronización,

160
00:12:08,206 --> 00:12:14,442
ya sea en el antes de cada uno o en el también, por lo que dentro de la misma, nuestra declaración.

161
00:12:14,442 --> 00:12:20,032
Entonces, cuando vea dentro del también, verá que puede usar el asíncrono.

162
00:12:20,032 --> 00:12:24,160
Entonces, en caso de que tenga alguna operación aquí que se realice asincrónicamente.

163
00:12:24,160 --> 00:12:29,500
Entonces debe esperar a que esas operaciones se completen para que esa prueba se complete.

164
00:12:29,500 --> 00:12:33,996
Entonces, por ejemplo, si está llamando a un servicio y espera a que

165
00:12:33,996 --> 00:12:37,070
el servicio devuelva el valor, entonces.

166
00:12:37,070 --> 00:12:41,997
Todo lo que necesita para completar antes de que pueda continuar adelante.

167
00:12:41,997 --> 00:12:48,603
Entonces, esos están habilitados mediante el uso de este asincrónico, para rodear esta función aquí.

168
00:12:48,603 --> 00:12:53,726
Ahora, además, el segundo AntesEach, ahora hemos separado

169
00:12:53,726 --> 00:12:59,592
esto en dos separados antesEach aquí, porque queremos que esto se complete.

170
00:12:59,592 --> 00:13:04,592
Y este CompileComponents va a tomar una cierta cantidad de tiempo,

171
00:13:04,592 --> 00:13:09,000
especialmente si su componente está usando una plantilla externa,

172
00:13:09,000 --> 00:13:11,570
como lo hacemos en nuestro MenuComponent.

173
00:13:11,570 --> 00:13:16,850
Por lo tanto, requiere algún tiempo para que la plantilla externa se prepare para que

174
00:13:16,850 --> 00:13:19,430
mis pruebas continúen.

175
00:13:19,430 --> 00:13:22,210
Por lo tanto, tenemos que esperar a que todo esto se complete.

176
00:13:22,210 --> 00:13:25,634
Así que es por eso que después de que esto esté completo,

177
00:13:25,634 --> 00:13:30,449
entonces vamos a llegar a la segunda parte donde vamos a

178
00:13:30,449 --> 00:13:35,710
obtener algunas referencias a algunos valores del banco de pruebas.

179
00:13:35,710 --> 00:13:40,752
Ahora, ¿qué es esto BeforeEach función que estás haciendo aquí?

180
00:13:40,752 --> 00:13:45,718
Lo que BeforeEach significa es que lo que declare dentro de aquí,

181
00:13:45,718 --> 00:13:49,313
esa función se ejecutará beforeEach test,

182
00:13:49,313 --> 00:13:53,012
que va a especificar más adelante usando el it.

183
00:13:53,012 --> 00:13:57,734
Así que usando esto BeforeEach, puede configurar la configuración

184
00:13:57,734 --> 00:14:02,253
inicial para que su prueba continúe hacia adelante.

185
00:14:02,253 --> 00:14:05,923
Así que significa que aquí, estamos configurando nuestro TestBed,

186
00:14:05,923 --> 00:14:10,330
preparando nuestro componente de menú y luego configurando algunas cosas para

187
00:14:10,330 --> 00:14:14,752
nuestro componente de menú, antes de proceder a llevar a cabo la prueba.

188
00:14:14,752 --> 00:14:19,292
Así que para cada una de las pruebas que va a especificar usando un aquí,

189
00:14:19,292 --> 00:14:23,428
estos antes de cada uno lo que especifique en esto antes de cada uno,

190
00:14:23,428 --> 00:14:26,692
se ejecutará antes de que se lleve a cabo la prueba.

191
00:14:26,692 --> 00:14:30,008
Así que aquí como pueden ver estoy preparando el TestBed.

192
00:14:30,008 --> 00:14:34,980
Luego, después, estoy obteniendo acceso al accesorio.

193
00:14:34,980 --> 00:14:39,143
Así que estoy usando TestBed, estoy diciendo CreateComponent y MenuComponent.

194
00:14:39,143 --> 00:14:43,782
Así que esto me devolverá una referencia al MenuComponent que

195
00:14:43,782 --> 00:14:47,215
estoy creando dentro de mi script de prueba aquí y

196
00:14:47,215 --> 00:14:52,130
luego obtendré una referencia a eso, porque necesitaré una referencia a

197
00:14:52,130 --> 00:14:57,178
que para hacer algunas manipulaciones en ese componente allí.

198
00:14:57,178 --> 00:15:02,608
Además, desde el accesorio, estoy obteniendo un acceso a la instancia de componente

199
00:15:02,608 --> 00:15:07,324
que está siendo creada por mi accesorio de componente aquí.

200
00:15:07,324 --> 00:15:12,828
Así que como puede ver, el accesorio del componente del tipo MenuComponent y

201
00:15:12,828 --> 00:15:18,799
luego llamando al ComponentInstance, me da acceso a ese componente

202
00:15:18,799 --> 00:15:25,259
de menú específico que he creado dentro del TestBed para llevar a cabo las pruebas unitarias.

203
00:15:25,259 --> 00:15:30,004
Ahora, después de esto llamamos esto DetectChanges.

204
00:15:30,004 --> 00:15:35,482
Ahora, lo que esto significa es que esto continuará adelante sólo después de que todos los cambios

205
00:15:35,482 --> 00:15:40,254
sean completados, y luego reconocer que los cambios se han completado.

206
00:15:40,254 --> 00:15:45,686
Así que esto activará un ciclo de detección de cambios para este componente.

207
00:15:45,686 --> 00:15:50,323
Así que lo que esto significa es que esto asegurará que has hecho cualquier cambio

208
00:15:50,323 --> 00:15:54,086
antes, todos los cambios son detectados y

209
00:15:54,086 --> 00:16:00,170
todo se estabiliza antes de que puedas continuar con tu prueba.

210
00:16:00,170 --> 00:16:07,500
Ahora, después de esto, vamos a usar nuestro para configurar nuestra primera prueba aquí.

211
00:16:07,500 --> 00:16:10,500
¿Cuál es la primera prueba que estamos haciendo aquí?

212
00:16:10,500 --> 00:16:11,520
La primera prueba,

213
00:16:11,520 --> 00:16:15,670
lo que vamos a probar es asegurarnos de que el componente ha sido creado.

214
00:16:15,670 --> 00:16:21,848
Entonces, dentro de esto aquí, estoy usando la sintaxis de Jasmin y lo estoy diciendo.

215
00:16:21,848 --> 00:16:27,035
Y luego aquí puede dar una descripción en forma de una cadena

216
00:16:27,035 --> 00:16:31,760
para especificar lo que esta prueba realmente está probando.

217
00:16:31,760 --> 00:16:33,640
Entonces, lo que estamos diciendo es,

218
00:16:33,640 --> 00:16:37,540
estamos probando para ver si el componente ha sido creado o no.

219
00:16:37,540 --> 00:16:40,810
Entonces, para hacer eso, estoy diciendo que debería crear un significado que,

220
00:16:40,810 --> 00:16:44,610
esta configuración aquí debería haber creado el componente correctamente.

221
00:16:44,610 --> 00:16:49,350
Así que es por eso que dentro de aquí, estoy usando este método llamado expect.

222
00:16:49,350 --> 00:16:53,760
Entonces, el método esperado dentro de aquí toma un valor aquí, y

223
00:16:53,760 --> 00:16:57,840
luego puede probar para ver si este valor satisface algo.

224
00:16:57,840 --> 00:17:04,640
Así que aquí estamos diciendo a BeTruthy, lo que significa que este valor particular debe ser verdadero.

225
00:17:04,640 --> 00:17:09,950
Eso es lo que se especifica por este método llamado aquí ToBtruthy.

226
00:17:09,950 --> 00:17:15,010
También puedes decir toBefalsy, lo que significa que debe evaluarse como falso.

227
00:17:15,010 --> 00:17:15,873
Pero en este caso,

228
00:17:15,873 --> 00:17:19,510
estamos probando para asegurarnos de que el componente se ha creado correctamente.

229
00:17:19,510 --> 00:17:24,000
Así que es por eso que estamos diciendo que esperemos a Truthy aquí.

230
00:17:24,000 --> 00:17:28,877
Así que esta es una prueba simple que estamos haciendo para asegurarnos de que nuestro componente

231
00:17:28,877 --> 00:17:32,404
se está creando correctamente.

232
00:17:32,404 --> 00:17:37,713
Pero como nos damos cuenta cuando ejecuto esta prueba, no se está ejecutando correctamente.

233
00:17:37,713 --> 00:17:42,638
Echemos un vistazo rápidamente y veamos cuál es el problema dentro de

234
00:17:42,638 --> 00:17:47,770
nuestra creación de componentes en la ventana de la consola allí.

235
00:17:47,770 --> 00:17:51,390
Volviendo a la ventana de la consola, déjame mirar hacia atrás y

236
00:17:51,390 --> 00:17:54,840
ver dónde está el problema.

237
00:17:54,840 --> 00:17:59,820
Y estoy empezando a notar que esto está especificando que no parece

238
00:17:59,820 --> 00:18:04,480
reconocer algunas de las cosas que mi componente está usando.

239
00:18:04,480 --> 00:18:09,065
En particular, está diciendo que el MDSpinach

240
00:18:09,065 --> 00:18:13,191
es algo que no reconoce,

241
00:18:13,191 --> 00:18:17,330
el MDGetGridList y algunas otras cosas.

242
00:18:17,330 --> 00:18:21,289
Eso inmediatamente me sugiere que necesito hacer algunas configuraciones

243
00:18:21,289 --> 00:18:26,170
más dentro de mi archivo de prueba antes de que mi prueba pueda ejecutarse correctamente.

244
00:18:26,170 --> 00:18:30,994
Entonces, volvamos a nuestro archivo de especificaciones y hagamos algunos cambios en él.

245
00:18:30,994 --> 00:18:34,142
Volviendo a nuestro archivo de especificaciones,

246
00:18:34,142 --> 00:18:40,182
de nuestro recuerdo de cómo creamos la plantilla.

247
00:18:40,182 --> 00:18:44,865
Sabemos que dentro de la plantilla teníamos un enlace de router en la plantilla

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

249
00:18:45,605 --> 00:18:50,325
Así que necesito soporte para el enrutamiento con el fin de reconocer ese enlace del enrutador

250
00:18:50,325 --> 00:18:54,698
que usamos dentro del archivo MenuComponent.html.

251
00:18:54,698 --> 00:18:59,640
Así que aquí es donde voy a importar

252
00:18:59,640 --> 00:19:03,926
otro soporte de prueba proporcionado

253
00:19:03,926 --> 00:19:09,199
llamado como routerTestingModule,

254
00:19:09,199 --> 00:19:18,615
que está disponible en la biblioteca angular/router/testing aquí.

255
00:19:18,615 --> 00:19:21,625
Así que este módulo de prueba del router me permitirá

256
00:19:21,625 --> 00:19:24,135
configurar algunos aspectos sobre mi router.

257
00:19:24,135 --> 00:19:28,235
Veremos que la forma en que usamos esto es un poco diferente del módulo de router

258
00:19:28,235 --> 00:19:30,195
que hemos utilizado en nuestra aplicación.

259
00:19:30,195 --> 00:19:34,835
Así que vamos a importar el módulo de prueba de enrutamiento, también usted nota

260
00:19:34,835 --> 00:19:39,640
que estamos usando algunas animaciones, y

261
00:19:39,640 --> 00:19:45,660
también usando el componente de material angular dentro de nuestra plantilla.

262
00:19:45,660 --> 00:19:49,410
Así que necesito importar

263
00:19:49,410 --> 00:19:57,079
el browserAnimationsModule en mi archivo de prueba.

264
00:19:58,490 --> 00:20:05,070
Entonces esto viene del angular/plataforma/navegador.

265
00:20:05,070 --> 00:20:09,619
Ahora notarás que tenemos que hacer esto explícitamente aquí simplemente porque

266
00:20:10,700 --> 00:20:16,960
en la aplicación Angular real todo esto estaba en el módulo de la aplicación,

267
00:20:16,960 --> 00:20:20,310
y por lo que estaba disponible para los componentes.

268
00:20:20,310 --> 00:20:24,340
En este momento estamos probando este componente, el MenuComponent en aislamiento, por lo que

269
00:20:24,340 --> 00:20:27,500
es por eso que no sabe sobre todas estas cosas, así que

270
00:20:27,500 --> 00:20:31,190
necesitamos especificar explícitamente todas estas cosas aquí.

271
00:20:31,190 --> 00:20:38,569
Así que voy a importar eso desde la animación del navegador de la plataforma de mensajería instantánea aquí.

272
00:20:38,569 --> 00:20:43,358
Así angular.platform.browser animaciones importando las animaciones del navegador

273
00:20:43,358 --> 00:20:44,220
módulo aquí.

274
00:20:44,220 --> 00:20:47,300
Permítanme incluir el módulo de capa flexible, por lo que

275
00:20:47,300 --> 00:20:53,060
incluiré Angular FlexLayout.

276
00:20:53,060 --> 00:20:58,525
Así que estos son necesarios porque los necesito en la plantilla,

277
00:20:58,525 --> 00:21:02,605
voy a importar también ese plato de,

278
00:21:06,495 --> 00:21:09,348
compartido/plato porque como verá más adelante,

279
00:21:09,348 --> 00:21:14,125
necesito configurar, A,

280
00:21:20,002 --> 00:21:26,070
dishService porque mi menuComponent

281
00:21:26,070 --> 00:21:31,033
depende de la dishService así

282
00:21:31,033 --> 00:21:35,170
necesito que también en su lugar.

283
00:21:35,170 --> 00:21:39,170
Aunque verán que voy a parar eso.

284
00:21:39,170 --> 00:21:44,860
Voy a explicar eso en poco tiempo, y también necesito importar algunas cosas más.

285
00:21:44,860 --> 00:21:47,410
Voy a importar DISEÑAS de,

286
00:21:48,530 --> 00:21:53,260
recuerda que usamos esta constante llamada DISETS

287
00:21:56,870 --> 00:22:01,640
que exportamos desde el archivo shared/dishes.ts.

288
00:22:01,640 --> 00:22:05,650
Necesitaré eso para configurar algunas cosas más.

289
00:22:05,650 --> 00:22:09,702
También voy a importar el BaseURL.

290
00:22:11,343 --> 00:22:19,105
Que declaré en el archivo url, compartido/base

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

292
00:22:23,368 --> 00:22:28,692
Y también, necesito importar

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

294
00:22:35,992 --> 00:22:41,319
rxjs, barra, Porque

295
00:22:41,319 --> 00:22:47,220
también usaré Observable un poco más tarde, cuando configure algunas cosas.

296
00:22:47,220 --> 00:22:50,806
Así que ahora, he importado todas estas cosas.

297
00:22:50,806 --> 00:22:56,157
Al entrar en la configuración TestBed, verá que esta parte

298
00:22:56,157 --> 00:23:02,813
es exactamente como el decorador del módulo del motor que tenemos en el módulo de la aplicación.

299
00:23:02,813 --> 00:23:07,450
Así que aquí es donde también puedo usar las importaciones solo

300
00:23:07,450 --> 00:23:11,000
como hice con el módulo del motor.

301
00:23:11,000 --> 00:23:16,900
Y dentro de las importaciones, voy a importar el módulo BrowserAnimation

302
00:23:16,900 --> 00:23:21,765
porque eso es algo que l requiere, y

303
00:23:21,765 --> 00:23:25,090
luego también importar el módulo FlexLayout.

304
00:23:26,660 --> 00:23:32,690
Y también el routerTestingModule porque

305
00:23:32,690 --> 00:23:36,540
necesitaría el routerTestingModule para configurar algunas cosas.

306
00:23:36,540 --> 00:23:40,705
Ahora, cuando usa el routerTestingModule, necesita usar este método

307
00:23:40,705 --> 00:23:46,950
llamado WitRoutes en lugar de usar ForRoot como usamos con el módulo del router aquí.

308
00:23:46,950 --> 00:23:52,400
Así que dentro de este WiThrough puede especificar algunas rutas

309
00:23:52,400 --> 00:23:58,460
predeterminadas que necesita para su aplicación específica aquí.

310
00:23:58,460 --> 00:24:03,737
Solo voy a configurar una sola ruta aquí,

311
00:24:03,737 --> 00:24:09,359
y eso es lo suficientemente bueno para mí para probar este módulo aquí.

312
00:24:09,359 --> 00:24:14,497
Así que solo voy a decir ruta: 'menu',

313
00:24:14,497 --> 00:24:19,021
y componente: menuComponent.

314
00:24:19,021 --> 00:24:24,235
Dado que las plantillas MenuComponent están utilizando ciertos componentes de material,

315
00:24:24,235 --> 00:24:26,523
vamos a seguir adelante e importarlos.

316
00:24:26,523 --> 00:24:35,263
Así que vamos a importar MatGridListModule

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

318
00:24:45,034 --> 00:24:54,033
también MatProgressSpinnerModule de

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

320
00:25:04,327 --> 00:25:09,123
Y una vez que los hayamos importado, sigamos adelante y

321
00:25:09,123 --> 00:25:13,322
los incluyamos en las importaciones allá abajo.

322
00:25:13,322 --> 00:25:19,568
Así que vamos a añadir en MatGridListModule y MatProgressSpinnerModule.

323
00:25:19,568 --> 00:25:23,047
Y eso es todo lo que necesito para que

324
00:25:23,047 --> 00:25:28,997
estas importaciones particulares se configuren aquí.

325
00:25:28,997 --> 00:25:34,422
Así que junto con las importaciones, tenemos las declaraciones donde tengo

326
00:25:34,422 --> 00:25:41,067
el MenuComponent que se usa aquí, también puedo configurar los proveedores aquí.

327
00:25:41,067 --> 00:25:43,295
Así que necesito configurar los proveedores aquí.

328
00:25:43,295 --> 00:25:47,998
Ahora aquí es donde vamos

329
00:25:47,998 --> 00:25:52,898
para crear algunos talones aquí, así que

330
00:25:52,898 --> 00:25:58,779
voy a decir proporcionar: DishService.

331
00:25:58,779 --> 00:26:02,825
Ahora, el DishService que vamos a usar aquí no va a ser el verdadero

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

333
00:26:03,713 --> 00:26:08,422
Cuando está probando un componente, no desea usar un servicio real.

334
00:26:08,422 --> 00:26:12,750
En su lugar, corre el riesgo de tapar el servicio, y

335
00:26:12,750 --> 00:26:19,262
luego usa un stub DishService, que voy a llamar como DishServiceTube.

336
00:26:19,262 --> 00:26:27,040
Así que voy a decir, useValue: dishServiceTube.

337
00:26:27,040 --> 00:26:32,018
Así que esta sería una función de stub que usaré en orden

338
00:26:32,018 --> 00:26:34,904
para marcar el DishService aquí.

339
00:26:34,904 --> 00:26:38,272
Así que esa es una de la que voy a hacer uso.

340
00:26:38,272 --> 00:26:42,776
Y también el segundo que voy a usar

341
00:26:42,776 --> 00:26:47,455
es baseURL,

342
00:26:47,455 --> 00:26:54,040
que voy a usar el valor como el baseURL

343
00:26:54,040 --> 00:26:59,951
que ya hemos importado anteriormente.

344
00:26:59,951 --> 00:27:06,280
Entonces, ahora, con esto, realmente he configurado mi módulo de prueba,

345
00:27:06,280 --> 00:27:11,644
, así que note que la forma en que especificamos esto es exactamente como la forma

346
00:27:11,644 --> 00:27:17,160
especificamos el decorador del módulo NG para nuestro módulo de aplicación.

347
00:27:17,160 --> 00:27:22,250
Y aquí, solo estamos configurando aquellos que son requeridos por MenuComponent, por lo que

348
00:27:22,250 --> 00:27:27,890
no tengo los otros que usamos en el módulo de la aplicación en sí.

349
00:27:27,890 --> 00:27:32,220
Así que así es como vamos a configurar el módulo de prueba.

350
00:27:32,220 --> 00:27:36,600
Ahora lo único que falta es este DishServiceTube.

351
00:27:36,600 --> 00:27:41,718
Así que lo que voy a hacer es

352
00:27:41,718 --> 00:27:47,283
implementar una función aquí y

353
00:27:47,283 --> 00:27:53,072
llamada que permita DishServiceTube

354
00:27:53,072 --> 00:27:59,973
ser un simple objeto JavaScript aquí,

355
00:27:59,973 --> 00:28:05,537
que voy a dejar que actúe en

356
00:28:05,537 --> 00:28:10,679
lugar del servicio real.

357
00:28:10,679 --> 00:28:13,067
Podemos eliminar servicios como este como se ve aquí.

358
00:28:13,067 --> 00:28:17,807
Así que dentro de aquí, solo voy a

359
00:28:17,807 --> 00:28:21,846
proporcionar una función simple,

360
00:28:21,846 --> 00:28:26,412
la función getDish aquí,

361
00:28:26,412 --> 00:28:33,803
que devolverá Observable del tipo de matriz Dish.

362
00:28:33,803 --> 00:28:38,133
Entonces, así es exactamente como se configuró el valor devuelto allí.

363
00:28:38,133 --> 00:28:42,776
Y voy a devolver

364
00:28:42,776 --> 00:28:48,819
un observable de platos aquí.

365
00:28:48,819 --> 00:28:51,692
Así que usando esta función de código auxiliar aquí,

366
00:28:51,692 --> 00:28:56,349
lo que estoy haciendo es estoy desbaratando el DishService, y

367
00:28:56,349 --> 00:29:00,906
luego configurándolo con este método que necesito para

368
00:29:00,906 --> 00:29:06,158
mi caché, diciendo getDishS, y cuando se llama a este método,

369
00:29:06,158 --> 00:29:09,355
solo voy a devolver este valor.

370
00:29:09,355 --> 00:29:11,334
Los platos constantes, aquí.

371
00:29:11,334 --> 00:29:16,740
Así que de esta manera, ahora puedes ver cómo estoy controlando lo que se está suministrando

372
00:29:16,740 --> 00:29:23,449
al componente desde un stub DishService que acabo de crear aquí.

373
00:29:23,449 --> 00:29:27,333
Así que así es como crearás talones para tu DishService.

374
00:29:27,333 --> 00:29:30,570
El otro enfoque que podemos usar para

375
00:29:30,570 --> 00:29:35,910
casos en los que estamos usando servicios se llama como usando el espía.

376
00:29:37,300 --> 00:29:42,840
Jasmine admite algo llamado Spy, que nos permite espiar en llamadas de función,

377
00:29:42,840 --> 00:29:47,040
y luego capturar las llamadas de función, y luego responder a esas llamadas de función.

378
00:29:47,040 --> 00:29:52,981
Así que esa es otra forma de usar un servicio falso en lugar del servicio real.

379
00:29:52,981 --> 00:29:59,778
Así que ahora somos capaces de controlar lo que se está suministrando a nuestro componente de menú.

380
00:29:59,778 --> 00:30:04,410
Así que después de estas modificaciones, entonces

381
00:30:04,410 --> 00:30:09,424
vamos a bajar a nuestro antes de cada método aquí.

382
00:30:09,424 --> 00:30:14,172
Después de la asincrónica, lo que voy a hacer

383
00:30:14,172 --> 00:30:19,085
es que me apoderaré del DishService.

384
00:30:19,085 --> 00:30:24,187
Así que ven que estoy usando el banco de pruebas y luego usando el método get

385
00:30:24,187 --> 00:30:31,415
del banco de pruebas para obtener el servicio de DishService que se ha creado aquí,

386
00:30:31,415 --> 00:30:37,819
de este trozo particular que hemos declarado aquí en los proveedores.

387
00:30:39,520 --> 00:30:43,140
Así que esto me da una referencia al DishService para que

388
00:30:43,140 --> 00:30:47,870
pueda llamar a los métodos del DishService donde quiera que lo necesite aquí.

389
00:30:47,870 --> 00:30:52,453
Así que después de hacer estos cambios, vamos a guardar los cambios y

390
00:30:52,453 --> 00:30:57,679
luego ver cómo nuestra CLI angular ejecutará esta prueba después de estos cambios,

391
00:30:57,679 --> 00:31:02,369
y si nuestra prueba será exitosa en este punto o no.

392
00:31:02,369 --> 00:31:04,462
Así que guardemos los cambios.

393
00:31:04,462 --> 00:31:09,412
En el momento en que guardes los cambios notarás que tu prueba NG

394
00:31:09,412 --> 00:31:13,060
empezará a volver a ejecutar nuestra prueba.

395
00:31:13,060 --> 00:31:16,310
Entonces compilará la aplicación y luego volverá a ejecutar la prueba.

396
00:31:16,310 --> 00:31:21,450
Y listo, nuestra prueba pasó con éxito después de

397
00:31:22,540 --> 00:31:27,574
haciendo los cambios en nuestro archivo component.spec.ts.

398
00:31:27,574 --> 00:31:33,270
Así que nuestra primera prueba, lo que significa que ahora somos capaces de crear un componente de menú

399
00:31:33,270 --> 00:31:37,950
desde nuestro menú, component.spec.ts archivo allí.

400
00:31:37,950 --> 00:31:40,990
Así que nuestra configuración de prueba está funcionando bien.

401
00:31:40,990 --> 00:31:48,460
Ahora puedo entrar y hacer pruebas más intensas dentro de mi componente de prueba.

402
00:31:48,460 --> 00:31:53,790
Volviendo a ese archivo component.spec de menú, permítanme agregar otra prueba.

403
00:31:53,790 --> 00:32:00,420
Ahora ves que debido a que ahora tengo un servicio establecido aquí

404
00:32:00,420 --> 00:32:07,292
que está devolviendo este valor de los platos, ahora puedo hacer uso de mi DishService,

405
00:32:07,292 --> 00:32:11,290
al que tengo la referencia aquí.

406
00:32:11,290 --> 00:32:15,934
Inside fue antes de cada uno, y luego llame al método GetDRICES y

407
00:32:15,934 --> 00:32:18,830
luego podré obtener el valor.

408
00:32:18,830 --> 00:32:23,800
Y eso estará disponible dentro de mi componente de menú que acabo de crear.

409
00:32:23,800 --> 00:32:28,615
Así que mi MenuComponent ahora debería tener acceso a la constante de platos que

410
00:32:28,615 --> 00:32:32,856
se le ha suministrado a través de esta parada de servicio de alimentos.

411
00:32:32,856 --> 00:32:37,608
Así que ahora puedo probar para ver si la variable de platos dentro de mi

412
00:32:37,608 --> 00:32:43,642
MenuComponent realmente está recibiendo los valores correctamente o no.

413
00:32:43,642 --> 00:32:46,982
Así que entrando, déjame crear otra prueba aquí.

414
00:32:46,982 --> 00:32:52,413
Así que voy a crear una prueba aquí, Con el it,

415
00:32:52,413 --> 00:32:57,228
como viste antes, así como la anterior.

416
00:32:57,228 --> 00:33:03,447
Esta segunda prueba voy a llamar así como

417
00:33:03,447 --> 00:33:09,460
platos, Artículos deben ser 4,

418
00:33:09,460 --> 00:33:14,605
porque los platos constantes que declaramos en

419
00:33:14,605 --> 00:33:21,562
el archivo shared.platos tiene cuatro platos en la constante allí.

420
00:33:21,562 --> 00:33:26,232
Entonces, cuando mi variable de platos dentro de mi archivo MenuComponent o

421
00:33:26,232 --> 00:33:31,018
ts se inicializa llamando al servicio de alimentos.

422
00:33:31,018 --> 00:33:34,632
Debería haber recibido esos cuatro platos y

423
00:33:34,632 --> 00:33:37,970
se inicializó con esos cuatro platos.

424
00:33:37,970 --> 00:33:43,182
Así que voy a llevar a cabo algunas pruebas en ese plato variable allí.

425
00:33:43,182 --> 00:33:46,492
Entonces, ¿cómo obtengo acceso a la variable de platos aquí?

426
00:33:46,492 --> 00:33:50,431
Así que yo diría que los platos deben ser 4, y

427
00:33:50,431 --> 00:33:54,171
entonces declararé una función de flecha aquí.

428
00:33:54,171 --> 00:33:59,453
Y dentro de esta función de flecha voy a especificar

429
00:33:59,453 --> 00:34:04,024
las diversas pruebas que voy a llevar a cabo.

430
00:34:04,024 --> 00:34:10,348
Así que aquí voy a decir ahora esperar (componente.,

431
00:34:10,348 --> 00:34:15,378
y observe que automáticamente me da acceso

432
00:34:15,378 --> 00:34:22,290
a esta propiedad de platos desde el MenuComponent.

433
00:34:22,290 --> 00:34:27,400
Así que puedo decir que component.platos, y luego puedo probar

434
00:34:27,400 --> 00:34:34,053
para ver que la longitud de esa matriz de objetos JavaScript debería ser.

435
00:34:34,053 --> 00:34:38,367
Así que aquí es donde uso el método ToBe de Jasmine aquí.

436
00:34:38,367 --> 00:34:41,517
Y luego puedo especificar el valor 4,

437
00:34:41,517 --> 00:34:46,347
porque estaba suministrando 4 platos en mis platos constante

438
00:34:46,347 --> 00:34:51,284
que he declarado en el archivo shared.platos allí.

439
00:34:51,284 --> 00:34:54,709
Así que esa es la primera prueba que voy a llevar a cabo,

440
00:34:54,709 --> 00:34:56,867
esto debería ser cierto.

441
00:34:56,867 --> 00:35:01,096
De lo contrario, la configuración no funcionó correctamente, así que

442
00:35:01,096 --> 00:35:05,120
sé que mi código no funciona correctamente.

443
00:35:05,120 --> 00:35:09,891
Pero estoy seguro de que esta prueba debería funcionar correctamente.

444
00:35:09,891 --> 00:35:11,547
Si quieres estar seguro,

445
00:35:11,547 --> 00:35:16,011
vamos a guardar los cambios y luego ir a ver nuestra prueba ejecutándose.

446
00:35:16,011 --> 00:35:18,084
Al ir a esa terminal,

447
00:35:18,084 --> 00:35:23,323
ves que ahora mi aplicación se está recompilando, y la prueba se ejecuta.

448
00:35:23,323 --> 00:35:27,941
Y observe todos los greens en la ventana de la terminal.

449
00:35:27,941 --> 00:35:32,355
Dice ejecutado 1 de 2 éxito, ejecutado 2 de 2 éxito.

450
00:35:32,355 --> 00:35:36,021
Lo que significa que mis dos pruebas se ejecutaron con éxito.

451
00:35:36,021 --> 00:35:41,221
Si miro mi navegador, por lo que ve que el MenuComponent,

452
00:35:41,221 --> 00:35:44,031
ambas pruebas son exitosas.

453
00:35:44,031 --> 00:35:46,189
Permítanme crear algunos más y

454
00:35:46,189 --> 00:35:51,994
agregarlos a ese conjunto de segundo grupo de pruebas que estoy creando allí.

455
00:35:51,994 --> 00:35:58,106
Al ir al archivo menu_component_spec.ts, agregaré uno más.

456
00:35:58,106 --> 00:36:05,535
Voy a decir esperar componente.,

457
00:36:05,535 --> 00:36:12,420
y voy a decir platos [1].

458
00:36:12,420 --> 00:36:16,105
Recordemos que el nombre del primer plato era,

459
00:36:18,858 --> 00:36:22,552
Así que eso es lo que voy a probar, los platos [1] .name.

460
00:36:22,552 --> 00:36:26,774
Así que así es como puedo probar para ver si está recibiendo los valores correctamente.

461
00:36:26,774 --> 00:36:28,431
¿Cuáles son todas las formas que puedo probar?

462
00:36:28,431 --> 00:36:34,594
Si pongo un punto allí, me dará una sugerencia de todas las posibilidades aquí.

463
00:36:34,594 --> 00:36:42,862
Así que diré, también volveré a usar el método ToBe aquí.

464
00:36:42,862 --> 00:36:45,623
Y entonces el segundo nombre del plato es,

465
00:36:51,916 --> 00:36:55,779
Justo eso allí, así que ese es el segundo lanzador que voy a llevar a cabo.

466
00:36:55,779 --> 00:36:59,819
Entonces, si mi código se ejecutó correctamente, entonces esto también debería pasar.

467
00:36:59,819 --> 00:37:03,389
Del mismo modo, permítanme poner en uno más aquí.

468
00:37:03,389 --> 00:37:06,072
Así que voy a decir esperar,

469
00:37:09,579 --> 00:37:16,457
component.Platos y voy a decir 3.

470
00:37:16,457 --> 00:37:21,520
Y aquí, la propiedad

471
00:37:21,520 --> 00:37:26,819
destacada debería ser Falsy.

472
00:37:26,819 --> 00:37:33,572
Que usted debe ser falso, no es cierto en este caso, así que permítanme añadir una más.

473
00:37:33,572 --> 00:37:35,748
Puedes empezar a añadir más si quieres,

474
00:37:35,748 --> 00:37:38,405
juega con él hasta que estés satisfecho.

475
00:37:38,405 --> 00:37:40,936
También lo hacen esas adiciones. Permítanme guardar los cambios que he hecho

476
00:37:40,936 --> 00:37:44,292
aquí, vamos a ver si esta prueba se ejecuta correctamente.

477
00:37:44,292 --> 00:37:50,041
Y volviendo a mi terminal, ves que mi prueba se está ejecutando de nuevo.

478
00:37:50,041 --> 00:37:52,720
Ves que ambas pruebas fueron exitosas,

479
00:37:52,720 --> 00:37:55,551
ahora voy a hacer que una de esas cosas falle.

480
00:37:55,551 --> 00:37:59,754
Así que voy a entrar y cambiar esto a verdad.

481
00:37:59,754 --> 00:38:03,950
Ves, esa es la diversión de jugar con código.

482
00:38:03,950 --> 00:38:08,111
Voy a cambiar esto a verdad y sé que esta prueba va a fallar.

483
00:38:08,111 --> 00:38:10,186
Así que guardemos los cambios.

484
00:38:10,186 --> 00:38:15,977
Echando un vistazo a la terminal, allí verá que la prueba ha fallado.

485
00:38:15,977 --> 00:38:23,603
Usted ve todo este rojo aquí, lo que significa que la segunda prueba no pasó correctamente.

486
00:38:23,603 --> 00:38:30,750
Y si te desplazas hacia atrás, verías que esta prueba en particular falló,

487
00:38:30,750 --> 00:38:36,295
porque en algún lugar allí abajo dirá que no lo hizo.

488
00:38:36,295 --> 00:38:42,119
Vale, mira esta declaración aquí dice que espera que sea falso,

489
00:38:42,119 --> 00:38:44,378
, así que es por eso que falló.

490
00:38:44,378 --> 00:38:47,978
Así que no se suponía que fuera cierto, pero dije que debería ser cierto, y

491
00:38:47,978 --> 00:38:51,393
obviamente la prueba es incorrecta, así que es por eso que la prueba falló.

492
00:38:51,393 --> 00:38:55,865
Así que así es como puedes incluso probar para ver si la prueba falla,

493
00:38:55,865 --> 00:38:59,086
si también pediste las cosas equivocadas.

494
00:38:59,086 --> 00:39:04,107
Pero de nuevo, déjame volver atrás y corregir eso una vez más.

495
00:39:04,107 --> 00:39:09,068
Así que volviendo a mi, Archivo, los cambiaré

496
00:39:09,068 --> 00:39:13,529
de nuevo a falsy, porque quiero que esta prueba se ejecute correctamente.

497
00:39:13,529 --> 00:39:15,517
Ahora no estamos satisfechos todavía.

498
00:39:15,517 --> 00:39:20,117
Ahora, en esta prueba particular, solo estoy probando la variable de platos

499
00:39:20,117 --> 00:39:23,825
que está dentro de mi MenuComponent.

500
00:39:23,825 --> 00:39:29,777
¿Cómo hago para jugar con la plantilla en sí?

501
00:39:29,777 --> 00:39:35,454
Así que aquí es donde necesitamos más ayuda de Angular.

502
00:39:35,454 --> 00:39:40,216
Para llevar a cabo algunas pruebas en la plantilla, voy a entrar y

503
00:39:40,216 --> 00:39:42,972
tirar un par de importaciones más aquí.

504
00:39:42,972 --> 00:39:49,896
Así que voy a mi parte superior de este archivo, menu_component_spec.tsfile.

505
00:39:49,896 --> 00:39:55,105
Voy a importar, Uno

506
00:39:55,105 --> 00:40:00,594
más llamado By, que es un método.

507
00:40:00,594 --> 00:40:03,044
Me verás usando esto en poco tiempo.

508
00:40:03,044 --> 00:40:10,855
Esto debe importarse desde, Angular,

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

510
00:40:18,863 --> 00:40:27,301
Y también, voy a importar uno más que es un elemento de depuración.

511
00:40:27,301 --> 00:40:32,009
El elemento de depuración me permite obtener acceso al DOM para que

512
00:40:32,009 --> 00:40:37,040
pueda llevar a cabo pruebas en los elementos DOM directamente.

513
00:40:37,040 --> 00:40:44,548
Así que ahí es donde voy a importar esto, el código angular aquí, por lo que estos dos.

514
00:40:44,548 --> 00:40:49,580
Así que agregue el By y el DebugElement a las importaciones, y

515
00:40:49,580 --> 00:40:54,947
luego una vez que haga eso, caminaremos hacia abajo en el código aquí.

516
00:40:54,947 --> 00:40:59,338
Y luego agregaremos en una prueba más donde vamos a entrar en el DOM y

517
00:40:59,338 --> 00:41:01,690
buscar uno de los elementos del documento.

518
00:41:01,690 --> 00:41:06,404
Así que lo diría, así que una prueba más aquí,

519
00:41:06,404 --> 00:41:09,889
¿qué va a hacer esta prueba?

520
00:41:09,889 --> 00:41:14,970
Para esta prueba, voy a especificar

521
00:41:14,970 --> 00:41:22,903
la prueba como debe usar platos en la plantilla.

522
00:41:22,903 --> 00:41:25,838
Estoy diciendo algo aleatoriamente aquí,

523
00:41:25,838 --> 00:41:29,804
porque solo quiero verificar que la variable de platos,

524
00:41:29,804 --> 00:41:34,905
lo que esté haciendo disponible, se está usando en la plantilla correctamente.

525
00:41:34,905 --> 00:41:38,412
Así que esa es la parte que estoy configurando, y

526
00:41:38,412 --> 00:41:42,104
luego la segunda parte es la función de flecha, y

527
00:41:42,104 --> 00:41:47,760
dentro de esta función de flecha voy a proporcionar el código para la siguiente prueba.

528
00:41:47,760 --> 00:41:52,734
Así que dentro de esta función de flecha lo que voy a hacer

529
00:41:52,734 --> 00:41:58,008
es primero llamar al accesorio y

530
00:41:58,008 --> 00:42:00,880
luego detectar cambios.

531
00:42:00,880 --> 00:42:05,990
Y luego después de eso voy a decir let de:,

532
00:42:12,226 --> 00:42:13,908
Es un DebugElement.

533
00:42:13,908 --> 00:42:20,748
A través de esto voy a obtener acceso al DOM y

534
00:42:20,748 --> 00:42:26,566
, entonces el elemento sería HTMLElement.

535
00:42:26,566 --> 00:42:33,243
Así que quiero obtener acceso a uno de los HTMLElements de mi DOM.

536
00:42:33,243 --> 00:42:35,369
Entonces, ¿qué elemento quiero?

537
00:42:35,369 --> 00:42:38,846
Así que para hacer eso, obtendré acceso al,

538
00:42:41,533 --> 00:42:48,138
DebugElement diciendo fixture y DebugElement.

539
00:42:48,138 --> 00:42:54,933
Entonces esto me permite obtener acceso a los elementos de mi DOM aquí para DebugElement.

540
00:42:54,933 --> 00:43:02,220
Y luego puedo consultar y luego elegir solo aquellos que serán de interés para mí.

541
00:43:02,220 --> 00:43:08,690
Así que voy a consultar y luego pediré usando el By.

542
00:43:08,690 --> 00:43:15,908
Así que observe dónde estoy usando el By que he incluido importándolo.

543
00:43:15,908 --> 00:43:20,780
So By, el By admite un montón de métricas por las cuales puedo

544
00:43:20,780 --> 00:43:25,020
pedir acceso a elementos particulares en el DOM.

545
00:43:25,020 --> 00:43:31,824
Así que como puede ver, me dirá qué puedo importar y

546
00:43:31,824 --> 00:43:36,846
luego .css me permite obtener acceso

547
00:43:36,846 --> 00:43:43,018
para que coincida con los elementos del selector css dado.

548
00:43:43,018 --> 00:43:45,789
Entonces, ¿cuál es el selector css que voy a usar?

549
00:43:45,789 --> 00:43:50,503
Sé que hay un elemento h1, elemento html en el DOM y

550
00:43:50,503 --> 00:43:55,750
que voy a obtener acceso al primer elemento h1 del DOM.

551
00:43:55,750 --> 00:44:00,764
Y uno de los elementos h1 allí es el que

552
00:44:00,764 --> 00:44:05,670
va a mostrar el nombre de cada plato allí.

553
00:44:05,670 --> 00:44:10,459
Mira hacia atrás y ves que dentro de la línea de tiempo de cuadrícula usando un h1 y

554
00:44:10,459 --> 00:44:13,839
que h1 contiene el nombre del plato allí.

555
00:44:13,839 --> 00:44:16,723
Así que voy a conseguir eso y

556
00:44:16,723 --> 00:44:21,198
luego voy a obtener un elemento y luego diría de,

557
00:44:21,198 --> 00:44:26,385
del elemento de depuración, y luego diría nativeElement.

558
00:44:26,385 --> 00:44:31,572
Y eso me da acceso al elemento específicamente en el DOM

559
00:44:31,572 --> 00:44:37,873
al que me estoy refiriendo y que he seleccionado usando esta declaración anteriormente.

560
00:44:37,873 --> 00:44:43,091
Entonces, cuando consulto el DOM y luego digo, devuélveme todos los

561
00:44:43,091 --> 00:44:48,964
aquellos que están usando la etiqueta h1 para el elemento HTML.

562
00:44:48,964 --> 00:44:54,077
Y obtengo acceso a eso, y puedo consultar y

563
00:44:54,077 --> 00:44:58,349
decir esperar (el.textContent).

564
00:44:58,349 --> 00:45:02,869
Así que estoy buscando el contenido dentro de este h1 en mi plantilla

565
00:45:02,869 --> 00:45:07,718
contenido fijo y luego diré toContener.

566
00:45:07,718 --> 00:45:12,596
Así que este es otro método, toContener, este es un método Jasmine llamado toContener.

567
00:45:12,596 --> 00:45:18,352
Esto comprueba si contiene un valor particular,

568
00:45:18,352 --> 00:45:23,262
y luego verificaré platos (0) .name.

569
00:45:23,262 --> 00:45:29,360
Entonces, ¿se creó el primer plato en el DOM y se agregó al DOM?

570
00:45:29,360 --> 00:45:33,981
Si mi plantilla funciona correctamente, entonces eso debe estar presente en el DOM.

571
00:45:33,981 --> 00:45:38,626
Entonces eso es lo que voy a verificar para ver si el mosaico de cuadrícula correspondiente a

572
00:45:38,626 --> 00:45:42,658
el primer DISH se ha creado y agregado al DOM o no.

573
00:45:42,658 --> 00:45:47,521
Así que digo platos (0) .name, y digo en mayúsculas.

574
00:45:47,521 --> 00:45:52,395
Recordemos que utilicé la tubería en mayúsculas para mostrar el nombre

575
00:45:52,395 --> 00:45:56,647
del DISH convirtiendo el nombre del plato en

576
00:45:56,647 --> 00:46:01,450
todas mayúsculas en el mosaico de cuadrícula en el componente de menú.

577
00:46:01,450 --> 00:46:05,830
Así que eso es lo que voy a comprobar, vale, así que solo estoy buscando

578
00:46:05,830 --> 00:46:07,200
solo uno de ellos.

579
00:46:07,200 --> 00:46:10,983
Usted puede llevar a cabo muchas de esas pruebas, puede comprobar

580
00:46:10,983 --> 00:46:16,016
platos (1) .name y luego platos (2) .name y más si lo desea.

581
00:46:16,016 --> 00:46:21,683
Solo estoy ilustrando un ejemplo de cómo acceder a los elementos del DOM y

582
00:46:21,683 --> 00:46:24,783
luego verificar lo que contienen allí.

583
00:46:24,783 --> 00:46:29,585
Así que esta es una prueba que voy a llevar a cabo aquí, así que déjame guardar los cambios,

584
00:46:29,585 --> 00:46:32,930
y luego ver si la prueba se ejecuta correctamente.

585
00:46:32,930 --> 00:46:35,951
Entra en esa terminal y cuando se ejecuta la prueba,

586
00:46:35,951 --> 00:46:41,039
ves que mi primera prueba fue exitosa, la segunda prueba fue exitosa,

587
00:46:41,039 --> 00:46:44,635
y la tercera prueba también fue exitosa, maravillosa.

588
00:46:44,635 --> 00:46:48,374
Ahora, déjame hacer que la tercera prueba falle.

589
00:46:48,374 --> 00:46:52,273
Al ir al archivo menucomponentspec.ts,

590
00:46:52,273 --> 00:46:58,818
voy a eliminar esto en mayúsculas, y luego llevar a cabo la misma prueba.

591
00:46:58,818 --> 00:47:02,269
Verá que esta prueba fallará, guarde los cambios.

592
00:47:02,269 --> 00:47:06,941
Y cuando se ejecute la prueba, verá que la tercera prueba fallará.

593
00:47:06,941 --> 00:47:11,251
Porque estoy haciendo que falle comprobando si hay algo incorrecto allí y

594
00:47:11,251 --> 00:47:13,894
ahí tienes, la tercera prueba falló aquí.

595
00:47:13,894 --> 00:47:18,490
Así que así es como puedes comprobar si ciertas cosas que

596
00:47:18,490 --> 00:47:22,471
se supone que están allí están correctamente o no.

597
00:47:22,471 --> 00:47:28,360
¿Por qué es este caso, por lo que puede ver aquí, la razón por la que esta prueba falló.

598
00:47:28,360 --> 00:47:34,750
Se espera que esto esté en el DOM,

599
00:47:34,750 --> 00:47:40,670
pero en su lugar esto es lo que está en el DOM en el elemento h1 en el DOM.

600
00:47:40,670 --> 00:47:43,929
Así que esa es la razón por la que la prueba falló aquí.

601
00:47:43,929 --> 00:47:47,718
Así que volviendo atrás déjame corregir el error y

602
00:47:47,718 --> 00:47:53,922
entonces cuando vuelva a ejecutar la prueba, ahora deberías ver que la prueba pasa con éxito.

603
00:47:53,922 --> 00:47:58,757
Volviendo a la terminal verá que cuando esta prueba se ejecute ahora

604
00:47:58,757 --> 00:47:59,875
se ejecutará correctamente.

605
00:48:03,610 --> 00:48:08,670
Y ahí tienes, las tres pruebas son aprobadas por mi aplicación.

606
00:48:08,670 --> 00:48:13,970
Además, mirando el navegador, puede ver que las tres pruebas

607
00:48:13,970 --> 00:48:19,770
se ejecutaron con éxito en el archivo de plantilla de componentes de menú y

608
00:48:19,770 --> 00:48:22,571
también en el componente de menú en sí.

609
00:48:22,571 --> 00:48:28,398
Ahora, obviamente, esta no es necesariamente la prueba más completa, pero

610
00:48:28,398 --> 00:48:32,407
solo quería darle un sabor de cómo iría

611
00:48:32,407 --> 00:48:37,398
sobre la construcción de pruebas dentro de su aplicación Angular.

612
00:48:37,398 --> 00:48:42,025
Si te dejes llevar puedes entrar en todos los archivos spec.ts que tienes y

613
00:48:42,025 --> 00:48:44,194
luego escribir tu propia prueba para cada uno y

614
00:48:44,194 --> 00:48:49,580
cada uno de esos componentes usando el conocimiento que has ganado aquí.

615
00:48:49,580 --> 00:48:55,150
Además, puede leer más sobre las pruebas en la documentación Angular y

616
00:48:55,150 --> 00:49:00,590
luego aprender más formas de llevar a cabo pruebas en su aplicación Angular.

617
00:49:00,590 --> 00:49:05,190
Testing es un campo por sí mismo, así que si necesito enseñarte todo sobre

618
00:49:05,190 --> 00:49:10,410
testing que vendrá un curso completo en sí mismo para Angular.

619
00:49:10,410 --> 00:49:14,500
Y en este curso, solo quería darle un sabor de cómo

620
00:49:14,500 --> 00:49:17,820
llevará a cabo las pruebas en su aplicación Angular.

621
00:49:17,820 --> 00:49:21,585
Y este es un ejemplo de cómo podemos configurar y

622
00:49:21,585 --> 00:49:27,441
realizar una prueba unitaria en uno de los componentes de nuestra aplicación Angular.

623
00:49:27,441 --> 00:49:33,901
Este es un buen momento para que hagas un buen comentario con la prueba de componentes del mensaje.

624
00:49:33,901 --> 00:49:37,750
[MÚSICA]