Muy pronto estaremos trabajando con nuestra implementación TDD
de las reglas de la palabra del día.
Pero antes de hacerlo,
quiero que pongas un archivo a nuestra disposición.
Este archivo json contiene una lista de 2.500 palabras
que tienen cinco letras en el idioma inglés,
considerará esto,
como la menor de las palabras posibles para usar en el juego,
He incluido un enlace en la descripción para que usted mismo pueda descargar este archivo.
He guardado el archivo en la fuente englishWordsWith5Letters.json.
Alternativamente
puedes clonar el repositorio en una posición de inicio para este episodio,
que ya debería incluir este archivo.
El enlace al repositorio también está en la descripción.
¿Todo bien? Creo que estamos en un buen punto para empezar a escribir más pruebas.
Esta vez, vamos a definir las reglas para la palabra del día.
Empecemos con los casos en los que estamos proporcionando la aplicación
con una palabra inválida del día, y por eso,
la aplicación debería mostrar una advertencia.
Así que vamos a escribir una prueba para
si una palabra del día proporcionada no tiene exactamente cinco letras,
una advertencia debe ser inmediata.
Para ello, podemos iniciar nuestra prueba
montando el componente wordleBoard con una palabra del día
que tenga menos de cinco caracteres.
Usaré FLY.
Ahora, queremos que esta acción devuelva en un aviso de consola al ser llamada,
una manera de saber qué está pasando con el aviso de consola
mientras se ejecutan las pruebas,
es haciendo uso de un espía.
Como su nombre indica,
el espía no interferirá con la ejecución de la función.
Es un espía encendido. Simplemente estará vigilando.
Podrá entonces hacer preguntas
y construir afirmaciones mediante la interacción con el espía.
Desplegar un espía hacia la función desgastada,
desde el objeto consola podemos escribir vi.spyOn(console, "warn").
Es importante que despleguemos un espía antes de realizar la acción
que se supone que causa el aviso de la consola.
Así que para hacer esto, voy a mover el espía en antes de montar los componentes.
Por último, podemos hacer afirmaciones sobre esta función.
Gracias a nuestro espía.
Si ejecutamos la prueba,
como podemos ver aquí, la consola warn no ha sido llamada en absoluto.
Para conseguir que estas pruebas pasen, podemos hacer uso de los validadores de vue prop.
Para utilizar esto, tenemos que proporcionar una función callback
a la clave del validador en nuestra propia definición.
Si esta función devuelve true la proposición dada será considerada válida.
Si devuelve false se considerará inválida.
En nuestro caso vamos a escribir una función de validación,
obliga a que la longitud de las palabras dadas sea exactamente de cinco caracteres.
Y genial, nuestras pruebas están pasando.
Vamos a hacer un commit.
Creo que un buen mensaje de confirmación, en este caso, podría ser,
hacer cumplir que la palabra del día debe tener 5 caracteres.
Sin embargo, tenga en cuenta
que una advertencia de la consola se muestra de verdad cuando ejecutamos nuestras pruebas.
Esto añade algo de desorden a la salida de la tarea.
No quiero tener esta advertencia de consola en la salida de nuestras pruebas.
Reflejemos nuestra prueba, en su lugar,
reemplazar la advertencia de la consola con una prueba doble que no haga absolutamente nada.
Quiero mencionar que las líneas son un poco borrosas
cuando trabajaban con vitest.
Y Jest y luego el espía en vitest,
66 Así podemos capturar este espía, por aquí.
Y luego a través del espía, podemos simular la implementación
para ser sólo una función que no hace nada.
Si ejecuto la tarea ahora
puedes ver que ya no tenemos la advertencia de la consola
en nuestras pruebas.
Y todavía podemos hacer las afirmaciones en el borde.
Otra forma en que podríamos hacer esto sin depender del espía
sería burlándonos del aviso de la consola,
directamente usando vi.fn que es mi preferencia personal,
ya que distingue el espía del simulacro.
Para ello, como parte de nuestra configuración,
podemos hacer console.warn=vi.fn.
Si ejecutamos nuestras pruebas podemos ver que siguen pasando
sin el desorden en nuestra salida de la consola.
Así que vamos a hacer un commit sustituido por para simular que podría ser un buen mensaje de confirmación.
Ahora, ¿qué tal la siguiente prueba?
Creo que algo bueno que podemos comprobar
es que la palabra del día debe estar toda en mayúsculas.
Así que prueba, si la palabra del día no está en mayúsculas,
una advertencia es inmediata.
¿Quieres intentar ejecutar esta prueba tú mismo?
Si te interesa,
intenta pausar el vídeo ahora y escribe una solución de prueba por tu cuenta.
Bien, así es como yo lo haría.
Yo más o menos sólo copiar exactamente lo que escribí en la tarea anterior.
Pero en lugar de montarlo con una palabra que tenga menos de cinco caracteres,
Voy a escribir una palabra que tenga cinco caracteres,
pero con caracteres en minúscula.
¿Correcto? Si ejecuto esta prueba de aquí,
y se puede ver que ahora estamos fallando,
porque nuestra consola warn no ha sido llamada.
¿Correcto? para conseguir que pase sólo tenemos que mejorar nuestro validador
para hacer cumplir que todos los caracteres deben estar en mayúsculas.
Ahora vamos al tablero de wordle y añadámoslo a nuestro validador
para ejecutar las tareas de nuevo.
Y estamos pasando genial. Así que vamos a hacer otro commit.
Y esto sería hacer cumplir que la palabra del día debe estar en mayúsculas.
Otra prueba que me gustaría que tuviéramos
es que si usted proporciona una palabra del día que sea un galimatías,
en inglés, también deberíamos recibir una advertencia.
Para hacer esto vamos a copiar la prueba anterior.
Y digamos que si la palabra del día no es una palabra real,
una advertencia es inmediata.
Perfecto, y luego aquí, vamos a escribir una palabra que es sólo una mayúscula
que tiene cinco caracteres, pero no existe.
Ejecuta todas las pruebas de nuevo, y recuerda siempre ejecutar todas las pruebas.
Perfecto. No vemos ninguna advertencia aquí.
Ahora, para pasar esta prueba
tenemos que importar los datos de ese archivo json,
que estaba mostrando al principio del episodio.
Y para facilitar el trabajo con json,
podemos actualizar nuestro archivo ts config.
Por lo tanto, si usted va a su ts, configure la raíz del proyecto,
en la aplicación,
podemos añadir a las opciones del compilador resolver módulos json.
Así que vamos a habilitar eso, normalmente está desactivado por defecto.
Y también queremos incluir archivos json
aquí.
Estupendo. Ahora deberíamos poder importar archivos json
Como una importación regular por defecto.
Volvamos a nuestro componente
y comprobemos si la palabra dada existe en la lista de palabras
que tenemos en ese archivo json.
¿Cómo haríamos esto?
Podemos empezar importando nuestro Json aquí.
Y podemos añadir a nuestra validación
para decir que las palabras en inglés incluye las palabras dadas.
El salto de línea aquí, He hecho nuestra prueba, estamos pasando.
Ahora estamos emitiendo una advertencia
Si por casualidad usted proporciona una palabra del día
que no existe en la lista de palabras inglesas
que tenemos en ese archivo json.
Perfecto. Así que ejecutamos nuestras pruebas.
Vimos que todo pasaba.
Vamos a hacer un commit.
Haz que la palabra del día es una palabra inglesa real.
Bueno, ahora estamos de vuelta a nuestra fase de refactorización,
porque nuestro archivo json se compone de palabras inglesas de cinco letras,
que están en mayúsculas.
Nuestras dos primeras reglas de validación ya están incorporadas.
Por lo tanto, son redundantes.
Debería ser capaz de simplificar nuestro validador
para comprobar si la palabra dada existe dentro de la palabra inglesa
de ese archivo json.
Y si ejecutamos nuestras pruebas
puedes ver que no hemos añadido ninguna regresión
simplificando nuestro validador.
Así que vamos a hacer un commit. Esto podría ser sólo simplificar la validación.
Bien, casi hemos terminado.
Hay una tarea más que quiero que escribamos.
Y es efectivamente que si usted proporciona una palabra del día
que respete todas las reglas anteriores, no deberías ver que nadie se presenta.
Así que vamos a escribirlo aquí.
prueba, ninguna advertencia es inmediata si la palabra del día proporcionada
es una verdadera palabra en mayúsculas Inglés con cinco caracteres.
De acuerdo. Así que voy a copiar todo lo que tenemos aquí,
Pégalo.
Y vamos a proporcionar las tareas.
Y ahora queremos buscar que no fue llamada.
Y se puede ver que ya estamos pasando debido a nuestro validador.
Dicho esto, esta prueba sigue siendo bastante valiosa
porque hace cumplir una directriz muy importante para nuestra aplicación.
La aplicación no mostrará advertencias.
Si el juego es instanciado con una palabra válida del día.
Así que quiero mantener esta prueba.
Vamos a confirmar esto.
Y un buen mensaje de confirmación en este caso, podría ser,
asegurar que no se muestren advertencias cuando se proporciona una palabra adecuada del día.
Ha estado genial.
En esta lección, hemos cubierto el uso de espías y mocks
para investigar si funciones específicas están siendo ejecutadas.
Y también cubrimos cómo podemos ejecutar
reglas para nuestros props a través de validadores.