📊 Capítulo 12: Testes Automatizados com Vitest e Playwright

Especialização Frontend com Svelte 5 & SvelteKit

🗺️ Visão Arquitetural

flowchart TD
    IN["Entrada de Dados / Requisição"] --> PROC["Processamento: Testes Automatizados com Vitest e Playwright"]
    PROC --> OUT["Saída Reativa no DOM / Resposta"]

    style IN fill:#e1f5fe,stroke:#03a9f4,stroke-width:1.5px
    style PROC fill:#fff3e0,stroke:#ff9800,stroke-width:2px
    style OUT fill:#e8f5e9,stroke:#4caf50,stroke-width:2px

🎯 Slide 1: Pilares e Conceitos Chave

• Sem Virtual DOM: Compilação direta para código imperativo de manipulação do DOM real.
• Signals Nativos com Runes: Reatividade granular orientada a dependências pontuais.
• Componentes Coesos: Lógica, template e estilo isolados no mesmo arquivo .svelte.

🎯 Slide 2: Exemplo Prático em Ação

<script lang="ts">
  // Implementação demonstrativa de Testes Automatizados com Vitest e Playwright
  let ativo = $state(true);
</script>

<div class="card">
  <h3>Testes Automatizados com Vitest e Playwright</h3>
  <p>Status: {ativo ? 'Ativo' : 'Pausado'}</p>
</div>

<style>
  .card { padding: 1rem; border-left: 4px solid #ff3e00; background: #fafafa; }
</style>

🎯 Slide 3: Boas Práticas e Produção

• Utilize TypeScript estrito em todos os componentes via lang="ts".
• Valide schemas de dados com Zod e cubra cenários com testes no Vitest.
• Meça sempre as métricas Core Web Vitals (LCP, INP, CLS) em produção.