1
00:00:04,633 --> 00:00:07,087
Otra cosa
que el Juego del Mundo hace por nosotros,

2
00:00:07,100 --> 00:00:11,467
es que muestra
todas nuestras conjeturas anteriores.

3
00:00:12,803 --> 00:00:14,700
Así que vamos a escribir una prueba para esto.

4
00:00:15,467 --> 00:00:20,363
Y yo diría que no pertenece
a ninguno de estos grupos,

5
00:00:20,388 --> 00:00:24,467
así que voy a ponerlo
como una nueva prueba aislada aquí.

6
00:00:24,706 --> 00:00:29,233
Digamos que todas las conjeturas anteriores
por el jugador son visibles en la página.

7
00:00:30,820 --> 00:00:32,266
¿Cómo probamos esto?

8
00:00:32,500 --> 00:00:35,967
Bueno, vamos a tener nuestro jugador
envíe una serie de pruebas

9
00:00:35,992 --> 00:00:40,333
y podemos comprobar que todos los valores anteriores
siguen siendo visibles en la pantalla.

10
00:00:42,723 --> 00:00:46,627
Así que vamos a decir ERROR, ADIVINA,

11
00:00:47,422 --> 00:00:51,033
HOLA, MUNDO,

12
00:00:51,983 --> 00:00:54,967
FELIZ, CODER.

13
00:00:56,050 --> 00:01:00,367
Y nuestro jugador va a hacer
una serie de conjeturas.

14
00:01:03,010 --> 00:01:05,400
Y una vez que el jugador presentado
todas esas conjeturas,

15
00:01:05,433 --> 00:01:07,400
también vamos a afirmar

16
00:01:08,900 --> 00:01:11,233
que nuestra aplicación

17
00:01:13,060 --> 00:01:14,987
tiene esas conjeturas

18
00:01:17,287 --> 00:01:18,640
en la pantalla.

19
00:01:19,800 --> 00:01:23,667
Si estamos en nuestras pruebas
podemos ver que esta nueva prueba está fallando

20
00:01:23,733 --> 00:01:28,367
porque sólo podemos ver
la última conjetura a la pantalla.

21
00:01:29,637 --> 00:01:32,967
De acuerdo,
¿cómo podemos conseguir que este pase?

22
00:01:34,006 --> 00:01:36,667
Bueno, podemos ir
al worldeBoard ahora mismo,

23
00:01:37,233 --> 00:01:40,467
y hacer una lista

24
00:01:41,943 --> 00:01:44,770
de conjeturas.

25
00:01:44,800 --> 00:01:47,600
Así que voy a hacer un bucle v-for aquí,

26
00:01:47,786 --> 00:01:51,533
donde para cada conjetura
en nuestro guesseSubmitted,

27
00:01:52,417 --> 00:01:54,667
vamos a renderizar la conjetura.

28
00:01:56,170 --> 00:01:58,157
Dicho esto,
porque estamos haciendo un bucle,

29
00:01:58,167 --> 00:02:00,200
deberíamos tener una llave aquí.

30
00:02:00,279 --> 00:02:02,967
Y esta clave va a ser definida

31
00:02:03,166 --> 00:02:07,733
por una concatenación
del índice con la propia conjetura.

32
00:02:10,683 --> 00:02:15,450
Muy bien, si ejecutamos nuestras pruebas,
podemos ver que estamos pasando.

33
00:02:17,863 --> 00:02:21,867
Bien, hagamos otro commit,
mostrar las conjeturas pasadas.

34
00:02:25,209 --> 00:02:27,100
Si lo comprobamos en el navegador

35
00:02:27,133 --> 00:02:29,437
podemos ver cómo nuestra aplicación
se está comportando en este momento.

36
00:02:32,717 --> 00:02:37,500
Y es un poco molesto que tengo
que borrar manualmente todas mis suposiciones

37
00:02:37,533 --> 00:02:39,033
tan pronto como las envíe.

38
00:02:39,058 --> 00:02:40,733
Así que vamos a arreglar eso también.

39
00:02:41,323 --> 00:02:43,500
Volvamos a nuestro interruptor de prueba.

40
00:02:44,937 --> 00:02:48,367
Y yo diría que este
pertenece a la entrada del jugador.

41
00:02:48,633 --> 00:02:52,133
Así que esta es la prueba de enfoque,
Voy a poner justo después de este.

42
00:02:52,433 --> 00:02:56,800
Y quiero probar que la entrada
se borra después de cada presentación.

43
00:03:01,390 --> 00:03:02,597
¿Cómo probamos esto?

44
00:03:02,600 --> 00:03:06,767
Bueno, podemos tener en la fase de acto
nuestro playerSubmittinsGuess,

45
00:03:06,800 --> 00:03:11,597
y para la fase assert
comprobamos que la entrada está vacía.

46
00:03:13,923 --> 00:03:17,933
Y voy a encontrar el elemento de entrada.

47
00:03:21,993 --> 00:03:26,583
Y el valor dentro de él
debe ser igual a una cadena vacía.

48
00:03:26,608 --> 00:03:28,467
Si ejecutamos todas nuestras pruebas

49
00:03:28,492 --> 00:03:32,333
podemos ver que esta nueva prueba
que hemos creado está fallando,

50
00:03:32,358 --> 00:03:37,267
porque la conjetura que previamente
previamente, todavía está en la entrada,

51
00:03:37,292 --> 00:03:38,972
como vimos en el navegador.

52
00:03:39,187 --> 00:03:41,300
¿Cómo podemos hacer que éste pase?

53
00:03:41,800 --> 00:03:43,875
Será otra victoria rápida para nosotros.

54
00:03:43,900 --> 00:03:49,567
Tenemos que ir a la entrada de adivinar,
y una vez que un envío es exitoso,

55
00:03:50,367 --> 00:03:56,033
podemos borrar guessInProgress de nuevo a null.

56
00:03:57,543 --> 00:04:02,667
Ejecuta nuestro test de nuevo, podemos ver
que hemos vuelto al escenario verde.

57
00:04:03,113 --> 00:04:04,967
Así que vamos a hacer otro commit,

58
00:04:05,000 --> 00:04:11,400
esta vez borrar la entrada del jugador
después de cada intento.

59
00:04:13,910 --> 00:04:16,233
Creo que también estaría muy bien,

60
00:04:16,258 --> 00:04:23,233
para que seamos capaces de tener un estilo similar
que tenemos para nuestra entrada de conjeturas

61
00:04:24,599 --> 00:04:26,433
a las conjeturas anteriores que tenemos, ¿verdad?

62
00:04:26,967 --> 00:04:29,833
Porque es un poco discordante
la forma en que es ahora.

63
00:04:29,993 --> 00:04:35,967
Así que tal vez podamos hacer
un componente reutilizable para este elemento

64
00:04:35,967 --> 00:04:40,330
que hace que la conjetura,
y voy a llamarlo guess vue.

65
00:04:40,355 --> 00:04:41,463
Vamos a hacerlo.

66
00:04:44,523 --> 00:04:48,083
Así que si vamos por aquí,
muchas de las adivinanzas

67
00:04:48,108 --> 00:04:51,867
se va a basar en lo que ya
hemos hecho en la entrada de suposiciones,

68
00:04:51,900 --> 00:04:54,167
así que voy a usar esto como punto de partida.

69
00:04:58,230 --> 00:05:01,330
Así que el vue conjetura se preocupa
principalmente esta sección de aquí,

70
00:05:01,373 --> 00:05:03,490
donde estamos renderizando cada letra.

71
00:05:03,916 --> 00:05:09,700
No me importa la parte de entrada,
que incluye el código CSS aquí,

72
00:05:10,153 --> 00:05:11,967
el resto del CSS es bueno,

73
00:05:12,760 --> 00:05:19,767
y no vamos a enviar eventos
o recopilando datos,

74
00:05:20,757 --> 00:05:23,633
pero necesitaremos tener un accesorio.

75
00:05:23,900 --> 00:05:28,867
Así que vamos a definir una prop llamada guess.

76
00:05:30,166 --> 00:05:32,777
Esta proposición será de tipo cadena, así que,

77
00:05:33,470 --> 00:05:36,933
quien esté usando este componente
le proporcionará una conjetura.

78
00:05:39,623 --> 00:05:42,767
Y esa es la responsabilidad
de este componente

79
00:05:42,800 --> 00:05:44,967
es hacer que se vea bien en la pantalla.

80
00:05:45,833 --> 00:05:49,633
Muy bien, vamos a hacer uso
de este componente en nuestra entrada guess.

81
00:05:51,743 --> 00:05:58,367
guess-view, vamos a proporcionar
el formattedGuessInProgress, ¿correcto?

82
00:05:58,400 --> 00:06:01,133
Sí. Así que vamos a proporcionar
formattedGuessInProgress.

83
00:06:05,183 --> 00:06:09,067
Y podemos deshacernos
de cualquier regla CSS que hubiera,

84
00:06:09,367 --> 00:06:13,177
relacionados sólo a la representación
esta cosa bien.

85
00:06:14,273 --> 00:06:18,800
Bien. Muy bien, vamos a ejecutar las pruebas,
y podemos ver que todos están pasando.

86
00:06:18,900 --> 00:06:23,667
Impresionante. Voy a hacer otro commit,

87
00:06:25,957 --> 00:06:31,300
y vamos a llamarlo
extracto del componente GuessView.

88
00:06:34,963 --> 00:06:40,143
También podemos utilizar nuestro componente GuessView
para mostrar las adivinanzas pasadas.

89
00:06:40,168 --> 00:06:42,670
Este era el plan final general, ¿verdad?

90
00:06:42,695 --> 00:06:43,970
Así que vamos a hacer esto.

91
00:06:44,490 --> 00:06:48,823
Aquí, en lugar de sólo la representación
la conjetura como texto,

92
00:06:48,933 --> 00:06:53,043
vamos a tener la GuessView
mostrando la conjetura

93
00:06:54,623 --> 00:06:57,783
que se pretende representar en esta línea.

94
00:06:58,517 --> 00:07:05,267
Guardando esto, podemos ejecutar nuestras pruebas de nuevo
y ver que todavía estamos pasando.

95
00:07:06,116 --> 00:07:09,567
Estupendo. Echemos un vistazo en el navegador.

96
00:07:12,530 --> 00:07:15,967
Podemos ver
que ahora se ve mucho mejor,

97
00:07:16,033 --> 00:07:18,377
pero todavía hay algún estilo raro.

98
00:07:18,402 --> 00:07:21,333
Por ejemplo
los estilos de lista se siguen aplicando,

99
00:07:21,358 --> 00:07:23,967
y hay un margen inferior diferente.

100
00:07:24,733 --> 00:07:26,733
Podemos desactivar los estilos de lista

101
00:07:26,760 --> 00:07:30,440
definiendo una regla para nuestra lista desordenada

102
00:07:31,732 --> 00:07:33,133
y establecerla en none.

103
00:07:33,167 --> 00:07:39,533
También quiero establecer el margen y el relleno
a cero en la lista desordenada,

104
00:07:39,833 --> 00:07:44,533
pero para el elemento de lista,
Voy a establecer un margen inferior de 0,25 rems.

105
00:07:45,957 --> 00:07:50,303
También quiero establecer algo similar
en nuestro guessView

106
00:07:50,817 --> 00:07:52,933
sólo para la lista desordenada.

107
00:07:53,937 --> 00:07:56,800
Quiero eliminar el margen
y el relleno.

108
00:07:57,590 --> 00:08:00,663
Vamos a ejecutar todas las pruebas,
ver que están pasando,

109
00:08:00,688 --> 00:08:03,237
y luego hacer un commit, retocar el estilo.

110
00:08:03,817 --> 00:08:07,933
Bien, si echamos un vistazo
a nuestro proyecto ahora, así es como se ve.

111
00:08:17,870 --> 00:08:20,490
Observe que todavía hay
un par de problemas aquí.

112
00:08:20,533 --> 00:08:22,997
Estamos dejando que el jugador continúe
haciendo conjeturas

113
00:08:23,000 --> 00:08:24,767
incluso cuando el juego ha terminado.

114
00:08:24,933 --> 00:08:27,900
Otra cosa es que estaría bien

115
00:08:27,933 --> 00:08:31,267
mostrar el tablero completo
desde el principio,

116
00:08:31,533 --> 00:08:34,600
en lugar de crear
las reglas a medida que se necesitan.

117
00:08:35,133 --> 00:08:36,757
¿Quieres probarlo tú mismo?

118
00:08:36,767 --> 00:08:40,533
Inténtalo, y te mostraré
la solución en el próximo vídeo.