Vue Academy · Leçon

Contrôles, actions et args

argTypes pour l’interface des contrôles, module complémentaire actions pour la journalisation des événements et play() pour les tests d’interaction

Contrôles, actions et args est une leçon Vue Academy gratuite sur CoddyKit. Ceci est la leçon 3 sur 4. Tu peux lire la leçon complète ci-dessous gratuitement — puis la pratiquer en direct dans le navigateur avec un éditeur de code intégré et un tuteur IA 24/7. Elle fait partie du parcours d'apprentissage Vue Academy, et ta progression se synchronise sur le web et l'application CoddyKit. Le cours Vue Academy comprend 4 leçons au total.

Contrôles interactifs

Le panneau Contrôles de Storybook transforme les arguments d’un récit en champs de formulaire interactifs. Vous modifiez une propriété et le composant est immédiatement affiché à nouveau, sans modifier le code. Vous définissez ces champs avec argTypes.

Définir les types d’arguments

argTypes décrit chaque propriété : son type de contrôle, ses options et sa documentation. Il se trouve dans l’objet de métadonnées, à côté de args.

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

Contrôles de texte et booléens

Le type de contrôle détermine le composant d’interface. text fournit une zone de saisie ; boolean fournit un bouton bascule.

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

Contrôles de sélection avec des options

Pour un ensemble fixe de valeurs, utilisez le contrôle select avec un tableau options. Le panneau affiche une liste déroulante.

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

Contrôles de couleur et numériques

Autres contrôles pratiques : color ouvre un sélecteur de couleur, tandis que number (ou range) fournit une saisie numérique.

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

L’extension des actions

L’extension Actions consigne les événements dans un panneau afin que vous puissiez vérifier qu’un composant les émet correctement. Vous reliez un argument à une fonction de consignation avec fn().

import { fn } from "@storybook/test"

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

Fonctionnement de la fonction espion

fn() crée un espion qui consigne les appels dans le panneau Actions. Lorsque le composant appelle le gestionnaire (par exemple, un click émis et associé à onClick), vous voyez l’appel et ses arguments.

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

Associer les événements aux gestionnaires

Vue émet des événements ; Storybook associe un argument on<Event> à cette émission. Un événement update émis apparaît grâce à un argument d’action onUpdate.

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

La fonction d’interaction

Un récit peut contenir une fonction play qui s’exécute après l’affichage pour simuler une interaction utilisateur — clics, saisie — et vérifier le résultat. Cela transforme un récit en vérification d’interaction.

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

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

Effectuer des vérifications dans la fonction d’interaction

Dans play, vous pouvez effectuer des vérifications avec expect et contrôler qu’une action a été appelée, ce qui rend les vérifications d’interaction visibles directement dans 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()
  },
}

Pourquoi les contrôles, les actions et la fonction d’interaction sont importants

Ensemble, ils rendent les récits puissants : les contrôles permettent d’explorer les propriétés, les actions vérifient que les événements sont déclenchés et la fonction d’interaction automatise les interactions et les vérifications : documentation et vérifications au même endroit.

Vérification rapide

Vérifiez votre compréhension des contrôles et des actions.

Récapitulatif

Vous avez appris à utiliser les contrôles, les actions et les arguments :

argTypes définit le panneau Contrôles : text, boolean, select (avec options), color, number/range.
L’extension Actions consigne les événements ; reliez les gestionnaires avec fn() ou associez les événements via action.
La fonction play s’exécute après l’affichage pour simuler des interactions avec userEvent et effectuer des vérifications avec expect.
Ensemble, ces fonctionnalités rendent les récits explorables, vérifiables et auto-documentés.

Questions Fréquemment Posées

La leçon « Contrôles, actions et args » est-elle gratuite ?

Oui — le texte complet de « Contrôles, actions et args » est gratuit à lire ici sur le web. Pour la pratiquer de manière interactive (un éditeur de code intégré et un tuteur IA 24/7) et déverrouiller le reste du cours Vue Academy, passe à CoddyKit PRO. Le cours Vue Academy comprend 4 leçons au total.

Qu'est-ce que j'apprendrai dans « Contrôles, actions et args » ?

argTypes pour l’interface des contrôles, module complémentaire actions pour la journalisation des événements et play() pour les tests d’interaction Tu pratiques Vue Academy avec du code pratique que tu exécutes directement dans le navigateur, et un tuteur IA 24/7 répond à tes questions au fur et à mesure que tu avances dans la leçon.

Dois-je avoir de l'expérience pour commencer Vue Academy ?

Aucune expérience préalable n'est requise. Vue Academy sur CoddyKit est structuré pour les débutants jusqu'aux apprenants avancés, donc tu peux commencer ici ou depuis le début et avancer à ton rythme. Ceci est la leçon 3 sur 4.

Combien de temps prend la leçon « Contrôles, actions et args » ?

La plupart des leçons CoddyKit prennent environ 5–10 minutes. Chacune est courte et interactive, tu progresses régulièrement et tu repiques exactement où tu t'es arrêté sur le web et l'app.

Peux-tu écrire et exécuter du code dans cette leçon Vue Academy ?

Oui. Chaque leçon Vue Academy inclut un éditeur de code intégré, tu écris et exécutes du vrai code directement dans ton navigateur et tu reçois des retours IA instantanés — aucune configuration locale requise.

Toutes les leçons de ce cours

Configurer Storybook pour Vue 3
Écrire des stories de composants
Contrôles, actions et args
Modules complémentaires Storybook et tests d’accessibilité

← Retour à Vue Academy