Vue Academy · Aula

Controles, ações e args

argTypes para a interface de controles, complemento de ações para registro de eventos e play() para testes de interação.

Aula 3 de 413 etapas

Controles, ações e args é uma aula grátis de Vue Academy no CoddyKit. Esta é a aula 3 de 4. Você pode ler a aula completa abaixo gratuitamente — depois pratica ao vivo no navegador com um editor de código integrado e um tutor de IA 24/7. Faz parte do caminho de aprendizado de Vue Academy, e seu progresso é sincronizado entre a web e o app CoddyKit. O curso de Vue Academy inclui 4 aulas no total.

Controles interativos

O painel Controles do Storybook transforma os args de uma história em campos de formulário interativos. Você altera uma propriedade e o componente é renderizado novamente instantaneamente — sem editar código. Você configura esses campos com argTypes.

Definindo argTypes

argTypes descreve cada propriedade: seu tipo de controle, suas opções e sua documentação. Ele fica no objeto meta, junto de args.

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

Controles de texto e booleanos

O tipo de controle escolhe o componente de interface. text fornece uma caixa de entrada; boolean fornece um botão de alternância.

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

Controles de seleção com options

Para um conjunto fixo de valores, use o controle select com uma matriz options. O painel exibe uma lista suspensa.

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

Controles de cor e número

Outros controles úteis: color abre um seletor de cores, e number (ou range) fornece uma entrada numérica.

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

O complemento Actions

O complemento Actions registra eventos em um painel para que você confirme se um componente os emite corretamente. Você conecta um arg a uma função de registro com fn().

import { fn } from "@storybook/test"

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

Como fn() funciona

fn() cria uma função espiã que registra chamadas no painel Ações. Quando o componente invoca o manipulador (por exemplo, um click emitido e mapeado para onClick), você vê a chamada e seus argumentos.

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

Mapeando eventos para manipuladores

O Vue emite eventos; o Storybook mapeia um arg on<Event> para essa emissão. Um evento de atualização emitido aparece por meio de um arg de ação onUpdate.

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

A função play

Uma história pode incluir uma função play que é executada após a renderização para simular a interação do usuário — clicar e digitar — e verificar o resultado. Isso transforma uma história em um teste de interação.

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

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

Fazendo verificações em play

Dentro de play, você pode fazer verificações com expect e confirmar que uma ação foi chamada, tornando os testes de interação visíveis diretamente no 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()
  },
}

Por que Controles + Ações + play são importantes

Juntos, eles tornam as histórias poderosas: os Controles exploram as propriedades, as Ações verificam se os eventos são disparados e play automatiza interações e verificações — documentação e testes em um só lugar.

Verificação rápida

Verifique sua compreensão sobre controles e ações.

Responda na aula interativa

Recapitulação

Você aprendeu sobre controles, ações e args:

argTypes configura o painel Controles: text, boolean, select (com options), color, number/range.
O complemento Actions registra eventos; conecte manipuladores com fn() ou mapeie eventos por meio de action.
A função play é executada após a renderização para simular interações com userEvent e fazer verificações com expect.
Juntos, eles tornam as histórias exploráveis, verificáveis e autodocumentadas.

Grátis para começar

Aprenda HTML com um tutor de IA — grátis

Escreva e execute código real no seu navegador, obtenha ajuda instantânea de um tutor de IA 24/7 e continue de onde parou na web ou no app.

Cursos: 42
Aulas: 156

Começar a aprender grátis Ver o curso completo

Perguntas Frequentes

A aula “Controles, ações e args” é grátis?

Sim — o texto completo de “Controles, ações e args” é grátis para ler aqui na web. Para praticá-la interativamente (um editor de código integrado e um tutor de IA 24/7) e desbloquear o restante do curso de Vue Academy, atualize para CoddyKit PRO. O curso de Vue Academy inclui 4 aulas no total.

O que vou aprender em “Controles, ações e args”?

argTypes para a interface de controles, complemento de ações para registro de eventos e play() para testes de interação. Você pratica Vue Academy com código prático que executa diretamente no navegador, e um tutor de IA 24/7 responde suas dúvidas enquanto trabalha na aula.

Preciso ter experiência prévia para começar Vue Academy?

Nenhuma experiência prévia é necessária. Vue Academy no CoddyKit é estruturado para alunos iniciantes até avançados, então você pode começar aqui ou desde o início e aprender no seu ritmo. Esta é a aula 3 de 4.

Quanto tempo leva a aula “Controles, ações e args”?

A maioria das aulas CoddyKit leva cerca de 5–10 minutos. Cada uma é compacta e interativa, então você faz progresso constante e retoma exatamente de onde parou entre web e app.

Posso escrever e executar código nesta aula de Vue Academy?

Sim. Cada aula de Vue Academy inclui um editor de código integrado, então você escreve e executa código real direto no navegador e recebe feedback de IA instantaneamente — nenhuma configuração local necessária.

Todas as aulas deste curso

Configuração do Storybook para Vue 3
Escrita de histórias de componentes
Controles, ações e args
Complementos do Storybook e testes de acessibilidade

← Voltar para Vue Academy