---
name: webapp-testing
description: "Testes web — unit, integration, e2e (Playwright/Cypress), visual regression, accessibility audit. Activates: testes, playwright, cypress, e2e, vitest, lighthouse ci, a11y."
category: development
keywords: [testing, playwright, cypress, vitest, e2e, a11y, visual-regression]
license: MIT
metadata:
  author: "Funnel Labs I.A — Anthony Nichols & André Cia"
  version: "1.0.0"
  consumed_by: [web-designer]
---

# Webapp Testing

Owned por `@web-designer`. Pirâmide de testes pragmática + CI gates.

## Pirâmide de testes (proporção sadia)

```
        /\
       /e2e\         5-10 critical paths (Playwright)
      /------\
     / integr \     30-50 (API + component+context)
    /----------\
   /   unit     \    100-300 (helpers, transforms, hooks)
  /--------------\
```

## Stack

| Camada | Tool | Por quê |
|---|---|---|
| Unit | Vitest | rápido, mesmo runner que Jest mas vite-native |
| Component | Testing Library + Vitest | foca no comportamento, não impl |
| Integration (API) | Vitest + supertest / msw | mock HTTP no boundary |
| E2E | Playwright | multi-browser, melhor DX que Cypress hoje |
| Visual | Chromatic ou Percy | snapshot visual de Storybook |
| A11y | axe-core via Playwright | CI gate |
| Lighthouse | Lighthouse CI | perf + a11y + SEO |

## E2E patterns (Playwright)

```ts
test('checkout completes for happy path', async ({ page }) => {
  await page.goto('/produto/x');
  await page.getByRole('button', { name: 'Comprar' }).click();
  await page.getByLabel('E-mail').fill('test@example.com');
  await page.getByLabel('Cartão').fill('4242424242424242');
  await page.getByRole('button', { name: 'Pagar' }).click();
  await expect(page.getByText('Pagamento confirmado')).toBeVisible();
});
```

- Use `getByRole`, `getByLabel`, `getByText` (nunca `data-testid` em primeiro lugar — força a11y).
- Test isolation: cada test cria fixture própria, nunca depende de ordem.
- Network: mock externals com Playwright `route()`, não bater em prod.

## CI gates obrigatórios (PR bloqueia se falhar)

1. Unit + integration: 100% pass.
2. E2E: 5-10 critical paths verdes (login, checkout, fluxo principal).
3. Lighthouse CI: scores não regridem >5pts.
4. axe a11y: zero violations Sério+Crítico.
5. Visual regression: zero diffs sem aprovação humana.

## Coverage

- Não chase 100%. 70-80% bem feito > 100% trivial.
- Branch coverage > line coverage como métrica.
- Não cobrir wrappers triviais.

## Anti-patterns

- ❌ Test trivial (`expect(component).toBeDefined()`).
- ❌ Mock everything — mock só nos boundaries (HTTP, DB).
- ❌ E2E pra cada permutação (lento; usar integration).
- ❌ Skipped tests acumulando — fix or delete.
- ❌ Snapshot test pra HTML inteiro (qualquer mudança quebra; teste assertions específicas).

## Cross-skill

- `senior-frontend` — TS strict permite testes mais simples (tipos cobrem casos).
- `web-performance-optimization` — Lighthouse CI fica aqui.
