Vue Academy · Lekcja

Controls, actions i args

argTypes dla interfejsu controls, dodatek actions do logowania zdarzeń oraz play() do testów interakcji.

Controls, actions i args to bezpłatna lekcja Vue Academy na CoddyKit. To lekcja 3 z 4. Możesz przeczytać całą lekcję poniżej za darmo — a potem ćwiczyć ją interaktywnie w przeglądarce z wbudowanym edytorem kodu i tutorem AI dostępnym 24/7. To część ścieżki edukacyjnej Vue Academy, a Twój postęp synchronizuje się między webem a aplikacją CoddyKit. Kurs Vue Academy zawiera 4 lekcji w sumie.

Interaktywne elementy sterujące

Panel Controls w Storybooku zamienia args story na interaktywne pola formularza. Zmiana propa powoduje natychmiastowe ponowne renderowanie komponentu — bez edytowania kodu. Pola te konfiguruje się za pomocą argTypes.

Definiowanie argTypes

argTypes opisuje każdy prop: typ kontrolki, dostępne opcje i dokumentację. Umieszcza się je w obiekcie meta obok args.

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

Kontrolki tekstowe i logiczne

Typ kontrolki określa używany element interfejsu. text udostępnia pole tekstowe, a boolean przełącznik.

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

Kontrolki select z options

W przypadku ustalonego zestawu wartości użyj kontrolki select z tablicą options. Panel wyświetli listę rozwijaną.

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

Kontrolki koloru i liczby

Inne przydatne kontrolki to: color, która otwiera próbnik kolorów, oraz number (lub range), która umożliwia wprowadzanie wartości liczbowych.

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

Dodatek Actions

Dodatek Actions rejestruje zdarzenia w panelu, dzięki czemu można potwierdzić, że komponent emituje je prawidłowo. Arg łączy się z funkcją rejestrującą za pomocą fn().

import { fn } from "@storybook/test"

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

Jak działa fn()

fn() tworzy funkcję szpiegującą, która rejestruje wywołania w panelu Actions. Gdy komponent wywoła handler (np. wyemitowane zdarzenie click zmapowane na onClick), można zobaczyć wywołanie i jego argumenty.

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

Mapowanie zdarzeń na handlery

Vue emituje zdarzenia, a Storybook mapuje arg on<Event> na takie zdarzenie. Wyemitowane zdarzenie update jest dostępne za pośrednictwem akcji arg onUpdate.

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

Funkcja play

Story może zawierać funkcję play, która uruchamia się po renderowaniu, aby symulować interakcje użytkownika — klikanie i pisanie — oraz sprawdzać ich wynik. Dzięki temu story staje się testem interakcji.

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

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

Asercje w play

Wewnątrz play można wykonywać asercje za pomocą expect i sprawdzać, czy akcja została wywołana, dzięki czemu testy interakcji są widoczne bezpośrednio w Storybooku.

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()
  },
}

Dlaczego Controls + Actions + play mają znaczenie

Razem sprawiają, że stories są bardzo użyteczne: Controls służy do badania propsów, Actions do weryfikowania emisji zdarzeń, a play do automatyzowania interakcji i asercji — dokumentacja i testy znajdują się w jednym miejscu.

Szybkie sprawdzenie

Sprawdź swoją wiedzę na temat kontrolek i akcji.

Podsumowanie

Nauczono się korzystać z kontrolek, akcji i args:

argTypes konfiguruje panel Controls: text, boolean, select (z options), color, number/range.
Dodatek Actions rejestruje zdarzenia; handlery można podłączać za pomocą fn() lub mapować zdarzenia przez action.
Funkcja play uruchamia się po renderowaniu, aby symulować interakcje za pomocą userEvent i wykonywać asercje za pomocą expect.
Razem sprawiają, że stories można eksplorować i weryfikować, a także że same się dokumentują.

Często zadawane pytania

Czy lekcja „Controls, actions i args” jest bezpłatna?

Tak — pełny tekst „Controls, actions i args” jest dostępny za darmo tutaj w sieci. Aby ćwiczyć ją interaktywnie (wbudowany edytor kodu i tutor AI dostępny 24/7) i odblokować resztę kursu Vue Academy, przejdź na CoddyKit PRO. Kurs Vue Academy zawiera 4 lekcji w sumie.

Co nauczysz się w „Controls, actions i args”?

argTypes dla interfejsu controls, dodatek actions do logowania zdarzeń oraz play() do testów interakcji. Ćwiczysz Vue Academy z praktycznym kodem, który uruchamiasz bezpośrednio w przeglądarce, a tutor AI dostępny 24/7 odpowiada na Twoje pytania podczas pracy nad lekcją.

Czy potrzebuję doświadczenia, aby zacząć Vue Academy?

Nie wymagamy żadnego doświadczenia. Vue Academy w CoddyKit jest strukturyzowany dla początkujących i zaawansowanych użytkowników, więc możesz zacząć tutaj lub od początku i uczyć się w swoim tempie. To lekcja 3 z 4.

Ile czasu zajmuje lekcja „Controls, actions i args”?

Większość lekcji CoddyKit trwa około 5–10 minut. Każda lekcja to mały, interaktywny krok, dzięki czemu robisz systematyczne postępy i zawsze wracasz dokładnie do tego samego miejsca — na webie i w aplikacji.

Czy mogę pisać i uruchamiać kod w tej lekcji Vue Academy?

Tak. Każda lekcja Vue Academy zawiera wbudowany edytor kodu, więc piszesz i uruchamiasz prawdziwy kod bezpośrednio w przeglądarce i od razu otrzymujesz sprzężenie zwrotne od AI — bez konfiguracji na komputerze.

Wszystkie lekcje w tym kursie

Konfiguracja Storybook dla Vue 3
Pisanie stories komponentów
Controls, actions i args
Dodatki Storybook i testowanie dostępności

← Powrót do Vue Academy