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 E2E con Playwright​

Configuración​

Archivo: playwright.config.ts

Características:

  • Chrome Desktop y Mobile Chrome en paralelo
  • 4 specs → 8 ejecuciones por suite
  • Headless mode para CI
  • UI mode para depuración

Ejecutar Tests E2E​

# Ejecutar toda la suite
docker compose exec frontend npx playwright test

# Ejecutar con interfaz visual (ideal para depurar)
docker compose exec frontend npx playwright test --ui

# Ejecutar un archivo específico
docker compose exec frontend npx playwright test tests/e2e/complete-project-flow.spec.ts

# Ejecutar con filtro
docker compose exec frontend npx playwright test --grep "Stripe Connect"

# Generar reporte HTML
docker compose exec frontend npx playwright test --reporter=html

Suites de Tests​

Tests Funcionales​

  • authentication.spec.ts: Tests de autenticación básica
  • navigation.spec.ts: Tests de navegación
  • forms.spec.ts: Tests de formularios
  • marketplace.spec.ts: Tests del marketplace
  • dashboards.spec.ts: Tests de dashboards
  • admin.spec.ts: Tests de panel admin
  • experts.spec.ts: Tests de búsqueda de expertos
  • milestones.spec.ts: Tests de gestión de hitos
  • reviews.spec.ts: Tests de reseñas
  • public-profiles.spec.ts: Tests de perfiles públicos
  • legal-pages.spec.ts: Tests de páginas legales
  • accessibility.spec.ts: Tests de accesibilidad
  • performance.spec.ts: Tests de rendimiento
  • seo.spec.ts: Tests de SEO
  • integration.spec.ts: Tests de integración completos
  • expert-selection-flow.spec.ts: Tests de flujo de selección de expertos

Tests de Seguridad (31 tests, 100% pasando)​

Security Headers and CORS (3 tests)

  • Verificación de headers de seguridad en respuestas de API
  • Verificación de CORS permite origen confiable
  • Verificación de que OPTIONS requests funcionan correctamente

Authentication Secure (6 tests)

  • Login seguro con HttpOnly cookies
  • Verificar que access token no se almacena en localStorage
  • Renovación automática de tokens
  • Logout seguro elimina cookies
  • Protección CSRF en requests autenticados
  • session_id se almacena en sessionStorage y se envía en headers

Concurrent Sessions (3 tests)

  • Múltiples usuarios de la misma empresa pueden hacer login simultáneamente
  • Límite de sesiones concurrentes por usuario individual (máximo 10)
  • Aislamiento de sesiones entre pestañas

CSRF Protection (4 tests)

  • Verificar que requests POST incluyen CSRF token
  • Verificar que requests sin CSRF token son rechazados
  • Verificar que CSRF token se renueva después de refresh
  • Verificar CSRF en diferentes tipos de requests (POST, PUT, DELETE, PATCH)

Input Validation and XSS Protection (9 tests)

  • Sanitizar inputs en formulario de registro
  • Sanitizar inputs en formulario de creación de proyecto
  • Sanitizar mensajes de chat
  • Verificar que DOMPurify está disponible y configurado
  • Sanitizar URLs peligrosas
  • Verificar que contenido renderizado no ejecuta scripts
  • Validación de formato de email
  • Validación de fortaleza de contraseña

Rate Limiting Frontend Handling (5 tests)

  • Verificar mensaje de error cuando hay rate limiting en login
  • Verificar que el frontend maneja rate limiting global correctamente
  • Verificar mensaje apropiado para rate limiting por IP
  • Verificar que el frontend no permite múltiples requests simultáneas que causen rate limiting
  • Verificar que el frontend muestra tiempo de espera para rate limiting

Ejecutar tests de seguridad:

./scripts/test_frontend_security.sh
# O directamente desde Docker:
docker compose exec frontend npx playwright test \
  tests/security-headers-cors.spec.ts \
  tests/authentication-secure.spec.ts \
  tests/concurrent-sessions.spec.ts \
  tests/csrf-protection.spec.ts \
  tests/input-validation-xss.spec.ts \
  tests/rate-limiting-frontend.spec.ts

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​

  • Total de tests: 507 tests ✅
  • Tests pasando: 507 (100%) ✅
  • Tests fallando: 0 (0%) ✅
  • Cobertura: 100% ✅

Ejecutar Tests Unitarios​

# Ejecutar desde el host
./scripts/test_frontend_unit.sh

# Ejecutar toda la suite (Docker Compose recomendado)
docker compose exec frontend sh -c "cd /app && npm test -- --watch=false"

# Ejecutar modo CI / no interactivo
docker compose exec frontend sh -c "cd /app && npm run test:unit"

# Ejecutar con cobertura de código
docker compose exec frontend sh -c "cd /app && npm run test:coverage"

# Ejecutar subconjuntos útiles
docker compose exec frontend sh -c "cd /app && npm run test:api"
docker compose exec frontend sh -c "cd /app && npm run test:components"
docker compose exec frontend sh -c "cd /app && npm run test:curated-flow"

# Ejecutar tests desde el host (modo watch)
npm run test
npm run test:watch

# Ejecutar un archivo o patrón específico
docker compose exec frontend sh -c "cd /app && npx vitest run src/components/features/__tests__/DashboardExperto.test.tsx"

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)

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 sh -c "cd /app && 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​