Qué vamos a hacer ?
Storybook se define como un «taller» que le permite crear componentes y páginas de forma aislada. Concretamente, es una interfaz en la que podremos jugar con los diferentes estados de un componente para verificar si coincide con el diseño esperado, busque documentación y recupere los accesorios para usar en diferentes implementaciones. Es una herramienta cada vez más utilizada cuando creación de Sistemas de Diseño, y que se puede utilizar con cada vez más frameworks aunque inicialmente está hecho para React. El uso de Storybook se puede mejorar con complementos.
Pero si pasamos nuestros componentes a Storybook, ¿Es posible probarlos allí también directamente? La respuesta es sí ! Una de las herramientas a nuestra disposición para ello, c’est cromático.
Chromatic es desarrollado por el mismo equipo que Storybook (de hecho, podemos notar que el canal oficial de Storybook en Youtube ha pasado a llamarse Chromatic). Es una herramienta que utilizamos en CI, que nos permite hacer Pruebas visuales de no regresión (¡pero no solo eso!) sobre historias creadas en Storybook. Chromatic es una herramienta de pago con una versión gratuita que usaremos y que nos permitirá tomar 5000 instantáneas, ¡lo cual es más que suficiente para las necesidades de este tutorial!
Nota
Actualmente hay un complemento en versión beta mientras escribo este tutorial para la versión 8 de Storybook para permitir que Chromatic se inicie directamente localmente sin pasar por CI, pero por ahora solo pasaremos por CI.
Las pruebas visuales de no regresión son perfectas en el caso de un sistema de diseño porque le permiten verifique al píxel más cercano si las modificaciones a un componente no afectan a otros componentes, que puede ser muy complicado de notar en proyectos complejos. En este tutorial veremos:
- comentario instalador Storybook y cromático en un nuevo proyecto Vite + React
- comentario automatizar Cromático en CI
- comentario crear y probar visualmente en Chromatic un componente simple
- Cómo hacer pruebas de interacción y lanzarlos con Chromatic
Requisitos previos
- Tenga NodeJs versión 16 o superior instalado en su máquina (
node -vpara comprobar) - Tener una cuenta de Github
Nota
Antes de empezar todavía me gustaría advertirte: Chromatic es una herramienta muy práctica, que actualmente no tiene competidor y que sea tan fácil de usar. Desde el momento en que comenzamos a agregar pruebas visuales de no regresión, resulta difícil prescindir de ellas para el proyecto. Por tanto, es probable que tu proyecto pase a depender de Chromatic, y ya ha sucedido que deciden aumentar el precio de determinados servicios. Como actualmente no existe ningún competidor real, utilizar Chromatic lamentablemente significa aceptar esta dependencia.