Vue Academy · درس

عناصر Controls وActions وArgs

‏argTypes لواجهة Controls، وإضافة actions لتسجيل الأحداث، وplay() لاختبارات التفاعل

عناصر Controls وActions وArgs درس مجاني في Vue Academy على CoddyKit. هذا هو الدرس 3 من أصل 4. يمكنك قراءة الدرس كاملاً أدناه مجاناً — ثم تمرن عليه مباشرة في المتصفح باستخدام محرر أكواد مدمج ومدرس ذكاء اصطناعي متاح 24/7. هذا الدرس جزء من مسار التعلم في Vue Academy، وتقدمك يتزامن عبر الويب وتطبيق CoddyKit. تتضمن دورة Vue Academy 4 دروس في المجموع.

عناصر التحكم التفاعلية

تحوّل لوحة Controls في Storybook قيم args الخاصة بالقصة إلى حقول نماذج تفاعلية. تغيّرون خاصية، فيُعاد عرض المكوّن فورًا — من دون تعديل الشيفرة. وتضبطون هذه الحقول باستخدام argTypes.

تعريف argTypes

يصف argTypes كل خاصية: نوع عنصر التحكم، والخيارات، والتوثيق الخاص بها. ويوضع على كائن meta إلى جانب args.

export default {
  component: Button,
  argTypes: {
    label: { control: "text" },
  },
}

عناصر تحكم text وboolean

يحدد نوع عنصر التحكم الأداة المستخدمة. إذ يوفر text مربع إدخال، بينما يوفر boolean مفتاح تبديل.

argTypes: {
  label: { control: "text" },
  disabled: { control: "boolean" },
}

عناصر تحكم select مع options

استخدموا عنصر التحكم select مع مصفوفة options عند التعامل مع مجموعة ثابتة من القيم. وستعرض اللوحة قائمة منسدلة.

argTypes: {
  variant: {
    control: "select",
    options: ["primary", "secondary", "danger"],
  },
}

عناصر تحكم color وnumber

هناك عناصر تحكم مفيدة أخرى: يفتح color منتقي ألوان، بينما يوفر number (أو range) إدخالًا رقميًا.

argTypes: {
  background: { control: "color" },
  count: { control: { type: "range", min: 0, max: 10 } },
}

إضافة Actions

تسجل إضافة Actions الأحداث في لوحة، لكي تتأكدوا من أن المكوّن يطلق الأحداث بالشكل الصحيح. وتربطون arg بدالة تسجيل باستخدام fn().

import { fn } from "@storybook/test"

export default {
  component: Button,
  args: {
    onClick: fn(),
  },
}

كيف تعمل fn()؟

تنشئ fn() دالة spy تسجل الاستدعاءات في لوحة Actions. وعندما يستدعي المكوّن المعالج، مثل حدث click المربوط بـ onClick، يظهر الاستدعاء ومعاملاته.

args: {
  onSubmit: fn(),
}
// Clicking submit logs "onSubmit" with payload in the Actions panel

ربط الأحداث بالمعالجات

يطلق Vue الأحداث، ويربط Storybook وسيط on<Event> بذلك الحدث. ويظهر حدث update المُطلَق من خلال وسيط إجراء onUpdate.

argTypes: {
  onUpdate: { action: "update" },
}

دالة play

يمكن أن تتضمن القصة دالة play تعمل بعد العرض لمحاكاة تفاعل المستخدم — مثل النقر والكتابة — والتحقق من النتيجة. وبهذا تتحول القصة إلى اختبار تفاعل.

import { expect, userEvent, within } from "@storybook/test"

export const Clicks = {
  play: async ({ canvasElement }) => {
    const canvas = within(canvasElement)
    await userEvent.click(canvas.getByRole("button"))
  },
}

إجراء التحقق داخل play

يمكنكم داخل play إجراء عمليات تحقق باستخدام expect والتأكد من استدعاء أحد الإجراءات، مما يجعل اختبارات التفاعل ظاهرة مباشرة في Storybook.

export const Submits = {
  args: { onSubmit: fn() },
  play: async ({ args, canvasElement }) => {
    const canvas = within(canvasElement)
    await userEvent.click(canvas.getByRole("button"))
    await expect(args.onSubmit).toHaveBeenCalled()
  },
}

لماذا تهم Controls + Actions + play؟

تجعل هذه الأدوات القصص قوية عند استخدامها معًا: تستكشف Controls الخصائص، وتتحقق Actions من إطلاق الأحداث، وتؤتمت play التفاعلات وعمليات التحقق — لتجتمع الوثائق والاختبارات في مكان واحد.

تحقق سريع

تحققوا من فهمكم لعناصر التحكم والإجراءات.

مراجعة

لقد تعلمتم عناصر التحكم والإجراءات وargs:

يشكّل argTypes لوحة Controls، باستخدام text وboolean وselect (مع options) وcolor وnumber/range.
تسجل إضافة Actions الأحداث؛ ويمكن ربط المعالجات باستخدام fn() أو ربط الأحداث عبر action.
تعمل دالة play بعد العرض لمحاكاة التفاعلات باستخدام userEvent وإجراء التحقق باستخدام expect.
تجعل هذه الأدوات القصص قابلة للاستكشاف والتحقق وموثقة ذاتيًا.

الأسئلة الشائعة

هل درس «عناصر Controls وActions وArgs» مجاني؟

نعم — نص درس «عناصر Controls وActions وArgs» كامل متاح مجاناً هنا على الويب. لتمرينه بشكل تفاعلي (محرر أكواد مدمج ومدرس ذكاء اصطناعي متاح 24/7) وفتح باقي دورة Vue Academy، انتقل إلى CoddyKit PRO. تتضمن دورة Vue Academy 4 دروس في المجموع.

ماذا ستتعلم في «عناصر Controls وActions وArgs»؟

‏argTypes لواجهة Controls، وإضافة actions لتسجيل الأحداث، وplay() لاختبارات التفاعل تتمرن على Vue Academy مع أكواد عملية تشغلها مباشرة في المتصفح، ومدرس ذكاء اصطناعي متاح 24/7 يجيب على أسئلتك أثناء عملك.

هل أحتاج إلى خبرة سابقة لأبدأ Vue Academy؟

لا تُشترط خبرة سابقة. Vue Academy على CoddyKit منظم للمبتدئين حتى المتقدمين، لذا يمكنك البدء من هنا أو من البداية والتقدم بسرعتك الخاصة. هذا هو الدرس 3 من أصل 4.

كم من الوقت يستغرق درس «عناصر Controls وActions وArgs»؟

معظم دروس CoddyKit تستغرق حوالي 5–10 دقائق. كل منها موجز وتفاعلي، لذا تحرز تقدماً مستمراً وتستأنف من حيث توقفت عبر الويب والتطبيق.

هل يمكنني كتابة وتشغيل أكواد في درس Vue Academy هذا؟

نعم. كل درس في Vue Academy يتضمن محرر أكواد مدمج، لذا تكتب وتشغل أكواداً حقيقية مباشرة في متصفحك وتحصل على تعليقات فورية من الذكاء الاصطناعي — بدون إعداد محلي.

جميع الدروس في هذه الدورة

← العودة إلى Vue Academy