Cómo detectar defectos de accesibilidad durante las pruebas unitarias y E2E

Hola a todos, les voy a mostrar algunas formas de detectar defectos de accesibilidad durante las pruebas de unidad y de extremo a extremo. Primero, un poco sobre mí, soy Emily, soy una desarrolladora en Toronto y actualmente trabajo para una empresa llamada Narwhal. Así es como me siento cuando tengo que solucionar un error de accesibilidad, básicamente haciendo muchos parches. Como desarrolladora, el accesibilidad es el tipo de error que no quiero que me asignen. En mis proyectos anteriores, las pruebas de accesibilidad generalmente se realizan al final del proyecto, para cuando tengo que solucionar esos errores, la página ya está construida. Es muy difícil hacer cambios estructurales y mover componentes en ese momento. Esta charla les mostrará algunas formas de automatizar algunas pruebas de accesibilidad mientras estamos desarrollando. Les voy a mostrar cómo agrego pruebas de accesibilidad a este sitio web simple que he creado. Es un motor de búsqueda para Studio Ghibli. Studio Ghibli es una compañía de animación japonesa. Esta aplicación simple te permitirá buscar películas y personajes de este estudio. Así es como se ve este sitio web. Puedes buscar cualquier cosa, por ejemplo, princesa. Si ingreso princesa aquí y busco, me mostrará todas las películas relacionadas con princesas. Si busco, por ejemplo, Kiki aquí, me mostrará películas y personajes relacionados con Kiki. Puedo hacer clic en la película aquí y me mostrará los detalles de la película. Pasemos rápidamente por la pila tecnológica. El frontend es React. La herramienta Monorepo es NX, que es desarrollada por mi empresa Noworld. NX es una herramienta poderosa que configurará las pruebas de unidad y de extremo a extremo para tu caja de herramientas. Así que te recomiendo que lo pruebes. Para las pruebas de unidad, voy a usar Jazz y JazzX. Para las pruebas de extremo a extremo, voy a usar Cypress y CypressX. Para las pruebas de unidad, uso Jazz y JazzX. Puedes instalar JazzX y sus tipos. Usa el comando aquí. Ahora, con JazzX instalado, necesito configurarlo. Agrego un archivo de configuración llamado Jazz.setup.js aquí. Dentro del archivo JazzConfig, necesito agregar la clave SetupFileAfterEnvironment y

señala a Jazz.setup.js aquí. Dentro de Jazz.setup.js, esto es lo que parece. Es muy simple. Simplemente tienes una importación de Jazz.so.x aquí. Y también extiende la función expect de Jazz para no tener violaciones de Jazz.x. Ahora la configuración está lista. Quiero unitizar el componente del formulario de búsqueda aquí arriba. Es un formulario de búsqueda muy simple. Tiene un campo de texto y un botón de envío de búsqueda. Actualmente, tienes un texto predeterminado para verificar si se renderiza correctamente o no. Ahora quiero unitizar el componente para verificar si tiene alguna violación de accesibilidad. Observa que he importado de jazz.x aquí arriba. Luego agregué unitize para verificar violaciones de accesibilidad. Renderiza el componente aquí y luego pasa el contenedor a esta x de la biblioteca jazz.x. Esperarías que la salida aquí no tenga violaciones. La prueba unitaria sería muy simple. Tiene dos líneas aquí. Es bastante fácil de agregar. Ahora, cuando vuelva a ejecutar las pruebas unitarias, notaré que la prueba falló, lo cual es genial. Significa que las pruebas realmente funcionan. Mostrará los errores de accesibilidad en la consola aquí. Los desarrolladores podrían agregar pruebas similares a cada componente de la aplicación. Si todos los componentes son accesibles, es más probable que toda la aplicación sea accesible. Es bueno permitir que los desarrolladores agreguen pruebas unitarias accesibles mientras construyen los componentes. Los componentes podrían ser independientes y ni siquiera necesitar mostrarse en la página del navegador. Esto ayudaría a evitar errores de accesibilidad a nivel de componente. ¿Qué tal a nivel de página? Voy a hablar sobre las pruebas de extremo a extremo. Se utilizará Cypress y CypressX. Aquí están los comandos para instalar CypressX.

Tengo una prueba de Cypress para la página de búsqueda, que básicamente consiste en ingresar texto en el campo de búsqueda. Enviar el formulario de búsqueda y asegurarse de que se redirija a la página de resultados con el

parámetro de consulta correcto. Así es como se ve la prueba de Cypress. Ingresa el campo de texto y redirige a la página de resultados. Para configurar las pruebas de CypressX, primero necesito agregar typings. En el archivo tx.config, bajo la opción de compilación de tipos, necesito agregar CypressX aquí. También en el archivo de soporte, agrego la importación desde CypressX. Ahora he terminado con las pruebas de CypressX. Estoy listo para agregar la prueba de CypressX. En la declaración before each, necesito agregar una línea para inyectar X aquí. Luego simplemente agrego la prueba. Solo tengo una línea. Verificar la accesibilidad. Ahora ejecuto nuevamente la prueba de Cypress. Observa que falló. He agregado un registro de consola para mostrar las violaciones de accesibilidad en la página de búsqueda aquí. Esto ayudará a probar la aplicación a nivel de página y evitar errores de regresión relacionados con la accesibilidad. Con todas estas herramientas, será más fácil para los desarrolladores evitar errores de accesibilidad durante el desarrollo en lugar de tener que abordarlos cuando se construye toda la aplicación. Esto concluye mi presentación. ¡Gracias por escuchar!