🚀 Capítulo 18: Testes - Simulador

🎯 Objetivo da Aula

Ao final desta aula, você entenderá como escrever testes automatizados para os seus componentes Vue usando a biblioteca Vue Test Utils e o executor Vitest, garantindo que as funções da sua nave funcionem antes de decolar.

---

🏢 O Cenário Prático (Seu Desafio)

Você não quer descobrir que o botão de acelerar está quebrado no meio de uma perseguição! Seu desafio hoje é criar um Simulador de Voo (Testes de Componente) para garantir que o botão de acelerar do Capítulo 4 realmente aumenta a velocidade na tela!

---

🧠 Fundamentos: A Teoria Traduzida

Testar no Vue 3 com Vite é muito simples porque usamos o Vitest (que é super rápido).

As principais funções que usamos da biblioteca Vue Test Utils são:

1. mount: Desenha o componente Vue em uma memória virtual para podermos testá-lo.
2. wrapper: É o objeto que representa o componente montado. Através dele podemos procurar textos e clicar em botões.

---

📖 Exemplo Guiado: Testando o Botão de Acelerar

Vamos escrever um teste para o componente que tem o botão de acelerar.

🛠️ Passo a Passo (Código do Teste)

Crie um arquivo chamado App.test.js na pasta src e adicione o código:

import { mount } from '@vue/test-utils';
import { expect, test } from 'vitest';
import App from './App.vue';
 
test('deve aumentar a velocidade ao clicar no botão acelerar', async () => {
  // 1. Montamos o componente
  const wrapper = mount(App);
 
  // 2. Verificamos se começa em 0
  expect(wrapper.text()).toContain('Velocidade Atual: 0 km/h');
 
  // 3. Procuramos o botão e simulamos o clique
  const botao = wrapper.find('button');
  await botao.trigger('click'); // Usamos await porque o Vue atualiza a tela de forma assíncrona
 
  // 4. Verificamos se mudou para 10
  expect(wrapper.text()).toContain('Velocidade Atual: 10 km/h');
});

🕹️ Como Executar e Testar no VS Code

1. Para rodar os testes, geralmente adicionamos o comando no package.json e rodamos:

   npm run test

2. O terminal mostrará se o teste passou (verde) ou se falhou (vermelho).

---

🛠️ Prática Obrigatória 1

Escreva um teste que verifique se o título “Velocímetro da Nave” está aparecendo na tela assim que o componente carrega.

---

🛠️ Prática Obrigatória 2

Escreva um teste para o botão “Frear” (da prática do Capítulo 4), garantindo que ele diminui a velocidade quando clicado.

---

🔑 Gabarito de Código/Fórmulas

Prática 1:

test('deve mostrar o título do velocímetro', () => {
  const wrapper = mount(App);
  expect(wrapper.find('h1').text()).toBe('Velocímetro da Nave');
});

---

← Capitulo Anterior | Proximo Capitulo →