Una cosa en la que la mayoría de las personas están de acuerdo es que las interfaces de usuario tienen múltiples dimensiones de complejidad. Imagina que estás almorzando con algunos de tu equipo o familia, y recibes un mensaje de Slack que indica que una parte del sitio no funciona. El anuncio ya no se carga en tu sitio de noticias generador de dinero que tiene millones de usuarios mensuales. O tu formulario de inicio de sesión se carga infinitamente después de que un usuario intenta iniciar sesión, y nadie puede acceder a la aplicación. La lógica del backend funciona y todas las solicitudes de API devuelven respuestas 200. Resulta que nos perdimos un manejador de estado de carga para el componente, y la interfaz de usuario no se renderiza correctamente. ¿Cómo gestionamos todo eso? El enfoque convencional es construir el componente en la página de la aplicación donde se utiliza por primera vez y probar manualmente o utilizar pruebas de integración para verificar la interfaz de usuario. Este enfoque dificulta la verificación de todos los estados del componente. En lugar de todo este abrumamiento, quieres una simple comparación de tu interfaz de usuario y cómo se ve ahora después de hacer cambios. ¡Aquí es donde entran Storybook + una herramienta de pruebas de regresión visual!
Pruebas Visuales: Optimiza Storybook y Gana
FAQ
Storybook es una herramienta que permite a los desarrolladores construir interfaces de usuario (UI) de forma aislada. Facilita la creación y prueba de componentes individuales sin necesidad de preocuparse por la lógica del back-end, llamadas a API o bases de datos, simplificando así el proceso de desarrollo.
Chromatic es una herramienta que crea pruebas automatizadas de UI. Se integra con Storybook tomando un Storybook construido estáticamente, y compara visualmente la UI del proyecto con estados definidos previamente, detectando cambios y notificando al desarrollador de discrepancias.
Chromatic ayuda a prevenir problemas de UI en producción al comparar instantáneas de la UI con versiones anteriores y notificar sobre cambios. Esto elimina la necesidad de pruebas manuales extensivas y ayuda a asegurar que la UI se mantenga consistente a través de diferentes navegadores y dispositivos.
Storybook soluciona problemas como la dificultad de probar múltiples estados y variantes de UI, la gestión de datos inconsistentes y la integración con componentes de terceros. Permite a los desarrolladores construir y probar componentes de manera aislada, mejorando la eficiencia y precisión del desarrollo.
Chromatic utiliza tecnología de comparación visual para detectar incluso pequeños cambios de píxeles en la UI. Esto es crucial para capturar diferencias que podrían no ser notadas por una revisión humana, asegurando que cualquier cambio involuntario sea identificado y corregido antes de la producción.
Se recomienda cargar imágenes y otros recursos como activos estáticos dentro de Storybook, o simular solicitudes de red y datos entrantes para mantener la consistencia en las instantáneas de UI. Esto asegura que las pruebas sean confiables y no varíen debido a cambios externos no controlados.
Las pruebas de interacción en Storybook permiten simular y automatizar flujos de trabajo de usuarios dentro de la propia plataforma. Esto ayuda a asegurar que todos los aspectos de la UI funcionen correctamente en escenarios del mundo real, mejorando la fiabilidad del software.
Video Summary and Transcription
Las pruebas de interfaz de usuario son difíciles, pero Storybook y Chromatic simplifican el proceso al permitirte construir y probar tu interfaz de usuario de forma aislada. Chromatic compara los cambios de la interfaz de usuario, detecta incluso las diferencias visuales más pequeñas y elimina la necesidad de pruebas manuales. La carga de imágenes y la simulación de flujos de trabajo de usuario en Storybook aseguran pruebas consistentes. Las pruebas de interacción cubren los flujos de trabajo del usuario y se pueden utilizar para componentes complejos, resolviendo problemas y creando casos de prueba.
1. Introducción a Storybook y Chromatic
Las pruebas de UI son difíciles. Hay dos problemas: la UI rota y las pruebas de integración inestables. Storybook te permite construir tu UI de forma aislada, simplificando el proceso. Chromatic crea pruebas automatizadas de tu UI. Asegura que tu UI no esté fallando en producción.
Hola, soy Ruben, y soy el ingeniero de soluciones líder en Chromatic, y somos los mantenedores de Storybook. Así que, voy a empezar con una historia. Este eres tú, y las pruebas de UI testing son difíciles. Hay tantos estados y variantes, responsividad, estados de carga, todo es un poco confuso y todo se quema hasta el suelo. Bueno, esperemos que no, pero eso es lo que termina sucediendo a veces.
Así que, realmente, hay dos problemas. Digamos que esta es tu tercera semana seguida que recibes una llamada y la UI está rota en el sitio web y necesitas ir a arreglarlo, o peor aún, el sitio está completamente caído. Ahora, eso no es divertido para nadie. Y luego, por otro lado, cuando no te llaman durante el fin de semana para solucionar problemas de UI, estás lidiando con pruebas de integración inestables, y eso tampoco es divertido. Entonces, ¿cuándo te diviertes en tu trabajo? No parece que te estés divirtiendo en absoluto.
Idealmente, nos alejamos de ese estado complicado y lo quemamos para realmente simplificarlo. Solo quieres saber cómo se ve tu UI y compararlo con cómo se ve ahora. Y storybook es la primera parte de la solución a ese problema. Storybook te permite construir tu UI de forma aislada, y lo simplifica porque no tienes que preocuparte por la lógica del back-end y las llamadas a la API, bases de datos, nada de eso. Solo estás construyendo tu UI. Y funciona. Así que, acelera el proceso. Y luego, chromatic es el otro lado de eso, donde crea pruebas automatizadas de tu UI. Ahora, ¿cómo se ve eso? Te voy a mostrar un ejemplo.
Así que, aquí tenemos una aplicación llamada Mealdrop, y es un clon de Uber Eats. Storybook te permite crear todo tipo de componentes. Tienes tus componentes atómicos, por ejemplo, este botón, y storybook tiene controles que son esencialmente las props de tu componente y te permite jugar y prototipar cosas todo dentro del entorno de storybook en tu navegador. Y también puedes crear componentes a nivel de página. Por ejemplo, como la página de inicio. O una página de detalles de restaurante. Y esto tiene todo en él, ¿verdad? Toda la estructura de tu página. Y la mejor parte de ello es que está aislado, y no tienes que preocuparte por datos inconsistentes o algo por el estilo. Ahora, eso resuelve el primer problema. Pero no resuelve el segundo problema de cómo diablos... ¿Qué haces para asegurarte de que tu UI no esté fallando en producción? Ahí es donde entra chromatic.
2. Comparación de UI con Chromatic
Chromatic compara tu UI creando una línea de base y tomando instantáneas de cualquier cambio de código. Te notifica de cualquier diferencia, eliminando la necesidad de pruebas manuales en diferentes navegadores y dispositivos. Chromatic puede detectar incluso cambios visuales menores que pueden pasar desapercibidos para el ojo humano. Storybook y Chromatic trabajan juntos para resolver el desafío de tomar instantáneas estáticas de UI dinámica, asegurando pruebas consistentes sin ajustes frecuentes.
Chromatic toma tu storybook construido estáticamente, y compara tu UI. Y cómo lo hace es que primero creas un estado definido o una línea de base de cómo se ve tu UI o cómo esperas que se vea. Y luego, cada vez que cambias tu código después de eso, tomará una nueva imagen o una instantánea y la comparará con la instantánea antigua. Y cada vez que hay un cambio, recibes una notificación dentro de chromatic, y luego ya no tienes que preocuparte por testing manualmente, comprobando diferentes navegadores, diferentes vistas, pidiendo a tu compañero de trabajo su teléfono Android y comprobando si funciona en eso. Sí, he hecho todo eso. No es divertido. Así que lo realmente interesante aquí es que chromatic puede ser tan específico o tan laxo como quieras que sea. Por defecto, es realmente estricto. Así que aparentemente, a simple vista, aquí no cambió nada. Se ve exactamente igual, ¿verdad? Si te enfocas, antes de que incluso vaya a la sección que está resaltada, chromatic sabe que hay una ligera diferencia en la imagen de la hamburguesa. Y si te enfocas en esa hamburguesa, hay ligeros cambios de píxeles. Y así detectará ese cambio visual menor que no notarías con tus ojos. Quiero decir, podrías. Mis ojos no son tan buenos. Así que me lo perdería. Ahora esto me lleva a mi segundo punto. ¿Cómo resolvemos eso en un... ¿Cómo tomas una UI dinámica y tomas una instantánea estática y haces que funcione de manera consistente para que no tengas que arreglar todas estas pruebas cada vez? Y ahí es donde Storybook entra con chromatic. Así que tienes estas páginas. Si carga. Ahí vamos. Así que la razón por la que esa imagen cambia es porque tienes... Así que estamos cargando esta imagen desde Unsplash, que es un recurso de red. Y Unsplash puede cambiar esa imagen en cualquier momento por cualquier razón. La URL es exactamente la misma. Así que por lo que sabemos, nada cambió con esta imagen. Pero realmente sí lo hizo. Y podría ser más drástico que esto. Pero afortunadamente en este caso no lo es. Son solo algunos píxeles menores.
Check out more articles and videos
We constantly think of articles and videos that might spark Git people interest / skill us up or help building a stellar career
Workshops on related topic
En esta masterclass de tres horas, presentaremos la Biblioteca de Pruebas de React junto con un modelo mental de cómo pensar en el diseño de tus pruebas de componentes. Este modelo mental te ayudará a ver cómo probar cada bit de lógica, si debes o no simular dependencias, y ayudará a mejorar el diseño de tus componentes. Te irás con las herramientas, técnicas y principios que necesitas para implementar pruebas de componentes de bajo costo y alto valor.
Tabla de contenidos- Los diferentes tipos de pruebas de aplicaciones de React, y dónde encajan las pruebas de componentes- Un modelo mental para pensar en las entradas y salidas de los componentes que pruebas- Opciones para seleccionar elementos DOM para verificar e interactuar con ellos- El valor de los mocks y por qué no deben evitarse- Los desafíos con la asincronía en las pruebas de RTL y cómo manejarlos
Requisitos previos- Familiaridad con la construcción de aplicaciones con React- Experiencia básica escribiendo pruebas automatizadas con Jest u otro marco de pruebas unitarias- No necesitas ninguna experiencia con la Biblioteca de Pruebas de React- Configuración de la máquina: Node LTS, Yarn
Las pruebas dependen de muchas condiciones y se consideran lentas e inestables. Por otro lado, las pruebas de extremo a extremo pueden dar la mayor confianza de que su aplicación está funcionando. Y si se hace correctamente, puede convertirse en una herramienta increíble para aumentar la velocidad del desarrollador.
Detox es un marco de pruebas de extremo a extremo en caja gris para aplicaciones móviles. Desarrollado por Wix para resolver el problema de la lentitud e inestabilidad y utilizado por React Native en sí como su herramienta de pruebas E2E.
Únete a mí en esta masterclass para aprender cómo hacer que tus pruebas de extremo a extremo móviles con Detox sean excelentes.
Prerrequisitos- iOS/Android: MacOS Catalina o más reciente- Solo Android: Linux- Instalar antes de la masterclass
Únete a nosotros para esta masterclass para desbloquear todo el potencial de Postman para las pruebas de API, agilizar tus procesos de prueba y mejorar la calidad y fiabilidad de tu software. Ya seas un principiante o un probador experimentado, esta masterclass te equipará con las habilidades necesarias para sobresalir en las pruebas de API con Postman.
Cubriremos la escritura de pruebas, abarcando todas las características de la aplicación, estructurando las pruebas, interceptando solicitudes de red y configurando los datos del backend.
Cualquier persona que conozca el lenguaje de programación JavaScript y tenga NPM instalado podrá seguir el masterclass.
Comments