0Pricing
Vue Academy · Урок

Элементы управления, действия и аргументы

argTypes для интерфейса элементов управления, дополнение actions для записи событий и play() для тестов взаимодействия

«Элементы управления, действия и аргументы» — бесплатный урок Vue Academy на CoddyKit. Это урок 3 из 4. Ты можешь прочитать весь урок бесплатно ниже — а потом практиковать его прямо в браузере с встроенным редактором кода и ИИ-репетитором 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

Вместе они делают истории мощным инструментом: Controls позволяют исследовать свойства, Actions проверяют отправку событий, а play автоматизирует взаимодействия и проверки — документация и тесты в одном месте.

Быстрая проверка

Проверьте, насколько хорошо Вы понимаете элементы управления и действия.

Итоги

Вы изучили элементы управления, действия и args:

  • argTypes настраивает панель элементов управления: text, boolean, select (с options), color, number/range.
  • Дополнение Actions записывает события в журнал; связывайте обработчики с помощью fn() или сопоставляйте события через action.
  • Функция play запускается после отображения, чтобы имитировать взаимодействия с помощью userEvent и выполнять проверки с помощью expect.
  • Вместе эти возможности делают истории интерактивными, проверяемыми и самодокументируемыми.

Часто задаваемые вопросы

Урок «Элементы управления, действия и аргументы» бесплатный?

Да — полный текст урока «Элементы управления, действия и аргументы» бесплатно доступен здесь в веб-версии. Чтобы практиковать его интерактивно (встроенный редактор кода и ИИ-репетитор 24/7) и разблокировать остальной курс Vue Academy, подпишись на CoddyKit PRO. Курс Vue Academy содержит 4 уроков всего.

Чему я научусь в уроке «Элементы управления, действия и аргументы»?

argTypes для интерфейса элементов управления, дополнение actions для записи событий и play() для тестов взаимодействия Ты практикуешь Vue Academy с помощью реального кода, который запускаешь прямо в браузере, и ИИ-репетитор 24/7 отвечает на твои вопросы во время урока.

Нужен ли мне опыт, чтобы начать Vue Academy?

Предыдущий опыт не требуется. Vue Academy на CoddyKit структурирован для всех уровней — от новичков до продвинутых, поэтому ты можешь начать отсюда или с самого начала и учиться в своем темпе. Это урок 3 из 4.

Сколько времени занимает урок «Элементы управления, действия и аргументы»?

Большинство уроков CoddyKit занимают около 5–10 минут. Каждый из них компактный и интерактивный, поэтому ты постоянно делаешь прогресс и продолжаешь с того же места в веб-версии и приложении.

Можно ли писать и запускать код в этом уроке Vue Academy?

Да. Каждый урок Vue Academy включает встроенный редактор кода, поэтому ты пишешь и запускаешь реальный код прямо в браузере и получаешь моментальную обратную связь от AI — локальная установка не требуется.

Все уроки этого курса

  1. Настройка Storybook для Vue 3
  2. Написание историй компонентов
  3. Элементы управления, действия и аргументы
  4. Дополнения Storybook и тестирование доступности
← Назад к Vue Academy