التطوير والاختبار

Storybook Component Testing

تطوير واختبار وتوثيق مكونات UI بشكل منعزل مع Storybook، بيدعم اختبار الانحدار البصري واختبار التفاعل.

Claude Code Copilot Cursor Windsurf

نظرة عامة

Storybook هي الأداة المعيارية لتطوير واختبار مكونات الواجهة بشكل منعزل. يحصل كل مكون على "قصة" تعرضه في حالة محددة، مما يُنشئ كتالوغاً حياً لمكتبة مكوناتك. يستطيع وكيل الذكاء الاصطناعي إنشاء القصص، وكتابة اختبارات التفاعل باستخدام دالة play، وتهيئة اختبار الانحدار البصري مع Chromatic أو أدوات لقطات أخرى.

يمكن لوكيل الذكاء الاصطناعي بناء ملفات .stories.tsx للمكونات، وتعريف args و argTypes لعناصر التحكم التفاعلية، وكتابة دوال play التي تحاكي تفاعلات المستخدم، وإعداد مشغل الاختبار لتنفيذ جميع اختبارات التفاعل في CI. تنسيق Component Story Format (CSF) في Storybook سهل للوكلاء لتوليده لأن كل قصة هي مجرد كائن مُصدّر بخصائص محددة.

بخلاف الاختبار، يعمل Storybook كتوثيق حي لمكتبة مكوناتك. يمكن لوكيل الذكاء الاصطناعي إضافة تعليقات JSDoc التي تظهر كتوثيق، وتهيئة إضافات لفحص إمكانية الوصول (إضافة a11y)، واختبار العرض، والوضع الداكن. الجمع بين التطوير والاختبار والتوثيق في أداة واحدة يجعل Storybook لا غنى عنه لأنظمة التصميم.

لمن هذه الأداة؟

فرق أنظمة التصميم اللي بتبني وبتوثّق مكتبات مكونات قابلة لإعادة الاستخدام
مطوري الـ Frontend اللي بيختبروا المكونات بشكل منعزل قبل الدمج
مهندسي QA اللي بيشغّلوا اختبارات الانحدار البصري مع تكامل Chromatic
الفرق اللي بتستخدم دالة play في Storybook لاختبار التفاعل الآلي

التثبيت

إعداد Claude Code

npx storybook@latest init
Claude Code generates .stories.tsx files and configures addons

الإعدادات

// .storybook/main.ts
import type { StorybookConfig } from "@storybook/react-vite";
const config: StorybookConfig = {
  stories: ["../src/**/*.stories.@(ts|tsx)"],
  addons: [
    "@storybook/addon-essentials",
    "@storybook/addon-a11y",
    "@storybook/addon-interactions",
  ],
  framework: "@storybook/react-vite",
};
export default config;

زيارة المصدر (الموقع الرسمي)

استكشف أدوات AI

أدوات AI تكمل شغلك — للمصممين والمطورين

اقرأ مقالات عن AI

نصايح عملية في التصميم والذكاء الاصطناعي

أدوات مشابهة

التطوير والاختبار

Linear MCP Server

إدارة المهام والتذاكر في Linear مباشرة من وكيل البرمجة بدون مغادرة المحرر.

Claude Code Cursor Windsurf

التطوير والاختبار

Playwright MCP

أتمتة اختبارات المتصفح والتفاعل مع صفحات الويب برمجيًا للتحقق من الواجهات.

Claude Code Cursor Copilot

التطوير والاختبار

Jest Test Runner

تشغيل وتصحيح اختبارات الوحدة والتكامل تلقائيًا مع تحليل نتائج الأخطاء.

Claude Code Copilot Cursor