🚀 Capítulo 19: Testes Unitários em Angular

🎯 Objetivo da Aula

Ao final desta aula, você entenderá a importância dos testes automatizados, conhecerá a estrutura de um arquivo de teste no Angular (.spec.ts) e saberá como escrever testes simples para garantir que as funções da sua nave funcionam antes de decolar.

---

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

Você não quer descobrir que o botão de “Ejetar” não funciona quando estiver no meio de uma batalha espacial! Seu desafio hoje é criar um Simulador de Voo (Testes Unitários) para garantir que o sistema de oxigênio que criamos na aula passada funciona exatamente como esperado!

---

🧠 Fundamentos: A Teoria Traduzida

Testes unitários servem para testar a menor unidade de código possível (geralmente uma função ou um componente) de forma isolada.

No Angular, os testes já vêm configurados de fábrica usando duas ferramentas:

• Jasmine: O framework onde escrevemos os testes (funções como describe, it e expect).
• Karma: O executor que abre o navegador e roda os testes.

Estrutura de um Teste:

Todo componente criado pela CLI vem com um arquivo .spec.ts. Nele você encontrará:

• describe('NomeDoComponente', () => { ... }): Um grupo de testes.
• it('deve fazer tal coisa', () => { ... }): Um teste específico.
• expect(valor).toBe(esperado): A comparação que diz se o teste passou ou falhou.

---

📖 Exemplo Guiado: Testando o Oxigênio

Vamos escrever um teste para o componente que criamos na aula passada.

🛠️ Passo a Passo (TypeScript)

Abra o arquivo src/app/painel-controle/painel-controle.component.spec.ts e adicione um novo teste dentro do describe:

it('deve diminuir o oxigênio em 5 ao chamar gastarOxigenio', () => {
  // 1. Instanciamos o componente (ou usamos o 'fixture' criado pelo Angular)
  const component = fixture.componentInstance;
  
  // 2. Garantimos que ele começa com 100
  expect(component.oxigenio()).toBe(100);
  
  // 3. Chamamos a função
  component.gastarOxigenio();
  
  // 4. Verificamos se o valor mudou para 95
  expect(component.oxigenio()).toBe(95);
});

🕹️ Como Executar e Testar no VS Code

1. No terminal, execute o comando:

   ng test

2. O Angular abrirá uma janela do navegador (provavelmente o Chrome).
3. Você verá uma tela verde listando os testes que passaram. Se o teste falhar, a tela ficará vermelha e dirá o que deu errado!

---

🛠️ Prática Obrigatória 1

Escreva um teste que verifique se o statusAlerta() (aquele computed do capítulo passado) realmente retorna '🚨 CRÍTICO' quando o oxigênio for menor que 20.

---

🛠️ Prática Obrigatória 2

Crie uma função simples no seu componente chamada recuperarOxigenio() que define o valor de volta para 100. Escreva um teste para garantir que essa função funciona.

---

🔑 Gabarito de Código/Fórmulas

Prática 1:

it('deve mostrar alerta crítico quando oxigênio for menor que 20', () => {
  const component = fixture.componentInstance;
  
  // Forçamos o valor do signal para 15
  component.oxigenio.set(15);
  
  // Verificamos o computed
  expect(component.statusAlerta()).toBe('🚨 CRÍTICO');
});

Prática 2:

No componente: recuperarOxigenio() { this.oxigenio.set(100); } No teste:

it('deve resetar o oxigênio para 100', () => {
  const component = fixture.componentInstance;
  component.oxigenio.set(50);
  component.recuperarOxigenio();
  expect(component.oxigenio()).toBe(100);
});

---

← Capitulo Anterior | Proximo Capitulo →