1
00:00:04,747 --> 00:00:07,633
Creo que una buena cosa
que podríamos aplicar a continuación

2
00:00:07,658 --> 00:00:13,337
es que aparezca un mensaje de derrota
si el usuario se equivoca.

3
00:00:13,673 --> 00:00:17,343
Me doy cuenta de que wordle te permite
cometer múltiples errores,

4
00:00:17,400 --> 00:00:21,533
pero quiero mantener las cosas simples por ahora.

5
00:00:21,619 --> 00:00:24,233
Digamos que en nuestro juego worldle,

6
00:00:24,258 --> 00:00:27,100
si aciertas,
ganas el juego.

7
00:00:27,200 --> 00:00:31,203
Si tan pronto como usted hace su primera
adivinación incorrecta, pierdes el juego.

8
00:00:31,950 --> 00:00:36,200
La mayoría de los marcos de pruebas le permiten
escribir pruebas de marcador de posición

9
00:00:36,546 --> 00:00:40,233
donde podemos escribir
ideas para el futuro.

10
00:00:40,759 --> 00:00:43,677
Vitest no es una excepción.

11
00:00:43,967 --> 00:00:50,733
Podemos escribir placeholder test en vitest
añadiendo la palabra todo después del test.

12
00:00:51,513 --> 00:00:55,633
En este caso, vamos a escribir
dos pruebas diferentes aquí.

13
00:00:55,800 --> 00:00:58,757
Uno que diga que aparece un mensaje de derrota

14
00:00:58,767 --> 00:01:01,667
si el usuario
hace una suposición incorrecta.

15
00:01:04,517 --> 00:01:08,767
Otro que dice
que no aparece ningún mensaje de rango de juego

16
00:01:08,833 --> 00:01:11,933
si el usuario aún no ha adivinado.

17
00:01:15,777 --> 00:01:19,300
Estupendo. ¿Quieres intentar escribir
esta prueba por ti mismo?

18
00:01:20,000 --> 00:01:22,100
¿Publicar este vídeo y probarlo?

19
00:01:23,683 --> 00:01:28,433
De acuerdo. Vamos a escribir la implementación
de nuestra primera tarea.

20
00:01:31,957 --> 00:01:34,577
Creo que gran parte
del trabajo pesado de esta tarea

21
00:01:34,800 --> 00:01:38,567
puede ser copiado sobre
de la prueba anterior que tenemos.

22
00:01:42,646 --> 00:01:44,367
Todo lo que queremos cambiar aquí

23
00:01:44,400 --> 00:01:49,067
es que en lugar de hacer una conjetura
que coincida con la palabra del día,

24
00:01:49,167 --> 00:01:51,767
hagamos una conjetura que no coincida.

25
00:01:54,450 --> 00:01:56,929
Finalmente, para nuestra fase de búsqueda,

26
00:01:56,954 --> 00:02:01,667
Quiero afirmar
que vemos un mensaje de derrota.

27
00:02:03,360 --> 00:02:06,167
Vamos con mejor suerte la próxima vez.

28
00:02:09,193 --> 00:02:11,047
Si ejecutamos nuestras pruebas,

29
00:02:13,120 --> 00:02:16,175
podemos ver
que estamos pasando la primera prueba,

30
00:02:16,200 --> 00:02:18,920
pero en esta nueva, estamos fallando.

31
00:02:19,019 --> 00:02:21,867
Esperamos tener más suerte la próxima vez.

32
00:02:22,046 --> 00:02:24,167
Pero vimos que ganaste!,

33
00:02:25,800 --> 00:02:27,913
por cierto, como regla general,

34
00:02:28,000 --> 00:02:30,633
ejecuta siempre el interruptor de prueba completo.

35
00:02:30,706 --> 00:02:34,687
Incluso si usted piensa exactamente
qué pruebas están siendo afectadas,

36
00:02:34,712 --> 00:02:36,360
por el trabajo que estás haciendo,

37
00:02:36,700 --> 00:02:41,100
Ejecutar el conmutador de prueba completo
te protegerá contra regresiones.

38
00:02:42,683 --> 00:02:44,567
Para pasar esta prueba

39
00:02:44,665 --> 00:02:49,367
Podemos hacer el mismo enfoque
que hemos hecho para el mensaje de victoria.

40
00:02:49,600 --> 00:02:54,743
Vamos a ir a nuestro tablero wordle
y mostrar siempre el mensaje de derrota.

41
00:02:57,570 --> 00:03:03,033
Así que si ejecutamos nuestras pruebas, podemos ver
que hemos vuelto a la etapa verde.

42
00:03:03,058 --> 00:03:04,533
Vamos a hacer un commit.

43
00:03:08,343 --> 00:03:10,167
Mostrar mensaje de derrota.

44
00:03:13,556 --> 00:03:18,700
Ahora, como probablemente estás esperando,
volvemos a la fase de refactorización.

45
00:03:18,900 --> 00:03:23,233
Creo que al igual que
como hemos hecho con el mensaje de victoria,

46
00:03:23,300 --> 00:03:25,500
podemos reducir la complejidad aquí

47
00:03:25,525 --> 00:03:30,733
mediante la extracción de otra constante
que contendrá nuestro mensaje de derrota.

48
00:03:39,430 --> 00:03:42,170
También podemos hacer
lo mismo para nuestra prueba.

49
00:03:48,733 --> 00:03:52,400
Si ejecutamos nuestro test, sigue pasando.

50
00:03:52,500 --> 00:03:55,767
Hagamos un commit, extraigamos la constante.

51
00:03:59,192 --> 00:04:02,433
Otra extracción que podemos hacer
es para la palabra del día.

52
00:04:02,458 --> 00:04:03,818
Hagámoslo.

53
00:04:10,017 --> 00:04:13,763
Siempre que tengas una clave
igual al valor en un objeto,

54
00:04:13,788 --> 00:04:17,295
puedes simplificarlo
sólo tener la clave.

55
00:04:19,588 --> 00:04:25,800
Perfecto. Si ejecutamos nuestras pruebas
o sigue pasando, estupendo.

56
00:04:26,046 --> 00:04:30,167
Así que vamos a hacer un commit
y llamemos a esta variable extract.

57
00:04:31,410 --> 00:04:36,967
Bien, ahora, estamos listos para implementar
el cuerpo de nuestro siguiente test.

58
00:04:38,577 --> 00:04:44,033
Una vez más, vamos a hacer uso
de nuestras pruebas existentes como referencia.

59
00:04:44,267 --> 00:04:46,633
Por lo tanto, voy a copiar la prueba anterior.

60
00:04:47,717 --> 00:04:51,100
Y en este caso
no estamos haciendo ninguna entrada de usuario.

61
00:04:53,003 --> 00:04:56,033
Y esperamos
que no vamos a ver

62
00:04:56,633 --> 00:04:58,733
ni el mensaje de victoria

63
00:05:01,283 --> 00:05:03,400
ni el mensaje de derrota.

64
00:05:05,697 --> 00:05:07,977
Y volvemos al escenario rojo

65
00:05:08,002 --> 00:05:11,400
porque estamos viendo
esos dos mensajes todo el tiempo.

66
00:05:11,667 --> 00:05:14,577
Para pasar esta prueba,
tendremos que hacer un par de cosas.

67
00:05:14,633 --> 00:05:18,767
Tenemos que realizar un seguimiento de la conjetura
que el usuario está a punto de presentar.

68
00:05:18,959 --> 00:05:21,506
Y una vez que el usuario envía su conjetura,

69
00:05:21,531 --> 00:05:23,827
la compararemos
con la palabra del día.

70
00:05:24,000 --> 00:05:26,853
Si coinciden
mostramos el mensaje de victoria.

71
00:05:26,867 --> 00:05:29,663
Si no coinciden
mostramos el mensaje de derrota

72
00:05:30,173 --> 00:05:33,033
para realizar un seguimiento de la conjetura
que el usuario está escribiendo.

73
00:05:33,167 --> 00:05:36,767
Podemos hacer uso de una ref.

74
00:05:42,009 --> 00:05:48,367
Así que el progreso de adivinar
se puede seguir a través de esta ref.

75
00:05:49,733 --> 00:05:54,133
El envío se produce
cuando el usuario pulsa la tecla enter.

76
00:05:54,433 --> 00:05:58,567
Vamos a tener otro ref por aquí
para la suposición enviada.

77
00:06:01,070 --> 00:06:04,833
Y cuando se pulsa enter

78
00:06:05,300 --> 00:06:10,000
el medidor de conjeturas recibe
el valor de la conjetura en curso.

79
00:06:11,567 --> 00:06:15,083
Perfecto. Ahora respecto
a mostrar los mensajes,

80
00:06:15,153 --> 00:06:19,633
podemos comprobar si la conjetura presentada

81
00:06:21,863 --> 00:06:27,633
es igual a la palabra del día,
entonces mostramos el mensaje de victoria.

82
00:06:28,033 --> 00:06:30,833
En caso contrario, mostramos el mensaje de derrota.

83
00:06:35,389 --> 00:06:36,990
Ahora, esto no va a ser suficiente.

84
00:06:37,015 --> 00:06:41,433
Si ejecutamos nuestras pruebas,
podemos ver que seguimos fallando,

85
00:06:41,460 --> 00:06:45,267
porque aunque
no enviamos ninguna conjetura,

86
00:06:45,985 --> 00:06:49,569
por lo que ya estamos mostrando
el mensaje de derrota al usuario.

87
00:06:50,960 --> 00:06:53,467
Esto es porque una cadena vacía

88
00:06:53,660 --> 00:06:56,567
va a ser diferente
de la palabra del día.

89
00:06:56,667 --> 00:06:58,100
Eso eran pruebas.

90
00:06:59,300 --> 00:07:02,433
Vamos a tener que añadir
una comprobación adicional aquí

91
00:07:03,093 --> 00:07:05,533
que sólo renderizamos el mensaje

92
00:07:05,700 --> 00:07:10,767
si una conjetura tiene una longitud mayor que cero.

93
00:07:14,437 --> 00:07:18,370
si ejecutas esto,
ahora estamos en una etapa verde.

94
00:07:20,083 --> 00:07:22,233
Perfecto. Hagamos un commit.

95
00:07:23,317 --> 00:07:26,267
Mostrar sólo la información del final del juego

96
00:07:26,467 --> 00:07:28,000
después de que el juego haya terminado.

97
00:07:30,670 --> 00:07:35,467
La reducción de la duplicación es una clave
clave de la fase refractaria.

98
00:07:36,033 --> 00:07:39,733
Y podemos reducir la duplicación
en nuestro conjunto de pruebas.

99
00:07:40,146 --> 00:07:43,767
Observa que cada prueba que tenemos,

100
00:07:43,800 --> 00:07:47,200
comienza con exactamente
la misma fase de arreglo.

101
00:07:48,073 --> 00:07:53,767
Extraigamos esta lógica común
en un gancho que se ejecuta antes de cada prueba.

102
00:07:54,333 --> 00:07:56,033
Esto se puede hacer en vitest

103
00:07:56,067 --> 00:07:58,733
escribiendo una función llamada beforeEach.

104
00:07:59,733 --> 00:08:01,810
Lo que escribamos en esta función

105
00:08:01,833 --> 00:08:06,333
se garantiza que se ejecute antes de
cada una de las pruebas de este grupo.

106
00:08:10,743 --> 00:08:14,167
Fíjate que he hecho que wrapper
sea una variable

107
00:08:14,200 --> 00:08:17,200
que está en el contexto
de este grupo de descripción.

108
00:08:18,843 --> 00:08:21,590
Usted puede notar
que nuestra configuración typescript

109
00:08:21,600 --> 00:08:27,100
no le gusta el hecho de que estamos utilizando
un tipo implícito any a nuestro wrapper

110
00:08:27,125 --> 00:08:29,233
porque no estoy definiendo
el tipo en este momento.

111
00:08:30,197 --> 00:08:33,467
Pero si vamos a la definición
de la función de montaje,

112
00:08:33,780 --> 00:08:37,967
podemos ver que el tipo de retorno
puede ser bastante desalentador.

113
00:08:38,899 --> 00:08:40,633
He aquí una pequeña pista tipográfica

114
00:08:40,667 --> 00:08:44,233
que puede ayudarte mucho
cuando trabajes con tipos complejos.

115
00:08:44,567 --> 00:08:48,577
Como sabemos que nuestra envoltura
siempre va a contener

116
00:08:48,600 --> 00:08:50,367
cualquiera que sea el montaje está regresando,

117
00:08:51,030 --> 00:08:56,100
podemos aprovechar un tipo de utilidad
que typescript pone a nuestra disposición

118
00:08:56,167 --> 00:08:58,543
específicamente para este tipo de escenario.

119
00:08:59,063 --> 00:09:03,443
Podemos escribir cada wrapper
como tipo de retorno

120
00:09:05,217 --> 00:09:07,523
de la función de montaje.

121
00:09:08,767 --> 00:09:11,500
Y ya está. Así de fácil.

122
00:09:11,800 --> 00:09:17,300
Nuestra envoltura está explícitamente tipada ahora
a lo que la función mount devuelva.

123
00:09:17,353 --> 00:09:22,167
Si ejecutamos todas nuestras pruebas
podemos ver que están pasando.

124
00:09:23,863 --> 00:09:26,050
Muy bien, ahora vamos a hacer una confirmación.

125
00:09:27,497 --> 00:09:31,400
Extraer la fase arrange a beforeEach.

126
00:09:35,757 --> 00:09:39,167
Otro trozo de código
que se repite varias veces

127
00:09:39,200 --> 00:09:43,677
es el acto de tener el tipo de jugador
y envíe su conjetura.

128
00:09:44,757 --> 00:09:49,133
Extraigamos esto
en un mensaje de ayuda personalizado.

129
00:09:51,423 --> 00:09:56,100
Y en este caso, voy a llamarlo
playerSubmitGuess.

130
00:09:59,117 --> 00:10:01,967
Esta función, voy a tener la conjetura

131
00:10:04,277 --> 00:10:05,833
justo aquí.

132
00:10:06,303 --> 00:10:09,067
Y en este caso,
estamos pasando la palabra del día.

133
00:10:09,779 --> 00:10:15,833
En este otro caso, por aquí,
estamos pasando la palabra WRONG.

134
00:10:17,259 --> 00:10:18,667
Si ejecutamos nuestra tarea,

135
00:10:19,433 --> 00:10:20,967
seguimos pasando.

136
00:10:22,920 --> 00:10:25,130
Esta técnica refractaria de aquí

137
00:10:25,155 --> 00:10:28,600
que acabo de hacer
se llama método de extracción,

138
00:10:28,800 --> 00:10:31,000
así, porque nuestras pruebas están pasando

139
00:10:31,067 --> 00:10:35,467
Voy a hacer otro commit
y decir, extraer método.

140
00:10:36,033 --> 00:10:38,200
Estupendo. Hemos aprendido diferentes maneras.

141
00:10:38,225 --> 00:10:42,833
Podemos refactorizar nuestro código base
para que sea más fácil trabajar con él,

142
00:10:42,886 --> 00:10:46,233
extrayendo constantes y métodos.

143
00:10:46,413 --> 00:10:50,723
También aprendimos cómo podemos aprovechar
la belleza y los ganchos de vitest,

144
00:10:50,906 --> 00:10:54,227
para manejar partes comunes
de nuestra fase organizada.