1
00:00:04,580 --> 00:00:09,633
En este momento, nuestro juego es siempre
mostrando la respuesta de adivinanza desconocida.

2
00:00:09,833 --> 00:00:12,033
Es hora de que mejoremos esto.

3
00:00:12,400 --> 00:00:17,000
Quiero que la retroalimentación me diga correctamente
si la carta existe

4
00:00:17,025 --> 00:00:18,590
y está en la posición correcta,

5
00:00:18,906 --> 00:00:23,100
casi si la letra existe
pero está en la posición incorrecta,

6
00:00:23,367 --> 00:00:28,167
e incorrecta si la letra no existe
en el mundo del día.

7
00:00:28,700 --> 00:00:31,467
Creo que una gran manera para nosotros
de probar este comportamiento

8
00:00:31,500 --> 00:00:33,020
es tener una prueba

9
00:00:33,045 --> 00:00:39,133
en el que la palabra del día es mundo
y el jugador adivina mal.

10
00:00:39,400 --> 00:00:41,633
Porque en este caso

11
00:00:41,767 --> 00:00:45,250
las tres retroalimentaciones
van a ser necesarias.

12
00:00:45,275 --> 00:00:46,533
Así que echa un vistazo a esto.

13
00:00:47,259 --> 00:00:51,633
Puedes ver aquí que para W,
por ejemplo, debería ser correcto

14
00:00:51,700 --> 00:00:55,067
porque W existe tanto en mundo como en incorrecto.

15
00:00:55,286 --> 00:00:57,423
En el caso de R,

16
00:00:58,033 --> 00:01:03,200
la retroalimentación debe ser casi porque
aunque exista en ambos mundos,

17
00:01:03,600 --> 00:01:08,500
la posición es diferente
con R apareciendo en la posición 2

18
00:01:08,733 --> 00:01:12,867
si tenemos en cuenta que nuestras matrices
empiezan a contar en 0.

19
00:01:14,417 --> 00:01:18,733
Por último, la letra N no existe
en el mundo del día

20
00:01:18,758 --> 00:01:21,633
y por lo tanto la respuesta
debe ser incorrecta.

21
00:01:23,003 --> 00:01:25,733
Para obtener la respuesta real
para cada letra,

22
00:01:25,767 --> 00:01:28,570
He hecho uso de la función findAll

23
00:01:28,595 --> 00:01:33,133
para identificar la letra
y luego con la función .at

24
00:01:33,300 --> 00:01:39,600
apunté una letra en una posición específica
y luego con la función .attributes

25
00:01:39,600 --> 00:01:44,233
pude obtener el valor
de la retroalimentación de la letra de datos de atributos.

26
00:01:46,290 --> 00:01:50,567
Si ejecuto todas las pruebas, puedes ver
que ahora tenemos cinco nuevas pruebas

27
00:01:50,767 --> 00:01:54,267
considerando cada tipo de retroalimentación.

28
00:01:55,167 --> 00:01:58,200
Como queremos centrarnos
en una cosa a la vez,

29
00:01:58,225 --> 00:01:59,983
vamos a saltarnos las pruebas

30
00:02:00,000 --> 00:02:04,533
en las que la respuesta esperada
es algo diferente de correcto.

31
00:02:05,626 --> 00:02:10,567
Para ello, podemos hacer uso de
de la función skipIf.

32
00:02:10,633 --> 00:02:16,233
Así que puedo encadenar skipIf de la prueba
y luego definir la condicional aquí.

33
00:02:16,400 --> 00:02:23,233
En este caso, quiero todos los casos
en los que la respuesta esperada no es correcta.

34
00:02:23,927 --> 00:02:28,900
Si ahora ejecuto todas mis pruebas
se puede ver que todas las otras pruebas

35
00:02:28,925 --> 00:02:31,233
en las que la respuesta
era diferente de la correcta

36
00:02:31,258 --> 00:02:35,417
se omiten
y podemos centrar nuestros esfuerzos TTG

37
00:02:35,442 --> 00:02:38,000
en proporcionar la información correcta.

38
00:02:38,333 --> 00:02:40,267
Bien, centrémonos en eso.

39
00:02:40,967 --> 00:02:44,963
Para conseguir que esta prueba pase,
la menor cantidad de trabajo que podríamos hacer

40
00:02:45,033 --> 00:02:49,200
es simplemente devolver siempre
la respuesta de correcto

41
00:02:49,225 --> 00:02:52,100
siempre que se solicite una respuesta.

42
00:02:52,400 --> 00:02:57,067
Así que si ejecutamos las pruebas de nuevo
podemos ver que estamos pasando.

43
00:02:57,199 --> 00:02:59,633
Impresionante. Hagamos un commit.

44
00:03:00,563 --> 00:03:05,600
Esto podría ser la retroalimentación de la pantalla
para las letras correctas.

45
00:03:07,563 --> 00:03:10,633
No veo nada que quiera
refactorizar todavía.

46
00:03:10,893 --> 00:03:16,033
Así que creo que estamos en un buen punto
para pasar a la siguiente batería de pruebas.

47
00:03:16,300 --> 00:03:18,527
Muy bien, entonces tenemos lo correcto hecho.

48
00:03:18,567 --> 00:03:21,633
Ahora quiero centrarme
en la respuesta incorrecta.

49
00:03:22,033 --> 00:03:25,400
Así que lo que vamos a saltar
son sólo las pruebas

50
00:03:25,425 --> 00:03:28,433
en las que la retroalimentación es igual a casi.

51
00:03:29,080 --> 00:03:30,667
Si volvemos a realizar las pruebas

52
00:03:31,067 --> 00:03:34,933
podemos ver que nuestra prueba correcta anterior
sigue funcionando

53
00:03:35,133 --> 00:03:40,500
y ahora tenemos dos nuevas pruebas que fallan
que están relacionados con la conjetura incorrecta.

54
00:03:41,300 --> 00:03:43,400
Vale, entonces para conseguir que este pase,

55
00:03:43,467 --> 00:03:47,733
Siento que tenemos que empezar a hacer
algunos análisis de conjeturas reales aquí.

56
00:03:49,000 --> 00:03:54,033
Así que para empezar, este componente debe saber
cuál es la respuesta correcta.

57
00:03:54,267 --> 00:03:57,042
Así que en lugar de simplemente pasar
un booleano llamado shouldFlip,

58
00:03:57,067 --> 00:03:59,433
Quiero cambiar esta proposición para que diga

59
00:03:59,533 --> 00:04:02,433
va a ser
una proposición opcional de respuesta.

60
00:04:02,740 --> 00:04:05,684
Y si una respuesta
a este componente,

61
00:04:05,709 --> 00:04:10,067
dará información al usuario,
de lo contrario no lo hará.

62
00:04:11,320 --> 00:04:13,457
La respuesta no tendrá ningún valor por defecto.

63
00:04:13,482 --> 00:04:17,706
Así que si usted no proporciona una respuesta,
será simplemente indefinida.

64
00:04:19,316 --> 00:04:25,367
También tenemos que estar seguros de proporcionar
respuesta en el WordleBoard.

65
00:04:27,043 --> 00:04:30,800
Respuesta en este caso
es simplemente la palabra del día.

66
00:04:31,842 --> 00:04:34,668
Estupendo. Y todavía estamos
en un estado fallido, por supuesto,

67
00:04:34,693 --> 00:04:38,933
porque no estamos proporcionando
la información incorrecta todavía.

68
00:04:39,426 --> 00:04:41,467
Ahora estamos en un buen punto para hacer esto.

69
00:04:42,679 --> 00:04:46,603
Es un poco difícil para mí
trabajar en línea por aquí.

70
00:04:46,700 --> 00:04:49,967
Así que voy a extraer una función
de inmediato en este caso.

71
00:04:50,267 --> 00:04:55,033
Y digamos que esta función
se va a llamar getFeedback.

72
00:04:57,310 --> 00:05:00,300
Y en este caso
voy a pasar el índice,

73
00:05:01,380 --> 00:05:03,410
función getFeedback

74
00:05:05,863 --> 00:05:09,767
y lo que representa el feedback
es la posición de la letra.

75
00:05:13,583 --> 00:05:17,800
De acuerdo. Así que una cosa
que tenemos que tener en cuenta

76
00:05:17,825 --> 00:05:21,533
es que la respuesta es algo
que puede que no se nos proporcione.

77
00:05:21,600 --> 00:05:23,567
Así que tenemos que comprobarlo.

78
00:05:25,990 --> 00:05:28,000
Si la respuesta no está definida,

79
00:05:30,763 --> 00:05:34,000
Sólo voy a hacer
un retorno anticipado de null.

80
00:05:34,447 --> 00:05:38,400
Si las letras coinciden perfectamente,
entonces devolvemos la respuesta correcta.

81
00:05:38,425 --> 00:05:40,900
En caso contrario, devolvemos incorrecto.

82
00:05:47,330 --> 00:05:49,767
La posición de la letra será un número.

83
00:05:50,699 --> 00:05:54,367
Perfecto. Si hago las pruebas,

84
00:05:55,693 --> 00:05:58,900
podemos ver
que ahora estamos en una fase verde.

85
00:05:59,500 --> 00:06:01,300
De acuerdo. Vamos a hacer un commit.

86
00:06:01,600 --> 00:06:03,600
Y voy a llamar a este

87
00:06:04,233 --> 00:06:08,233
mostrar retroalimentación
para las letras incorrectas.

88
00:06:09,333 --> 00:06:11,930
Para refactorizar,
Creo que sería bueno para nosotros

89
00:06:11,955 --> 00:06:15,590
para proporcionar algunas sugerencias de tipo
para esta función de aquí.

90
00:06:16,153 --> 00:06:22,367
Puede devolver null
o una de las retroalimentaciones que esperamos.

91
00:06:22,539 --> 00:06:25,567
Así que vamos a añadir esta pista de tipo.

92
00:06:25,733 --> 00:06:29,867
Así que va a ser nulo
o correcto o incorrecto.

93
00:06:30,573 --> 00:06:34,333
O muy pronto, vamos a
a implementar esto, casi.

94
00:06:35,100 --> 00:06:38,108
Si ejecuto las pruebas,
nada debería haber cambiado.

95
00:06:38,133 --> 00:06:40,467
Así que estamos listos para hacer otro commit.

96
00:06:41,543 --> 00:06:42,833
Añadir sugerencia de tipo.

97
00:06:47,930 --> 00:06:52,867
Bien, estamos en un punto
en el que por fin podemos dejar de saltarnos pruebas.

98
00:06:52,973 --> 00:06:56,133
Así que voy a borrar este skipIf

99
00:06:56,273 --> 00:06:59,473
llamada a la función de aquí
y ejecutar las pruebas de nuevo.

100
00:07:00,940 --> 00:07:04,933
Precioso. Tenemos dos nuevas pruebas
que están fallando,

101
00:07:04,967 --> 00:07:08,800
y todas están relacionadas
con la casi retroalimentación.

102
00:07:09,800 --> 00:07:14,733
Para conseguir que este pase, necesitamos
volver a nuestro componente de vista de invitado.

103
00:07:14,833 --> 00:07:18,633
Pero ahora vamos a cambiar
nuestra implementación un poco.

104
00:07:18,973 --> 00:07:21,967
Así que vamos a hacer
una cláusula de protección aquí

105
00:07:21,992 --> 00:07:24,792
que proporciona un retorno anticipado de incorrecto

106
00:07:24,886 --> 00:07:29,933
si la letra que el usuario escribió no existe
existe en absoluto en el mundo del día.

107
00:07:31,870 --> 00:07:35,367
Por último, si estamos en la línea 15

108
00:07:35,467 --> 00:07:39,967
sabemos a ciencia cierta que la letra
al menos existe en algún lugar del mundo.

109
00:07:40,080 --> 00:07:43,967
Así que si no existen
exactamente en la misma posición,

110
00:07:44,067 --> 00:07:48,200
entonces sabemos
que la retroalimentación debe ser casi.

111
00:07:49,020 --> 00:07:53,233
Si ejecutamos nuestras pruebas
podemos ver que estamos pasando.

112
00:07:53,258 --> 00:07:55,367
Las 32 pruebas están pasando ahora.

113
00:07:56,420 --> 00:07:58,833
Asombroso. Hagamos otra confirmación.

114
00:08:00,567 --> 00:08:03,367
Esta vez,
Voy a decir mostrar retroalimentación

115
00:08:03,467 --> 00:08:06,400
para adivinar letras casi correctas.

116
00:08:06,966 --> 00:08:08,327
Por refactorización,

117
00:08:08,506 --> 00:08:12,267
Creo que una buena cosa que podríamos hacer
aquí para aumentar la legibilidad

118
00:08:12,367 --> 00:08:17,500
es extraer constantes para la letra
que el jugador adivinó

119
00:08:17,525 --> 00:08:19,700
y la letra que esperamos.

120
00:08:21,550 --> 00:08:26,433
Así que esto de aquí representa
la letra que el jugador ha adivinado.

121
00:08:28,277 --> 00:08:31,267
Así que voy a extraer esto
en letterGuessed.

122
00:08:34,360 --> 00:08:39,167
Finalmente, esta de aquí
representa la letra esperada.

123
00:08:34,360 --> 00:08:39,167
Por último, este de aquí
representa la letra esperada.

124
00:08:41,500 --> 00:08:44,233
Voy a mover esas dos constantes
una al lado de la otra.

125
00:08:48,227 --> 00:08:51,000
Y creo que eso es todo.
Vamos a ejecutar la prueba de nuevo.

126
00:08:51,633 --> 00:08:54,067
Y podemos ver que las pruebas
siguen pasando.

127
00:08:54,226 --> 00:08:57,917
Así que voy a hacer otro commit
llamado extraer constantes.

128
00:08:59,943 --> 00:09:04,733
Antes de terminar esta lección, quiero
añadir un poco de estilo adicional.

129
00:09:04,859 --> 00:09:09,133
Así que vamos a definir diferentes colores
para los diferentes comentarios.

130
00:09:09,746 --> 00:09:12,930
Así.
Así que ya escribí esto de antemano.

131
00:09:12,955 --> 00:09:14,423
Voy a pegarlo aquí.

132
00:09:14,533 --> 00:09:16,839
Y se puede ver
que basado en la retroalimentación,

133
00:09:16,864 --> 00:09:21,567
Estoy haciendo un color de fondo diferente
para la carta.

134
00:09:23,120 --> 00:09:24,740
De acuerdo. Si volvemos a hacer la prueba,

135
00:09:24,767 --> 00:09:27,870
de nuevo, la prueba no debería verse afectada
por nuestros cambios CSS.

136
00:09:27,895 --> 00:09:29,167
Así que todos pasan.

137
00:09:29,367 --> 00:09:31,533
Y estamos listos para hacer otro commit.

138
00:09:32,667 --> 00:09:36,733
Proporcionar colores dedicados
para los diferentes tipos de feedback.

139
00:09:38,943 --> 00:09:43,600
De acuerdo. Ahora hemos logrado crear
un clon simple del wordle del juego

140
00:09:43,625 --> 00:09:46,833
con sus requisitos protegidos por pruebas.

141
00:09:47,220 --> 00:09:50,467
Por supuesto, todavía hay
muchos motivos para mejorar.

142
00:09:50,527 --> 00:09:55,900
Después de todo, el punto no era
replicar perfectamente el juego wordle real,

143
00:09:55,967 --> 00:10:00,067
sino más bien para aprender
desarrollo mientras se divierten.

144
00:10:01,067 --> 00:10:02,533
Nos gustaría retarte

145
00:10:02,567 --> 00:10:05,200
a implementar
un par de funciones más por tu cuenta.

146
00:10:05,393 --> 00:10:11,233
Por ejemplo, el juego debe evitar
que los jugadores adivinen repetidamente,

147
00:10:11,413 --> 00:10:14,867
y también debe tener
un teclado en pantalla

148
00:10:14,892 --> 00:10:18,300
que muestra
qué letras se han utilizado hasta ahora.

149
00:10:18,900 --> 00:10:21,967
Impresionante. Y mira esto.

150
00:10:22,366 --> 00:10:24,167
En una fracción de segundo,

151
00:10:24,192 --> 00:10:26,563
podemos ejecutar nuestras 32 pruebas

152
00:10:26,588 --> 00:10:30,567
para asegurar las reglas del juego wordle
están siendo respetadas,

153
00:10:30,600 --> 00:10:34,867
incluso después de refactorizar
o añadir más funcionalidad a nuestra aplicación.

154
00:10:35,500 --> 00:10:39,833
Estas pruebas no sólo protegen
estas funcionalidades de regresiones,

155
00:10:40,033 --> 00:10:43,333
sino también la documentación de lectura

156
00:10:43,367 --> 00:10:47,667
para cualquiera que quiera saber
de qué va nuestra aplicación.