Vue Academy · บทเรียน

Controls, Actions และ Args

argTypes สำหรับ UI ของ Controls ส่วนเสริม Actions สำหรับบันทึกเหตุการณ์ และ play() สำหรับการทดสอบการโต้ตอบ

Controls, Actions และ Args เป็นบทเรียน Vue Academy ฟรีบน CoddyKit นี่คือบทเรียนที่ 3 จากทั้งหมด 4 บทเรียน คุณสามารถอ่านบทเรียนทั้งหมดด้านล่างฟรี — จากนั้นลองปฏิบัติด้วยตัวคุณเองในเบราว์เซอร์พร้อมตัวแก้ไขโค้ดในตัวและติวเตอร์ AI ตลอด 24/7 บทเรียนนี้เป็นส่วนหนึ่งของเส้นทางการเรียน Vue Academy และความก้าวหน้าของคุณจะซิงค์ข้ามเว็บและแอป CoddyKit คอร์ส Vue Academy มีบทเรียนทั้งหมด 4 บทเรียน

การควบคุมแบบโต้ตอบ

แผงควบคุมของ Storybook จะเปลี่ยน args ของเรื่องราวให้เป็นช่องกรอกแบบฟอร์มที่ปรับค่าได้แบบเรียลไทม์ คุณเปลี่ยนพร็อพส์แล้วคอมโพเนนต์จะเรนเดอร์ใหม่ทันทีโดยไม่ต้องแก้โค้ด คุณกำหนดรูปแบบของช่องเหล่านี้ด้วย argTypes

กำหนด argTypes

argTypes ใช้อธิบายพร็อพส์แต่ละรายการ ได้แก่ ชนิดของตัวควบคุม ตัวเลือก และเอกสารประกอบ โดยอยู่ในออบเจ็กต์เมทาร่วมกับ args

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

ตัวควบคุมข้อความและบูลีน

ชนิดของตัวควบคุมจะเลือกวิดเจ็ตที่ใช้ text จะแสดงช่องป้อนข้อความ ส่วน boolean จะแสดงสวิตช์สลับ

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

ตัวควบคุมแบบเลือกด้วย options

สำหรับค่าที่มีชุดตายตัว ให้ใช้ตัวควบคุม select ร่วมกับอาร์เรย์ options แผงควบคุมจะแสดงเมนูแบบเลื่อนลง

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

ตัวควบคุมสีและตัวเลข

ตัวควบคุมอื่น ๆ ที่มีประโยชน์ ได้แก่ color ซึ่งจะเปิดเครื่องมือเลือกสี และ number (หรือ range) ซึ่งรับข้อมูลตัวเลข

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

ส่วนเสริม Actions

ส่วนเสริมActionsจะบันทึกเหตุการณ์ไว้ในแผง เพื่อให้คุณยืนยันได้ว่าคอมโพเนนต์ส่งเหตุการณ์ได้ถูกต้อง คุณเชื่อมอาร์กิวเมนต์เข้ากับฟังก์ชันบันทึกเหตุการณ์ด้วย fn()

import { fn } from "@storybook/test"

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

การทำงานของ fn()

fn() จะสร้างตัวสอดแนมที่บันทึกการเรียกใช้ไว้ในแผง 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 จึงสำคัญ

เมื่อใช้ร่วมกัน สิ่งเหล่านี้ทำให้เรื่องราวมีประสิทธิภาพมากขึ้น: แผงควบคุมใช้สำรวจพร็อพส์ การดำเนินการใช้ตรวจยืนยันว่าเหตุการณ์ทำงาน และ playใช้ทำให้การโต้ตอบกับการตรวจยืนยันเป็นอัตโนมัติ ทั้งเอกสารและการทดสอบจึงอยู่ในที่เดียวกัน

ตรวจสอบความเข้าใจ

ตรวจสอบความเข้าใจของคุณเกี่ยวกับตัวควบคุมและการดำเนินการ

ทบทวน

คุณได้เรียนรู้เกี่ยวกับตัวควบคุม การดำเนินการ และ args:

argTypes กำหนดรูปแบบแผงควบคุม ได้แก่ text, boolean, select (ร่วมกับ options), color, number/range
ส่วนเสริม Actions จะบันทึกเหตุการณ์ คุณสามารถเชื่อมตัวจัดการด้วย fn() หรือแมปเหตุการณ์ผ่าน action
ฟังก์ชัน play จะทำงานหลังการเรนเดอร์เพื่อจำลองการโต้ตอบด้วย userEvent และตรวจยืนยันด้วย expect
เมื่อใช้ร่วมกัน สิ่งเหล่านี้ทำให้เรื่องราวสำรวจได้ ตรวจสอบได้ และจัดทำเอกสารด้วยตัวเอง

คำถามที่พบบ่อย

บทเรียน “Controls, Actions และ Args” ฟรีหรือไม่

ใช่ — ข้อความเต็มของ “Controls, Actions และ Args” ฟรีให้อ่านที่นี่บนเว็บ เพื่อปฏิบัติแบบโต้ตอบ (ตัวแก้ไขโค้ดในตัวและติวเตอร์ AI ตลอด 24/7) และปลดล็อคส่วนที่เหลือของคอร์ส Vue Academy ให้อัปเกรดเป็น CoddyKit PRO คอร์ส Vue Academy มีบทเรียนทั้งหมด 4 บทเรียน

คุณจะเรียนรู้อะไรในบทเรียน “Controls, Actions และ Args”

argTypes สำหรับ UI ของ Controls ส่วนเสริม Actions สำหรับบันทึกเหตุการณ์ และ play() สำหรับการทดสอบการโต้ตอบ คุณปฏิบัติ Vue Academy ด้วยโค้ดที่ใช้งานได้จริงที่คุณเรียกใช้โดยตรงในเบราว์เซอร์ และติวเตอร์ AI ตลอด 24/7 ตอบคำถามของคุณขณะที่คุณไปผ่านบทเรียน

คุณต้องมีประสบการณ์ก่อนที่จะเริ่มเรียน Vue Academy หรือไม่

ไม่จำเป็นต้องมีประสบการณ์มาก่อน Vue Academy บน CoddyKit ออกแบบมาสำหรับผู้เริ่มต้นไปจนถึงผู้เรียนขั้นสูง คุณสามารถเริ่มต้นที่นี่หรือเริ่มจากตัวแรกและเรียนด้วยความเร็วของคุณเอง นี่คือบทเรียนที่ 3 จากทั้งหมด 4 บทเรียน

บทเรียน “Controls, Actions และ Args” ใช้เวลานานแค่ไหน

บทเรียน CoddyKit ส่วนใหญ่ใช้เวลาประมาณ 5–10 นาที แต่ละบทเรียนจึงสั้นและเป็นแบบโต้ตอบ คุณสามารถก้าวหน้าอย่างต่อเนื่องและกลับมาเรียนต่อจากตรงที่เพิ่งหยุดบนเว็บและแอปได้เลย

ฉันเขียนและรันโค้ดในบทเรียน Vue Academy นี้ได้ไหม

ได้ บทเรียน Vue Academy ทุกบทมีตัวแก้ไขโค้ดในตัว คุณจึงเขียนและรันโค้ดจริงได้เลยในเบราว์เซอร์ และได้รับข้อเสนอแนะจาก AI ในทันที — ไม่ต้องติดตั้งในเครื่องของคุณ

บทเรียนทั้งหมดในหลักสูตรนี้

← กลับไปที่ Vue Academy