1
00:00:04,592 --> 00:00:07,880
Es hora de que empecemos a
a manejar los controles del reproductor

2
00:00:07,905 --> 00:00:11,133
mediante la determinación de las normas
que se aplican a las conjeturas de los jugadores.

3
00:00:11,600 --> 00:00:13,977
Vayamos de arriba a abajo.

4
00:00:14,467 --> 00:00:20,200
Puesto que queremos hacer cumplir que un jugador
está limitado a cinco letras,

5
00:00:20,433 --> 00:00:24,783
podemos empezar por tener una prueba en la que,
durante la fase de actuación,

6
00:00:24,800 --> 00:00:28,333
nuestro jugador escribe una conjetura
que es más de cinco caracteres,

7
00:00:28,672 --> 00:00:34,333
pero en el que los cinco primeros caracteres
de esa suposición coinciden con la palabra del día.

8
00:00:36,590 --> 00:00:37,900
Cuando esto ocurre

9
00:00:37,925 --> 00:00:42,400
ya que nuestra aplicación sólo
los cinco primeros caracteres,

10
00:00:42,485 --> 00:00:47,692
el jugador debería ver
el mensaje de victoria.

11
00:00:47,717 --> 00:00:49,500
Así que escribamos esta aserción.

12
00:00:54,167 --> 00:00:59,433
Si ejecutamos nuestras pruebas, podemos ver
que esta nueva prueba está fallando,

13
00:01:00,567 --> 00:01:03,700
porque el mensaje de victoria
no se muestra.

14
00:01:04,133 --> 00:01:06,543
En su lugar, estamos viendo el mensaje de derrota.

15
00:01:07,257 --> 00:01:09,267
Bien, vamos a conseguir que pase.

16
00:01:10,937 --> 00:01:15,667
La entrada HTML tiene un atributo
llamado maxlength,

17
00:01:16,413 --> 00:01:21,900
que limitaría la cantidad de caracteres
que el jugador puede escribir en ese comando de entrada.

18
00:01:22,206 --> 00:01:27,733
Sin embargo, si ejecuto la prueba en este momento,
se puede ver que todavía estamos fallando.

19
00:01:28,046 --> 00:01:32,933
La razón de esto es
a como funciona vue test utils.

20
00:01:33,300 --> 00:01:34,746
Puedes echar un vistazo aquí

21
00:01:34,771 --> 00:01:38,400
y ver que es a través de
la invocación de dicho valor

22
00:01:38,433 --> 00:01:42,200
que emulamos el usuario
tecleando su conjetura,

23
00:01:42,233 --> 00:01:46,300
pero esta función
evita la protección de maxlength.

24
00:01:47,643 --> 00:01:51,000
Dicho esto, justo después
hemos terminado con esta función,

25
00:01:51,025 --> 00:01:53,990
vamos a repasar
aún más controles de entrada

26
00:01:54,015 --> 00:01:59,400
que irán más allá de lo que el nativo
HTML nativo.

27
00:01:59,826 --> 00:02:04,000
Por esa razón,
ir directamente hacia el uso de Vue.js

28
00:02:04,025 --> 00:02:09,070
para manipular la longitud máxima de entrada
no es un gran problema en nuestro caso.

29
00:02:11,230 --> 00:02:13,633
Vue ofrece una manera increíble

30
00:02:13,658 --> 00:02:18,033
de controlar
y transformar la entrada del usuario sobre la marcha,

31
00:02:18,300 --> 00:02:22,733
y esto es a través de
una referencia calculada escribible.

32
00:02:24,163 --> 00:02:27,533
Empiezas definiéndola
como lo harías con una referencia normal.

33
00:02:27,607 --> 00:02:30,567
Voy a llamar a esto
formattedGuessInProgress.

34
00:02:32,383 --> 00:02:34,067
En una ref. computada

35
00:02:34,253 --> 00:02:36,130
pasarías una llamada de retorno

36
00:02:36,155 --> 00:02:39,967
que devuelve el valor
que estás calculando.

37
00:02:40,867 --> 00:02:45,867
Bien, ahora, si quieres hacer
una referencia calculada escribible,

38
00:02:46,099 --> 00:02:51,067
lo que tienes que hacer es,
en lugar de pasar una sola llamada de retorno,

39
00:02:51,300 --> 00:02:55,167
vamos a pasar un objeto
que tiene dos callbacks en su interior,

40
00:02:55,640 --> 00:02:59,300
un getter y un setter.

41
00:03:01,337 --> 00:03:04,667
El getter se comportará
como el callback habitual

42
00:03:04,900 --> 00:03:06,833
de una propiedad calculada normal,

43
00:03:07,267 --> 00:03:11,633
pero el emisor tendrá
cualquiera que sea el valor bruto

44
00:03:12,960 --> 00:03:15,600
que vamos a recibir de nuestro v-modelo,

45
00:03:18,020 --> 00:03:22,733
y aquí podemos manipular
ese valor en bruto de la manera que queramos.

46
00:03:23,100 --> 00:03:24,567
Para nuestra situación en este momento,

47
00:03:24,592 --> 00:03:29,600
lo que necesitamos es limitar el valor en bruto
a sólo los cinco primeros caracteres,

48
00:03:29,667 --> 00:03:31,600
y podemos hacerlo así

49
00:03:33,669 --> 00:03:38,616
Estupendo. Si ejecutamos nuestras pruebas,
podemos ver que estamos pasando.

50
00:03:39,893 --> 00:03:41,826
Muy bien, vamos a hacer un commit.

51
00:03:42,586 --> 00:03:44,467
Creo que un buen nombre para este commit

52
00:03:44,540 --> 00:03:49,733
podría ser
Limitar las adivinanzas de los jugadores a 5 caracteres.

53
00:03:53,150 --> 00:03:54,963
Para nuestra fase de refactorización,

54
00:03:55,100 --> 00:03:58,100
Creo que podemos reducir
la complejidad del código base

55
00:03:58,125 --> 00:04:01,333
mediante la extracción de este número 5
en una constante.

56
00:04:01,766 --> 00:04:04,367
¿Qué significa este número 5?

57
00:04:04,773 --> 00:04:10,100
Bueno, es el tamaño de las palabras
con las que vamos a jugar,

58
00:04:10,480 --> 00:04:15,776
¿por qué no crear
una nueva constante aquí llamada WORD_SIZE.

59
00:04:18,850 --> 00:04:21,263
Y ahora
cada vez que escribamos el número 5,

60
00:04:21,288 --> 00:04:23,200
podemos hacer uso de esta constante.

61
00:04:28,823 --> 00:04:31,233
Lo mismo con nuestras pruebas.

62
00:04:32,783 --> 00:04:35,100
Puedo convertir esto en una cadena de plantilla

63
00:04:35,507 --> 00:04:39,000
y luego hacer uso
de la constante WORD_SIZE justo aquí.

64
00:04:41,220 --> 00:04:43,933
Estupendo. Nuestras pruebas siguen pasando.

65
00:04:43,958 --> 00:04:46,900
Esta es una gran oportunidad para nosotros
para hacer otro commit.

66
00:04:47,776 --> 00:04:49,533
Extraer constante.

67
00:04:51,870 --> 00:04:55,000
Bien, es hora de pasar
a nuestra siguiente prueba.

68
00:04:55,253 --> 00:04:58,800
En este caso
queremos evitar que el jugador

69
00:04:58,833 --> 00:05:02,567
de la presentación de conjeturas
que no son palabras reales.

70
00:05:03,213 --> 00:05:05,800
En este caso, creo que en nuestra fase de actuación,

71
00:05:05,825 --> 00:05:08,356
podríamos tener a nuestro usuario
tecleando una conjetura

72
00:05:08,381 --> 00:05:09,737
que no es una palabra real.

73
00:05:09,767 --> 00:05:11,867
Por ejemplo, QWERT.

74
00:05:12,707 --> 00:05:16,167
Y en este caso, porque esta conjetura
va a ser rechazada,

75
00:05:16,200 --> 00:05:19,473
el jugador no debe
ver el mensaje de victoria

76
00:05:19,498 --> 00:05:24,533
ni el mensaje de derrota
porque ninguna conjetura fue realmente presentada.

77
00:05:24,767 --> 00:05:28,167
Así que vamos a copiar esta afirmación
de esta prueba anterior aquí

78
00:05:28,200 --> 00:05:32,133
y sólo cambiarlo para tener
la palabra clave NOT antes.

79
00:05:32,267 --> 00:05:34,956
Y vamos a hacer lo mismo
para el mensaje de derrota.

80
00:05:35,893 --> 00:05:37,933
Si ejecutamos todas nuestras pruebas de nuevo

81
00:05:37,967 --> 00:05:40,267
podemos ver
que esta nueva prueba está fallando

82
00:05:40,333 --> 00:05:42,633
porque estamos viendo el mensaje de derrota.

83
00:05:43,233 --> 00:05:46,242
Esto es lo esperado
porque nuestra aplicación en este momento,

84
00:05:46,267 --> 00:05:48,800
está aceptando cualquier tipo de conjeturas.

85
00:05:49,367 --> 00:05:51,267
Así que vamos a tratar de limitar esto.

86
00:05:51,586 --> 00:05:53,417
Y una forma de conseguirlo,

87
00:05:53,500 --> 00:05:58,433
es refinando
nuestro manejador keydown.enter.

88
00:05:59,200 --> 00:06:04,100
Así que lo que voy a hacer es empezar
extrayendo esto en un método.

89
00:06:09,510 --> 00:06:11,167
Y lo que este método
va a hacer

90
00:06:11,192 --> 00:06:13,267
es exactamente lo que tenemos aquí.

91
00:06:18,130 --> 00:06:20,770
Estupendo.
Así que seguimos fallando y eso está bien.

92
00:06:20,795 --> 00:06:22,823
Ahora lo que voy a hacer es,

93
00:06:23,233 --> 00:06:26,943
antes de asignar el valor
de la conjetura en curso

94
00:06:26,968 --> 00:06:28,057
a la conjetura presentada,

95
00:06:28,067 --> 00:06:32,733
Voy a comprobar si la conjetura
en curso es una palabra inglesa real.

96
00:06:33,046 --> 00:06:36,250
Y si no lo es
voy a volver pronto.

97
00:06:36,300 --> 00:06:37,533
Así que vamos a hacer esto.

98
00:06:42,650 --> 00:06:47,533
Si nuestra colección de palabras en inglés
no incluye la conjetura en curso,

99
00:06:48,070 --> 00:06:49,400
hacer un retorno anticipado.

100
00:06:49,646 --> 00:06:55,267
Si ejecutamos nuestras pruebas, podemos ver
que hemos vuelto a la fase verde.

101
00:06:56,977 --> 00:06:58,667
Vamos a hacer otro commit.

102
00:06:59,633 --> 00:07:03,467
Evitar que las conjeturas que no son
palabras en inglés.

103
00:07:08,367 --> 00:07:10,100
Para nuestra fase de refactorización,

104
00:07:10,125 --> 00:07:12,787
Sinceramente, no veo
nada en este momento

105
00:07:12,812 --> 00:07:14,300
que me gustaría refactorizar.

106
00:07:14,333 --> 00:07:15,567
Y eso está bien.

107
00:07:15,853 --> 00:07:17,390
Así que tengamos eso en cuenta

108
00:07:17,415 --> 00:07:22,100
que aunque el bucle TDD
es refactorización rojo-verde,

109
00:07:22,313 --> 00:07:26,361
a veces nos encontramos con escenarios
como este

110
00:07:26,386 --> 00:07:29,710
en los que acabamos saltándonos una fase.

111
00:07:31,123 --> 00:07:33,867
Así que vamos a nuestra siguiente prueba.

112
00:07:34,967 --> 00:07:38,333
Para hacer cumplir que las conjeturas
no distinguen entre mayúsculas y minúsculas,

113
00:07:38,606 --> 00:07:42,300
podríamos hacer que el usuario escriba una conjetura
en minúsculas,

114
00:07:42,400 --> 00:07:46,800
pero que de otro modo perfectamente
coincide con la palabra del día.

115
00:07:46,873 --> 00:07:48,690
Así que vamos a escribir esta fase del acto.

116
00:07:50,270 --> 00:07:52,977
Si el usuario escribiera
la palabra del día ahora mismo,

117
00:07:53,002 --> 00:07:54,667
ganaría el juego, ¿verdad?

118
00:07:54,693 --> 00:07:56,033
Pero lo que voy a hacer es,

119
00:07:56,058 --> 00:08:00,346
Voy a tener el tipo de usuario
la palabra del día en minúsculas.

120
00:08:00,866 --> 00:08:04,890
Y todavía queremos que el usuario
para ganar el juego,

121
00:08:04,915 --> 00:08:07,767
por lo que debe ver el mensaje de victoria.

122
00:08:09,690 --> 00:08:12,963
Si ejecutamos nuestras pruebas, podemos ver, sin embargo,

123
00:08:13,033 --> 00:08:17,100
que el jugador
no ve el mensaje de victoria.

124
00:08:17,125 --> 00:08:19,457
De hecho, no están viendo
ningún mensaje

125
00:08:19,482 --> 00:08:22,267
porque su conjetura fue rechazada

126
00:08:22,566 --> 00:08:25,833
debido a no estar en la lista
de palabras inglesas que tenemos.

127
00:08:26,279 --> 00:08:31,067
Porque recuerda, nuestra lista
de palabras en inglés está toda en mayúsculas.

128
00:08:32,473 --> 00:08:34,800
Bien, hagamos que pase.

129
00:08:36,133 --> 00:08:38,800
Hay diferentes enfoques
que podemos hacer aquí,

130
00:08:38,826 --> 00:08:44,900
pero lo que quiero hacer es emular
lo que sucede en el juego wordle real.

131
00:08:45,300 --> 00:08:49,742
Y eso es, independientemente
si estás escribiendo un carácter en minúscula

132
00:08:49,767 --> 00:08:51,567
o un carácter en mayúsculas,

133
00:08:51,760 --> 00:08:56,900
la salida en el tablero de juego
estará siempre en mayúsculas.

134
00:08:57,500 --> 00:09:00,433
Así que podemos hacer lo mismo
en nuestra versión de aquí.

135
00:09:01,133 --> 00:09:04,800
Para ello, podemos volver
a nuestra escritura calculada ref,

136
00:09:05,333 --> 00:09:08,700
y como parte de la transformación
en el setter,

137
00:09:08,813 --> 00:09:14,300
podemos lanzar el valor en bruto
a mayúsculas, así.

138
00:09:14,933 --> 00:09:16,600
Así que vamos a ejecutar nuestras pruebas,

139
00:09:17,253 --> 00:09:20,100
y podemos ver
que estamos de vuelta a pasar.

140
00:09:20,312 --> 00:09:22,567
Estupendo. Hagamos otra confirmación.

141
00:09:23,133 --> 00:09:26,033
Un buen mensaje de confirmación
para este caso sería,

142
00:09:26,113 --> 00:09:29,900
hacer que las conjeturas de los jugadores no distingan entre mayúsculas y minúsculas.

143
00:09:31,943 --> 00:09:35,557
Una vez más, no veo nada aquí
que me gustaría refactorizar,

144
00:09:35,767 --> 00:09:39,533
así que creo que estamos bien para pasar a
a nuestra siguiente prueba.

145
00:09:40,059 --> 00:09:41,967
Ahora, lo que queremos hacer

146
00:09:42,000 --> 00:09:46,367
es evitar que nuestros jugadores de escribir
cualquier cosa que no sea una letra.

147
00:09:46,700 --> 00:09:49,217
Bueno, una buena manera para nosotros para iniciar esta prueba

148
00:09:49,267 --> 00:09:53,860
es por tener nuestra fase de actuar
involucrando a nuestro usuario escribiendo una conjetura

149
00:09:53,885 --> 00:09:58,433
que contiene números
y caracteres especiales, como este.

150
00:09:58,946 --> 00:10:01,342
Y lo que queremos afirmar en este caso

151
00:10:01,367 --> 00:10:06,930
es que la entrada del jugador contendrá
sólo la H, R y T.

152
00:10:06,955 --> 00:10:08,075
Hagamos esto

153
00:10:23,490 --> 00:10:28,233
Bien, si ejecutamos nuestras pruebas,
podemos ver que estamos fallando,

154
00:10:28,267 --> 00:10:31,500
porque el número
y el carácter especial

155
00:10:31,899 --> 00:10:35,567
han pasado por nuestra entrada.

156
00:10:36,280 --> 00:10:37,960
Muy bien, una vez más,

157
00:10:37,985 --> 00:10:44,491
vamos a refinar
nuestro setter en el writable computed ref.

158
00:10:45,679 --> 00:10:50,786
Y para este punto, cada vez que quiero
hacer este filtrado más complejo,

159
00:10:50,967 --> 00:10:53,233
Me gusta confiar en RegEx.

160
00:10:53,672 --> 00:10:56,767
Voy a explicar el RegEx
que voy a usar aquí,

161
00:10:56,833 --> 00:11:00,133
pero si no estás cómodo
con RegEx en general,

162
00:11:00,167 --> 00:11:04,317
Recomiendo encarecidamente
visitar regex101.com.

163
00:11:04,333 --> 00:11:07,467
Proporciona un recurso increíble
para que conozcas las reglas

164
00:11:07,633 --> 00:11:09,633
y cómo probar tu RegEx.

165
00:11:10,767 --> 00:11:12,257
Pero bien, continuemos.

166
00:11:12,267 --> 00:11:16,667
En este caso, voy a utilizar
un RegEx para definir mi objetivo,

167
00:11:17,539 --> 00:11:20,733
y lo reemplazaré por una cadena vacía.

168
00:11:23,310 --> 00:11:26,467
Muy bien, así que permítanme explicar
lo que he escrito hasta ahora aquí.

169
00:11:27,067 --> 00:11:29,533
Escribiendo cualquier cosa entre barras

170
00:11:29,567 --> 00:11:36,167
es una de las formas en las que puedes definir
RegExes en JavaScript o TypeScript.

171
00:11:36,900 --> 00:11:41,067
Después de la última /
podemos pasar opciones de configuración.

172
00:11:41,133 --> 00:11:47,267
"g" significa global, y hace que el RegEx
no regrese después de la primera coincidencia.

173
00:11:47,500 --> 00:11:53,500
La bandera "i" significa que nuestro RegEx
va a ser insensible a mayúsculas y minúsculas.

174
00:11:55,200 --> 00:11:58,300
Voy a buscar
cualquier cosa que no sea una letra,

175
00:11:58,325 --> 00:12:04,200
por lo que una forma en que se puede definir
es haciendo este RegEx aquí.

176
00:12:04,480 --> 00:12:05,680
Deja que te lo explique.

177
00:12:06,073 --> 00:12:09,400
Los corchetes me permiten representar
un solo carácter

178
00:12:09,425 --> 00:12:13,633
de cualquier conjunto que quiero definir
dentro de los corchetes.

179
00:12:14,633 --> 00:12:18,700
El ^ dentro del paréntesis significa no,

180
00:12:18,800 --> 00:12:23,028
por lo tanto, representa un conjunto
de todos los caracteres

181
00:12:23,053 --> 00:12:26,267
que no son las letras de la A a la Z.

182
00:12:27,187 --> 00:12:30,108
Añadiendo un + después de este conjunto,

183
00:12:30,133 --> 00:12:36,633
Estoy determinando que estoy buscando una
o más apariciones de un carácter

184
00:12:36,658 --> 00:12:38,000
que coincide con este conjunto.

185
00:12:39,200 --> 00:12:42,300
Bien, entonces efectivamente
lo que estoy haciendo en la línea 23

186
00:12:42,420 --> 00:12:48,567
es reemplazar cualquier cosa que no sea
una letra por una cadena vacía.

187
00:12:48,600 --> 00:12:51,767
Efectivamente la eliminación de ellos
del valor en bruto.

188
00:12:51,900 --> 00:12:56,390
Si ejecutamos nuestra prueba
podemos ver que estamos pasando.

189
00:12:58,003 --> 00:13:00,067
Estupendo. Hagamos otro commit.

190
00:13:02,490 --> 00:13:06,200
Sólo permitir al jugador escribir letras.

191
00:13:07,777 --> 00:13:13,008
¡Impresionante! Juntos, hemos practicado
cómo escribir pruebas para las entradas de los jugadores.

192
00:13:13,033 --> 00:13:17,683
También tuvimos una gran oportunidad
para aprovechar Vue writeable computed refs

193
00:13:17,700 --> 00:13:21,667
para permitirnos manipular
la entrada del jugador durante un v-model.