﻿1
00:00:04,440 --> 00:00:07,500
Nuestro clon worldle
es cada vez mejor,

2
00:00:07,653 --> 00:00:10,010
pero todavía hay un elefante en la habitación

3
00:00:10,033 --> 00:00:13,000
que hemos estado ignorando
hasta ahora.

4
00:00:13,467 --> 00:00:18,367
Se supone que un jugador puede
intentar adivinar la palabra varias veces.

5
00:00:18,520 --> 00:00:22,250
Más exactamente,
un jugador puede intentarlo seis veces.

6
00:00:22,467 --> 00:00:25,867
Hoy vamos a modificar nuestra aplicación
para permitir precisamente eso.

7
00:00:27,350 --> 00:00:30,633
Esta prueba de aquí tendrá que ser modificada

8
00:00:30,667 --> 00:00:33,800
para requerir al usuario
para hacer seis conjeturas

9
00:00:33,825 --> 00:00:36,200
antes de que se muestre el mensaje de derrota.

10
00:00:37,510 --> 00:00:41,667
Tal vez podríamos hacer uso de
de otra función .each para esto.

11
00:00:41,886 --> 00:00:45,208
Vamos a convertir esta prueba
en una serie de mini tests

12
00:00:45,233 --> 00:00:48,833
donde pasamos de hacer cero conjeturas erróneas

13
00:00:48,967 --> 00:00:52,400
todo el camino hasta
a hacer seis conjeturas erróneas.

14
00:00:52,567 --> 00:00:57,933
Sólo debemos ver el mensaje de derrota
cuando hacemos seis conjeturas erróneas.

15
00:01:05,470 --> 00:01:06,937
Así que como puedes ver aquí,

16
00:01:06,962 --> 00:01:09,367
Estoy proporcionando una serie de datos

17
00:01:09,400 --> 00:01:12,200
que va desde cero conjeturas
a seis conjeturas,

18
00:01:12,225 --> 00:01:16,200
y sólo en el último caso
deberíamos ver un mensaje de derrota.

19
00:01:19,316 --> 00:01:24,867
Un buen nombre para este bloque descriptivo
podría ser un mensaje de derrota

20
00:01:24,892 --> 00:01:30,567
debería aparecer si el jugador hace
adivinanzas incorrectas seis veces seguidas.

21
00:01:32,067 --> 00:01:34,767
Ahora el cuerpo de este bloque de descripción

22
00:01:34,767 --> 00:01:42,267
va a contener una serie
de pruebas automatizadas para cada escenario.

23
00:01:43,267 --> 00:01:46,833
Creo que un buen nombre para cada una
de estas pruebas individuales

24
00:01:46,833 --> 00:01:51,767
podría ser por lo tanto para x conjeturas

25
00:01:51,792 --> 00:01:56,433
un mensaje de derrota debería
o no debería aparecer.

26
00:01:58,662 --> 00:02:02,667
¿Qué vamos a rellenar
en este título dinámico?

27
00:02:02,713 --> 00:02:04,233
Bueno, va a ser algo

28
00:02:04,258 --> 00:02:07,600
que va a ser calculado
basado en el número de conjeturas

29
00:02:07,667 --> 00:02:10,700
y si es o no
el mensaje de derrota debe ser visible.

30
00:02:11,633 --> 00:02:15,786
Aquí podemos añadir el número
de aciertos directamente al nombre de la prueba,

31
00:02:15,811 --> 00:02:18,431
pero aquí quiero renderizar

32
00:02:20,864 --> 00:02:22,864
la palabra no

33
00:02:23,255 --> 00:02:26,433
sólo si el mensaje de derrota es falso.

34
00:02:27,633 --> 00:02:33,300
Genial y cuales serían los arrange
actuar y afirmar esta prueba?

35
00:02:33,433 --> 00:02:37,843
Bueno, el arrange ya está hecho
por nosotros gracias a nuestro beforeEach,

36
00:02:38,039 --> 00:02:41,667
que es montar el componente
con la palabra del día.

37
00:02:41,847 --> 00:02:45,533
Para el acto vamos a escribir
una conjetura errónea

38
00:02:45,667 --> 00:02:48,103
un número de conjeturas cantidad de tiempo.

39
00:02:55,263 --> 00:02:56,643
Y para la fase de afirmación

40
00:02:56,668 --> 00:03:00,000
vamos a buscar
que el mensaje de derrota está en la pantalla

41
00:03:00,067 --> 00:03:01,467
o no está en la pantalla.

42
00:03:12,497 --> 00:03:14,633
Ahora si ejecutamos nuestras pruebas

43
00:03:15,823 --> 00:03:20,010
podemos ver que estamos pasando en el caso
de no mostrar un mensaje de victoria

44
00:03:20,035 --> 00:03:21,500
si no se ha adivinado mal,

45
00:03:22,850 --> 00:03:27,497
pero estamos fallando
en todos los reintentos

46
00:03:27,533 --> 00:03:29,417
que el jugador
debería tener derecho a hacer.

47
00:03:29,433 --> 00:03:31,967
Usted puede ver
que cuando nos equivocamos una vez

48
00:03:31,992 --> 00:03:35,667
ya estamos mostrando
el mensaje de derrota al jugador.

49
00:03:36,890 --> 00:03:39,100
Bien, vamos a pasar esta prueba

50
00:03:39,125 --> 00:03:42,837
y por supuesto deberíamos eliminar
esta prueba anterior de aquí

51
00:03:42,862 --> 00:03:45,300
porque ya no es
relevante para el proyecto.

52
00:03:45,513 --> 00:03:48,133
Ha sido reemplazada por nuestra nueva prueba.

53
00:03:52,183 --> 00:03:53,863
Para que el test pase,

54
00:03:53,888 --> 00:03:55,730
tendremos que llevar un registro

55
00:03:55,755 --> 00:03:58,467
de todas las conjeturas anteriores
que el jugador ha enviado.

56
00:03:58,767 --> 00:04:02,133
Bueno conjetura presentado en este momento
es sólo una cadena.

57
00:04:02,273 --> 00:04:09,333
Vamos a convertir esto en conjeturas presentadas
que ahora es un array de cadenas.

58
00:04:13,123 --> 00:04:14,997
Si el jugador envía una suposición

59
00:04:15,022 --> 00:04:17,997
entonces en lugar de simplemente asignar
la suposición a guesseSubmitted

60
00:04:18,033 --> 00:04:21,200
vamos a empujar
esta conjetura.

61
00:04:23,120 --> 00:04:27,633
Otro cambio que tenemos que hacer
es lo que cuenta como el final del juego.

62
00:04:28,159 --> 00:04:31,233
Antes de que tuviéramos que sólo tenía que ser

63
00:04:31,267 --> 00:04:34,067
guessSubmitted
con una longitud mayor que cero,

64
00:04:34,133 --> 00:04:40,890
pero ahora las conjeturas enviadas tienen que tener
una longitud de seis o conjeturas presentadas

65
00:04:40,900 --> 00:04:43,200
incluye la palabra del día.

66
00:04:44,263 --> 00:04:46,457
Y vamos a dar
el mensaje de victoria

67
00:04:46,467 --> 00:04:49,200
cuando las adivinanzas enviadas
incluye la palabra del día.

68
00:04:51,103 --> 00:04:55,167
Nótese que TypeScript
se está quejando por aquí

69
00:04:55,267 --> 00:05:00,833
porque la palabra del día
puede ser una cadena o indefinida.

70
00:05:01,067 --> 00:05:06,800
La razón de esto es que
nuestra palabra del día no es necesaria.

71
00:05:07,433 --> 00:05:11,193
Podemos hacer que se requiera proporcionando
una clave extra aquí,

72
00:05:12,640 --> 00:05:15,270
llamada requerida, y ponerla a true.

73
00:05:16,330 --> 00:05:19,367
Y ya está. Puedes ver
que TypeScript ha dejado de quejarse

74
00:05:19,392 --> 00:05:23,667
porque ahora la palabra del día
se considera una cadena.

75
00:05:24,367 --> 00:05:27,700
¡Estupendo! Creo que esto debería ser suficiente
para pasar la prueba.

76
00:05:27,733 --> 00:05:29,533
Intentemos ejecutar todas las pruebas

77
00:05:30,737 --> 00:05:34,367
y podemos ver
que tenemos verde en todo el tablero.

78
00:05:36,243 --> 00:05:38,967
¡Impresionante! Vamos a confirmarlo.

79
00:05:40,983 --> 00:05:44,600
Permitir al jugador hacer 6 intentos.

80
00:05:46,943 --> 00:05:51,090
Para refactorizar,
Creo que una buena victoria rápida para nosotros aquí

81
00:05:51,137 --> 00:05:54,267
sería extraer este número 6.

82
00:05:54,633 --> 00:05:59,167
Es un número mágico.
¿Y qué representa?

83
00:05:59,233 --> 00:06:02,200
Bueno, representa el,

84
00:06:03,077 --> 00:06:06,510
MAX_GUESSES_COUNT, ¿verdad?

85
00:06:08,183 --> 00:06:10,933
Usemos esto en nuestra prueba.

86
00:06:17,857 --> 00:06:20,633
Y en nuestro worldeBoard.

87
00:06:23,590 --> 00:06:27,467
¡Impresionante! Si ejecutamos nuestras pruebas
podemos ver que todavía estamos pasando.

88
00:06:27,493 --> 00:06:29,267
Así que vamos a hacer otro commit.

89
00:06:29,300 --> 00:06:31,383
Extraer constante.

90
00:06:34,077 --> 00:06:38,570
Otra cosa que creo que
aumentaría la legibilidad de este componente

91
00:06:38,733 --> 00:06:43,500
es extraer esta condicional aquí
en una propiedad computada.

92
00:06:43,753 --> 00:06:46,433
De nuevo, ¿qué representa esto?

93
00:06:46,606 --> 00:06:50,433
Es efectivamente comprobar para ver
si el juego ha terminado.

94
00:06:50,600 --> 00:06:53,700
Así que vamos a hacer una propiedad computada
que lo represente.

95
00:06:54,650 --> 00:07:01,700
Me gusta que mis variables booleanas
comiencen sus nombres con "is" o "has".

96
00:07:02,367 --> 00:07:05,400
En este caso,
quiero llamarla isGameOver.

97
00:07:06,100 --> 00:07:09,977
Y vamos a saber
si el juego ha terminado o no

98
00:07:10,033 --> 00:07:13,967
cuando el jugador ha agotado
su cuenta de aciertos

99
00:07:13,992 --> 00:07:16,800
o si ha acertado.

100
00:07:22,123 --> 00:07:25,133
Para acceder
a la palabra del día como apoyo,

101
00:07:25,200 --> 00:07:28,467
Necesito capturar
el valor de retorno de defineProps

102
00:07:29,433 --> 00:07:30,913
y usarlo aquí.

103
00:07:37,286 --> 00:07:39,933
¡Estupendo! Intentemos ejecutar nuestras pruebas de nuevo.

104
00:07:41,026 --> 00:07:43,600
Y podemos ver que seguimos pasando.

105
00:07:44,367 --> 00:07:48,200
Quiero hacer un commit
y llamarlo extractConditional.

106
00:07:51,096 --> 00:07:52,150
¡Impresionante!

107
00:07:53,777 --> 00:07:59,167
Si queremos, también podemos hacer que nuestra prueba
no tenga tantas repeticiones.

108
00:07:59,446 --> 00:08:01,080
Una forma de hacer esto es,

109
00:08:01,100 --> 00:08:04,780
mediante la creación de esta matriz
de entradas aquí, dinámicamente,

110
00:08:04,833 --> 00:08:07,470
a través de Array.from, así.

111
00:08:11,817 --> 00:08:14,923
Array.from recibe,
como primer argumento,

112
00:08:14,933 --> 00:08:16,790
cualquier cosa que parezca un array.

113
00:08:17,167 --> 00:08:19,567
Así que un objeto con una propiedad de longitud

114
00:08:20,067 --> 00:08:22,933
va a ser algo
que Array.from puede trabajar.

115
00:08:23,067 --> 00:08:26,433
Y el segundo argumento es un mapa de devolución de llamada

116
00:08:26,567 --> 00:08:31,200
donde se puede definir lo que va
los valores finales de ese array.

117
00:08:31,293 --> 00:08:33,900
El primer argumento es el valor actual.

118
00:08:33,967 --> 00:08:36,067
El segundo argumento es el índice.

119
00:08:37,903 --> 00:08:40,067
Dicho esto, sin embargo, honestamente,

120
00:08:40,092 --> 00:08:44,967
Yo preferiría la versión anterior
de cómo teníamos la prueba.

121
00:08:45,917 --> 00:08:51,300
Creo que las pruebas se leían mejor
con esa repetición que teníamos antes.

122
00:08:51,967 --> 00:08:56,897
Así que si tú también piensas igual que yo
sigue con la repetición.

123
00:08:56,922 --> 00:09:01,216
No toda repetición es mala,
especialmente cuando hablamos de pruebas.

124
00:09:01,241 --> 00:09:05,233
Nuestro objetivo aquí es aumentar
la legibilidad de la base de código.

125
00:09:05,333 --> 00:09:06,800
Sólo quería mostrarte

126
00:09:06,825 --> 00:09:12,867
que es posible crear
conjuntos de datos dinámicos para la descripción de cada uno.

127
00:09:14,623 --> 00:09:18,700
Si ejecuto todas mis pruebas
Puedo ver que todavía están pasando.

128
00:09:19,000 --> 00:09:21,333
Por lo tanto, puedo hacer otro commit,

129
00:09:21,358 --> 00:09:24,567
y voy a llamarlo
reducirRepeticionesEnPruebas.

130
00:09:26,977 --> 00:09:30,570
Genial, juntos hemos ampliado
las reglas del juego

131
00:09:30,595 --> 00:09:33,867
para permitir a nuestros jugadores
tener hasta seis conjeturas.


