Plan de Pruebas E2E con Datos Reales - Paciente Mia¶

Archivos Disponibles¶

Imágenes (datos/imagenes/fotosmia/)¶

Mia 1 26-12-2024 - copia.jpg → Vista Anterior
Mia 2 26-12-2024 - copia.jpg → Vista Posterior
Mia 3 26-12-2024 - copia.jpg → Vista Lateral Derecha
Mia 4 26-12-2024 - copia.jpg → Vista Lateral Izquierda

Archivos de Marcadores (.mat)¶

Marcadores_ID_MLdic24_31-1-2025_10-15-33.mat → Vista Anterior
Marcadores_ID_MLdic24_31-1-2025_10-20-16.mat → Vista Posterior
Marcadores_ID_MLdic24_31-1-2025_10-23-7.mat → Vista Lateral Derecha
Marcadores_ID_MLdic24_31-1-2025_10-26-17.mat → Vista Lateral Izquierda

WORKFLOW COMPLETO - TEST E2E¶

Flujo 1: Captura de Marcadores (4 vistas)¶

Objetivo: Cargar las 4 imágenes de Mia, marcar todos los puntos anatómicos y exportar coordenadas.

1.1. Vista Anterior¶

ACCIÓN: Cargar imagen
  - Subir: datos/imagenes/fotosmia/Mia 1 26-12-2024 - copia.jpg
  - VALIDAR: Imagen visible en canvas

ACCIÓN: Seleccionar vista "Anterior"
  - Click en selector de vista → "Vista Anterior"

ACCIÓN: Marcar puntos anatómicos (orden según MATLAB)
  Para cada marcador de la Vista Anterior:
    1. Seleccionar marcador del dropdown
    2. Click en posición correcta en la imagen
    3. Verificar que aparece marcador verde
    4. Verificar que se agrega fila a tabla con:
       - Nombre del marcador
       - Vista: "A"
       - Coordenadas X, Y

Marcadores Vista Anterior (17 puntos):
  12. Eminencia Frontal Media       → Click en (X, Y)
  13. Espina Nasal                  → Click en (X, Y)
  14. Punto Mentoniano              → Click en (X, Y)
  15. Tragus Izq                    → Click en (X, Y)
  16. Tragus Der                    → Click en (X, Y)
  17. Punto Acromion Izq            → Click en (X, Y)
  18. Punto Acromion Der            → Click en (X, Y)
  19. Escotadura Esternal           → Click en (X, Y)
  20. Apéndice Xifoides             → Click en (X, Y)
  21. Ombligo                       → Click en (X, Y)
  22. Punto Sínfisis Pubiana        → Click en (X, Y)
  23. Espina Ilíaca Anterosuperior Izq → Click en (X, Y)
  24. Espina Ilíaca Anterosuperior Der → Click en (X, Y)
  25. Centro Rótula Izq             → Click en (X, Y)
  26. Centro Rótula Der             → Click en (X, Y)
  27. TAT Izq                       → Click en (X, Y)
  28. TAT Der                       → Click en (X, Y)

ACCIÓN: Exportar marcadores
  - Click en "Guardar" o "Exportar"
  - VALIDAR: Archivo CSV generado con 17 filas
  - VALIDAR: Formato: marcador,vista,x,y

1.2. Vista Posterior¶

ACCIÓN: Cargar imagen
  - Subir: datos/imagenes/fotosmia/Mia 2 26-12-2024 - copia.jpg

ACCIÓN: Seleccionar vista "Posterior"

ACCIÓN: Marcar puntos anatómicos (19 puntos)
  72. Lóbulo Izq
  73. Lóbulo Der
  74. Punto Interno Espina Omóplato Izq (línea medial)
  75. Ángulo Inferior Omóplato Izq
  76. Punto Interno Espina Omóplato Der (línea medial)
  77. Ángulo Inferior Omóplato Der
  78. Cervical 7
  79. Torácica 3
  80. Torácica 7
  81. Torácica 12
  82. Lumbar 5
  83. Espina ilíaca posterosuperior izquierda
  84. Espina ilíaca posterosuperior derecha
  85. Espina ilíaca posteroinferior izquierda
  86. Espina ilíaca posteroinferior derecha
  87. Aquiles Izq
  88. Aquiles Der
  89. Calcáneo Izq
  90. Calcáneo Der

ACCIÓN: Exportar marcadores
  - VALIDAR: 19 filas en CSV

1.3. Vista Lateral Derecha¶

ACCIÓN: Cargar imagen
  - Subir: datos/imagenes/fotosmia/Mia 3 26-12-2024 - copia.jpg

ACCIÓN: Seleccionar vista "Lateral Derecha"

ACCIÓN: Marcar puntos anatómicos (14 puntos)
  32. Tragus Der
  33. Lóbulo Oreja Der
  34. Apex Cervical Der
  35. Punto Acromion Der
  36. Punto Epicóndilo Der
  37. Base 3er Metacarpiano Der
  38. Apex Lumbar Der
  39. Tubérculo Ilíaco Der
  40. Espina Ilíaca Anterosuperior
  41. Espina Ilíaca Posterosuperior
  42. Espina Ilíaca Posteroinferior
  43. Trocánter Mayor (borde superior) Der
  44. Tubérculo Cóndilo Externo Der
  45. Borde anterior de Maléolo Der

ACCIÓN: Exportar marcadores
  - VALIDAR: 14 filas en CSV

1.4. Vista Lateral Izquierda¶

ACCIÓN: Cargar imagen
  - Subir: datos/imagenes/fotosmia/Mia 4 26-12-2024 - copia.jpg

ACCIÓN: Seleccionar vista "Lateral Izquierda"

ACCIÓN: Marcar puntos anatómicos (14 puntos)
  52. Tragus Izq
  53. Lóbulo Oreja Izq
  54. Apex Cervical Izq
  55. Punto Acromion Izq
  56. Punto Epicóndilo Izq
  57. Base 3er Metacarpiano Izq
  58. Apex Lumbar Izq
  59. Tubérculo Ilíaco Izq
  60. Espina Ilíaca Anterosuperior Izq
  61. Espina Ilíaca Posterosuperior Izq
  62. Espina Ilíaca Posteroinferior Izq
  63. Trocánter Mayor (borde superior) Izq
  64. Tubérculo Cóndilo Externo Izq
  65. Borde anterior de Maléolo Izq

ACCIÓN: Exportar marcadores
  - VALIDAR: 14 filas en CSV

Flujo 2: Análisis Vista Anterior¶

Prerequisitos: - Imagen Mia 1 cargada - Marcadores importados desde CSV/MAT exportado en Flujo 1

PÁGINA: /analysis/anterior

PASO 1: Cargar imagen
  - Subir: datos/imagenes/fotosmia/Mia 1 26-12-2024 - copia.jpg
  - VALIDAR: Imagen visible

PASO 2: Importar marcadores
  - Cargar archivo CSV de Vista Anterior (17 marcadores)
  - VALIDAR: 17 puntos verdes visibles en imagen
  - VALIDAR: Tabla de marcadores muestra 17 filas

PASO 3: Calibración
  - Click en botón "Calibrar Grilla"
  - Click punto 1 en cuadrícula: (X1, Y1)
  - Click punto 2 en cuadrícula (10cm separados): (X2, Y2)
  - VALIDAR: Factor de calibración FC calculado
  - VALIDAR: Mensaje "Calibración completa: FC = X.XX"

PASO 4: Líneas de Referencia
  - Click en "Rectas de Referencia"
  - Click en maleolo derecho externo (visible en imagen)
  - Click en maleolo izquierdo externo
  - VALIDAR: Línea horizontal verde dibujada
  - VALIDAR: Línea vertical verde en punto medio
  - VALIDAR: LRV (Vx1, Vy1, Vx2, Vy2) guardadas

PASO 5: Análisis Región Cérvico-Cefálica
  - Click en botón "Región Cérvico-Cefálica"
  - VALIDAR: Línea amarilla entre tragus izquierdo y derecho
  - VALIDAR: Cálculos mostrados:
    * Ángulo de inclinación cabeza [°]: X.XX
    * Diagnóstico: neutro/derecha/izquierda
    * Rotación Eminencia Frontal [cm]: X.XX
    * Rotación Espina Nasal [cm]: X.XX
    * Rotación Punto Mentoniano [cm]: X.XX

PASO 6: Análisis Región Tronco-Columna
  - Click en botón "Región Tronco-Columna"
  - VALIDAR: Líneas amarillas entre EE-PSP
  - VALIDAR: Cálculos mostrados:
    * Rotación Escotadura Esternal [cm]: X.XX
    * Rotación Apéndice Xifoides [cm]: X.XX
    * Rotación Sínfisis Pubiana [cm]: X.XX
    * Ángulo de Inclinación Tronco [°]: X.XX

PASO 7: Análisis Cintura Escapular
  - Click en "Región Escapular-MS"
  - VALIDAR: Línea amarilla entre acromions
  - VALIDAR: Cálculo mostrado:
    * Ángulo de Inclinación hombros [°]: X.XX
    * Diagnóstico: neutro/derecha/izquierda

PASO 8: Análisis Cintura Pélvica - MI
  - Click en "Región Pélvica-MI"
  - VALIDAR: Líneas amarillas para pelvis y ángulos Q
  - VALIDAR: Cálculos mostrados:
    * Ángulo de Inclinación Pelvis [°]: X.XX
    * Ángulo Q Derecho [°]: X.XX (normal/aumentado/disminuido)
    * Ángulo Q Izquierdo [°]: X.XX
    * Distancia Cóndilos [cm]: X.XX (si medido)
    * Distancia Gemelos [cm]: X.XX (si medido)
    * Diagnóstico MI: Neutro/Genu Varo/Genu Valgo

PASO 9: Exportar resultados
  - Click en "Exportar Tabla"
  - VALIDAR: Archivo Excel generado
  - VALIDAR: Hoja "Vista Frente" con todas las mediciones
  - VALIDAR: Formato: Región | Variable | Medición | Diagnóstico

Flujo 3: Análisis Vista Posterior¶

PÁGINA: /analysis/posterior

PASO 1-4: Igual que Vista Anterior (cargar imagen, importar marcadores, calibrar, LRV)

PASO 5: Análisis Región Cérvico-Cefálica
  - Click en "Región Cérvico-Cefálica"
  - VALIDAR: Cálculos:
    * Ángulo de Inclinación cabeza [°]: X.XX
    * Diagnóstico: neutro/derecha/izquierda

PASO 6: Análisis Región Tronco-Columna
  - Click en "Región Tronco-Columna"
  - VALIDAR: Cálculos de desbalance coronal:
    * Desbalance C7 [cm]: X.XX (neutro/derecha/izquierda)
    * Desbalance T7 [cm]: X.XX
    * Desbalance L5 [cm]: X.XX

PASO 7: Análisis Región Pélvica
  - Click en "Región Pélvica"
  - VALIDAR: Cálculo:
    * Ángulo de Inclinación Pelvis [°]: X.XX
    * Diagnóstico: neutro/derecha/izquierda

PASO 8: Análisis Pie-Tobillo (Ángulos Calcáneo)
  - Click en "Ángulo Calcáneo Izquierdo"
  - Acción manual: Click 2 puntos pliegue poplíteo izquierdo
  - VALIDAR: Líneas amarillas dibujadas
  - VALIDAR: Cálculo:
    * Ángulo Calcáneo Izquierdo [°]: X.XX
    * Diagnóstico: neutro/varo/valgo

  - Click en "Ángulo Calcáneo Derecho"
  - Acción manual: Click 2 puntos pliegue poplíteo derecho
  - VALIDAR: Cálculo:
    * Ángulo Calcáneo Derecho [°]: X.XX

PASO 9: Exportar resultados
  - VALIDAR: Hoja Excel "Vista Posterior"

Flujo 4: Análisis Vista Lateral Derecha¶

PÁGINA: /analysis/lateral-derecha

PASO 1-4: Cargar imagen Mia 3, importar marcadores, calibrar

PASO 4b: Líneas de Referencia (ESPECIAL PARA PERFIL)
  - LRV pasa por "Borde anterior de Maléolo Der"
  - Click en maleolo anterior
  - VALIDAR: Línea vertical verde desde maleolo

PASO 5: Tangentes Posturales (MANUAL)
  - Click en "Tangentes"
  - Seleccionar "Punto Cabeza" → Click en punto más posterior de cabeza
  - Seleccionar "Punto Dorsal" → Click en punto más posterior de dorso
  - Seleccionar "Punto Sacro" → Click en punto más posterior de sacro
  - VALIDAR: 3 líneas verticales verdes tangentes

PASO 6: Análisis Región Cérvico-Cefálica
  - Click en "Región Cérvico-Cefálica"
  - VALIDAR: Cálculos:
    * Ubicación sagital cabeza [cm]: X.XX (antepulsión/retropulsión/alineada)
    * Tangentes Occipital-Dorso [cm]: X.XX
    * Lordosis cervical [cm]: X.XX (normal/aumentada/disminuida)

PASO 7: Análisis Región Tronco-Columna
  - Click en "Región Tronco-Columna"
  - VALIDAR: Cálculos:
    * Tangentes Dorso-Sacro [cm]: X.XX
    * Lordosis lumbar [cm]: X.XX

PASO 8: Análisis Cintura Escapular-MS
  - Click en "Región Escapular-MS"
  - VALIDAR: Cálculos:
    * Alineación sagital hombro [cm]: X.XX
    * Ángulo Codo [°]: X.XX (normal/hiperextensión/flexión)

PASO 9: Análisis Cintura Pélvica-MI
  - Click en "Región Pélvica-MI"
  - VALIDAR: Cálculos:
    * Traslación pélvica (Ilíaco) [cm]: X.XX
    * Traslación pélvica (Trocánter) [cm]: X.XX
    * Basculación pélvica sagital [°]: X.XX (normal/anteversión/retroversión)
    * Alineación sagital rodilla [cm]: X.XX
    * Ángulo tibiotarsiano [°]: X.XX (normal/flexión/extensión)
    * Ángulo de rodilla [°]: X.XX (neutro/genu flexo/recurvatum)

PASO 10: Exportar resultados
  - VALIDAR: Hoja Excel "Vista Lateral - Perfil Derecho"

Flujo 5: Análisis Vista Lateral Izquierda¶

PÁGINA: /analysis/lateral-izquierda

PASO 1-10: Igual que Lateral Derecha, pero con:
  - Imagen: Mia 4 26-12-2024 - copia.jpg
  - Marcadores laterales izquierdos
  - LRV pasa por "Borde anterior de Maléolo Izq"
  - Cálculos con inversión de signos (Vx1 - X en lugar de X - Vx1)

VALIDAR: Hoja Excel "Vista Lateral - Perfil Izquierdo"

MEJORA: Indicador de Posición del Mouse¶

Objetivo: Agregar overlay en canvas que muestre coordenadas X,Y del mouse en tiempo real.

Ubicación: src/components/orthoposture/image-display-area.tsx

Implementación:

// Estado para coordenadas del mouse
const [mousePos, setMousePos] = useState({ x: 0, y: 0 })

// Handler onMouseMove en canvas
const handleMouseMove = (e: React.MouseEvent<HTMLCanvasElement>) => {
  const rect = canvasRef.current?.getBoundingClientRect()
  if (!rect) return

  const x = Math.round(e.clientX - rect.left)
  const y = Math.round(e.clientY - rect.top)

  setMousePos({ x, y })
}

// Overlay en esquina superior derecha del canvas
<div className="absolute top-2 right-2 bg-black/70 text-white px-2 py-1 rounded text-sm font-mono">
  X: {mousePos.x} | Y: {mousePos.y}
</div>

VALIDACIONES ESPERADAS (Valores Aproximados)¶

Vista Anterior - Postura Normal¶

Ángulo inclinación cabeza: -2° a +2° (neutro)
Rotación puntos faciales: -1 a +1 cm (neutro)
Ángulo inclinación hombros: -2° a +2° (neutro)
Ángulo inclinación pelvis: -2° a +2° (neutro)
Ángulo Q derecho/izquierdo: 6° - 27° (normal)
Diagnóstico MI: Neutro

Vista Posterior - Postura Normal¶

Ángulo cabeza: -2° a +2° (neutro)
Desbalance C7, T7, L5: -1 a +1 cm (neutro)
Ángulo pelvis: -1° a +1° (neutro)
Ángulo calcáneo: > 178° (neutro)

Vista Lateral - Postura Normal¶

Ubicación cabeza: -1 a +1 cm (alineada)
Lordosis cervical: 3-5 cm (normal)
Lordosis lumbar: 3-5 cm (normal)
Ángulo codo: 175-180° (normal)
Basculación pelvis: -2° a +2° (normal)
Ángulo tibiotarsiano: 88-92° (normal)
Ángulo rodilla: >= 178° (neutro)

ORDEN DE IMPLEMENTACIÓN¶

✅ Agregar indicador de mouse (UI improvement)
✅ Escribir test e2e para captura de marcadores (cypress/e2e/05-marker-capture-mia.cy.ts)
✅ Escribir test e2e para análisis vista anterior (cypress/e2e/06-analysis-anterior-mia.cy.ts)
✅ Escribir test e2e para análisis vista posterior (cypress/e2e/07-analysis-posterior-mia.cy.ts)
✅ Escribir test e2e para análisis lateral derecha (cypress/e2e/08-analysis-lateral-derecha-mia.cy.ts)
✅ Escribir test e2e para análisis lateral izquierda (cypress/e2e/09-analysis-lateral-izquierda-mia.cy.ts)
✅ Ejecutar todos los tests y validar (npm run cypress:run)

NOTAS IMPORTANTES¶

Los archivos .mat contienen las coordenadas exactas usadas por Cristina en MATLAB
Necesitamos extraer esas coordenadas y usarlas como referencia en los tests
Los tests deben validar que los cálculos de nuestra app coinciden con los de MATLAB
El indicador de mouse ayudará a verificar que estamos haciendo click en las posiciones correctas
Cada test debe ser independiente pero pueden compartir fixtures (imágenes, marcadores CSV)