📋 محتويات الصفحة
📖 الوصف
Storybook هو بيئة تطوير مكونات UI تتيح بناء وعرض المكونات بمفردها خارج التطبيق الرئيسي. يدعم Storybook React، Vue، Angular، Svelte، Web Components، وغيرها من أنظمة التصميم. يُستخدم Storybook لأغراض متعددة: تطوير المكونات المعزولة، توثيق بصري، اختبار تفاعلي، ومشاركة التصاميم مع الفرق. يوفر نظام إضاف...
🎯 يستخدم في
مجالات استخدام هذه الأداة
•
تطوير مكونات UI
•
توثيق المكونات
•
اختبار تفاعلي
•
Design System
•
Collaboration
✨ المميزات
أبرز مميزات هذه الأداة
✓
Easy Component Isolation
✓
Easy Multiple Frameworks
✓
Easy Addon Ecosystem
✓
easy Documentation
✓
easy Interaction Testing
✓
easy Visual Testing
✓
easy Deployment
⚠️ العيوب
نقاط يجب مراعاتها
×
قد يكون بطيئاً
×
يحتاج تكوين أحياناً
×
لا يختبر الأداء
×
محدود خارج UI
💻 مثال على الاستخدام
كيفية استخدام هذه الأداة
// Button.stories.jsx
import { Button } from './Button'
export default {
title: 'Components/Button',
component: Button,
argTypes: {
variant: {
control: { type: 'select' },
options: ['primary', 'secondary', 'danger']
}
}
}
// Story Primary
export const Primary = {
args: {
variant: 'primary',
children: 'Primary Button',
disabled: false
}
}
// Story مع Play test
import { within, userEvent } from '@storybook/testing-library'
export const Interactive = {
args: { variant: 'primary', children: 'Click Me' },
play: async ({ canvasElement }) => {
const canvas = within(canvasElement)
await userEvent.click(canvas.getByRole('button'))
await expect(canvas.getByText('Clicked!')).toBeInTheDocument()
}
}📚 أدوات أخرى في Testing
قد يعجبك أيضاً