Aclaración importante en el segundo hace referencia al texto que tenía el botón, no hagan como yo que no me daba cuenta y me salto error xD
Visión general de los sistemas de diseño en desarrollo
"Creación de Sistemas de Diseño con Storybook y CSS"
Creación de Sistemas de Diseño con Storybook
Desarrollo de componentes
Instalación y Configuración de Storybook con JavaScript
Arquitectura y Nombramiento de Componentes en Storybook
Uso de Design Tokens y Custom Properties en CSS con Figma
Creación de un Componente de Botón en JavaScript y CSS
Estilización de Botones en CSS: Clases y Hover Interactivo
Creación de un Componente de Cart en JavaScript y CSS
Uso de Container Queries en CSS
Estilización de Componentes CSS con Container Queries
Historias en Storybook
Escritura de Historias en Storybook con ECMAScript Modules
Creación de Botones Personalizables en Storybook
Parámetros y Decoradores en Storybook: Personalización UI
Essential Addons en Storybook
Uso y Configuración de Addons Esenciales en JavaScript
Implementación de Actions y Backgrounds en Storybook
Configuración de Viewport y Outline en Storybook
Pruebas de componentes en Storybook
Uso de TestRunner para Verificar Historias de Usuario
Pruebas de Interacción con Storybook y Testing Library
Pruebas de Accesibilidad en Storybook con Add-ons
Pruebas Visuales con Chromatic para Design Systems
Próximos pasos
Fundamentos de Design Systems con Storybook
No tienes acceso a esta clase
¡Continúa aprendiendo! Únete y comienza a potenciar tu carrera
Las pruebas de interacción son una herramienta crucial en el desarrollo de software que permite verificar cómo un usuario interactúa con nuestras interfaces. En esta clase, se utiliza la biblioteca Testing Library junto con Jest para implementar estas pruebas, además del addon de Interactions. Este método nos ayuda a identificar si nuestros componentes son efectivos y que cumplen con los requisitos esperados.
Para configurar las pruebas de interacción, sigue estos pasos:
Instalación de dependencias:
npm install @testing-library/react @storybook/addon-interactions --save-dev
Jest
instalado, pues es fundamental para las pruebas.Configuración del archivo main.js:
storybook.main.js
. Por ejemplo:
module.exports = {
addons: [
'@storybook/addon-interactions'
],
};
Preparación del entorno de pruebas:
El siguiente paso es escribir las pruebas. Aquí te presentamos cómo hacerlo de manera básica:
Configurar la función de prueba:
play
, la cual contendrá las pruebas de interacción.args
y canvas
, donde canvas
es el elemento que se utilizará para buscar componentes en la interfaz.Crear y manipular el canvas:
within
de Testing Library para definir el contexto del canvas.getByRole
.import { within, userEvent } from '@testing-library/react';
Escribir las afirmaciones usando Jest:
expect
para definir las expectativas de los componentes:
await expect(canvas.getByText('button')).toBeInTheDocument();
npm run storybook
Con estos pasos, puedes asegurarte de que tus componentes de la interfaz se comporten correctamente cuando los usuarios interactúan con ellos. ¡Sigue experimentando y compartiendo tus avances para perfeccionar estas habilidades!
Aportes 4
Preguntas 0
Aclaración importante en el segundo hace referencia al texto que tenía el botón, no hagan como yo que no me daba cuenta y me salto error xD
El userEvent viene de la misma librería que within.
import { within, userEvent } from "@storybook/testing-library";
¿Quieres ver más aportes, preguntas y respuestas de la comunidad?