1 00:00:04,607 --> 00:00:05,667 A lo largo de este curso, 2 00:00:05,692 --> 00:00:09,733 hemos hecho hincapié en la importancia de escribir pruebas para la funcionalidad 3 00:00:09,758 --> 00:00:12,900 en lugar de la apariencia y otras elecciones estilísticas. 4 00:00:13,567 --> 00:00:18,300 Sin embargo, hay situaciones en los que es importante garantizar 5 00:00:18,325 --> 00:00:21,900 los visuales de la aplicación no cambien demasiado. 6 00:00:22,300 --> 00:00:27,233 Una forma de lograr esta protección es escribiendo pruebas de regresión visual. 7 00:00:27,673 --> 00:00:29,867 Para simplificar esta lección, 8 00:00:29,933 --> 00:00:33,000 Ya he preconfigurado nuestro proyecto Wordle 9 00:00:33,067 --> 00:00:36,533 para soportar pruebas de extremo a extremo a través de Cypress. 10 00:00:36,933 --> 00:00:41,333 Usted puede tirar de este proyecto en este punto usando el enlace en la descripción. 11 00:00:41,700 --> 00:00:46,667 Pero permítanme darles un rápido resumen sobre cómo he configurado Cypress en él. 12 00:00:47,300 --> 00:00:50,767 Empecé por instalar Cypress como una dependencia de desarrollo. 13 00:00:51,733 --> 00:00:55,267 Y luego creé un script llamado test-e2e, 14 00:00:55,367 --> 00:00:57,467 que ejecuta cypress open. 15 00:00:57,986 --> 00:01:00,786 Ya que nuestro proyecto aún no tiene Cypress, 16 00:01:00,811 --> 00:01:06,000 Cypress nos ha proporcionado un rápido asistente para pre-configurar una prueba de ejemplo. 17 00:01:06,500 --> 00:01:08,443 He optado por las pruebas de componentes 18 00:01:08,467 --> 00:01:11,323 porque quería escribir un test de regresión visual rápido 19 00:01:11,333 --> 00:01:12,967 para nuestro WordleBoard. 20 00:01:13,633 --> 00:01:18,300 Dado que nuestro proyecto está utilizando TypeScript, también quería proporcionar soporte para ello. 21 00:01:18,633 --> 00:01:23,200 Esto podría lograrse colocando un archivo tsconfig.json 22 00:01:23,233 --> 00:01:24,900 en nuestra carpeta Cypress. 23 00:01:25,967 --> 00:01:30,067 Observe el tipo de Cypress en las opciones de nuestro compilador. 24 00:01:35,050 --> 00:01:38,133 A continuación, actualicé las pruebas de marcador de posición 25 00:01:38,158 --> 00:01:41,917 que Cypress ha proporcionado con una prueba de extremo a extremo 26 00:01:41,933 --> 00:01:45,467 que garantiza que se muestra el mensaje 27 00:01:45,492 --> 00:01:47,967 cuando el usuario acierte. 28 00:01:50,397 --> 00:01:53,833 Si ves esto esta es la prueba que tenemos ahora mismo. 29 00:01:54,133 --> 00:01:56,675 Tenemos un usuario escribiendo todas las conjeturas diferentes, 30 00:01:56,700 --> 00:01:58,250 y luego Cypress está asegurando 31 00:01:58,275 --> 00:02:01,467 que el mensaje de felicitación aparezca en la pantalla. 32 00:02:02,733 --> 00:02:04,667 Bien, ahora estamos en un punto 33 00:02:04,692 --> 00:02:08,600 donde podemos ejecutar un test normal de componentes Cypress. 34 00:02:08,833 --> 00:02:12,900 Ahora vamos a convertir esta prueba en una prueba de regresión visual. 35 00:02:13,533 --> 00:02:15,400 Una forma de conseguirlo 36 00:02:15,400 --> 00:02:20,100 es instalando el plugin Cypress Image Snapshot. 37 00:02:20,567 --> 00:02:23,700 El enlace para este paquete también está en la descripción. 38 00:02:24,900 --> 00:02:26,133 Para instalar el paquete, 39 00:02:26,158 --> 00:02:30,700 podemos hacer pnpm i -D para instalarlo como una dependencia dev, 40 00:02:30,860 --> 00:02:32,900 y luego el propio paquete, 41 00:02:33,033 --> 00:02:37,000 que es simonsmith/cypress-image-snapshot 42 00:02:40,507 --> 00:02:46,933 Ok, ahora necesitamos añadir este plugin a nuestro cypress-config.ts. 43 00:02:48,963 --> 00:02:50,230 Y puedes ver aquí 44 00:02:50,255 --> 00:02:52,963 que estas son las configuraciones para las pruebas de componentes, 45 00:02:52,967 --> 00:02:54,400 que es todo lo que tenemos. 46 00:02:54,553 --> 00:02:56,100 Y para conectar ese plugin, 47 00:02:56,125 --> 00:02:59,567 podemos usar la llamada de retorno setupNodeEvents, 48 00:03:00,233 --> 00:03:04,733 y llamar al add imageMatchImageSnapshotPlugin. 49 00:03:05,567 --> 00:03:10,033 Esta función plugin toma el objeto on como parámetro. 50 00:03:11,367 --> 00:03:13,833 Ten en cuenta que todo lo que estoy haciendo aquí 51 00:03:13,858 --> 00:03:16,933 se describe en la documentación del paquete. 52 00:03:17,546 --> 00:03:19,667 El enlace también se incluye en la descripción. 53 00:03:21,200 --> 00:03:23,533 También necesitamos registrar los comandos. 54 00:03:23,558 --> 00:03:29,763 Para hacer esto, podemos ir a supp/component dentro de la carpeta cypress. 55 00:03:31,383 --> 00:03:35,450 Y aquí podemos cargar los comandos image-snapshot 56 00:03:35,467 --> 00:03:39,867 llamando al método addMatchImageSnapshot comando. 57 00:03:41,197 --> 00:03:42,633 Es sólo una llamada a una función, 58 00:03:42,667 --> 00:03:46,233 y mientras estemos invocando esta función en nuestro archivo de soporte, 59 00:03:46,366 --> 00:03:47,577 deberíamos estar bien. 60 00:03:48,367 --> 00:03:51,140 Ahora podemos ir a nuestra prueba de ejemplo 61 00:03:53,947 --> 00:03:55,600 y cambiar nuestra aserción 62 00:03:55,633 --> 00:03:58,967 para que en lugar de ser contiene el mensaje de victoria, 63 00:03:58,992 --> 00:04:03,433 podemos cambiarlo por match-image-snapshot. 64 00:04:06,957 --> 00:04:11,067 Ahora déjame explicar las pruebas snapshot por un segundo. 65 00:04:11,667 --> 00:04:15,616 Funcionan comparando la salida actual de la aplicación 66 00:04:15,641 --> 00:04:18,167 con una fuente de verdad dada. 67 00:04:18,800 --> 00:04:24,033 Esta fuente de verdad se crea la primera vez que ejecutas las pruebas 68 00:04:24,067 --> 00:04:26,700 sin tener una fuente de verdad definida. 69 00:04:27,200 --> 00:04:31,833 Lo que quiero decir con esto es que la primera vez que ejecutamos esta prueba 70 00:04:31,933 --> 00:04:34,833 todavía estamos técnicamente escribiendo la prueba, 71 00:04:34,967 --> 00:04:42,067 porque esta primera ejecución se utilizará para guardar la salida como fuente de verdad. 72 00:04:43,113 --> 00:04:47,200 Así que como puedes ver aquí la prueba ya se ejecutó automáticamente 73 00:04:47,233 --> 00:04:50,833 porque Cypress se está ejecutando en modo de vigilancia, pero la primera vez que se ejecutó, 74 00:04:50,867 --> 00:04:53,667 estaba guardando la instantánea. 75 00:04:55,026 --> 00:04:59,677 Y puedo ver el archivo de la instantánea aquí. 76 00:05:00,700 --> 00:05:03,333 Así que puedes ver que Cypress ha creado un nuevo archivo 77 00:05:03,733 --> 00:05:07,765 llamado Muestra el mensaje de victoria si el jugador adivina 78 00:05:08,180 --> 00:05:09,900 con la palabra del día. 79 00:05:10,233 --> 00:05:15,967 Este es exactamente el nombre de la prueba y es sólo una foto de nuestra aplicación. 80 00:05:18,603 --> 00:05:21,250 Puedo ejecutar esta prueba de nuevo tantas veces como quiera, 81 00:05:21,267 --> 00:05:26,310 y seguirá pasando siempre y cuando siempre y cuando no proporcione ningún cambio drástico. 82 00:05:26,747 --> 00:05:29,300 Bien, vamos a confirmar esto. 83 00:05:32,870 --> 00:05:35,800 Podemos decir que un buen mensaje de confirmación en este caso es, 84 00:05:35,825 --> 00:05:42,767 Configuración de pruebas de regresión visual para WordleBoard. 85 00:05:46,257 --> 00:05:51,533 Observe también que estamos confirmando la instantánea en sí. 86 00:05:52,957 --> 00:05:58,033 Esto es muy importante porque la instantánea es parte de la propia prueba, 87 00:05:58,133 --> 00:06:01,267 así que asegúrese siempre de que incluyes el archivo de instantánea 88 00:06:01,292 --> 00:06:02,417 en tu commit. 89 00:06:04,557 --> 00:06:07,033 ¿Qué pasa si cambiamos lo que el usuario está escribiendo? 90 00:06:07,187 --> 00:06:10,150 ¿Y si en lugar de escribir la palabra del día, 91 00:06:10,175 --> 00:06:14,200 que es pruebas, escribimos feliz en su lugar? 92 00:06:14,840 --> 00:06:16,077 Echemos un vistazo. 93 00:06:17,717 --> 00:06:19,967 Podemos ver que nuestra prueba ha fallado. 94 00:06:19,992 --> 00:06:21,633 Puedo intentar ejecutarlo de nuevo, 95 00:06:22,400 --> 00:06:25,933 y mira esto, Cypress está fallando nuestras pruebas. 96 00:06:27,180 --> 00:06:30,467 Si queremos ver la diferencia entre el resultado esperado 97 00:06:30,492 --> 00:06:35,233 y el resultado recibido, podemos mirar en el archivo diff-output. 98 00:06:35,967 --> 00:06:38,933 Este se encuentra dentro de tu carpeta de instantáneas. 99 00:06:39,153 --> 00:06:41,467 Bajo el nombre de la carpeta test-switch, 100 00:06:41,539 --> 00:06:44,363 vas a encontrar una carpeta llamada diff-output. 101 00:06:44,388 --> 00:06:48,300 Si expandimos esto, podemos ver que hay una nueva imagen de archivo aquí. 102 00:06:48,700 --> 00:06:51,367 Si hago clic en él, esto es lo que veo. 103 00:06:51,900 --> 00:06:55,500 El lado izquierdo muestra la expectativa. 104 00:06:55,833 --> 00:06:59,767 El lado derecho muestra cuál era la entrada actual, 105 00:06:59,767 --> 00:07:04,133 y en el centro, podemos ver una diferencia entre ambas salidas. 106 00:07:05,667 --> 00:07:11,167 Observe que nuestra prueba ha identificado un cambio drástico en la tercera fila, 107 00:07:11,192 --> 00:07:13,367 lo cual es cierto porque en lugar de escribir pruebas 108 00:07:13,392 --> 00:07:15,830 estamos escribiendo feliz, y también se dio cuenta de 109 00:07:15,833 --> 00:07:20,100 que el mensaje de victoria falta por completo en el nuevo resultado. 110 00:07:20,633 --> 00:07:22,367 Esto está muy bien, ¿verdad? 111 00:07:22,525 --> 00:07:24,220 Otra cosa que quiero señalar 112 00:07:24,233 --> 00:07:26,767 es que si intentamos hacer un commit ahora mismo, 113 00:07:26,900 --> 00:07:31,133 puedes ver que la carpeta diff-output está siendo rastreada. 114 00:07:31,733 --> 00:07:34,400 No deberíamos confirmar estos archivos diff 115 00:07:34,425 --> 00:07:38,033 porque son sólo resultados de pruebas fallidas. 116 00:07:38,166 --> 00:07:40,833 Así que deberíamos añadir esto al git ignore. 117 00:07:41,237 --> 00:07:42,770 Así que primero, voy a, por supuesto, 118 00:07:42,795 --> 00:07:45,367 revertir este cambio de aquí que rompió nuestra prueba. 119 00:07:45,767 --> 00:07:49,367 Pero también quiero añadir esto a nuestro git ignore. 120 00:07:53,523 --> 00:07:55,910 Así que puedes ver aquí que lo que phpStorm ha hecho 121 00:07:55,933 --> 00:07:58,700 es añadir esta línea extra a mi git ignore. 122 00:07:58,833 --> 00:08:00,530 pero esto es ser demasiado específico. 123 00:08:00,555 --> 00:08:02,400 No quiero ignorar sólo este archivo. 124 00:08:02,533 --> 00:08:06,600 Quiero ignorar todo lo que está dentro de la carpeta diff-output. 125 00:08:06,900 --> 00:08:13,300 Así que voy a cambiar esto para decir cualquier cosa bajo la carpeta Cypress, 126 00:08:13,467 --> 00:08:18,000 siempre que esté dentro de la salida diff, debería ser ignorado. 127 00:08:18,333 --> 00:08:19,790 Si intento confirmar de nuevo, 128 00:08:19,800 --> 00:08:23,800 se puede ver que el único archivo modificado es el archivo gitignore. 129 00:08:25,100 --> 00:08:31,200 Perfecto. Así que vamos a guardar esto como ignorar archivos diff de prueba de instantáneas. 130 00:08:31,693 --> 00:08:33,137 Antes de cerrar esta lección, 131 00:08:33,162 --> 00:08:38,133 Quiero señalar que he cambiado la prueba para hacerla fallar. 132 00:08:38,507 --> 00:08:43,600 Un ejemplo del mundo real implicaría algún cambio en el propio componente 133 00:08:43,667 --> 00:08:46,867 que causaría la drástica regresión visual. 134 00:08:47,067 --> 00:08:51,000 Así que permítanme demostrar un caso más realista. 135 00:08:51,333 --> 00:08:56,633 Si vamos a la WordleBoard y tratamos de cambiar el CSS para el principal, 136 00:08:57,867 --> 00:08:59,796 digamos que voy a cambiar esto 137 00:08:59,821 --> 00:09:03,100 para rotar alrededor del eje z. 138 00:09:03,167 --> 00:09:09,167 Así que puedo decir transformar, rotateZ, y vamos a rotarlo 92 grados. 139 00:09:09,533 --> 00:09:15,300 Ahora que guardo esto, podemos ver que nuestras pruebas están fallando. 140 00:09:15,599 --> 00:09:17,940 Precioso. Y por supuesto, 141 00:09:17,965 --> 00:09:20,233 Debería poder ver el archivo diff de nuevo. 142 00:09:21,566 --> 00:09:24,467 Y puedes ver que es drásticamente diferente 143 00:09:24,492 --> 00:09:26,467 de lo que esperábamos. 144 00:09:27,366 --> 00:09:29,900 Impresionante. Hoy hemos cubierto 145 00:09:29,925 --> 00:09:34,633 cómo escribir rápidamente pruebas de regresión visual para nuestros componentes Vue.