Spec Frontend Com Angular • Trilha Progressiva em 4 Níveis

🎯 Nível 1: Fundamentos

Problema 16.1 — Configuração de Testes de Componente com TestBed

Contexto: Configuração de Testes de Componente com TestBed no contexto de Testes Automatizados com TestBed e Vitest.

Requisitos de Execução:

  1. Configurar TestBed.configureTestingModule e instanciar ComponentFixture.

Resultado Esperado

Componente renderizado e testado com sucesso no TestBed.

📤 Instruções de Entrega (Microsoft Teams)

  1. Salve o arquivo como: Atividade_16_1_SeuNome
  2. Envie na tarefa: Atividade Cap 16 - Testes Automatizados com TestBed e Vitest
🔑 Gabarito de Código & Solução Comentada 
// card.component.spec.ts
import { ComponentFixture, TestBed } from '@angular/core/testing';
import { CardSaudacaoComponent } from './card-saudacao.component';
import { describe, it, expect, beforeEach } from 'vitest';

describe('CardSaudacaoComponent', () => {
  let component: CardSaudacaoComponent;
  let fixture: ComponentFixture<CardSaudacaoComponent>;

  beforeEach(async () => {
    await TestBed.configureTestingModule({ imports: [CardSaudacaoComponent] }).compileComponents();
    fixture = TestBed.createComponent(CardSaudacaoComponent);
    component = fixture.componentInstance;
    fixture.detectChanges();
  });

  it('deve criar o componente', () => {
    expect(component).toBeTruthy();
  });
});

🔍 Nível 2: Prática

Problema 16.2 — Testes de Interação com DebugElement e Disparo de Eventos

Contexto: Testes de Interação com DebugElement e Disparo de Eventos no contexto de Testes Automatizados com TestBed e Vitest.

Requisitos de Execução:

  1. Localizar botão com fixture.debugElement.query(By.css('button')) e simular clique.

Resultado Esperado

Clique simulado e contagem atualizada no DOM verificada.

📤 Instruções de Entrega (Microsoft Teams)

  1. Salve o arquivo como: Atividade_16_2_SeuNome
  2. Envie na tarefa: Atividade Cap 16 - Testes Automatizados com TestBed e Vitest
🔑 Gabarito de Código & Solução Comentada 
// button.spec.ts
import { By } from '@angular/platform-browser';

it('incrementa valor ao clicar no botao', () => {
  const btn = fixture.debugElement.query(By.css('button'));
  btn.triggerEventHandler('click', null);
  fixture.detectChanges();
  expect(fixture.nativeElement.textContent).toContain('Total: 1');
});

⚡ Nível 3: Integração

Problema 16.3 — Mock de Serviços HTTP com HttpTestingController

Contexto: Mock de Serviços HTTP com HttpTestingController no contexto de Testes Automatizados com TestBed e Vitest.

Requisitos de Execução:

  1. Testar serviço HTTP mockando respostas com provideHttpClientTesting() e HttpTestingController.

Resultado Esperado

Chamada HTTP interceptada e resposta mock retornada no teste.

📤 Instruções de Entrega (Microsoft Teams)

  1. Salve o arquivo como: Atividade_16_3_SeuNome
  2. Envie na tarefa: Atividade Cap 16 - Testes Automatizados com TestBed e Vitest
🔑 Gabarito de Código & Solução Comentada 
// service.spec.ts
import { TestBed } from '@angular/core/testing';
import { HttpTestingController, provideHttpClientTesting } from '@angular/common/http/testing';
import { provideHttpClient } from '@angular/common/http';
import { ProdutoService } from './produto.service';

describe('ProdutoService', () => {
  let service: ProdutoService;
  let httpMock: HttpTestingController;

  beforeEach(() => {
    TestBed.configureTestingModule({
      providers: [ProdutoService, provideHttpClient(), provideHttpClientTesting()]
    });
    service = inject(ProdutoService);
    httpMock = inject(HttpTestingController);
  });
});

🏆 Nível 4: Desafio Corporativo

Problema 16.4 — Testes Isolados de Signals e Computed sem TestBed

Contexto: Testes Isolados de Signals e Computed sem TestBed no contexto de Testes Automatizados com TestBed e Vitest.

Requisitos de Execução:

  1. Testar lógica reativa de Signals instanciando a classe diretamente em testes unitários rápidos.

Resultado Esperado

Teste unitário instantâneo executado sem overhead de compilação do TestBed.

📤 Instruções de Entrega (Microsoft Teams)

  1. Salve o arquivo como: Atividade_16_4_SeuNome
  2. Envie na tarefa: Atividade Cap 16 - Testes Automatizados com TestBed e Vitest
🔑 Gabarito de Código & Solução Comentada 
// signal-isolated.spec.ts
import { CarrinhoSignalsComponent } from './signals-computed.component';

it('calcula total corretamente', () => {
  const comp = new CarrinhoSignalsComponent();
  comp.preco.set(200);
  comp.quantidade.set(3);
  expect(comp.total()).toBe(600);
});