📑 Índice: Estrutura Modular (27 fev 2026)

🎯 Objetivo

Sistema de testes 100% modularizado com separação clara:

• ⚡ Testes rápidos (screenshots) → CI/CD
• 🎬 Testes lentos (vídeos) → Documentação/Demos

Status: ✅ Implementado, Documentado, Testado

---

📚 Documentação Disponível

1. Visão Geral Rápida

📄 MODULAR-TESTING-GUIDE.md

• Workflows práticos
• Checklist de status
• Links rápidos

2. Arquitetura Completa

📄 TESTING-ARCHITECTURE.md

• Diagrama do sistema
• Fluxos de execução
• Integração Frontend ↔ Backend
• Princípios de modularização

3. Frontend: Testes

📄 ../../frontend/tests/e2e/README.md

• Matriz de testes
• Estrutura de ficheiros
• Comandos de execução
• Padrão modular

4. Frontend: Login Tests Específico

📄 ../../frontend/tests/e2e/00-auth-login/README.md

• Detalhe dos 2 ficheiros
• Fluxo de trabalho
• Vantagens da modularização

5. Backend: Integração

📄 ../backend/TESTING-BACKEND.md

• API endpoints
• Database models
• Integração com Frontend
• Troubleshooting

---

📂 Ficheiros do Projeto

Frontend: Tests

frontend/tests/e2e/00-auth-login/
├── login.spec.ts          ⚡ (5s, rápido)
│   - Usa .fill() (instantâneo)
│   - Para CI/CD
│   - Output: 6 screenshots
│
├── login.videos.spec.ts   🎬 (12s, lento)
│   - Usa .type() com delays (60ms/char)
│   - Para gravação de vídeos
│   - Output: 6 screenshots com pauses
│
└── README.md              📖 Documentação

Frontend: Gerador

frontend/generate-video.js
├── Lê screenshots de test-results/
├── Cria vídeos FFmpeg
├── Output: 
│   - login-sucesso.mp4 (135KB)
│   - login-erro.mp4 (62KB)
└── Duração: ~3s

Frontend: UI

frontend/src/components/testing/
├── TestingVideosWithToggle.tsx  ⭐ Toggle entre modos
│   - Permite alternar Grid ↔ Minimalista
│   - Descrição de cada modo
│   - v2.3 (27 fev 2026)
│
├── TestingVideoTabOptionA.tsx   📊 Grid 2 colunas
│   - Layout lado-a-lado (Sucesso | Erro)
│   - ✅ UX otimizada v2.5:
│     • Clicar card → Seleciona + Autoplay + Atualiza player
│     • Badge dinâmico (⏸ Pausar / ▶ Play) no card selecionado
│     • SEM overlay nos cards (visual limpo)
│     • Player grande com overlay play no centro
│     • Auto-gestão: trocar card pausa o anterior
│   - Player grande abaixo (pausado, overlay com ícone)
│
├── TestingMainVideos.tsx        🎯 Minimalista
│   - Tabs simples
│   - Foco em 1 vídeo por vez
│
└── TestingVideoTab.tsx          📦 Legacy (backup)

Reconhece padrões:
- login-{sucesso|erro}.mp4
- {testname}-{sucesso|erro}.mp4

Agrupa por cenário:
- "Autenticação com Sucesso"
- "Autenticação com Erro"

**v2.5 UX (Final):**
✅ Clicar card → Seleciona + Autoplay no card + Player grande atualiza
✅ Badge dinâmico sempre visível quando selecionado
  • Em play → "⏸ Pausar"
  • Pausado → "▶ Play"
✅ Cards SEM overlay (visual limpo)
✅ Player grande COM overlay play no centro
✅ Autoplay apenas nos cards, player grande manual
✅ Loop infinito nos cards
✅ Sincronização com controles nativos
✅ Hover effects e transições suaves

Backend: Testing Module

backend/src/modules/testing/
├── routes.py              # API endpoints
│   └─ GET /api/testing/artifacts/videos
│
├── artifacts.py           # Gerenciamento
│   └─ Scaneia test-results/ + videos/
│
├── models/test_run.py     # Database
│   └─ TestRun model
│
└── database.py            # Integração BD

---

🔄 Fluxos de Execução

Fluxo 1: Desenvolvimento (Diário)

$ npx playwright test login.spec.ts
  ↓ (~5s)
  6 screenshots em test-results/
  ↓
  Backend API expõe em /api/testing/artifacts/videos
  ↓
  UI exibe categorizado

Fluxo 2: Geração de Vídeos

$ npx playwright test login.videos.spec.ts
  ↓ (~12s)
  6 screenshots com delays

$ node generate-video.js
  ↓ (~3s)
  login-sucesso.mp4 + login-erro.mp4 em test-results/videos/
  ↓
  Backend API expõe
  ↓
  UI exibe como vídeos

---

📋 Comparação: Antes vs Depois

❌ ANTES (Monolítico)

login.spec.ts (confuso)
├─ Testes rápidos (.fill)
├─ Testes lentos (.type com delays)
└─ Risco: mudança afeta ambos
  
Problemas:
- Difícil de manter
- Risco ao modificar
- Confusão sobre responsabilidade
- Não escalável

✅ DEPOIS (Modular)

login.spec.ts (rápido)
├─ 3 testes rápidos
├─ Para CI/CD
└─ ~5 segundos

login.videos.spec.ts (vídeos)
├─ 2 testes lentos
├─ Para gravação
└─ ~12 segundos

generate-video.js
├─ Cria vídeos FFmpeg
├─ Standalone
└─ ~3 segundos

Benefícios:
✅ Responsabilidade clara
✅ Risco zero
✅ Fácil de manter
✅ Escalável

---

🚀 Comandos Rápidos

Terminal 1: Backend

cd backend
python -m main
# → http://localhost:8000

Terminal 2: Frontend

cd frontend
npm run dev
# → http://localhost:3000

Terminal 3: Testes

cd frontend

# Screenshots (rápido)
npx playwright test login.spec.ts

# Vídeos (lento)
npx playwright test login.videos.spec.ts
node generate-video.js

# Verificar
curl http://localhost:8000/api/testing/artifacts/videos | python3 -m json.tool

---

📊 Matriz de Status

Componente	Status	Ficheiro
Tests Rápido	✅	login.spec.ts
Tests Vídeo	✅	login.videos.spec.ts
Generator	✅	generate-video.js
API	✅	backend/src/modules/testing/routes.py
UI	✅	TestingVideoTab.tsx
Database	✅	backend/src/modules/testing/models/test_run.py
Docs (Visão)	✅	TESTING-ARCHITECTURE.md
Docs (Frontend)	✅	frontend/tests/e2e/README.md
Docs (Backend)	✅	backend/TESTING-BACKEND.md
Docs (Rápida)	✅	MODULAR-TESTING-GUIDE.md
README Login	✅	frontend/tests/e2e/00-auth-login/README.md

---

🎯 Próximos Passos (Opcional)

1. Expandir Videos:

   • Criar locations-videos.spec.ts
   • Gerar vídeos de CRUD

2. CI/CD Pipeline:

   • npm run test:e2e → login.spec.ts (fast)
   • npm run test:videos → login.videos.spec.ts + generate-video.js

3. Storage Externo:

   • Publicar vídeos em S3/CDN
   • Versioning de artefatos

4. Dashboard Qualidade:

   • Trends de testes
   • Comparar vídeos antes/depois

---

🔍 Verificação: Tudo Sincronizado?

# 1. Verificar testes existem
ls -la frontend/tests/e2e/00-auth-login/*.spec.ts

# 2. Verificar generator existe
ls -la frontend/generate-video.js

# 3. Verificar backend API
grep -r "artifacts/videos" backend/src/

# 4. Verificar UI reconhece padrões
grep -r "sucesso\|erro" frontend/src/components/testing/

# 5. Verificar documentação
find . -name "*TESTING*" -o -name "*MODULAR*" | wc -l
# → Deve haver 4+ ficheiros de docs

---

📞 Suporte Rápido

Problema: Videos não aparecem

# Executar
npx playwright test login.videos.spec.ts
node generate-video.js

# Verificar
curl http://localhost:8000/api/testing/artifacts/videos

Problema: Tests falham

# Verificar requisitos
npx playwright install

# Rodar com debug
npx playwright test --debug

Problema: Backend não serve arquivos

# Verificar path
grep -r "TEST_RESULTS_PATH" backend/

# Verificar permissões
chmod 755 frontend/test-results/videos/

---

🎓 Referência Rápida

Preciso de...	Veja...
Quick start	MODULAR-TESTING-GUIDE.md
Arquitetura completa	TESTING-ARCHITECTURE.md
Executar testes	frontend/tests/e2e/README.md
Detalhes login	frontend/tests/e2e/00-auth-login/README.md
Backend integration	backend/TESTING-BACKEND.md
Troubleshooting	Qualquer README acima

---

Criado: 27 de fevereiro de 2026
Status: ✅ Estrutura 100% Modular
Próxima revisão: Quando expandir para novos cenários