Vue Academy · Pelajaran

Controls, Actions, dan Args

argTypes untuk UI controls, addon actions untuk pencatatan event, serta play() untuk test interaksi.

Pelajaran 3 dari 413 langkah

Controls, Actions, dan Args adalah pelajaran Vue Academy gratis di CoddyKit. Ini adalah pelajaran 3 dari 4. Kamu bisa membaca pelajaran lengkapnya di bawah secara gratis — lalu praktikkan langsung di browser dengan editor kode bawaan dan tutor AI 24/7. Ini adalah bagian dari jalur belajar Vue Academy, dan progresmu tersinkronisasi di web dan aplikasi CoddyKit. Kursus Vue Academy mencakup 4 pelajaran total.

Kontrol Interaktif

Panel Controls Storybook mengubah args sebuah cerita menjadi bidang formulir langsung. Anda mengubah properti dan komponen langsung dirender ulang — tanpa mengedit kode. Anda membentuk bidang-bidang ini dengan argTypes.

Mendefinisikan argTypes

argTypes menjelaskan setiap properti: jenis kontrol, opsi, dan dokumentasinya. Argumen ini berada pada objek meta bersama args.

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

Kontrol Teks dan Boolean

Jenis kontrol menentukan widgetnya. text menyediakan kotak masukan; boolean menyediakan sakelar.

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

Kontrol Pilihan dengan options

Untuk kumpulan nilai tetap, gunakan kontrol select dengan array options. Panel akan menampilkan menu tarik-turun.

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

Kontrol Warna dan Angka

Kontrol praktis lainnya: color membuka pemilih warna, sedangkan number (atau range) menyediakan masukan angka.

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

Pengaya Actions

Pengaya Actions mencatat peristiwa di sebuah panel agar Anda dapat memastikan komponen memancarkannya dengan benar. Anda menghubungkan argumen ke fungsi pencatat dengan fn().

import { fn } from "@storybook/test"

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

Cara Kerja fn()

fn() membuat pengintai yang mencatat panggilan ke panel Actions. Saat komponen memanggil penangan tersebut (misalnya click yang dipancarkan dan dipetakan ke onClick), Anda dapat melihat panggilan beserta argumennya.

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

Memetakan Peristiwa ke Penangan

Vue memancarkan peristiwa; Storybook memetakan argumen on<Event> ke pemancaran tersebut. Peristiwa update yang dipancarkan muncul melalui argumen aksi onUpdate.

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

Fungsi play

Sebuah cerita dapat menyertakan fungsi play yang berjalan setelah perenderan untuk menyimulasikan interaksi pengguna — mengeklik, mengetik — dan memverifikasi hasilnya. Ini mengubah cerita menjadi pengujian interaksi.

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

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

Melakukan Verifikasi dalam play

Di dalam play, Anda dapat melakukan verifikasi dengan expect dan memeriksa bahwa suatu aksi telah dipanggil, sehingga pengujian interaksi terlihat langsung di 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()
  },
}

Mengapa Controls + Actions + play Penting

Secara bersama-sama, ketiganya membuat cerita menjadi kuat: Controls digunakan untuk menjelajahi properti, Actions memverifikasi bahwa peristiwa berjalan, dan play mengotomatiskan interaksi serta verifikasi — dokumentasi dan pengujian di satu tempat.

Pemeriksaan Singkat

Periksa pemahaman Anda tentang kontrol dan aksi.

Jawab di pelajaran interaktif

Ringkasan

Anda telah mempelajari kontrol, aksi, dan args:

argTypes membentuk panel Controls: text, boolean, select (dengan options), color, number/range.
Pengaya Actions mencatat peristiwa; hubungkan penangan dengan fn() atau petakan peristiwa melalui action.
Fungsi play berjalan setelah perenderan untuk menyimulasikan interaksi dengan userEvent dan melakukan verifikasi dengan expect.
Secara bersama-sama, ketiganya membuat cerita mudah dijelajahi, dapat diverifikasi, dan mendokumentasikan dirinya sendiri.

Gratis untuk memulai

Belajar HTML dengan tutor AI — gratis

Tulis dan jalankan kode asli di browser kamu, dapatkan bantuan instan dari tutor AI 24/7, dan lanjutkan di mana kamu tinggalkan di web atau aplikasi.

Kursus: 42
Pelajaran: 156

Mulai belajar gratis Lihat kursus lengkapnya

Pertanyaan yang Sering Diajukan

Apakah pelajaran “Controls, Actions, dan Args” gratis?

Ya — teks lengkap “Controls, Actions, dan Args” gratis dibaca di sini di web. Untuk praktiknya secara interaktif (editor kode bawaan dan tutor AI 24/7) dan buka sisa kursus Vue Academy, upgrade ke CoddyKit PRO. Kursus Vue Academy mencakup 4 pelajaran total.

Apa yang akan aku pelajari di “Controls, Actions, dan Args”?

argTypes untuk UI controls, addon actions untuk pencatatan event, serta play() untuk test interaksi. Kamu berlatih Vue Academy dengan kode praktik yang langsung kamu jalankan di browser, dan tutor AI 24/7 menjawab pertanyaanmu saat kamu mengerjakan pelajaran ini.

Apakah aku perlu pengalaman untuk memulai Vue Academy?

Tidak diperlukan pengalaman sebelumnya. Vue Academy di CoddyKit dirancang untuk pemula hingga pelajar tingkat lanjut, jadi kamu bisa memulai di sini atau dari awal dan belajar sesuai kecepatan kamu sendiri. Ini adalah pelajaran 3 dari 4.

Berapa lama pelajaran “Controls, Actions, dan Args” memakan waktu?

Sebagian besar pelajaran CoddyKit memakan waktu sekitar 5–10 menit. Setiap pelajaran ringkas dan interaktif, jadi kamu membuat kemajuan stabil dan melanjutkan dari tempat kamu tinggalkan di web dan aplikasi.

Bisakah aku menulis dan menjalankan kode dalam pelajaran Vue Academy ini?

Ya. Setiap pelajaran Vue Academy menyertakan editor kode bawaan, jadi kamu menulis dan menjalankan kode nyata langsung di browser dan mendapatkan umpan balik AI instan — tidak diperlukan penyiapan lokal.

Semua pelajaran dalam kursus ini

Menyiapkan Storybook untuk Vue 3
Menulis Story Komponen
Controls, Actions, dan Args
Addon Storybook dan Pengujian Aksesibilitas

← Kembali ke Vue Academy