Files
inq-roi-simulador-web/tests/lib/colors.test.ts
Marcos Benítez a65bec45c3 feat(sprint-5/etapa-3): heatmap gradiente 4 stops + modo percentil + localStorage + fix zoom
- colors.ts: gradiente continuo verde→amarillo→naranja→rojo (interpolación N-stops genérica)
- Renombra modos: relative→percentile (rank-based), absolute→minmax
- Hook useHeatmapMode(): persiste selección en localStorage con clave inq-roi:heatmap-mode
- HeatmapLegend: barra de 4 stops, labels P0/P50/P100 en modo percentil
- HeatmapModeToggle: etiquetas "Percentil" / "Min-max"
- pdf-sections.ts: leyenda PDF con 4 stops interpolados
- BpmnCanvas: controles de zoom movidos a esquina inferior izquierda (evita logo bpmn.io)
- Tests: 528 unitarios pasan; E2E recalibrados con vecino más cercano (distancia euclidiana)

Co-Authored-By: Claude Sonnet 4.6 <noreply@anthropic.com>
2026-06-19 18:28:10 -03:00

256 lines
9.6 KiB
TypeScript

import { describe, it, expect } from 'vitest'
import {
intensityToColor,
computeActivityT,
hasSignificantCostVariance,
activityColor,
NEUTRAL_HEATMAP_COLOR,
type ActivityCostData,
} from '@/lib/colors'
// ─── Fixtures ─────────────────────────────────────────────────────────────────
function makeActs(costs: number[]): ActivityCostData[] {
const total = costs.reduce((s, c) => s + c, 0) || 1
return costs.map((c) => ({
expectedTotalCost: Math.max(0, c),
percentOfTotal: (c / total) * 100,
}))
}
// ─── intensityToColor — gradiente de 4 stops ─────────────────────────────────
describe('intensityToColor', () => {
it('t=0 → verde (#10b981)', () => {
expect(intensityToColor(0)).toBe('#10b981')
})
it('t=1 → rojo (#ef4444)', () => {
expect(intensityToColor(1)).toBe('#ef4444')
})
it('t=0.33 → amarillo (#f59e0b)', () => {
expect(intensityToColor(0.33)).toBe('#f59e0b')
})
it('t=0.67 → naranja (#f97316)', () => {
expect(intensityToColor(0.67)).toBe('#f97316')
})
it('t=0.5 → color naranja intermedio (entre #f59e0b y #f97316)', () => {
const color = intensityToColor(0.5)
expect(color).not.toBe('#f59e0b')
expect(color).not.toBe('#f97316')
expect(color).toMatch(/^#[0-9a-f]{6}$/)
})
it('t<0 → clampea a t=0 (verde)', () => {
expect(intensityToColor(-0.1)).toBe(intensityToColor(0))
})
it('t>1 → clampea a t=1 (rojo)', () => {
expect(intensityToColor(1.5)).toBe(intensityToColor(1))
})
it('devuelve string hex válido en formato #rrggbb', () => {
for (const t of [0, 0.25, 0.5, 0.75, 1]) {
const hex = intensityToColor(t)
expect(hex).toMatch(/^#[0-9a-f]{6}$/)
}
})
it('colores intermedios son distintos entre sí (transición suave, no saltos)', () => {
const colors = [0, 0.2, 0.4, 0.6, 0.8, 1].map(intensityToColor)
const unique = new Set(colors)
expect(unique.size).toBe(6)
})
})
// ─── hasSignificantCostVariance ──────────────────────────────────────────────
describe('hasSignificantCostVariance', () => {
it('varianza cero: todos iguales → false', () => {
expect(hasSignificantCostVariance(makeActs([100, 100, 100, 100, 100]))).toBe(false)
})
it('una sola actividad → false (no hay con qué comparar)', () => {
expect(hasSignificantCostVariance(makeActs([500]))).toBe(false)
})
it('lista vacía → false', () => {
expect(hasSignificantCostVariance([])).toBe(false)
})
it('varianza < 5%: costos casi iguales → false', () => {
// rango = (103-100)/103 ≈ 2.9% < 5%
expect(hasSignificantCostVariance(makeActs([100, 101, 102, 103]))).toBe(false)
})
it('varianza > 5%: costos claramente distintos → true', () => {
// rango = (200-100)/200 = 50% > 5%
expect(hasSignificantCostVariance(makeActs([100, 200]))).toBe(true)
})
it('varianza ≈ THRESHOLD (5%): está justo en el límite', () => {
// rango = (105-100)/105 ≈ 4.76% < 5% → false
expect(hasSignificantCostVariance(makeActs([100, 105]))).toBe(false)
// rango = (111-100)/111 ≈ 9.9% > 5% → true
expect(hasSignificantCostVariance(makeActs([100, 111]))).toBe(true)
})
it('no crashea con costos negativos (defensivo)', () => {
expect(() => hasSignificantCostVariance(makeActs([-10, -5, 0]))).not.toThrow()
})
it('todos en cero → false (max=0)', () => {
expect(hasSignificantCostVariance(makeActs([0, 0, 0]))).toBe(false)
})
})
// ─── computeActivityT — modo percentile ──────────────────────────────────────
describe('computeActivityT — modo percentile', () => {
it('actividad más barata → t = 0', () => {
const acts = makeActs([300, 100, 50])
const t = computeActivityT(acts[2], acts, 'percentile')
expect(t).toBe(0)
})
it('actividad más cara → t = 1', () => {
const acts = makeActs([300, 100, 50])
const t = computeActivityT(acts[0], acts, 'percentile')
expect(t).toBe(1)
})
it('actividades con el mismo costo → mismo t', () => {
const acts = makeActs([100, 100, 500])
const tA = computeActivityT(acts[0], acts, 'percentile')
const tB = computeActivityT(acts[1], acts, 'percentile')
expect(tA).toBe(tB)
})
it('n=1 → t = 0.5', () => {
const acts = makeActs([500])
expect(computeActivityT(acts[0], acts, 'percentile')).toBe(0.5)
})
it('t siempre está en [0, 1]', () => {
const acts = makeActs([1000, 500, 100, 10])
for (const act of acts) {
const t = computeActivityT(act, acts, 'percentile')
expect(t).toBeGreaterThanOrEqual(0)
expect(t).toBeLessThanOrEqual(1)
}
})
it('lista vacía → t = 0 sin crash', () => {
const act: ActivityCostData = { expectedTotalCost: 100, percentOfTotal: 100 }
expect(computeActivityT(act, [], 'percentile')).toBe(0)
})
it('costo negativo → t = 0 (clamp explícito)', () => {
const acts = makeActs([100, 200, 300])
const negativa: ActivityCostData = { expectedTotalCost: -50, percentOfTotal: 0 }
expect(computeActivityT(negativa, [negativa, ...acts], 'percentile')).toBe(0)
})
it('outlier extremo: las actividades restantes se distribuyen (no todas en 0)', () => {
// 1 outlier carísimo + 4 actividades normales — percentile no se distorsiona
const acts = makeActs([1, 2, 3, 4, 100000])
const ts = acts.slice(0, 4).map((a) => computeActivityT(a, acts, 'percentile'))
const unique = new Set(ts)
expect(unique.size).toBeGreaterThan(1) // distribuidas, no comprimidas a un solo valor
})
})
// ─── computeActivityT — modo minmax ──────────────────────────────────────────
describe('computeActivityT — modo minmax', () => {
it('actividad más cara → t = 1.0', () => {
const acts = makeActs([100, 200, 300])
const t = computeActivityT(acts[2], acts, 'minmax')
expect(t).toBeCloseTo(1.0)
})
it('actividad más barata → t = 0.0', () => {
const acts = makeActs([100, 200, 300])
const t = computeActivityT(acts[0], acts, 'minmax')
expect(t).toBeCloseTo(0.0)
})
it('actividad del medio → t ≈ 0.5', () => {
const acts = makeActs([100, 200, 300])
const t = computeActivityT(acts[1], acts, 'minmax')
expect(t).toBeCloseTo(0.5)
})
it('un solo precio (max=min) → t = 0.5 (defensivo)', () => {
const acts = makeActs([100, 100])
const t = computeActivityT(acts[0], acts, 'minmax')
expect(t).toBe(0.5)
})
it('outlier extremo: las actividades restantes se comprimen hacia 0', () => {
const acts = makeActs([1, 2, 3, 4, 100000])
const ts = acts.slice(0, 4).map((a) => computeActivityT(a, acts, 'minmax'))
// Todas muy cerca de 0 — comportamiento esperado del minmax con outliers
for (const t of ts) expect(t).toBeLessThan(0.01)
})
})
// ─── activityColor — función unificada ───────────────────────────────────────
describe('activityColor', () => {
it('SIN varianza significativa → TODOS devuelven NEUTRAL_HEATMAP_COLOR', () => {
const acts = makeActs([100, 100, 100, 100, 100])
for (const act of acts) {
expect(activityColor(act, acts, 'percentile')).toBe(NEUTRAL_HEATMAP_COLOR)
expect(activityColor(act, acts, 'minmax')).toBe(NEUTRAL_HEATMAP_COLOR)
}
})
it('CON varianza real modo percentile: la más cara NO es neutra', () => {
const acts = makeActs([500, 100, 10])
const color = activityColor(acts[0], acts, 'percentile')
expect(color).not.toBe(NEUTRAL_HEATMAP_COLOR)
})
it('CON varianza real modo percentile: la más cara es roja (#ef4444)', () => {
const acts = makeActs([500, 100, 10])
const colorCara = activityColor(acts[0], acts, 'percentile')
expect(colorCara).toBe('#ef4444')
})
it('CON varianza real modo percentile: la más barata es verde (#10b981)', () => {
const acts = makeActs([500, 100, 10])
const colorBarata = activityColor(acts[2], acts, 'percentile')
expect(colorBarata).toBe('#10b981')
})
it('CON varianza real modo minmax: la más cara es roja', () => {
const acts = makeActs([1000, 100, 10])
const colorCara = activityColor(acts[0], acts, 'minmax')
expect(colorCara).toBe('#ef4444')
})
it('CON varianza real modo minmax: la más barata es verde', () => {
const acts = makeActs([1000, 100, 10])
const colorBarata = activityColor(acts[2], acts, 'minmax')
expect(colorBarata).toBe('#10b981')
})
it('edge: costos negativos no crashean', () => {
const acts = makeActs([0, 0, 0])
expect(() => activityColor(acts[0], acts, 'percentile')).not.toThrow()
})
it('simple-linear scenario: 5 actividades igual costo → todas neutras', () => {
const acts = makeActs([100, 100, 100, 100, 100])
const colors = acts.map((a) => activityColor(a, acts, 'percentile'))
expect(colors.every((c) => c === NEUTRAL_HEATMAP_COLOR)).toBe(true)
})
it('NEUTRAL_HEATMAP_COLOR es un hex válido y claramente distinto del gradiente', () => {
expect(NEUTRAL_HEATMAP_COLOR).toMatch(/^#[0-9a-f]{6}$/)
expect(NEUTRAL_HEATMAP_COLOR).not.toBe('#10b981') // no es verde
expect(NEUTRAL_HEATMAP_COLOR).not.toBe('#f59e0b') // no es amarillo
expect(NEUTRAL_HEATMAP_COLOR).not.toBe('#f97316') // no es naranja
expect(NEUTRAL_HEATMAP_COLOR).not.toBe('#ef4444') // no es rojo
})
})