A lo largo de este curso,
hemos hecho hincapié en la importancia de escribir pruebas para la funcionalidad
en lugar de la apariencia y otras elecciones estilísticas.
Sin embargo, hay situaciones en los que es importante garantizar
los visuales de la aplicación no cambien demasiado.
Una forma de lograr esta protección es escribiendo pruebas de regresión visual.
Para simplificar esta lección,
Ya he preconfigurado nuestro proyecto Wordle
para soportar pruebas de extremo a extremo a través de Cypress.
Usted puede tirar de este proyecto en este punto usando el enlace en la descripción.
Pero permítanme darles un rápido resumen sobre cómo he configurado Cypress en él.
Empecé por instalar Cypress como una dependencia de desarrollo.
Y luego creé un script llamado test-e2e,
que ejecuta cypress open.
Ya que nuestro proyecto aún no tiene Cypress,
Cypress nos ha proporcionado un rápido asistente para pre-configurar una prueba de ejemplo.
He optado por las pruebas de componentes
porque quería escribir un test de regresión visual rápido
para nuestro WordleBoard.
Dado que nuestro proyecto está utilizando TypeScript, también quería proporcionar soporte para ello.
Esto podría lograrse colocando un archivo tsconfig.json
en nuestra carpeta Cypress.
Observe el tipo de Cypress en las opciones de nuestro compilador.
A continuación, actualicé las pruebas de marcador de posición
que Cypress ha proporcionado con una prueba de extremo a extremo
que garantiza que se muestra el mensaje
cuando el usuario acierte.
Si ves esto esta es la prueba que tenemos ahora mismo.
Tenemos un usuario escribiendo todas las conjeturas diferentes,
y luego Cypress está asegurando
que el mensaje de felicitación aparezca en la pantalla.
Bien, ahora estamos en un punto
donde podemos ejecutar un test normal de componentes Cypress.
Ahora vamos a convertir esta prueba en una prueba de regresión visual.
Una forma de conseguirlo
es instalando el plugin Cypress Image Snapshot.
El enlace para este paquete también está en la descripción.
Para instalar el paquete,
podemos hacer pnpm i -D para instalarlo como una dependencia dev,
y luego el propio paquete,
que es simonsmith/cypress-image-snapshot
Ok, ahora necesitamos añadir este plugin a nuestro cypress-config.ts.
Y puedes ver aquí
que estas son las configuraciones para las pruebas de componentes,
que es todo lo que tenemos.
Y para conectar ese plugin,
podemos usar la llamada de retorno setupNodeEvents,
y llamar al add imageMatchImageSnapshotPlugin.
Esta función plugin toma el objeto on como parámetro.
Ten en cuenta que todo lo que estoy haciendo aquí
se describe en la documentación del paquete.
El enlace también se incluye en la descripción.
También necesitamos registrar los comandos.
Para hacer esto, podemos ir a supp/component dentro de la carpeta cypress.
Y aquí podemos cargar los comandos image-snapshot
llamando al método addMatchImageSnapshot comando.
Es sólo una llamada a una función,
y mientras estemos invocando esta función en nuestro archivo de soporte,
deberíamos estar bien.
Ahora podemos ir a nuestra prueba de ejemplo
y cambiar nuestra aserción
para que en lugar de ser contiene el mensaje de victoria,
podemos cambiarlo por match-image-snapshot.
Ahora déjame explicar las pruebas snapshot por un segundo.
Funcionan comparando la salida actual de la aplicación
con una fuente de verdad dada.
Esta fuente de verdad se crea la primera vez que ejecutas las pruebas
sin tener una fuente de verdad definida.
Lo que quiero decir con esto es que la primera vez que ejecutamos esta prueba
todavía estamos técnicamente escribiendo la prueba,
porque esta primera ejecución se utilizará para guardar la salida como fuente de verdad.
Así que como puedes ver aquí la prueba ya se ejecutó automáticamente
porque Cypress se está ejecutando en modo de vigilancia, pero la primera vez que se ejecutó,
estaba guardando la instantánea.
Y puedo ver el archivo de la instantánea aquí.
Así que puedes ver que Cypress ha creado un nuevo archivo
llamado Muestra el mensaje de victoria si el jugador adivina
con la palabra del día.
Este es exactamente el nombre de la prueba y es sólo una foto de nuestra aplicación.
Puedo ejecutar esta prueba de nuevo tantas veces como quiera,
y seguirá pasando siempre y cuando siempre y cuando no proporcione ningún cambio drástico.
Bien, vamos a confirmar esto.
Podemos decir que un buen mensaje de confirmación en este caso es,
Configuración de pruebas de regresión visual para WordleBoard.
Observe también que estamos confirmando la instantánea en sí.
Esto es muy importante porque la instantánea es parte de la propia prueba,
así que asegúrese siempre de que incluyes el archivo de instantánea
en tu commit.
¿Qué pasa si cambiamos lo que el usuario está escribiendo?
¿Y si en lugar de escribir la palabra del día,
que es pruebas, escribimos feliz en su lugar?
Echemos un vistazo.
Podemos ver que nuestra prueba ha fallado.
Puedo intentar ejecutarlo de nuevo,
y mira esto, Cypress está fallando nuestras pruebas.
Si queremos ver la diferencia entre el resultado esperado
y el resultado recibido, podemos mirar en el archivo diff-output.
Este se encuentra dentro de tu carpeta de instantáneas.
Bajo el nombre de la carpeta test-switch,
vas a encontrar una carpeta llamada diff-output.
Si expandimos esto, podemos ver que hay una nueva imagen de archivo aquí.
Si hago clic en él, esto es lo que veo.
El lado izquierdo muestra la expectativa.
El lado derecho muestra cuál era la entrada actual,
y en el centro, podemos ver una diferencia entre ambas salidas.
Observe que nuestra prueba ha identificado un cambio drástico en la tercera fila,
lo cual es cierto porque en lugar de escribir pruebas
estamos escribiendo feliz, y también se dio cuenta de
que el mensaje de victoria falta por completo en el nuevo resultado.
Esto está muy bien, ¿verdad?
Otra cosa que quiero señalar
es que si intentamos hacer un commit ahora mismo,
puedes ver que la carpeta diff-output está siendo rastreada.
No deberíamos confirmar estos archivos diff
porque son sólo resultados de pruebas fallidas.
Así que deberíamos añadir esto al git ignore.
Así que primero, voy a, por supuesto,
revertir este cambio de aquí que rompió nuestra prueba.
Pero también quiero añadir esto a nuestro git ignore.
Así que puedes ver aquí que lo que phpStorm ha hecho
es añadir esta línea extra a mi git ignore.
pero esto es ser demasiado específico.
No quiero ignorar sólo este archivo.
Quiero ignorar todo lo que está dentro de la carpeta diff-output.
Así que voy a cambiar esto para decir cualquier cosa bajo la carpeta Cypress,
siempre que esté dentro de la salida diff, debería ser ignorado.
Si intento confirmar de nuevo,
se puede ver que el único archivo modificado es el archivo gitignore.
Perfecto. Así que vamos a guardar esto como ignorar archivos diff de prueba de instantáneas.
Antes de cerrar esta lección,
Quiero señalar que he cambiado la prueba para hacerla fallar.
Un ejemplo del mundo real implicaría algún cambio en el propio componente
que causaría la drástica regresión visual.
Así que permítanme demostrar un caso más realista.
Si vamos a la WordleBoard y tratamos de cambiar el CSS para el principal,
digamos que voy a cambiar esto
para rotar alrededor del eje z.
Así que puedo decir transformar, rotateZ, y vamos a rotarlo 92 grados.
Ahora que guardo esto, podemos ver que nuestras pruebas están fallando.
Precioso. Y por supuesto,
Debería poder ver el archivo diff de nuevo.
Y puedes ver que es drásticamente diferente
de lo que esperábamos.
Impresionante. Hoy hemos cubierto
cómo escribir rápidamente pruebas de regresión visual para nuestros componentes Vue.