📊 Capítulo 16: Testes com TestBed & Vitest

Especialização em Frontend com Angular

🗺️ A Pirâmide de Testes Unitários de Componentes Standalone

flowchart TD
    CONFIG["TestBed.configureTestingModule({\n  imports: [CardProdutoComponent],\n  providers: [{ provide: ApiService, useValue: mockApiService }]\n})"]
    --> FIXTURE["const fixture = TestBed.createComponent(CardProdutoComponent)"]
    FIXTURE --> COMP["const comp = fixture.componentInstance"]
    COMP --> SET_INPUT["fixture.componentRef.setInput('produto', mockProduto)"]
    SET_INPUT --> DETECT["fixture.detectChanges() (Atualiza o DOM do template)"]
    DETECT --> ASSERT["expect(fixture.nativeElement.textContent).toContain('Notebook')"]

    style CONFIG fill:#ede7f6,stroke:#512da8,stroke-width:2px
    style FIXTURE fill:#fff3e0,stroke:#ff9800,stroke-width:2px
    style COMP fill:#e1f5fe,stroke:#03a9f4,stroke-width:1.5px
    style SET_INPUT fill:#fff9c4,stroke:#fbc02d,stroke-width:1.5px
    style DETECT fill:#e8f5e9,stroke:#4caf50,stroke-width:2px
    style ASSERT fill:#c8e6c9,stroke:#2e7d32,stroke-width:2px

🎯 Slide 1: Migrando do Karma/Jasmine para Vitest

• Karma foi oficialmente depreciado pela equipe do Angular.

• O Vitest / Jest roda diretamente no terminal sem precisar abrir uma janela real do navegador Google Chrome, executando milhares de testes em poucos segundos!

🎯 Slide 2: Testando Componentes com Signals

it('deve calcular valor com desconto via computed signal', () => {
  const fixture = TestBed.createComponent(CardProdutoComponent);
  fixture.componentRef.setInput('produto', { id: 1, nome: 'Mouse', preco: 100 });
  fixture.detectChanges();

  expect(fixture.componentInstance.valorComDesconto()).toBe(90);
});

🎯 Slide 3: HttpTestingController

• Permite testar chamadas HTTP em serviços sem fazer conexões de rede reais, respondendo com payloads mockados e validando métodos GET/POST!