1
00:00:04,640 --> 00:00:08,633
Muy pronto estaremos trabajando
con nuestra implementación TDD

2
00:00:08,667 --> 00:00:10,600
de las reglas de la palabra del día.

3
00:00:10,786 --> 00:00:13,533
Pero antes de hacerlo,

4
00:00:13,533 --> 00:00:15,767
quiero que pongas un archivo a nuestra disposición.

5
00:00:16,053 --> 00:00:20,577
Este archivo json
contiene una lista de 2.500 palabras

6
00:00:20,600 --> 00:00:23,633
que tienen cinco letras
en el idioma inglés,

7
00:00:24,339 --> 00:00:26,019
considerará esto,

8
00:00:26,100 --> 00:00:29,037
como la menor de las palabras posibles
para usar en el juego,

9
00:00:29,646 --> 00:00:33,800
He incluido un enlace en la descripción
para que usted mismo pueda descargar este archivo.

10
00:00:34,467 --> 00:00:39,833
He guardado el archivo en la fuente
englishWordsWith5Letters.json.

11
00:00:40,733 --> 00:00:42,600
Alternativamente

12
00:00:42,625 --> 00:00:46,800
puedes clonar el repositorio
en una posición de inicio para este episodio,

13
00:00:47,180 --> 00:00:49,667
que ya debería incluir este archivo.

14
00:00:50,333 --> 00:00:53,633
El enlace al repositorio
también está en la descripción.

15
00:00:56,330 --> 00:01:00,633
¿Todo bien? Creo que estamos en un buen punto
para empezar a escribir más pruebas.

16
00:01:00,780 --> 00:01:04,230
Esta vez, vamos a definir las reglas
para la palabra del día.

17
00:01:05,317 --> 00:01:09,357
Empecemos con los casos
en los que estamos proporcionando la aplicación

18
00:01:09,367 --> 00:01:12,633
con una palabra inválida del día,
y por eso,

19
00:01:12,633 --> 00:01:15,033
la aplicación
debería mostrar una advertencia.

20
00:01:15,860 --> 00:01:17,742
Así que vamos a escribir una prueba para

21
00:01:17,767 --> 00:01:22,133
si una palabra del día proporcionada
no tiene exactamente cinco letras,

22
00:01:22,179 --> 00:01:24,087
una advertencia debe ser inmediata.

23
00:01:25,287 --> 00:01:27,333
Para ello, podemos iniciar nuestra prueba

24
00:01:27,358 --> 00:01:30,857
montando el componente wordleBoard
con una palabra del día

25
00:01:30,867 --> 00:01:32,800
que tenga menos de cinco caracteres.

26
00:01:33,052 --> 00:01:35,000
Usaré FLY.

27
00:01:38,770 --> 00:01:43,233
Ahora, queremos que esta acción devuelva
en un aviso de consola al ser llamada,

28
00:01:43,367 --> 00:01:46,700
una manera de saber
qué está pasando con el aviso de consola

29
00:01:46,725 --> 00:01:48,047
mientras se ejecutan las pruebas,

30
00:01:48,067 --> 00:01:50,133
es haciendo uso de un espía.

31
00:01:50,700 --> 00:01:52,000
Como su nombre indica,

32
00:01:52,000 --> 00:01:55,433
el espía no interferirá
con la ejecución de la función.

33
00:01:55,467 --> 00:01:59,267
Es un espía encendido.
Simplemente estará vigilando.

34
00:01:59,467 --> 00:02:01,567
Podrá entonces hacer preguntas

35
00:02:01,600 --> 00:02:04,933
y construir afirmaciones
mediante la interacción con el espía.

36
00:02:05,949 --> 00:02:08,533
Desplegar un espía hacia la función desgastada,

37
00:02:08,567 --> 00:02:16,160
desde el objeto consola
podemos escribir vi.spyOn(console, "warn").

38
00:02:18,346 --> 00:02:23,300
Es importante que despleguemos un espía
antes de realizar la acción

39
00:02:23,333 --> 00:02:26,467
que se supone que causa
el aviso de la consola.

40
00:02:26,600 --> 00:02:32,433
Así que para hacer esto, voy a mover el espía en
antes de montar los componentes.

41
00:02:33,580 --> 00:02:36,567
Por último, podemos hacer
afirmaciones sobre esta función.

42
00:02:36,633 --> 00:02:38,000
Gracias a nuestro espía.

43
00:02:44,070 --> 00:02:45,717
Si ejecutamos la prueba,

44
00:02:50,450 --> 00:02:55,967
como podemos ver aquí, la consola warn
no ha sido llamada en absoluto.

45
00:02:57,770 --> 00:03:02,333
Para conseguir que estas pruebas pasen,
podemos hacer uso de los validadores de vue prop.

46
00:03:02,700 --> 00:03:05,933
Para utilizar esto, tenemos que proporcionar
una función callback

47
00:03:05,960 --> 00:03:09,267
a la clave del validador
en nuestra propia definición.

48
00:03:09,700 --> 00:03:14,667
Si esta función devuelve true
la proposición dada será considerada válida.

49
00:03:14,733 --> 00:03:18,100
Si devuelve false
se considerará inválida.

50
00:03:19,000 --> 00:03:22,000
En nuestro caso
vamos a escribir una función de validación,

51
00:03:22,033 --> 00:03:27,633
obliga a que la longitud de las palabras
dadas sea exactamente de cinco caracteres.

52
00:03:42,457 --> 00:03:44,867
Y genial, nuestras pruebas están pasando.

53
00:03:44,892 --> 00:03:46,263
Vamos a hacer un commit.

54
00:03:46,367 --> 00:03:49,033
Creo que un buen mensaje de confirmación,
en este caso, podría ser,

55
00:03:49,067 --> 00:03:52,967
hacer cumplir que la palabra del día
debe tener 5 caracteres.

56
00:03:59,027 --> 00:04:01,067
Sin embargo, tenga en cuenta

57
00:04:01,092 --> 00:04:07,067
que una advertencia de la consola se muestra de verdad
cuando ejecutamos nuestras pruebas.

58
00:04:07,246 --> 00:04:11,300
Esto añade algo de desorden a la salida de la tarea.

59
00:04:12,223 --> 00:04:16,533
No quiero tener esta advertencia de consola
en la salida de nuestras pruebas.

60
00:04:16,786 --> 00:04:19,630
Reflejemos nuestra prueba, en su lugar,

61
00:04:19,746 --> 00:04:25,033
reemplazar la advertencia de la consola con una prueba
doble que no haga absolutamente nada.

62
00:04:26,997 --> 00:04:30,645
Quiero mencionar que las líneas
son un poco borrosas

63
00:04:30,667 --> 00:04:33,000
cuando trabajaban con vitest.

64
00:04:33,246 --> 00:04:39,267
Y Jest y luego el espía en vitest,

65
00:04:44,232 --> 00:04:49,200
66
Así
podemos capturar este espía, por aquí.

66
00:04:49,467 --> 00:04:53,667
Y luego a través del espía,
podemos simular la implementación

67
00:04:57,263 --> 00:05:00,200
para ser sólo una función
que no hace nada.

68
00:05:03,183 --> 00:05:04,567
Si ejecuto la tarea ahora

69
00:05:04,600 --> 00:05:08,973
puedes ver que ya no tenemos
la advertencia de la consola

70
00:05:08,998 --> 00:05:10,467
en nuestras pruebas.

71
00:05:10,492 --> 00:05:12,933
Y todavía podemos
hacer las afirmaciones en el borde.

72
00:05:14,380 --> 00:05:17,836
Otra forma en que podríamos hacer esto
sin depender del espía

73
00:05:17,933 --> 00:05:20,500
sería burlándonos del aviso de la consola,

74
00:05:20,800 --> 00:05:26,400
directamente usando vi.fn
que es mi preferencia personal,

75
00:05:26,425 --> 00:05:29,800
ya que distingue
el espía del simulacro.

76
00:05:30,200 --> 00:05:32,667
Para ello, como parte de nuestra configuración,

77
00:05:32,700 --> 00:05:36,733
podemos hacer console.warn=vi.fn.

78
00:05:40,460 --> 00:05:45,167
Si ejecutamos nuestras pruebas
podemos ver que siguen pasando

79
00:05:45,192 --> 00:05:48,267
sin el desorden en nuestra salida de la consola.

80
00:05:48,400 --> 00:05:53,500
Así que vamos a hacer un commit sustituido por
para simular que podría ser un buen mensaje de confirmación.

81
00:05:56,629 --> 00:05:59,367
Ahora, ¿qué tal la siguiente prueba?

82
00:05:59,686 --> 00:06:01,783
Creo que algo bueno que podemos comprobar

83
00:06:01,800 --> 00:06:06,167
es que la palabra del día
debe estar toda en mayúsculas.

84
00:06:06,845 --> 00:06:10,463
Así que prueba, si la palabra del día
no está en mayúsculas,

85
00:06:10,467 --> 00:06:12,133
una advertencia es inmediata.

86
00:06:18,090 --> 00:06:20,233
¿Quieres intentar ejecutar
esta prueba tú mismo?

87
00:06:20,258 --> 00:06:21,370
Si te interesa,

88
00:06:21,400 --> 00:06:25,432
intenta pausar el vídeo ahora
y escribe una solución de prueba por tu cuenta.

89
00:06:28,597 --> 00:06:31,633
Bien, así es como yo lo haría.

90
00:06:31,926 --> 00:06:36,400
Yo más o menos sólo copiar exactamente
lo que escribí en la tarea anterior.

91
00:06:36,933 --> 00:06:41,833
Pero en lugar de montarlo con una palabra
que tenga menos de cinco caracteres,

92
00:06:41,972 --> 00:06:45,500
Voy a escribir una palabra
que tenga cinco caracteres,

93
00:06:45,700 --> 00:06:49,000
pero con caracteres en minúscula.

94
00:06:50,867 --> 00:06:53,167
¿Correcto? Si ejecuto esta prueba de aquí,

95
00:06:54,507 --> 00:06:57,700
y se puede ver que ahora estamos fallando,

96
00:06:57,867 --> 00:07:03,233
porque nuestra consola warn
no ha sido llamada.

97
00:07:05,143 --> 00:07:11,067
¿Correcto? para conseguir que pase
sólo tenemos que mejorar nuestro validador

98
00:07:11,207 --> 00:07:15,233
para hacer cumplir que todos los caracteres
deben estar en mayúsculas.

99
00:07:15,400 --> 00:07:19,433
Ahora vamos al tablero de wordle
y añadámoslo a nuestro validador

100
00:07:25,290 --> 00:07:26,933
para ejecutar las tareas de nuevo.

101
00:07:27,923 --> 00:07:31,343
Y estamos pasando genial.
Así que vamos a hacer otro commit.

102
00:07:31,368 --> 00:07:36,167
Y esto sería hacer cumplir que la palabra
del día debe estar en mayúsculas.

103
00:07:38,970 --> 00:07:41,900
Otra prueba
que me gustaría que tuviéramos

104
00:07:42,033 --> 00:07:45,833
es que si usted proporciona una palabra del día
que sea un galimatías,

105
00:07:45,833 --> 00:07:50,830
en inglés,
también deberíamos recibir una advertencia.

106
00:07:51,570 --> 00:07:55,357
Para hacer esto
vamos a copiar la prueba anterior.

107
00:07:58,590 --> 00:08:04,333
Y digamos que
si la palabra del día no es una palabra real,

108
00:08:08,783 --> 00:08:10,233
una advertencia es inmediata.

109
00:08:10,300 --> 00:08:14,200
Perfecto, y luego aquí, vamos a escribir
una palabra que es sólo una mayúscula

110
00:08:14,225 --> 00:08:16,723
que tiene cinco caracteres,
pero no existe.

111
00:08:19,267 --> 00:08:22,753
Ejecuta todas las pruebas de nuevo,
y recuerda siempre ejecutar todas las pruebas.

112
00:08:23,933 --> 00:08:26,167
Perfecto. No vemos ninguna advertencia aquí.

113
00:08:26,833 --> 00:08:28,967
Ahora, para pasar esta prueba

114
00:08:28,992 --> 00:08:32,533
tenemos que importar los datos
de ese archivo json,

115
00:08:32,600 --> 00:08:34,867
que estaba mostrando al principio del episodio.

116
00:08:35,333 --> 00:08:37,700
Y para facilitar el trabajo con json,

117
00:08:37,725 --> 00:08:40,833
podemos actualizar nuestro archivo ts config.

118
00:08:41,613 --> 00:08:44,667
Por lo tanto, si usted va a su ts,
configure la raíz del proyecto,

119
00:08:45,600 --> 00:08:46,967
en la aplicación,

120
00:08:48,806 --> 00:08:55,367
podemos añadir a las opciones del compilador
resolver módulos json.

121
00:08:55,433 --> 00:08:58,767
Así que vamos a habilitar eso,
normalmente está desactivado por defecto.

122
00:08:59,269 --> 00:09:03,500
Y también queremos incluir archivos json

123
00:09:05,356 --> 00:09:06,400
aquí.

124
00:09:07,573 --> 00:09:10,887
Estupendo. Ahora deberíamos poder
importar archivos json

125
00:09:10,912 --> 00:09:13,667
Como una importación regular por defecto.

126
00:09:14,738 --> 00:09:17,867
Volvamos a nuestro componente

127
00:09:18,273 --> 00:09:25,537
y comprobemos si la palabra dada
existe en la lista de palabras

128
00:09:25,562 --> 00:09:27,267
que tenemos en ese archivo json.

129
00:09:27,800 --> 00:09:29,250
¿Cómo haríamos esto?

130
00:09:29,686 --> 00:09:33,750
Podemos empezar importando nuestro
Json aquí.

131
00:09:39,220 --> 00:09:42,533
Y podemos añadir a nuestra validación

132
00:09:42,812 --> 00:09:47,400
para decir que las palabras en inglés
incluye las palabras dadas.

133
00:09:49,918 --> 00:09:56,133
El salto de línea aquí,
He hecho nuestra prueba, estamos pasando.

134
00:09:56,659 --> 00:09:58,813
Ahora estamos emitiendo una advertencia

135
00:09:58,933 --> 00:10:02,526
Si por casualidad usted proporciona una palabra del día

136
00:10:02,667 --> 00:10:05,977
que no existe
en la lista de palabras inglesas

137
00:10:06,002 --> 00:10:07,643
que tenemos en ese archivo json.

138
00:10:08,097 --> 00:10:09,933
Perfecto. Así que ejecutamos nuestras pruebas.

139
00:10:09,958 --> 00:10:11,867
Vimos que todo pasaba.

140
00:10:11,906 --> 00:10:13,367
Vamos a hacer un commit.

141
00:10:14,357 --> 00:10:18,167
Haz que la palabra del día
es una palabra inglesa real.

142
00:10:21,803 --> 00:10:25,200
Bueno, ahora estamos de vuelta
a nuestra fase de refactorización,

143
00:10:25,225 --> 00:10:29,933
porque nuestro archivo json se compone
de palabras inglesas de cinco letras,

144
00:10:29,933 --> 00:10:31,567
que están en mayúsculas.

145
00:10:31,833 --> 00:10:36,600
Nuestras dos primeras reglas de validación
ya están incorporadas.

146
00:10:36,800 --> 00:10:38,800
Por lo tanto, son redundantes.

147
00:10:39,163 --> 00:10:41,767
Debería ser capaz de simplificar nuestro validador

148
00:10:41,767 --> 00:10:47,326
para comprobar si la palabra dada
existe dentro de la palabra inglesa

149
00:10:47,351 --> 00:10:48,667
de ese archivo json.

150
00:10:48,912 --> 00:10:50,592
Y si ejecutamos nuestras pruebas

151
00:10:50,617 --> 00:10:53,467
puedes ver que no hemos añadido
ninguna regresión

152
00:10:53,500 --> 00:10:55,233
simplificando nuestro validador.

153
00:10:57,853 --> 00:11:03,500
Así que vamos a hacer un commit.
Esto podría ser sólo simplificar la validación.

154
00:11:06,053 --> 00:11:08,267
Bien, casi hemos terminado.

155
00:11:08,292 --> 00:11:10,800
Hay una tarea más
que quiero que escribamos.

156
00:11:12,019 --> 00:11:16,967
Y es efectivamente
que si usted proporciona una palabra del día

157
00:11:17,033 --> 00:11:22,900
que respete todas las reglas anteriores,
no deberías ver que nadie se presenta.

158
00:11:23,379 --> 00:11:25,803
Así que vamos a escribirlo aquí.

159
00:11:26,106 --> 00:11:31,633
prueba, ninguna advertencia es inmediata
si la palabra del día proporcionada

160
00:11:31,759 --> 00:11:36,233
es una verdadera palabra en mayúsculas Inglés
con cinco caracteres.

161
00:11:37,870 --> 00:11:41,833
De acuerdo. Así que voy a copiar
todo lo que tenemos aquí,

162
00:11:42,300 --> 00:11:43,300
Pégalo.

163
00:11:43,367 --> 00:11:45,700
Y vamos a proporcionar las tareas.

164
00:11:45,800 --> 00:11:50,133
Y ahora queremos buscar
que no fue llamada.

165
00:11:51,006 --> 00:11:55,267
Y se puede ver que ya estamos
pasando debido a nuestro validador.

166
00:11:55,600 --> 00:11:58,736
Dicho esto,
esta prueba sigue siendo bastante valiosa

167
00:11:58,761 --> 00:12:02,800
porque hace cumplir
una directriz muy importante para nuestra aplicación.

168
00:12:03,100 --> 00:12:05,890
La aplicación
no mostrará advertencias.

169
00:12:05,933 --> 00:12:09,533
Si el juego es instanciado
con una palabra válida del día.

170
00:12:09,558 --> 00:12:11,900
Así que quiero mantener esta prueba.

171
00:12:12,267 --> 00:12:13,767
Vamos a confirmar esto.

172
00:12:14,400 --> 00:12:17,000
Y un buen mensaje de confirmación
en este caso, podría ser,

173
00:12:17,033 --> 00:12:22,367
asegurar que no se muestren advertencias
cuando se proporciona una palabra adecuada del día.

174
00:12:24,336 --> 00:12:25,536
Ha estado genial.

175
00:12:25,567 --> 00:12:29,597
En esta lección, hemos cubierto el uso
de espías y mocks

176
00:12:29,600 --> 00:12:33,167
para investigar
si funciones específicas están siendo ejecutadas.

177
00:12:33,200 --> 00:12:35,930
Y también cubrimos
cómo podemos ejecutar

178
00:12:35,967 --> 00:12:40,230
reglas para nuestros props a través de validadores.