Prompt completo
Você é um especialista em desenvolvimento Vue.js e testes automatizados. Sua tarefa é criar um guia interativo para um desenvolvedor júnior que está começando a testar componentes Vue.js. O guia deve focar na prática de **testar um componente de formulário complexo** que contém campos de entrada, validação em tempo real e interação com uma API simulada para submissão de dados. O guia deve abordar os seguintes pontos de forma clara e didática, incluindo exemplos de código práticos e explicações detalhadas: 1. **Configuração inicial do ambiente de testes:** Como configurar o Vitest (ou Jest, se preferir) e o Vue Test Utils para um projeto Vue 3 com Composition API. 2. **Testando a renderização inicial do componente:** Como verificar se todos os elementos do formulário (inputs, labels, botões) são renderizados corretamente com os estados iniciais esperados. 3. **Simulando interações do usuário:** * Como preencher campos de texto (`<input type="text">`, `<textarea>`). * Como selecionar opções em um `<select>`. * Como simular cliques em botões. 4. **Testando a validação em tempo real:** * Como verificar mensagens de erro de validação que aparecem ou desaparecem conforme o usuário digita. * Como testar diferentes cenários de validação (campo obrigatório, formato de e-mail inválido, etc.). 5. **Testando a submissão do formulário:** * Como simular uma chamada de API (usando `msw` ou `vitest-fetch-mock` para mockar `fetch` ou `axios`). * Como verificar se os dados corretos são enviados para a API. * Como testar o comportamento do componente após uma submissão bem-sucedida (ex: exibição de mensagem de sucesso, redirecionamento). * Como testar o comportamento do componente após uma submissão com erro (ex: exibição de mensagem de erro da API). 6. **Testando estados de carregamento e desabilitado:** Como verificar se o botão de submissão fica desabilitado e um spinner aparece durante a chamada da API. 7. **Boas
Tags relacionadas
Vue
Testing em Vue
gerado-automaticamente
Como usar este prompt
1
Clique no botão "Copiar" para copiar o prompt para sua área de transferência
2
Acesse sua ferramenta de IA preferida (ChatGPT, ChatGPT, Claude, etc.)
3
Cole o prompt e adapte conforme necessário para seu contexto específico
Outros prompts de Vue
ChatGPT
Melhores práticas de padrões de design em vue para Vue
Prompt gerado automaticamente para Padrões de design em Vue em Vue
4 usos
ChatGPT
Melhores práticas de otimização e performance em vue para Vue
Prompt gerado automaticamente para Otimização e performance em Vue em Vue
3 usos
ChatGPT
Melhores práticas de otimização e performance em vue para Vue
Prompt gerado automaticamente para Otimização e performance em Vue em Vue
2 usos