valenti/fastcheck
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity
44a671338a
fastcheck/DOCUMENTO_TESTS_FRONTEND_ES.md
valenti 6e9c69134a first
2026-04-08 13:58:46 -04:00

22 KiB
Raw Blame History

Documento de Pruebas Frontend - Duxiter

Información General del Proyecto

Aplicación: Duxiter Fast Check
Versión: 1.5.20
Tecnologías: React 18.3.1 + TypeScript + Vite
Framework UI: Material-UI + Tailwind CSS
Responsable: Control de Calidad / Project Manager
Fecha: Enero 2025

1. Arquitectura del Frontend

1.1 Estructura Principal

src/
├── components/          # Componentes reutilizables
├── pages/              # Páginas principales
├── services/           # Servicios API
├── contexts/           # Contextos React (Auth, Tenant, Theme)
├── types/              # Definiciones TypeScript
├── utils/              # Utilidades
└── assets/             # Recursos estáticos

1.2 Tecnologías Clave

  • React Router DOM: Navegación entre páginas
  • Axios: Cliente HTTP para API
  • React Hot Toast: Notificaciones
  • Chart.js/Recharts: Gráficos y visualizaciones
  • React Markdown: Renderizado de contenido markdown
  • HTML2Canvas + jsPDF: Generación de reportes PDF
  • Lucide React: Iconografía moderna
  • React Dropzone: Carga de archivos
  • QRCode: Generación de códigos QR
  • Date-fns: Manipulación de fechas
  • Lodash: Utilidades JavaScript
  • XLSX: Procesamiento de archivos Excel

2. Módulos Principales a Testear

2.1 Autenticación y Autorización

Archivos: src/pages/auth/, src/contexts/AuthContext.tsx, src/components/auth/

Casos de Prueba:

  • TC-AUTH-001: Login con credenciales válidas
  • TC-AUTH-002: Login con credenciales inválidas
  • TC-AUTH-003: Registro de nuevo usuario
  • TC-AUTH-004: Logout y limpieza de sesión
  • TC-AUTH-005: Protección de rutas según roles
  • TC-AUTH-006: Redirección automática según rol de usuario

Roles a Verificar:

  • superuser: Acceso completo
  • tenant_admin: Administración de tenant
  • evaluator: Solo evaluaciones
  • read_only: Solo lectura
  • write_only: Solo escritura

2.2 Dashboard Principal

Archivos: src/pages/dashboard/Dashboard.tsx, src/components/dashboard/

Casos de Prueba:

  • TC-DASH-001: Carga correcta de estadísticas generales
  • TC-DASH-002: Visualización de gráficos de riesgo
  • TC-DASH-003: Tabla de resultados con paginación
  • TC-DASH-004: Filtros de tiempo y framework
  • TC-DASH-005: Resumen de trabajos diarios
  • TC-DASH-006: Métricas de uso del tenant

2.3 Evaluaciones

Archivos: src/pages/evaluations/, src/services/evaluationService.ts

2.3.1 Evaluación Individual

  • TC-EVAL-001: Validación de RUT chileno
  • TC-EVAL-002: Búsqueda de empresa por RUT
  • TC-EVAL-003: Ejecución de evaluación individual
  • TC-EVAL-004: Visualización de resultados
  • TC-EVAL-005: Descarga de reporte PDF

2.3.2 Evaluación Masiva

  • TC-BULK-001: Carga de archivo Excel/CSV
  • TC-BULK-002: Validación de formato de datos
  • TC-BULK-003: Progreso de evaluación masiva
  • TC-BULK-004: Resultados de evaluación masiva
  • TC-BULK-005: Descarga de resultados consolidados

2.4 Administración

Archivos: src/pages/admin/

Casos de Prueba:

  • TC-ADMIN-001: Gestión de usuarios del tenant
  • TC-ADMIN-002: Configuración de parámetros de evaluación
  • TC-ADMIN-003: Configuración de prompts de IA
  • TC-ADMIN-004: Variables de entorno
  • TC-ADMIN-005: Logs de Sheriff API
  • TC-ADMIN-006: Gestión de sanciones ambientales
  • TC-ADMIN-007: Casos antisindicales
  • TC-ADMIN-008: Facturación y monitoreo

2.5 Fast Check

Archivos: src/pages/FastCheck.tsx, src/pages/FastCheckConsolidado.tsx

Casos de Prueba:

  • TC-FAST-001: Consulta rápida por RUT
  • TC-FAST-002: Información del cliente
  • TC-FAST-003: Resumen de evaluación
  • TC-FAST-004: Tabla de detalles de riesgo
  • TC-FAST-005: Últimos 10 resultados
  • TC-FAST-006: Generación de QR code
  • TC-FAST-007: Exportación a PDF

3. Servicios API a Testear

3.1 Servicios Principales

  • api.ts: Cliente HTTP principal
  • evaluationService.ts: Servicios de evaluación
  • companyService.ts: Servicios de empresa
  • billingService.ts: Servicios de facturación
  • antiunionCaseService.ts: Casos antisindicales
  • environmentalSanctionService.ts: Sanciones ambientales

3.2 Casos de Prueba API

  • TC-API-001: Interceptores de autenticación
  • TC-API-002: Manejo de errores HTTP
  • TC-API-003: Timeout de requests
  • TC-API-004: Retry automático
  • TC-API-005: Logging en desarrollo

4. Componentes UI Críticos

4.1 Componentes Comunes

  • Card.tsx: Tarjetas de información
  • PageLoader.tsx: Indicador de carga
  • ThemeToggle.tsx: Cambio de tema
  • FilterTabs.tsx: Pestañas de filtro

4.2 Componentes de Layout

  • DashboardLayout.tsx: Layout principal
  • AdminLayout.tsx: Layout administrativo
  • PageLayout.tsx: Layout de página genérico

4.3 Casos de Prueba UI

  • TC-UI-001: Responsividad en diferentes dispositivos
  • TC-UI-002: Tema claro/oscuro
  • TC-UI-003: Navegación entre páginas
  • TC-UI-004: Estados de carga
  • TC-UI-005: Manejo de errores en UI
  • TC-UI-006: Tooltips y ayudas contextuales

5. Validaciones y Utilidades

5.1 Validación de RUT

Archivo: src/services/api.ts (funciones validateChileanRut, formatChileanRut)

Casos de Prueba:

  • TC-RUT-001: RUT válido con dígito verificador correcto
  • TC-RUT-002: RUT inválido con dígito verificador incorrecto
  • TC-RUT-003: Formato con puntos y guión
  • TC-RUT-004: Formato sin puntos ni guión
  • TC-RUT-005: RUT con caracteres inválidos
  • TC-RUT-006: RUT vacío o null

5.2 Formateo de Datos

  • TC-FORMAT-001: Formateo de fechas
  • TC-FORMAT-002: Formateo de monedas
  • TC-FORMAT-003: Formateo de números

6. Contextos y Estado Global

6.1 AuthContext

  • TC-CTX-001: Inicialización del contexto
  • TC-CTX-002: Persistencia de token
  • TC-CTX-003: Renovación automática de token
  • TC-CTX-004: Limpieza al logout

6.2 TenantContext

  • TC-CTX-005: Cambio de tenant activo
  • TC-CTX-006: Datos de uso del tenant
  • TC-CTX-007: Permisos por tenant

6.3 ThemeContext

  • TC-CTX-008: Cambio de tema
  • TC-CTX-009: Persistencia de preferencia

7. Casos de Prueba de Integración

7.1 Flujo Completo de Evaluación

  1. Login de usuario
  2. Selección de tenant
  3. Navegación a evaluaciones
  4. Ingreso de RUT
  5. Ejecución de evaluación
  6. Visualización de resultados
  7. Descarga de reporte

7.2 Flujo de Administración

  1. Login como admin
  2. Acceso a panel administrativo
  3. Gestión de usuarios
  4. Configuración de parámetros
  5. Revisión de logs

8. Pruebas de Performance

8.1 Métricas Clave

  • Tiempo de carga inicial: < 3 segundos
  • Tiempo de navegación: < 1 segundo
  • Tiempo de evaluación: < 30 segundos
  • Tamaño de bundle: < 2MB

8.2 Casos de Prueba

  • TC-PERF-001: Carga inicial de la aplicación
  • TC-PERF-002: Navegación entre páginas
  • TC-PERF-003: Carga de tablas con muchos datos
  • TC-PERF-004: Generación de reportes PDF
  • TC-PERF-005: Evaluaciones masivas

9. Pruebas de Seguridad

9.1 Casos de Prueba

  • TC-SEC-001: Protección de rutas sin autenticación
  • TC-SEC-002: Validación de permisos por rol
  • TC-SEC-003: Sanitización de inputs
  • TC-SEC-004: Protección contra XSS
  • TC-SEC-005: Manejo seguro de tokens
  • TC-SEC-006: Timeout de sesión

10. Pruebas de Compatibilidad

10.1 Navegadores

  • Chrome (últimas 2 versiones)
  • Firefox (últimas 2 versiones)
  • Safari (últimas 2 versiones)
  • Edge (últimas 2 versiones)

10.2 Dispositivos

  • Desktop (1920x1080, 1366x768)
  • Tablet (768x1024)
  • Mobile (375x667, 414x896)

11. Herramientas de Testing Recomendadas

11.1 Testing Unitario

  • Jest: Framework de testing (ya configurado con jsdom)
  • React Testing Library: Testing de componentes (v16.3.0)
  • @testing-library/jest-dom: Matchers adicionales para Jest
  • @testing-library/user-event: Simulación de eventos de usuario
  • MSW: Mock Service Worker para APIs (recomendado)
  • identity-obj-proxy: Mock para archivos CSS
  • jest-transform-stub: Mock para archivos estáticos

11.2 Testing E2E

  • Cypress: Testing end-to-end
  • Playwright: Alternativa moderna a Cypress

11.3 Testing Visual

  • Storybook: Documentación de componentes
  • Chromatic: Testing visual automático

11.4 Configuración de Jest

Configuración Frontend (jest.config.js)

{
  preset: 'ts-jest',
  testEnvironment: 'jsdom',
  setupFilesAfterEnv: ['<rootDir>/src/setupTests.ts'],
  moduleNameMapper: {
    '^@/(.*)$': '<rootDir>/src/$1',
    '\\.(css|less|scss|sass)$': 'identity-obj-proxy',
    '\\.(jpg|jpeg|png|gif|eot|otf|webp|svg|ttf|woff|woff2|mp4|webm|wav|mp3|m4a|aac|oga)$': 'jest-transform-stub'
  },
  collectCoverageFrom: [
    'src/**/*.{ts,tsx}',
    '!src/**/*.d.ts',
    '!src/main.tsx',
    '!src/vite-env.d.ts'
  ]
}

Comandos de Testing Disponibles

# Frontend
npm test                    # Ejecutar tests una vez
npm run test:watch         # Ejecutar tests en modo watch
npm run test:coverage      # Ejecutar tests con reporte de cobertura
npm run test:ci           # Ejecutar tests para CI/CD

# Backend
cd server && npm test      # Tests del backend

# Ambos
npm run test:all          # Ejecutar todos los tests
npm run test:all:coverage # Todos los tests con cobertura
npm run test:all:ci       # Todos los tests para CI/CD

Mocks Configurados en setupTests.ts

  • localStorage/sessionStorage: Simulación de almacenamiento del navegador
  • window.matchMedia: Para responsive design
  • IntersectionObserver/ResizeObserver: Para componentes que usan observadores
  • react-router-dom: Navegación simulada
  • react-hot-toast: Notificaciones simuladas
  • Chart.js: Gráficos simulados
  • html2canvas/jsPDF: Generación de PDFs simulada
  • fetch: Requests HTTP simulados

12. Casos de Prueba Específicos por Componente

12.1 Componentes de Autenticación

ProtectedRoute.test.tsx

  • TC-COMP-001: Redirección cuando no está autenticado
  • TC-COMP-002: Renderizado cuando está autenticado
  • TC-COMP-003: Verificación de roles específicos
  • TC-COMP-004: Manejo de estados de carga

ThemeContext.test.tsx

  • TC-COMP-005: Inicialización del tema por defecto
  • TC-COMP-006: Cambio de tema claro/oscuro
  • TC-COMP-007: Persistencia en localStorage
  • TC-COMP-008: Error cuando se usa fuera del provider

12.2 Servicios y APIs

Casos de Prueba para Servicios

  • TC-SERVICE-001: Interceptores de autenticación
  • TC-SERVICE-002: Manejo de errores HTTP (401, 403, 500)
  • TC-SERVICE-003: Retry automático en fallos de red
  • TC-SERVICE-004: Timeout de requests
  • TC-SERVICE-005: Transformación de datos de respuesta

13. Checklist de Testing

13.1 Pre-Testing

  • Entorno de testing configurado
  • Datos de prueba preparados
  • Credenciales de testing disponibles
  • Base de datos de testing limpia

13.2 Durante Testing

  • Documentar bugs encontrados
  • Capturar screenshots de errores
  • Verificar logs del navegador
  • Probar en diferentes navegadores

13.3 Post-Testing

  • Reporte de testing completado
  • Bugs reportados en sistema de tracking
  • Casos de prueba actualizados
  • Documentación actualizada

14. Criterios de Aceptación

14.1 Funcionalidad

  • ✅ Todos los casos de prueba críticos pasan
  • ✅ No hay errores JavaScript en consola
  • ✅ Todas las APIs responden correctamente
  • ✅ Validaciones funcionan como esperado

14.2 Performance

  • ✅ Tiempos de carga dentro de límites
  • ✅ No hay memory leaks
  • ✅ Aplicación responsive en todos los dispositivos

14.3 Seguridad

  • ✅ Autenticación y autorización funcionan
  • ✅ No hay vulnerabilidades conocidas
  • ✅ Datos sensibles protegidos

15. Funcionalidades Nuevas a Testear

15.1 Sistema de Activación de Tenants

Archivos: src/pages/admin/UserManagement.tsx, server/src/models/tenant.model.ts

Casos de Prueba:

  • TC-TENANT-001: Activación manual de tenants por superadmin
  • TC-TENANT-002: Desactivación de tenants existentes
  • TC-TENANT-003: Validación de estado activo en login
  • TC-TENANT-004: Mensaje de activación pendiente en UI
  • TC-TENANT-005: Botones de activar/desactivar en gestión de usuarios

15.2 Página de Monitoreo

Archivos: src/pages/MonitoringPage.tsx

Casos de Prueba:

  • TC-MONITOR-001: Visualización de logs de Sheriff API
  • TC-MONITOR-002: Filtros de búsqueda en logs
  • TC-MONITOR-003: Paginación de resultados
  • TC-MONITOR-004: Estados de monitoreo (activo, pausado, error)
  • TC-MONITOR-005: Acciones de control (play, pause, delete)

15.3 Configuración de Evaluaciones

Archivos: src/pages/admin/EvaluationSettingsPage.tsx

Casos de Prueba:

  • TC-EVAL-CONFIG-001: Configuración de parámetros de evaluación
  • TC-EVAL-CONFIG-002: Selector de claves de Sheriff Log
  • TC-EVAL-CONFIG-003: Tarjetas de criterios de prueba
  • TC-EVAL-CONFIG-004: Validación de configuraciones
  • TC-EVAL-CONFIG-005: Guardado y persistencia de cambios

15.4 Fast Check Consolidado

Archivos: src/pages/FastCheckConsolidado.tsx

Casos de Prueba:

  • TC-FASTCON-001: Información consolidada del cliente
  • TC-FASTCON-002: Resumen de evaluación mejorado
  • TC-FASTCON-003: Tabla de detalles de riesgo actualizada
  • TC-FASTCON-004: Últimos 10 resultados con mejor formato
  • TC-FASTCON-005: Exportación mejorada a PDF

16. Mejores Prácticas de Testing

16.1 Estructura de Tests

Organización de Archivos

src/
├── components/
│   ├── auth/
│   │   ├── ProtectedRoute.tsx
│   │   └── __tests__/
│   │       └── ProtectedRoute.test.tsx
│   └── common/
│       ├── PageLoader.tsx
│       └── __tests__/
│           └── PageLoader.test.tsx
├── contexts/
│   ├── AuthContext.tsx
│   └── __tests__/
│       └── AuthContext.test.tsx
└── services/
    ├── api.ts
    └── __tests__/
        └── api.test.ts

Convenciones de Nomenclatura

  • Archivos de test: ComponentName.test.tsx o serviceName.test.ts
  • Casos de prueba: should [expected behavior] when [condition]
  • Test IDs: data-testid="component-element-action"
  • Mocks: mock[ServiceName] o mock[FunctionName]

16.2 Patrones de Testing

Testing de Componentes React

import { render, screen, fireEvent, waitFor } from '@testing-library/react';
import userEvent from '@testing-library/user-event';
import { BrowserRouter } from 'react-router-dom';
import { AuthProvider } from '../contexts/AuthContext';
import ComponentToTest from '../ComponentToTest';

// Helper para renderizar con providers
const renderWithProviders = (component: React.ReactElement) => {
  return render(
    <BrowserRouter>
      <AuthProvider>
        {component}
      </AuthProvider>
    </BrowserRouter>
  );
};

describe('ComponentToTest', () => {
  beforeEach(() => {
    jest.clearAllMocks();
  });

  it('should render correctly with default props', () => {
    renderWithProviders(<ComponentToTest />);
    expect(screen.getByTestId('component-container')).toBeInTheDocument();
  });

  it('should handle user interaction', async () => {
    const user = userEvent.setup();
    renderWithProviders(<ComponentToTest />);
    
    const button = screen.getByRole('button', { name: /submit/i });
    await user.click(button);
    
    await waitFor(() => {
      expect(screen.getByText('Success message')).toBeInTheDocument();
    });
  });
});

Testing de Servicios API

import { apiClient } from '../api';
import { evaluationService } from '../evaluationService';

// Mock del cliente API
jest.mock('../api');
const mockApiClient = apiClient as jest.Mocked<typeof apiClient>;

describe('EvaluationService', () => {
  beforeEach(() => {
    jest.clearAllMocks();
  });

  it('should fetch evaluation results successfully', async () => {
    const mockData = { id: '123', status: 'completed' };
    mockApiClient.get.mockResolvedValue({ data: mockData });

    const result = await evaluationService.getEvaluation('123');

    expect(mockApiClient.get).toHaveBeenCalledWith('/evaluations/123');
    expect(result).toEqual(mockData);
  });

  it('should handle API errors gracefully', async () => {
    mockApiClient.get.mockRejectedValue(new Error('Network error'));

    await expect(evaluationService.getEvaluation('123'))
      .rejects.toThrow('Network error');
  });
});

16.3 Testing de Contextos

import { renderHook, act } from '@testing-library/react';
import { AuthProvider, useAuth } from '../AuthContext';

const wrapper = ({ children }: { children: React.ReactNode }) => (
  <AuthProvider>{children}</AuthProvider>
);

describe('AuthContext', () => {
  it('should provide authentication state', () => {
    const { result } = renderHook(() => useAuth(), { wrapper });
    
    expect(result.current.isAuthenticated).toBe(false);
    expect(result.current.user).toBeNull();
  });

  it('should handle login', async () => {
    const { result } = renderHook(() => useAuth(), { wrapper });
    
    await act(async () => {
      await result.current.login('test@example.com', 'password');
    });
    
    expect(result.current.isAuthenticated).toBe(true);
  });
});

16.4 Métricas de Calidad

Cobertura de Código

  • Mínimo aceptable: 80% de cobertura general
  • Componentes críticos: 95% de cobertura
  • Servicios API: 90% de cobertura
  • Utilidades: 85% de cobertura

Comandos para Verificar Cobertura

# Generar reporte de cobertura
npm run test:coverage

# Ver reporte en navegador
open coverage/lcov-report/index.html

# Verificar umbrales de cobertura
npm run test:ci

16.5 Debugging de Tests

Técnicas Útiles

// Debug de elementos renderizados
screen.debug(); // Muestra todo el DOM
screen.debug(screen.getByTestId('specific-element')); // Elemento específico

// Queries útiles para debugging
screen.logTestingPlaygroundURL(); // URL para Testing Playground
console.log(screen.getAllByRole('button')); // Todos los botones

// Esperar elementos asincrónicos
await screen.findByText('Loading...'); // Espera hasta que aparezca
await waitForElementToBeRemoved(() => screen.queryByText('Loading...')); // Espera hasta que desaparezca

17. Contactos y Recursos

17.1 Equipo de Desarrollo

  • Frontend Lead: [Nombre]
  • Backend Lead: [Nombre]
  • QA Lead: [Nombre]

17.2 Recursos

  • Repositorio: /root/duxiter
  • Documentación API: Swagger en /api/docs
  • Entorno de Testing: [URL]
  • Entorno de Staging: [URL]

17.3 Documentación Adicional

  • Confluence: [URL del espacio de documentación]
  • Jira: [URL del proyecto]
  • GitHub: [URL del repositorio]
  • Slack: #duxiter-frontend

18. Anexos

18.1 Ejemplos Específicos del Proyecto

Test de Fast Check Consolidado

// src/pages/__tests__/FastCheckConsolidado.test.tsx
import { render, screen, waitFor } from '@testing-library/react';
import { BrowserRouter } from 'react-router-dom';
import FastCheckConsolidado from '../FastCheckConsolidado';
import { AuthProvider } from '../../contexts/AuthContext';
import { TenantProvider } from '../../contexts/TenantContext';

const renderWithProviders = (component: React.ReactElement) => {
  return render(
    <BrowserRouter>
      <AuthProvider>
        <TenantProvider>
          {component}
        </TenantProvider>
      </AuthProvider>
    </BrowserRouter>
  );
};

describe('FastCheckConsolidado', () => {
  it('should render fast check components', async () => {
    renderWithProviders(<FastCheckConsolidado />);
    
    await waitFor(() => {
      expect(screen.getByTestId('fast-check-container')).toBeInTheDocument();
    });
  });

  it('should handle evaluation submission', async () => {
    // Test implementation
  });
});

Test de Validación RUT

// src/utils/__tests__/rutValidation.test.ts
import { validateRUT, formatRUT } from '../rutValidation';

describe('RUT Validation', () => {
  it('should validate correct RUT', () => {
    expect(validateRUT('12345678-5')).toBe(true);
    expect(validateRUT('12.345.678-5')).toBe(true);
  });

  it('should reject invalid RUT', () => {
    expect(validateRUT('12345678-0')).toBe(false);
    expect(validateRUT('invalid')).toBe(false);
  });

  it('should format RUT correctly', () => {
    expect(formatRUT('123456785')).toBe('12.345.678-5');
  });
});

18.2 Configuración de CI/CD para Tests

GitHub Actions Workflow

# .github/workflows/frontend-tests.yml
name: Frontend Tests

on:
  push:
    branches: [ main, develop ]
  pull_request:
    branches: [ main ]

jobs:
  test:
    runs-on: ubuntu-latest
    
    steps:
    - uses: actions/checkout@v3
    
    - name: Setup Node.js
      uses: actions/setup-node@v3
      with:
        node-version: '18'
        cache: 'npm'
    
    - name: Install dependencies
      run: npm ci
    
    - name: Run tests
      run: npm run test:ci
    
    - name: Generate coverage report
      run: npm run test:coverage
    
    - name: Upload coverage to Codecov
      uses: codecov/codecov-action@v3

18.3 Scripts de Testing Personalizados

Package.json Scripts

{
  "scripts": {
    "test": "jest",
    "test:watch": "jest --watch",
    "test:coverage": "jest --coverage",
    "test:ci": "jest --ci --coverage --watchAll=false",
    "test:frontend": "jest --testPathPattern=src",
    "test:debug": "node --inspect-brk node_modules/.bin/jest --runInBand"
  }
}

18.4 Troubleshooting Común

Problemas Frecuentes y Soluciones

  1. Error: "Cannot find module 'react-router-dom'"

    • Solución: Verificar que el mock esté configurado en setupTests.ts

  2. Tests fallan por timeouts

    • Solución: Aumentar timeout en Jest config o usar waitFor con timeout personalizado

  3. Problemas con Chart.js en tests

    • Solución: Mock completo configurado en setupTests.ts

  4. Error de Canvas en tests

    • Solución: Mock de html2canvas y jsPDF ya configurado

Nota: Este documento debe actualizarse regularmente conforme evoluciona la aplicación. Se recomienda revisar y actualizar los casos de prueba después de cada release mayor.