Otra cosa que el Juego del Mundo hace por nosotros,
es que muestra todas nuestras conjeturas anteriores.
Así que vamos a escribir una prueba para esto.
Y yo diría que no pertenece a ninguno de estos grupos,
así que voy a ponerlo como una nueva prueba aislada aquí.
Digamos que todas las conjeturas anteriores por el jugador son visibles en la página.
¿Cómo probamos esto?
Bueno, vamos a tener nuestro jugador envíe una serie de pruebas
y podemos comprobar que todos los valores anteriores siguen siendo visibles en la pantalla.
Así que vamos a decir ERROR, ADIVINA,
HOLA, MUNDO,
FELIZ, CODER.
Y nuestro jugador va a hacer una serie de conjeturas.
Y una vez que el jugador presentado todas esas conjeturas,
también vamos a afirmar
que nuestra aplicación
tiene esas conjeturas
en la pantalla.
Si estamos en nuestras pruebas podemos ver que esta nueva prueba está fallando
porque sólo podemos ver la última conjetura a la pantalla.
De acuerdo, ¿cómo podemos conseguir que este pase?
Bueno, podemos ir al worldeBoard ahora mismo,
y hacer una lista
de conjeturas.
Así que voy a hacer un bucle v-for aquí,
donde para cada conjetura en nuestro guesseSubmitted,
vamos a renderizar la conjetura.
Dicho esto, porque estamos haciendo un bucle,
deberíamos tener una llave aquí.
Y esta clave va a ser definida
por una concatenación del índice con la propia conjetura.
Muy bien, si ejecutamos nuestras pruebas, podemos ver que estamos pasando.
Bien, hagamos otro commit, mostrar las conjeturas pasadas.
Si lo comprobamos en el navegador
podemos ver cómo nuestra aplicación se está comportando en este momento.
Y es un poco molesto que tengo que borrar manualmente todas mis suposiciones
tan pronto como las envíe.
Así que vamos a arreglar eso también.
Volvamos a nuestro interruptor de prueba.
Y yo diría que este pertenece a la entrada del jugador.
Así que esta es la prueba de enfoque, Voy a poner justo después de este.
Y quiero probar que la entrada se borra después de cada presentación.
¿Cómo probamos esto?
Bueno, podemos tener en la fase de acto nuestro playerSubmittinsGuess,
y para la fase assert comprobamos que la entrada está vacía.
Y voy a encontrar el elemento de entrada.
Y el valor dentro de él debe ser igual a una cadena vacía.
Si ejecutamos todas nuestras pruebas
podemos ver que esta nueva prueba que hemos creado está fallando,
porque la conjetura que previamente previamente, todavía está en la entrada,
como vimos en el navegador.
¿Cómo podemos hacer que éste pase?
Será otra victoria rápida para nosotros.
Tenemos que ir a la entrada de adivinar, y una vez que un envío es exitoso,
podemos borrar guessInProgress de nuevo a null.
Ejecuta nuestro test de nuevo, podemos ver que hemos vuelto al escenario verde.
Así que vamos a hacer otro commit,
esta vez borrar la entrada del jugador después de cada intento.
Creo que también estaría muy bien,
para que seamos capaces de tener un estilo similar que tenemos para nuestra entrada de conjeturas
a las conjeturas anteriores que tenemos, ¿verdad?
Porque es un poco discordante la forma en que es ahora.
Así que tal vez podamos hacer un componente reutilizable para este elemento
que hace que la conjetura, y voy a llamarlo guess vue.
Vamos a hacerlo.
Así que si vamos por aquí, muchas de las adivinanzas
se va a basar en lo que ya hemos hecho en la entrada de suposiciones,
así que voy a usar esto como punto de partida.
Así que el vue conjetura se preocupa principalmente esta sección de aquí,
donde estamos renderizando cada letra.
No me importa la parte de entrada, que incluye el código CSS aquí,
el resto del CSS es bueno,
y no vamos a enviar eventos o recopilando datos,
pero necesitaremos tener un accesorio.
Así que vamos a definir una prop llamada guess.
Esta proposición será de tipo cadena, así que,
quien esté usando este componente le proporcionará una conjetura.
Y esa es la responsabilidad de este componente
es hacer que se vea bien en la pantalla.
Muy bien, vamos a hacer uso de este componente en nuestra entrada guess.
guess-view, vamos a proporcionar el formattedGuessInProgress, ¿correcto?
Sí. Así que vamos a proporcionar formattedGuessInProgress.
Y podemos deshacernos de cualquier regla CSS que hubiera,
relacionados sólo a la representación esta cosa bien.
Bien. Muy bien, vamos a ejecutar las pruebas, y podemos ver que todos están pasando.
Impresionante. Voy a hacer otro commit,
y vamos a llamarlo extracto del componente GuessView.
También podemos utilizar nuestro componente GuessView para mostrar las adivinanzas pasadas.
Este era el plan final general, ¿verdad?
Así que vamos a hacer esto.
Aquí, en lugar de sólo la representación la conjetura como texto,
vamos a tener la GuessView mostrando la conjetura
que se pretende representar en esta línea.
Guardando esto, podemos ejecutar nuestras pruebas de nuevo y ver que todavía estamos pasando.
Estupendo. Echemos un vistazo en el navegador.
Podemos ver que ahora se ve mucho mejor,
pero todavía hay algún estilo raro.
Por ejemplo los estilos de lista se siguen aplicando,
y hay un margen inferior diferente.
Podemos desactivar los estilos de lista
definiendo una regla para nuestra lista desordenada
y establecerla en none.
También quiero establecer el margen y el relleno a cero en la lista desordenada,
pero para el elemento de lista, Voy a establecer un margen inferior de 0,25 rems.
También quiero establecer algo similar en nuestro guessView
sólo para la lista desordenada.
Quiero eliminar el margen y el relleno.
Vamos a ejecutar todas las pruebas, ver que están pasando,
y luego hacer un commit, retocar el estilo.
Bien, si echamos un vistazo a nuestro proyecto ahora, así es como se ve.
Observe que todavía hay un par de problemas aquí.
Estamos dejando que el jugador continúe haciendo conjeturas
incluso cuando el juego ha terminado.
Otra cosa es que estaría bien
mostrar el tablero completo desde el principio,
en lugar de crear las reglas a medida que se necesitan.
¿Quieres probarlo tú mismo?
Inténtalo, y te mostraré la solución en el próximo vídeo.