Vue Academy · Lezione

Controls, Actions e Args

argTypes per l'interfaccia dei controls, addon actions per il logging degli eventi, play() per i test delle interazioni.

Lezione 3 di 413 passaggi

Controls, Actions e Args è una lezione Vue Academy gratuita su CoddyKit. Questa è la lezione 3 di 4. Puoi leggere la lezione completa qui gratuitamente — poi esercitati direttamente nel browser con un editor di codice integrato e un tutor IA disponibile 24/7. Fa parte del percorso di apprendimento Vue Academy, e i tuoi progressi si sincronizzano tra il web e l'app CoddyKit. Il corso Vue Academy include 4 lezioni in totale.

Controlli interattivi

Il pannello Controls di Storybook trasforma gli args di una story in campi di modulo interattivi. Modificando una prop, il componente viene nuovamente renderizzato all'istante, senza modificare il codice. Può definire questi campi con argTypes.

Definizione di argTypes

argTypes descrive ogni prop: il tipo di controllo, le opzioni e la documentazione. Si trova nell'oggetto meta insieme a args.

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

Controlli di testo e booleani

Il tipo di controllo determina il widget. text fornisce una casella di input; boolean fornisce un interruttore.

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

Controlli select con options

Per un insieme fisso di valori, usi il controllo select con un array options. Il pannello visualizza un menu a discesa.

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

Controlli per colori e numeri

Altri controlli utili: color apre un selettore di colori, mentre number (o range) fornisce un input numerico.

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

L'addon Actions

L'addon Actions registra gli eventi in un pannello, così può verificare che un componente li emetta correttamente. Colleghi un arg a una funzione di registrazione con fn().

import { fn } from "@storybook/test"

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

Come funziona fn()

fn() crea una spy che registra le chiamate nel pannello Actions. Quando il componente invoca l'handler, ad esempio un click emesso e associato a onClick, può visualizzare la chiamata e i relativi argomenti.

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

Associazione degli eventi agli handler

Vue emette eventi; Storybook associa un arg on<Event> a tale emissione. Un evento update emesso viene reso disponibile tramite un arg di azione onUpdate.

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

La funzione play

Una story può includere una funzione play che viene eseguita dopo il rendering per simulare l'interazione dell'utente, come fare clic o digitare, e verificare il risultato. In questo modo una story diventa un test di interazione.

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

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

Asserzioni in play

All'interno di play può verificare le condizioni con expect e controllare che un'azione sia stata chiamata, rendendo i test di interazione visibili direttamente in 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()
  },
}

Perché Controls + Actions + play sono importanti

Insieme rendono le story potenti: Controls consentono di esplorare le props, Actions verificano che gli eventi vengano emessi e play automatizza interazioni e asserzioni, riunendo documentazione e test in un unico luogo.

Verifica rapida

Verifichi la Sua comprensione di controlli e azioni.

Rispondi nella lezione interattiva

Riepilogo

Ha imparato a usare controlli, azioni e args:

argTypes definisce il pannello Controls: text, boolean, select (con options), color, number/range.
L'addon Actions registra gli eventi; colleghi gli handler con fn() oppure associ gli eventi tramite action.
La funzione play viene eseguita dopo il rendering per simulare interazioni con userEvent e verificare le condizioni con expect.
Insieme rendono le story esplorabili, verificabili e auto-documentanti.

Gratis per iniziare

Impara HTML con un tutor IA — gratis

Scrivi ed esegui vero codice nel tuo browser, ricevi aiuto istantaneo da un tutor IA disponibile 24/7, e riprendi da dove hai lasciato sul web o nell'app.

Corsi: 42
Lezioni: 156

Inizia a imparare gratis Visualizza il corso completo

Domande Frequenti

La lezione «Controls, Actions e Args» è gratuita?

Sì — il testo completo di «Controls, Actions e Args» è gratuito qui sul web. Per esercitarvi in modo interattivo (un editor di codice integrato e un tutor IA 24/7) e sbloccare il resto del corso Vue Academy, passa a CoddyKit PRO. Il corso Vue Academy include 4 lezioni in totale.

Cosa imparerò in «Controls, Actions e Args»?

argTypes per l'interfaccia dei controls, addon actions per il logging degli eventi, play() per i test delle interazioni. Eserciti Vue Academy con codice pratico che esegui direttamente nel browser, e un tutor IA 24/7 risponde alle tue domande mentre lavori sulla lezione.

Ho bisogno di esperienza per iniziare Vue Academy?

Non è richiesta alcuna esperienza precedente. Vue Academy su CoddyKit è strutturato per principianti e studenti avanzati, quindi puoi iniziare da qui o dall'inizio e procedere al tuo ritmo. Questa è la lezione 3 di 4.

Quanto tempo richiede la lezione «Controls, Actions e Args»?

La maggior parte delle lezioni CoddyKit richiede circa 5–10 minuti. Ogni lezione è breve e interattiva, quindi fai progressi costanti e riprendi esattamente da dove hai lasciato su web e app.

Posso scrivere ed eseguire codice in questa lezione Vue Academy?

Sì. Ogni lezione Vue Academy include un editor di codice integrato, quindi scrivi ed esegui codice reale direttamente nel tuo browser e ricevi feedback istantaneo dall'IA — nessuna configurazione locale necessaria.

Tutte le lezioni di questo corso

Configurazione di Storybook per Vue 3
Scrittura delle storie dei componenti
Controls, Actions e Args
Addon di Storybook e test di accessibilità

← Torna a Vue Academy