Testing - Introducción

Floutic incluye una suite completa de tests para garantizar la calidad y estabilidad del código.

Cobertura de Tests

Backend

• Suite amplia de tests automatizados (endpoints, servicios, integraciones)
• Tests de seguridad y validaciones
• Tests de concurrencia y race conditions

[!IMPORTANT] TODOS los tests deben ejecutarse dentro del entorno Docker. No ejecutes npm test o pytest en tu máquina local.

Frontend

• Suite de tests unitarios con Vitest
• Suite E2E con Playwright (flujos críticos y seguridad)
• Tests de componentes, hooks, stores
• Specs automatizados en frontend/tests/e2e
• Cobertura y auditoría en frontend/tests/e2e/E2E_COVERAGE.md, AUDIT.md, SCENARIOS.md
• Variables E2E: plantilla en .env.e2e (el script ./scripts/test_e2e.sh aplica overrides sobre .env)

Guías de Testing

• Testing Backend - Guía completa de tests del backend
• Testing Frontend - Guía completa de tests del frontend
• Tests E2E - Tests end-to-end con Playwright
• Debugging E2E Avanzado - Herramientas avanzadas de debugging
• Tests de Seguridad - Tests de seguridad

Ejecutar Tests

El proyecto utiliza un comando unificado /test que orquesta la ejecución en contenedores Docker.

Comando Unificado (Recomendado)

Comando Unificado (Recomendado)

# Ayuda y lista de opciones
/test help

# Tests Unitarios (Backend + Frontend)
/test

# Tests E2E (End-to-End)
/test e2e

# Suite Completa (Unitarios + E2E)
/test all

Ejecución Granular

También puedes ejecutar suites específicas y pasar argumentos:

# Backend solamente (pasa argumentos a pytest)
/test backend tests/endpoints/projects/ -v

# Frontend solamente (pasa argumentos a vitest)
/test frontend src/components/Button.test.tsx

Scripts Subyacentes

El comando /test invoca internamente los scripts de infraestructura:

• Backend: ./scripts/test_backend.sh
• Frontend: ./scripts/test_frontend_unit.sh
• E2E: ./scripts/test_e2e.sh
• E2E Debugging: ./scripts/debug_e2e.sh (para debugging avanzado)

Documentación Adicional

Para más detalles, consulta:

• frontend/tests/e2e/E2E_COVERAGE.md - Cobertura E2E actual
• frontend/tests/e2e/AUDIT.md - Auditoría de suite Playwright
• frontend/tests/e2e/SCENARIOS.md - Escenarios Playwright activos
• frontend/tests/DEBUGGING_GUIDE.md - Guía completa de debugging avanzado
• Guía de Pruebas Manuales - Experto
• Guía de Pruebas Manuales - Empresa

---

🔧 Debugging E2E Avanzado

Floutic incluye un sistema completo de debugging para tests E2E inspirado en patrones de agent-browser (Vercel Labs) pero implementado con Playwright.

Características del Sistema de Debugging

Captura de Errores de Consola

Detecta automáticamente errores de consola durante la ejecución de tests.

import { DebugHelpers } from '../tests/utils/debug-helpers';

test('test sin errores', async ({ page }) => {
  DebugHelpers.captureConsoleErrors(page);
  // ... acciones del test
  DebugHelpers.assertNoConsoleErrors(); // Falla si hay errores
});

Ejecutar: /test e2e debug [test_file] console

Debugging de Red

Analiza todas las requests HTTP para detectar fallos y lentitud.

DebugHelpers.setupNetworkDebugging(page);
// ... acciones
const failedRequests = DebugHelpers.getFailedRequests();
const slowRequests = DebugHelpers.getSlowRequests(2000);

Ejecutar: /test e2e debug [test_file] network

Grabación de Video Manual

Graba videos para demos y documentación.

const videoPage = await DebugHelpers.startManualVideoRecording(context, 'videos');
// ... acciones
await DebugHelpers.stopManualVideoRecording(videoPage);

Ejecutar: /test e2e debug [test_file] video

Snapshots Visuales

Captura el estado visual de la página en cualquier momento.

await DebugHelpers.takeSnapshot(page, 'nombre-snapshot', {
  screenshot: true,
  elements: true,
  network: true,
});

Ejecutar: /test e2e debug [test_file] snapshot

Modos de Debugging Disponibles

Comando	Modo	Descripción
/test e2e demo	demo	Demo completa con todos los features
/test e2e debug [file] debug	debug	Playwright Inspector interactivo
/test e2e debug [file] console	console	Solo errores de consola
/test e2e debug [file] network	network	Solo logging de red
/test e2e debug [file] video	video	Grabación de video
/test e2e debug [file] snapshot	snapshot	Snapshots visuales
/test e2e debug [file] headed	headed	Navegador visible
/test e2e debug [file] trace	trace	Traces completas

Ejemplos de Uso

Ejecutar Demo Completa

/test e2e demo

Este comando ejecuta frontend/tests/debug-helpers-demo.spec.ts con todos los features de debugging habilitados.

Debug Interactivo de Test Específico

/test e2e debug login-test.spec.ts

Abre el Playwright Inspector para debugging paso a paso.

Solo Verificar Errores de Consola

/test e2e debug dashboard.spec.ts console

Ejecuta el test y reporta solo los errores de consola encontrados.

Grabar Demo con Video

/test e2e debug auth.spec.ts video

Ejecuta el test con grabación de video para crear demos.

Archivos de Documentación

• frontend/tests/DEBUGGING_GUIDE.md - Guía completa con 11+ ejemplos
• frontend/tests/debug-helpers-demo.spec.ts - Test de demo con todos los patrones
• frontend/tests/utils/debug-helpers.ts - Módulo DebugHelpers con 12 métodos
• scripts/debug_e2e.sh - Script de debugging con 9 modos

Patrones Comunes de Debugging

Pattern 1: Debug de Login Fallido

test('debug login fallido', async ({ page }) => {
  DebugHelpers.captureConsoleErrors(page);
  DebugHelpers.setupNetworkDebugging(page);

  await DebugHelpers.takeSnapshot(page, '01-inicial');
  await page.goto('/login');
  // ... llenar formulario ...
  await DebugHelpers.takeSnapshot(page, '02-formulario-lleno');
  await page.click('[data-testid="submit-button"]');
  await DebugHelpers.takeSnapshot(page, '03-despues-submit');

  DebugHelpers.assertNoConsoleErrors();
});

Pattern 2: Debug de API Requests

test('debug API requests', async ({ page }) => {
  DebugHelpers.setupNetworkDebugging(page);
  await TestUtils.loginAsEmpresa(page);
  await page.goto('/proyectos');

  // Verificar requests fallidas
  const failed = DebugHelpers.getFailedRequests();
  expect(failed.length).toBe(0);

  // Verificar requests lentas (> 2s)
  const slow = DebugHelpers.getSlowRequests(2000);
  if (slow.length > 0) {
    console.warn('Requests lentas detectadas:', slow);
  }
});

Pattern 3: Verificación de Estado de Autenticación

test('debug auth state', async ({ page }) => {
  await TestUtils.loginAsExperto(page);

  const authState = await DebugHelpers.evaluateAndLog(page, () => {
    const authService = (window as any).secureAuthService;
    return {
      isAuthenticated: authService?.isAuthenticated?.() ?? false,
      hasAccessToken: !!authService?.getAccessToken?.(),
      userRole: authService?.getUser?.()?.role,
    };
  }, [], 'Auth state');

  expect(authState.isAuthenticated).toBe(true);
});

Ver Reportes, Snapshots y Videos

Después de ejecutar tests con debugging:

Ver Snapshots Visuales

ls -lh frontend/snapshots/
# 01-login-page.png
# 02-form-filled.png
# 03-dashboard-loaded.png

Ver Videos de Tests

ls -lh frontend/videos/
# demo-login.webm
# dashboard-test.webm

Ver Reportes HTML

cd frontend
npx playwright show-report

Ventajas del Sistema de Debugging

1. Sin Nuevas Dependencias: Usa solo Playwright existente
2. Zero Riesgo: Stack estable, sin herramientas experimentales
3. Máximo Valor: 70+ tests existentes se benefician inmediatamente
4. Debugging más Rápido: Captura automática de errores, snapshots, logs de red
5. Documentación Completa: Guías, ejemplos y patrones incluidos

Comparación con Agent-Browser

Feature	DebugHelpers (Nuestra Solución)
Console errors	✅ captureConsoleErrors()
Network debugging	✅ setupNetworkDebugging()
Video recording	✅ startManualVideoRecording()
Snapshots	✅ takeSnapshot() (mejorado)
JavaScript execution	✅ evaluateAndLog()
Wait strategies	✅ waitForText/URL/Condition()
Integración Docker	✅ Ya integrado
Estabilidad	✅ Production-ready
Comunidad	✅ 60k forks (Playwright)

Próximos Pasos

1. ✅ Ejecutar demo: /test e2e demo
2. ✅ Leer guía: frontend/tests/DEBUGGING_GUIDE.md
3. ✅ Aplicar DebugHelpers a tests críticos
4. ✅ Usar /test e2e debug [file] para debugging interactivo