Frontend Form - Formulario Médico

Un formulario médico interactivo construido con Next.js, React y Chakra UI.

Características

• Formulario de preguntas médicas con navegación paso a paso
• Preguntas de opción única y múltiple
• Campo de texto personalizado para respuestas adicionales
• Sistema de recomendaciones basado en las respuestas
• Interfaz moderna y responsiva

Instalación

npm install

Desarrollo

npm run dev

Tests

El proyecto incluye una suite completa de tests unitarios y end-to-end.

Tests Unitarios

Librerías utilizadas:

• Jest: Framework de testing para JavaScript
• Testing Library: Utilidades para testing de componentes React
• @testing-library/jest-dom: Matchers personalizados para DOM

Ejecutar tests unitarios:

# Ejecutar todos los tests
npm test

# Ejecutar tests en modo watch
npm run test:watch

# Ejecutar tests con cobertura
npm run test:coverage

Estructura:

• hooks/__tests__/ - Tests de hooks personalizados
• app/components/__tests__/ - Tests de componentes
• app/__tests__/ - Tests de lógica del formulario

Tests End-to-End

Librerías utilizadas:

• Cypress: Framework de testing end-to-end
• start-server-and-test: Utilidad para iniciar servidor y ejecutar tests

Ejecutar tests e2e:

# Ejecutar todos los tests e2e (inicia servidor automáticamente)
npm run test:e2e

# Ejecutar Cypress en modo interactivo
npm run cypress:open

# Ejecutar tests en modo headless
npm run cypress:run

Estructura:

• cypress/e2e/ - Tests end-to-end organizados por funcionalidad
• cypress/support/ - Configuración y comandos personalizados

Tecnologías

• Next.js 15 - Framework de React
• React 19 - Biblioteca de UI
• TypeScript - Tipado estático
• Chakra UI - Biblioteca de componentes
• Jest + Testing Library - Testing unitario
• Cypress - Testing end-to-end

Estructura del Proyecto

frontend-form/
├── app/
│   ├── components/          # Componentes de la UI
│   ├── __tests__/          # Tests del formulario principal
│   └── page.tsx            # Componente principal
├── hooks/
│   ├── __tests__/          # Tests de hooks
│   ├── use-questions.ts    # Hook para manejar preguntas
│   └── use-recommendation.ts # Hook para recomendaciones
├── cypress/
│   ├── e2e/                # Tests end-to-end
│   ├── support/            # Configuración y comandos de Cypress
│   └── README.md           # Documentación de tests E2E
├── types/                  # Definiciones de tipos TypeScript
├── jest.config.js          # Configuración de Jest
└── cypress.config.ts       # Configuración de Cypress