1
00:00:04,573 --> 00:00:07,733
Otro punto clave
detrás del verdadero juego wordle

2
00:00:07,767 --> 00:00:10,867
es que después de cada envío exitoso

3
00:00:10,867 --> 00:00:13,833
el juego presenta al jugador
con algunos comentarios.

4
00:00:14,300 --> 00:00:17,033
Muestra las letras correctas en verde.

5
00:00:17,433 --> 00:00:20,667
También muestra las letras
que existen en el mundo

6
00:00:20,733 --> 00:00:23,780
pero que están en el lugar equivocado, en amarillo.

7
00:00:24,000 --> 00:00:28,767
Y por último, las letras que no existen
en el mundo, aparecen en gris.

8
00:00:29,467 --> 00:00:32,667
Vamos a poner en práctica que
para nuestro juego, también.

9
00:00:32,867 --> 00:00:37,870
Pero antes de empezar, hay
una pequeña refactorización que quiero hacer.

10
00:00:38,000 --> 00:00:40,763
Quiero separar las preocupaciones entre,

11
00:00:41,000 --> 00:00:44,433
escribir una conjetura y enviar la conjetura

12
00:00:44,533 --> 00:00:47,133
en dos ayudantes de prueba diferentes.

13
00:00:47,533 --> 00:00:51,900
Efectivamente, esta función de aquí
representa al jugador

14
00:00:51,933 --> 00:00:53,970
escribiendo y enviando una conjetura.

15
00:00:53,995 --> 00:00:55,423
Así que vamos a cambiarle el nombre.

16
00:00:58,357 --> 00:01:02,533
Si ejecutamos nuestras pruebas,
podemos ver que todavía estamos pasando.

17
00:01:02,700 --> 00:01:04,167
Vamos a hacer un commit.

18
00:01:05,597 --> 00:01:06,933
Renombrar método.

19
00:01:11,463 --> 00:01:15,933
Ahora quiero crear
el método helper sólo para escribir.

20
00:01:16,000 --> 00:01:18,430
Y efectivamente representa
estas líneas de aquí.

21
00:01:18,467 --> 00:01:22,000
Así que vamos a empezar
alineando primero la conjetura de entrada.

22
00:01:23,263 --> 00:01:26,063
Y entonces puedo extraer
este trozo de aquí

23
00:01:26,313 --> 00:01:33,133
en un nuevo método
que será playerTypesGuess.

24
00:01:34,987 --> 00:01:40,733
Este de aquí representará
al jugador pulsando enter.

25
00:01:44,077 --> 00:01:49,567
Bien. Si ejecutamos las pruebas,
podemos ver que todavía estamos pasando.

26
00:01:50,000 --> 00:01:52,900
Asombroso. Así que vamos a hacer otra confirmación.

27
00:01:53,733 --> 00:01:57,307
Métodos de ayuda separados

28
00:01:57,433 --> 00:02:01,813
para escribir y enviar conjeturas.

29
00:02:03,400 --> 00:02:06,800
Incluso podemos refactorizar una prueba pasada nuestra

30
00:02:06,833 --> 00:02:11,267
para hacer uso del nuevo método
playerTypeGuess.

31
00:02:11,367 --> 00:02:17,133
Dado que esta prueba no está realmente relacionada
con el proceso de enviar una prueba.

32
00:02:17,880 --> 00:02:20,867
Ejecuta las pruebas
y comprueba que todas pasan.

33
00:02:21,140 --> 00:02:23,147
De acuerdo. Hagamos otro commit.

34
00:02:24,167 --> 00:02:28,967
Dejar de enviar conjeturas en pruebas
relacionadas con conjeturas en curso.

35
00:02:31,607 --> 00:02:35,433
De acuerdo. Escribamos
nuestro nuevo test de características.

36
00:02:35,893 --> 00:02:38,633
Haré un nuevo bloque de descripción

37
00:02:38,658 --> 00:02:43,500
responsable de las pruebas relacionadas
con mostrar pistas al jugador.

38
00:02:48,930 --> 00:02:51,363
Nuestra primera prueba para el bloque de descripción

39
00:02:51,559 --> 00:02:58,567
podría asegurar que las pistas no se muestren
hasta que el jugador envíe una sugerencia.

40
00:03:00,950 --> 00:03:04,803
¿Y cómo podríamos escribir esta prueba?

41
00:03:05,533 --> 00:03:09,600
Bueno, una retroalimentación o pista

42
00:03:09,625 --> 00:03:14,675
va a ser representado
por este atributo HTML especial

43
00:03:14,700 --> 00:03:17,167
llamado data-letter-feedback.

44
00:03:17,192 --> 00:03:19,517
Así que podemos empezar nuestra prueba

45
00:03:19,542 --> 00:03:26,200
comprobando que nuestro componente no
proporciona ninguna pista al principio.

46
00:03:28,290 --> 00:03:33,600
Por cierto, si quieres proporcionar
un bonito mensaje de aserción fallida,

47
00:03:33,667 --> 00:03:38,233
puedes introducir un segundo argumento
a la función expect.

48
00:03:39,603 --> 00:03:41,900
Así que digamos que en este caso

49
00:03:41,967 --> 00:03:43,773
Quiero un mensaje que diga

50
00:03:44,873 --> 00:03:49,920
La retroalimentación se estaba mostrando antes
de que el jugador empezara a escribir su respuesta.

51
00:03:54,083 --> 00:04:00,133
De acuerdo. Ahora, quiero que nuestro jugador
empiece a escribir su respuesta

52
00:04:00,393 --> 00:04:03,033
y mientras lo escribe,

53
00:04:03,067 --> 00:04:07,233
no deberían ver
que aparezcan pistas.

54
00:04:07,667 --> 00:04:09,700
Así que hagamos que nuestro jugador escriba

55
00:04:11,667 --> 00:04:14,760
cualquier conjetura, o voy a ir
con la palabra del día por ahora.

56
00:04:15,800 --> 00:04:21,200
Y en este caso, todavía deben
no ver el data-letter-feedback.

57
00:04:21,733 --> 00:04:25,700
Así que lo que voy a hacer
es cambiar el mensaje de error dedicado

58
00:04:25,733 --> 00:04:32,300
para decir que la respuesta se produjo
mientras el jugador estaba escribiendo su conjetura.

59
00:04:36,777 --> 00:04:40,050
Por último, quiero que mi jugador
envíe su conjetura

60
00:04:40,133 --> 00:04:45,967
y sólo entonces quiero ver
data-letter-feedback.

61
00:04:48,003 --> 00:04:51,767
Y en este caso, voy a decir
que la retroalimentación no fue presentada

62
00:04:51,800 --> 00:04:54,367
después de que el jugador envió su conjetura.

63
00:04:57,357 --> 00:05:01,533
Tenga en cuenta
que no estamos probando el estilo.

64
00:05:01,840 --> 00:05:03,833
Nuestra aplicación es responsable

65
00:05:03,858 --> 00:05:10,867
de marcar ciertos elementos DOM
con este atributo HTML específico.

66
00:05:11,767 --> 00:05:18,500
Pero nuestras pruebas no se preocupan
qué reglas CSS pueden aplicarse

67
00:05:18,533 --> 00:05:20,267
a estos atributos.

68
00:05:21,132 --> 00:05:26,332
Otra cosa que quiero mencionar
es que esta prueba de aquí que acabamos de escribir,

69
00:05:26,473 --> 00:05:30,243
viola ese arreglo, acto,

70
00:05:30,268 --> 00:05:35,867
y afirmar la estructura que presenté
en las primeras lecciones de este curso.

71
00:05:36,767 --> 00:05:39,720
Esto podría considerarse un olor.

72
00:05:41,333 --> 00:05:45,167
Esta afirmación de aquí
que está ocurriendo antes de la fase de acto

73
00:05:45,200 --> 00:05:47,933
es lo que llamamos una pre-afirmación.

74
00:05:49,217 --> 00:05:53,333
Podríamos haber convertido esta pre-afirmación
en una prueba específica,

75
00:05:53,367 --> 00:05:58,167
llamado el juego comienza
sin que se muestren pistas.

76
00:05:59,197 --> 00:06:06,200
Esta afirmación del medio de aquí
también podría ser una nueva prueba dedicada

77
00:06:06,200 --> 00:06:11,867
llamada no se muestran pistas
mientras el usuario escribe una conjetura.

78
00:06:12,433 --> 00:06:15,033
Por último, esta afirmación final de aquí

79
00:06:15,069 --> 00:06:21,200
podría ser una prueba llamada pistas
se muestran después de que se envíe una conjetura.

80
00:06:22,033 --> 00:06:28,733
Por lo tanto, esta prueba de aquí
representa tres pruebas en una.

81
00:06:29,767 --> 00:06:32,967
Quería presentarlo así
en esta lección

82
00:06:33,000 --> 00:06:36,433
porque pensé que sería
una buena oportunidad para cubrir

83
00:06:36,733 --> 00:06:38,567
mensajes de error personalizados

84
00:06:38,753 --> 00:06:46,267
y también porque ha habido
ciertos casos en mi carrera como desarrollador

85
00:06:46,333 --> 00:06:52,467
donde he llegado a la conclusión de que tener
una prueba con múltiples afirmaciones

86
00:06:53,100 --> 00:06:57,650
estaba proporcionando una mayor legibilidad
a mi interruptor de prueba.

87
00:06:58,746 --> 00:07:02,400
Dicho esto,
para este caso particular de aquí,

88
00:07:02,773 --> 00:07:07,567
Yo personalmente preferiría dividir
esta prueba en tres diferentes,

89
00:07:07,667 --> 00:07:11,600
pero voy a mantener esta base de código
exactamente así,

90
00:07:11,633 --> 00:07:13,400
¿cuál prefieres?

91
00:07:13,433 --> 00:07:17,000
¿Le gustaría dividir esta prueba
en varias?

92
00:07:17,067 --> 00:07:20,267
Pruébalo.
Definitivamente es un enfoque válido.

93
00:07:20,933 --> 00:07:25,733
Si ejecutamos nuestras pruebas,
podemos ver que estamos fallando

94
00:07:25,933 --> 00:07:31,067
porque la retroalimentación no se presentó
después de que el jugador envió su conjetura.

95
00:07:33,057 --> 00:07:38,133
Para conseguir que pase, podríamos hacer uso de
de nuestra prop shouldFlip

96
00:07:38,167 --> 00:07:40,467
que escribimos en el último episodio.

97
00:07:40,780 --> 00:07:43,833
Después de todo, es volteando las cartas

98
00:07:43,833 --> 00:07:47,783
que el juego wordle
presenta retroalimentación a su jugador.

99
00:07:49,443 --> 00:07:52,333
Bien, ahora mismo, nuestras pruebas

100
00:07:52,367 --> 00:07:57,033
sólo nos obligan a escribir
cualquier tipo de feedback.

101
00:07:57,533 --> 00:08:03,233
Por lo tanto, lo que voy a hacer es
si debe voltear se proporciona y veraz,

102
00:08:03,340 --> 00:08:06,467
Voy a dar una respuesta de desconocido.

103
00:08:07,700 --> 00:08:12,067
Si "should flip" es falso,
no mostraré la respuesta.

104
00:08:14,417 --> 00:08:19,367
Si ejecuto las pruebas
podemos ver que ahora estamos pasando.

105
00:08:21,110 --> 00:08:22,626
Vamos a hacer un commit.

106
00:08:25,163 --> 00:08:30,167
Mostrar respuesta desconocida
al enviar la suposición con éxito.

107
00:08:34,317 --> 00:08:40,967
Para la refactorización, podríamos argumentar
que shouldFlip es un nombre bastante malo,

108
00:08:41,133 --> 00:08:48,133
ya que dar la vuelta es sólo una elección estilística
para la forma en que revisamos la retroalimentación.

109
00:08:48,613 --> 00:08:55,200
Podríamos renombrar esta prop
a shouldShowFeedback.

110
00:08:55,800 --> 00:09:00,967
Este sería probablemente un nombre mucho mejor
para una proposición booleana con este rol.

111
00:09:01,700 --> 00:09:05,700
Dicho esto,
No voy a hacer este cambio de nombre en este momento,

112
00:09:05,833 --> 00:09:13,433
porque nuestra próxima prueba nos llevará
hacia la prestación de retroalimentación adecuada

113
00:09:13,433 --> 00:09:15,967
de acuerdo con la palabra del día,

114
00:09:16,200 --> 00:09:20,233
por lo que un booleano prop
simplemente no será suficiente.

115
00:09:21,562 --> 00:09:25,900
¡Estupendo! No sólo hemos refactorizado
nuestro código base un poco más,

116
00:09:26,833 --> 00:09:31,867
sino que también empezamos a aplicar
esa carta de retroalimentación

117
00:09:31,867 --> 00:09:36,933
sólo se debe dar
una vez que una conjetura se presenta con éxito.