Saltar al contenido principal

Testing Frontend

Floutic incluye una suite completa de tests con Playwright para E2E y Vitest para tests unitarios, garantizando calidad y confiabilidad.

Tests Unitarios con Vitest​

ApiClient y FormData​

Archivo: frontend/src/lib/api/__tests__/client.test.ts

Tests para postFormData():

  • Subida exitosa de FormData
  • Manejo de errores de red
  • Manejo de errores HTTP
  • Inclusión correcta de headers de autenticación
  • Manejo de respuestas no-JSON

Nota: El método postFormData() usa Fetch API directamente para evitar problemas con net::ERR_BLOCKED_BY_CLIENT y manejar correctamente el Content-Type con boundary. Este método se usa para subidas de imágenes de perfil y otros archivos.

Tests E2E con Playwright​

Configuración​

Archivo: playwright.config.ts

Características:

  • Navegadores desktop y mobile en paralelo
  • Proyectos/entornos configurables por suite
  • Headless mode para CI
  • UI mode para depuración

Ejecutar Tests E2E​

# Ejecutar toda la suite
./scripts/test_e2e.sh

# Ejecutar con interfaz visual (ideal para depurar)
./scripts/test_e2e.sh --ui

# Ejecutar un archivo específico
./scripts/test_e2e.sh tests/e2e/complete-project-flow.spec.ts

# Ejecutar con filtro
./scripts/test_e2e.sh --grep "Stripe Connect"

# Generar reporte HTML
./scripts/test_e2e.sh --reporter=html

Variables E2E:

  • Plantilla: .env.e2e
  • El script ./scripts/test_e2e.sh usa .env y aplica overrides temporales (luego lo restaura).
  • Si necesitas un baseline coherente:
cp .env.e2e .env

Suites de Tests​

  • Los specs viven en frontend/tests/e2e y cubren flujos multi-rol (auth, proyectos, hitos, pagos, chat, notificaciones, reseñas, admin, etc.).
  • El estado de cobertura y la clasificación se documentan en frontend/tests/e2e/E2E_COVERAGE.md, frontend/tests/e2e/SCENARIOS.md y frontend/tests/e2e/AUDIT.md.
  • Para ejecutar un subconjunto usa --grep o un archivo específico.

Specs activos (2026-01-15)​

La suite oficial consta de 72 archivos .spec.ts y 554 tests individuales, organizados por criticidad y área funcional.

  • admin-role-complete.spec.ts
  • ... (Ver suite completa en e2e.md)

Tests de Seguridad​

  • La cobertura de seguridad se valida dentro de la misma suite Playwright.
  • Incluye verificaciones de cookies HttpOnly, CSRF, rate limiting, headers y sanitización XSS.

Scripts de Testing​

# Script completo (desactiva rate limiting, habilita reset y ejecuta Playwright)
./scripts/test_e2e.sh

# Ajustar paralelismo o filtrar suites
PLAYWRIGHT_WORKERS=2 ./scripts/test_e2e.sh --grep "stripe-onboarding"

Tests Unitarios con Vitest​

Configuración​

Archivo: vitest.config.ts

Características:

  • Configuración optimizada para React y Astro
  • Mocks de módulos
  • Cobertura de código
  • Tests rápidos (~13 segundos en hardware local)

Estado Actual​

  • Consulta los reportes de CI para métricas actualizadas.
  • La suite se mantiene en frontend/src/**/__tests__ y se ejecuta en Docker.

Ejecutar Tests Unitarios​

# Ejecutar toda la suite
./scripts/test_frontend_unit.sh

# Ejecutar un archivo o patrón específico
./scripts/test_frontend_unit.sh src/components/features/__tests__/DashboardExperto.test.tsx

# Ejecutar modo watch
./scripts/test_frontend_unit.sh --watch

# Ejecutar con cobertura de código
docker compose exec frontend npm run test:coverage

Tests por Categoría​

Tests de API​

  • projects.test.ts: Tests de API de proyectos (24 tests)
  • sanitizer.test.ts: Tests de sanitización (27 tests)

Tests de Componentes​

  • MetricsChart.test.tsx: Tests de gráficos (9 tests)
  • UserTour.test.tsx: Tests de tours guiados (9 tests)
  • RequestBudgetForm.test.tsx: Tests de formulario de presupuesto (12 tests)
  • ProposalComparison.test.tsx: Tests de comparación de propuestas (18 tests)
  • ProjectTimeline.test.tsx: Tests de timeline de proyecto (20 tests)
  • DeliveryApproval.test.tsx: Tests de aprobación de entregas (21 tests)
  • DisputeForm.test.tsx: Tests de formulario de disputas (18 tests)
  • DashboardEmpresa.test.tsx: Tests de dashboard empresa (8 tests)
  • ProjectProposals.test.tsx: Tests de propuestas de proyecto (8 tests)
  • ExpertSelectionModal.test.tsx: Tests de modal de selección (8 tests)
  • DashboardExperto.test.tsx: Tests de dashboard experto (6 tests)
  • ProjectForm.test.tsx: Tests de formulario de proyecto (13 tests) ⭐ Nuevo
    • Renderizado del formulario
    • Validación de campos
    • Manejo de error FISCAL_DATA_REQUIRED
    • Integración con FiscalDataModal

Tests de Hooks​

  • useDeliverables.test.ts: Tests de hook de entregables (7 tests)
  • useProjectTimeline.test.ts: Tests de hook de timeline (8 tests)
  • useDisputeForm.test.ts: Tests de hook de disputas (6 tests)
  • useDeliveryModals.test.ts: Tests de hook de modales (5 tests)

Tests de Componentes UI​

  • DeliveryFilters.test.tsx: Tests de filtros de entregas (4 tests)
  • DeliverableCard.test.tsx: Tests de tarjeta de entregable (10 tests)
  • ProjectProgress.test.tsx: Tests de progreso de proyecto (5 tests)
  • MilestoneCard.test.tsx: Tests de tarjeta de hito (12 tests)
  • ProjectInfo.test.tsx: Tests de información de proyecto (6 tests)
  • DisputeFormFields.test.tsx: Tests de campos de disputa (8 tests)

Infraestructura de Testing​

Page Object Model​

Patrones reutilizables en tests/page-objects/:

  • LoginPage
  • DashboardPage
  • ProjectPage
  • etc.

Fixtures​

Datos de prueba centralizados en tests/fixtures/:

  • Usuarios de prueba
  • Proyectos de prueba
  • Datos mock

Mocks de API​

Simulación de backend en tests/mocks/:

  • Endpoints mockeados
  • Respuestas predefinidas
  • Estados de error

Global Setup/Teardown​

  • global-setup.ts: Reinicia el escenario demo antes de Playwright
  • global-teardown.ts: Limpia después de Playwright
  • Evita residuos en la base de datos

Utilidades​

Helpers para tests en tests/utils.ts:

  • Helpers de autenticación
  • Helpers de navegación
  • Helpers de formularios

Cobertura de Código​

Generar Reporte​

docker compose exec frontend npm run test:coverage

Objetivo​

  • Cobertura objetivo: 100% en componentes críticos
  • Cobertura actual: 100% ✅

Mejores Prácticas​

Escribir Tests E2E​

  1. Usar Page Object Model para reutilización
  2. Usar fixtures para datos de prueba
  3. Limpiar estado entre tests
  4. Usar selectores estables (data-testid)
  5. Esperar elementos antes de interactuar

Escribir Tests Unitarios​

  1. Mockear dependencias externas
  2. Testear comportamiento, no implementación
  3. Usar describe/it para organización
  4. Testear casos edge y errores
  5. Mantener tests rápidos y aislados

Más Información​