Antes de la última revisión de etapa 4. Sprint 1. Previo al ajuste de look n feel de app, reportes, nombre y colores.
This commit is contained in:
792
tests/features/report/roi-components.test.tsx
Normal file
792
tests/features/report/roi-components.test.tsx
Normal file
@@ -0,0 +1,792 @@
|
||||
/**
|
||||
* Tests de los componentes de ROI del reporte (Sprint 1 — Etapa 3).
|
||||
*
|
||||
* Cubre: RoiKpiBar, ComparisonTable, TransparencySection, TopSavingsChart,
|
||||
* CumulativeSavingsChart, y el comportamiento de tabs de ReportPage.
|
||||
*/
|
||||
|
||||
import { describe, it, expect, vi, beforeEach } from 'vitest'
|
||||
import { render, screen, fireEvent, waitFor } from '@testing-library/react'
|
||||
import userEvent from '@testing-library/user-event'
|
||||
import React from 'react'
|
||||
|
||||
// ─── Mocks de dependencias del browser ───────────────────────────────────────
|
||||
|
||||
vi.mock('bpmn-js/lib/Viewer', () => ({
|
||||
default: class MockViewer {
|
||||
importXML = vi.fn().mockResolvedValue({ warnings: [] })
|
||||
get = vi.fn().mockImplementation((svc: string) => {
|
||||
if (svc === 'canvas') return { zoom: vi.fn(), addMarker: vi.fn(), removeMarker: vi.fn() }
|
||||
if (svc === 'elementRegistry') return { forEach: vi.fn(), getGraphics: vi.fn().mockReturnValue(null), get: vi.fn().mockReturnValue({ width: 100 }) }
|
||||
if (svc === 'overlays') return { add: vi.fn(), remove: vi.fn() }
|
||||
if (svc === 'eventBus') return { on: vi.fn(), off: vi.fn() }
|
||||
return {}
|
||||
})
|
||||
destroy = vi.fn()
|
||||
},
|
||||
}))
|
||||
|
||||
vi.mock('echarts-for-react', () => ({
|
||||
default: ({ style }: { option: unknown; style?: React.CSSProperties }) => (
|
||||
<div data-testid="echarts-chart" style={style} />
|
||||
),
|
||||
}))
|
||||
|
||||
vi.mock('@/features/report/useReportData', () => ({
|
||||
useReportData: vi.fn(),
|
||||
}))
|
||||
|
||||
vi.mock('@tanstack/react-router', async (importActual) => {
|
||||
const actual = await importActual<typeof import('@tanstack/react-router')>()
|
||||
return {
|
||||
...actual,
|
||||
useParams: vi.fn().mockReturnValue({ processId: 'test-proc-id' }),
|
||||
useNavigate: vi.fn().mockReturnValue(vi.fn()),
|
||||
}
|
||||
})
|
||||
|
||||
// ─── Fixtures ─────────────────────────────────────────────────────────────────
|
||||
|
||||
import type { ActivitySimResult, Activity, SimulationResult } from '@/domain/types'
|
||||
import type { RoiResult } from '@/domain/roi'
|
||||
import { TooltipProvider } from '@/components/ui/tooltip'
|
||||
|
||||
const makeActivity = (id: string, name: string, cost: number): ActivitySimResult => ({
|
||||
activityId: id,
|
||||
bpmnElementId: `bpmn_${id}`,
|
||||
activityName: name,
|
||||
expectedDirectCost: cost * 0.83,
|
||||
expectedIndirectCost: cost * 0.17,
|
||||
expectedTotalCost: cost,
|
||||
percentOfTotal: 33,
|
||||
executionProbability: 1.0,
|
||||
expectedExecutions: 1.0,
|
||||
executionTimeMinutes: 60,
|
||||
resourceCostBreakdown: [],
|
||||
})
|
||||
|
||||
const perActivityActual: ActivitySimResult[] = [
|
||||
makeActivity('a1', 'Recibir solicitud', 600),
|
||||
makeActivity('a2', 'Calcular score', 300),
|
||||
makeActivity('a3', 'Analizar riesgo', 100),
|
||||
]
|
||||
|
||||
const perActivityAutomated: ActivitySimResult[] = [
|
||||
makeActivity('a1', 'Recibir solicitud', 60), // 90% ahorro
|
||||
makeActivity('a2', 'Calcular score', 30), // 90% ahorro
|
||||
makeActivity('a3', 'Analizar riesgo', 100), // sin cambio (no automatable)
|
||||
]
|
||||
|
||||
const mockResult: SimulationResult = {
|
||||
totalCost: 1000,
|
||||
totalDirectCost: 833,
|
||||
totalIndirectCost: 167,
|
||||
totalTimeMinutes: 180,
|
||||
perActivity: perActivityActual,
|
||||
perResource: [],
|
||||
warnings: [],
|
||||
}
|
||||
|
||||
const mockResultAutomated: SimulationResult = {
|
||||
totalCost: 190,
|
||||
totalDirectCost: 158,
|
||||
totalIndirectCost: 32,
|
||||
totalTimeMinutes: 30,
|
||||
perActivity: perActivityAutomated,
|
||||
perResource: [],
|
||||
warnings: [],
|
||||
}
|
||||
|
||||
const mockRoi: RoiResult = {
|
||||
savingsPerExecution: 810,
|
||||
savingsPerExecutionPercent: 81,
|
||||
annualSavings: 9_720_000,
|
||||
paybackMonths: 0.617,
|
||||
paybackYears: 0.051,
|
||||
cumulativeSavingsHorizon: 29_110_000,
|
||||
breaksEvenInHorizon: true,
|
||||
roiAnnualPercent: 19440,
|
||||
}
|
||||
|
||||
const roiNoSavings: RoiResult = {
|
||||
savingsPerExecution: -50,
|
||||
savingsPerExecutionPercent: -10,
|
||||
annualSavings: -60_000,
|
||||
paybackMonths: Infinity,
|
||||
paybackYears: Infinity,
|
||||
cumulativeSavingsHorizon: -230_000,
|
||||
breaksEvenInHorizon: false,
|
||||
roiAnnualPercent: -60,
|
||||
}
|
||||
|
||||
const roiZeroInvestment: RoiResult = {
|
||||
savingsPerExecution: 200,
|
||||
savingsPerExecutionPercent: 50,
|
||||
annualSavings: 240_000,
|
||||
paybackMonths: 0,
|
||||
paybackYears: 0,
|
||||
cumulativeSavingsHorizon: 720_000,
|
||||
breaksEvenInHorizon: true,
|
||||
roiAnnualPercent: Infinity,
|
||||
}
|
||||
|
||||
// ─── RoiKpiBar ────────────────────────────────────────────────────────────────
|
||||
|
||||
import { RoiKpiBar } from '@/features/report/RoiKpiBar'
|
||||
|
||||
describe('RoiKpiBar', () => {
|
||||
it('renderiza exactamente 5 ROI KPI cards', () => {
|
||||
render(<RoiKpiBar roi={mockRoi} currency="USD" horizonYears={3} />)
|
||||
expect(screen.getAllByTestId('roi-kpi-card')).toHaveLength(5)
|
||||
})
|
||||
|
||||
it('muestra el ahorro por ejecución formateado con moneda', () => {
|
||||
render(<RoiKpiBar roi={mockRoi} currency="USD" horizonYears={3} />)
|
||||
const text = document.body.textContent ?? ''
|
||||
// $810.00 debe aparecer
|
||||
expect(text).toMatch(/810/)
|
||||
})
|
||||
|
||||
it('payback Infinity → muestra "No se recupera"', () => {
|
||||
render(<RoiKpiBar roi={roiNoSavings} currency="USD" horizonYears={3} />)
|
||||
expect(screen.getByText(/No se recupera/i)).toBeInTheDocument()
|
||||
})
|
||||
|
||||
it('payback 0 (inversión cero) → muestra "Inmediato"', () => {
|
||||
render(<RoiKpiBar roi={roiZeroInvestment} currency="USD" horizonYears={3} />)
|
||||
expect(screen.getByText(/Inmediato/i)).toBeInTheDocument()
|
||||
})
|
||||
|
||||
it('ROI Infinity (inversión cero) → muestra "∞%"', () => {
|
||||
render(<RoiKpiBar roi={roiZeroInvestment} currency="USD" horizonYears={3} />)
|
||||
expect(screen.getByText('∞%')).toBeInTheDocument()
|
||||
})
|
||||
|
||||
it('ahorro negativo: "breaksEvenInHorizon = false" → subtexto fuera del horizonte', () => {
|
||||
render(<RoiKpiBar roi={roiNoSavings} currency="USD" horizonYears={3} />)
|
||||
expect(screen.getByText(/Fuera del horizonte/i)).toBeInTheDocument()
|
||||
})
|
||||
|
||||
it('breaksEvenInHorizon = true → subtexto dentro del horizonte', () => {
|
||||
render(<RoiKpiBar roi={mockRoi} currency="USD" horizonYears={3} />)
|
||||
expect(screen.getByText(/Dentro del horizonte/i)).toBeInTheDocument()
|
||||
})
|
||||
|
||||
it('horizonYears se refleja en el label del KPI de acumulado', () => {
|
||||
render(<RoiKpiBar roi={mockRoi} currency="USD" horizonYears={5} />)
|
||||
const text = document.body.textContent ?? ''
|
||||
expect(text).toMatch(/5 años/)
|
||||
})
|
||||
|
||||
it('ningún KPI muestra NaN', () => {
|
||||
render(<RoiKpiBar roi={mockRoi} currency="USD" horizonYears={3} />)
|
||||
const text = document.body.textContent ?? ''
|
||||
expect(text).not.toContain('NaN')
|
||||
})
|
||||
})
|
||||
|
||||
// ─── ComparisonTable ──────────────────────────────────────────────────────────
|
||||
|
||||
import { ComparisonTable } from '@/features/report/ComparisonTable'
|
||||
|
||||
const automatableIds = new Set(['bpmn_a1', 'bpmn_a2']) // a1 y a2 son automatizables
|
||||
const noAutomatableIds = new Set<string>()
|
||||
|
||||
describe('ComparisonTable', () => {
|
||||
it('renderiza N+1 rows (N actividades + 1 header)', () => {
|
||||
render(
|
||||
<ComparisonTable
|
||||
perActivityActual={perActivityActual}
|
||||
perActivityAutomated={perActivityAutomated}
|
||||
automatableIds={automatableIds}
|
||||
currency="USD"
|
||||
/>
|
||||
)
|
||||
const rows = screen.getAllByRole('row')
|
||||
expect(rows).toHaveLength(perActivityActual.length + 1)
|
||||
})
|
||||
|
||||
it('actividades automatable muestran ícono Bot', () => {
|
||||
render(
|
||||
<ComparisonTable
|
||||
perActivityActual={perActivityActual}
|
||||
perActivityAutomated={perActivityAutomated}
|
||||
automatableIds={automatableIds}
|
||||
currency="USD"
|
||||
/>
|
||||
)
|
||||
// a1 y a2 son automatable → 2 íconos Bot
|
||||
const botIcons = document.querySelectorAll('[aria-label="Marcada como automatizable"]')
|
||||
expect(botIcons).toHaveLength(2)
|
||||
})
|
||||
|
||||
it('actividades NO automatable NO muestran ícono Bot', () => {
|
||||
render(
|
||||
<ComparisonTable
|
||||
perActivityActual={perActivityActual}
|
||||
perActivityAutomated={perActivityAutomated}
|
||||
automatableIds={noAutomatableIds} // ninguna automatable
|
||||
currency="USD"
|
||||
/>
|
||||
)
|
||||
const botIcons = document.querySelectorAll('[aria-label="Marcada como automatizable"]')
|
||||
expect(botIcons).toHaveLength(0)
|
||||
})
|
||||
|
||||
it('ahorro de a1: 600 - 60 = 540 aparece en la tabla', () => {
|
||||
render(
|
||||
<ComparisonTable
|
||||
perActivityActual={perActivityActual}
|
||||
perActivityAutomated={perActivityAutomated}
|
||||
automatableIds={automatableIds}
|
||||
currency="USD"
|
||||
/>
|
||||
)
|
||||
const text = document.body.textContent ?? ''
|
||||
expect(text).toMatch(/540/)
|
||||
})
|
||||
|
||||
it('tabla vacía: muestra mensaje sin actividades', () => {
|
||||
render(
|
||||
<ComparisonTable
|
||||
perActivityActual={[]}
|
||||
perActivityAutomated={[]}
|
||||
automatableIds={noAutomatableIds}
|
||||
currency="USD"
|
||||
/>
|
||||
)
|
||||
expect(screen.getByText(/Sin actividades para comparar/i)).toBeInTheDocument()
|
||||
})
|
||||
|
||||
it('ahorro negativo: se muestra sin prefijo +', () => {
|
||||
const negativeActual = [makeActivity('x1', 'Tarea cara auto', 100)]
|
||||
const negativeAuto = [makeActivity('x1', 'Tarea cara auto', 200)] // costo auto > actual
|
||||
render(
|
||||
<ComparisonTable
|
||||
perActivityActual={negativeActual}
|
||||
perActivityAutomated={negativeAuto}
|
||||
automatableIds={new Set(['bpmn_x1'])}
|
||||
currency="USD"
|
||||
/>
|
||||
)
|
||||
// -100 de ahorro, sin prefijo '+'
|
||||
const text = document.body.textContent ?? ''
|
||||
expect(text).not.toMatch(/\+.*-/)
|
||||
})
|
||||
|
||||
it('sort toggle: clic en encabezado "Ahorro" invierte el orden', () => {
|
||||
render(
|
||||
<ComparisonTable
|
||||
perActivityActual={perActivityActual}
|
||||
perActivityAutomated={perActivityAutomated}
|
||||
automatableIds={automatableIds}
|
||||
currency="USD"
|
||||
/>
|
||||
)
|
||||
// Buscar el th que contiene "Ahorro" (hay múltiples elementos con ese texto)
|
||||
const headers = screen.getAllByRole('columnheader')
|
||||
const ahorroHeader = headers.find((h) => /Ahorro/i.test(h.textContent ?? ''))
|
||||
expect(ahorroHeader).toBeDefined()
|
||||
|
||||
// Antes del click: orden desc (a1=540 primero)
|
||||
const rowsBefore = screen.getAllByRole('row').slice(1)
|
||||
const firstNameBefore = rowsBefore[0].textContent
|
||||
|
||||
fireEvent.click(ahorroHeader!)
|
||||
// Después del click: orden asc (a3=0 primero)
|
||||
const rowsAfter = screen.getAllByRole('row').slice(1)
|
||||
const firstNameAfter = rowsAfter[0].textContent
|
||||
|
||||
expect(firstNameBefore).not.toBe(firstNameAfter)
|
||||
})
|
||||
})
|
||||
|
||||
// ─── TransparencySection ──────────────────────────────────────────────────────
|
||||
|
||||
import { TransparencySection } from '@/features/report/TransparencySection'
|
||||
|
||||
const makeActivityDomain = (id: string, name: string, automatable: boolean, zeroCosts: boolean): Activity => ({
|
||||
id, processId: 'p1', bpmnElementId: `bpmn_${id}`, name, type: 'task',
|
||||
directCostFixed: 200, executionTimeMinutes: 60, assignedResources: [],
|
||||
automatable,
|
||||
automatedCostFixed: zeroCosts ? 0 : 50,
|
||||
automatedTimeMinutes: zeroCosts ? 0 : 10,
|
||||
})
|
||||
|
||||
describe('TransparencySection', () => {
|
||||
it('retorna null cuando no hay issues — no renderiza nada', () => {
|
||||
const { container } = render(
|
||||
<TransparencySection
|
||||
activities={[makeActivityDomain('a1', 'Tarea', true, false)]} // automatable con costos configurados
|
||||
investment={50_000}
|
||||
/>
|
||||
)
|
||||
expect(container.firstChild).toBeNull()
|
||||
})
|
||||
|
||||
it('Caso 1: actividad automatable con costos en cero → sección visible', () => {
|
||||
render(
|
||||
<TransparencySection
|
||||
activities={[makeActivityDomain('a1', 'Facturación', true, true)]} // automatable, costo=0
|
||||
investment={50_000}
|
||||
/>
|
||||
)
|
||||
expect(screen.getByText(/Transparencia metodológica/i)).toBeInTheDocument()
|
||||
expect(screen.getByText('Facturación')).toBeInTheDocument()
|
||||
})
|
||||
|
||||
it('Caso 1: mensaje explica que el ahorro puede estar inflado', () => {
|
||||
render(
|
||||
<TransparencySection
|
||||
activities={[makeActivityDomain('a1', 'Facturación', true, true)]}
|
||||
investment={50_000}
|
||||
/>
|
||||
)
|
||||
expect(screen.getByText(/inflar artificialmente el ahorro/i)).toBeInTheDocument()
|
||||
})
|
||||
|
||||
it('Caso 1: plural correcto cuando hay múltiples actividades en cero', () => {
|
||||
render(
|
||||
<TransparencySection
|
||||
activities={[
|
||||
makeActivityDomain('a1', 'Tarea 1', true, true),
|
||||
makeActivityDomain('a2', 'Tarea 2', true, true),
|
||||
]}
|
||||
investment={50_000}
|
||||
/>
|
||||
)
|
||||
expect(screen.getByText(/2 actividades automatizables sin costo configurado/i)).toBeInTheDocument()
|
||||
})
|
||||
|
||||
it('Caso 2: investment=0 → muestra aviso de inversión no configurada', () => {
|
||||
render(
|
||||
<TransparencySection
|
||||
activities={[makeActivityDomain('a1', 'Tarea', true, false)]} // costos OK
|
||||
investment={0}
|
||||
/>
|
||||
)
|
||||
expect(screen.getByText(/Inversión en automatización no configurada/i)).toBeInTheDocument()
|
||||
expect(screen.getByText(/payback aparece como inmediato/i)).toBeInTheDocument()
|
||||
})
|
||||
|
||||
it('Caso 3: ambos issues coexisten — se muestran ambos mensajes en la misma sección', () => {
|
||||
render(
|
||||
<TransparencySection
|
||||
activities={[makeActivityDomain('a1', 'Facturación', true, true)]} // costo cero
|
||||
investment={0} // inversión cero
|
||||
/>
|
||||
)
|
||||
expect(screen.getByText('Facturación')).toBeInTheDocument()
|
||||
expect(screen.getByText(/Inversión en automatización no configurada/i)).toBeInTheDocument()
|
||||
})
|
||||
|
||||
it('actividades no automatable no generan issue aunque tengan costos cero', () => {
|
||||
const { container } = render(
|
||||
<TransparencySection
|
||||
activities={[makeActivityDomain('a1', 'Manual', false, true)]} // no automatable
|
||||
investment={50_000}
|
||||
/>
|
||||
)
|
||||
expect(container.firstChild).toBeNull()
|
||||
})
|
||||
|
||||
// ─── Caso 4: ROI inusualmente alto ────────────────────────────────────────
|
||||
|
||||
const makeRoi = (roiAnnualPercent: number): RoiResult => ({
|
||||
savingsPerExecution: 100,
|
||||
savingsPerExecutionPercent: 50,
|
||||
annualSavings: 1_200_000,
|
||||
paybackMonths: 0.5,
|
||||
paybackYears: 0.04,
|
||||
cumulativeSavingsHorizon: 3_550_000,
|
||||
breaksEvenInHorizon: true,
|
||||
roiAnnualPercent,
|
||||
})
|
||||
|
||||
it('Caso 4: ROI al 999% NO dispara el aviso de ROI inusual', () => {
|
||||
const { container } = render(
|
||||
<TransparencySection
|
||||
activities={[makeActivityDomain('a1', 'T', true, false)]}
|
||||
investment={50_000}
|
||||
roi={makeRoi(999)}
|
||||
/>
|
||||
)
|
||||
// No hay otros issues → el componente no renderiza (999% no supera el umbral)
|
||||
expect(container.firstChild).toBeNull()
|
||||
})
|
||||
|
||||
it('Caso 4: ROI al 1001% SÍ dispara el aviso de ROI inusual', () => {
|
||||
render(
|
||||
<TransparencySection
|
||||
activities={[makeActivityDomain('a1', 'T', true, false)]}
|
||||
investment={50_000}
|
||||
roi={makeRoi(1001)}
|
||||
/>
|
||||
)
|
||||
expect(screen.getByText(/ROI inusualmente alto detectado/i)).toBeInTheDocument()
|
||||
// El texto incluye el valor formateado (>1000%)
|
||||
const text = document.body.textContent ?? ''
|
||||
expect(text).toMatch(/1\.001/)
|
||||
})
|
||||
|
||||
it('Caso 4: ROI Infinity (investment=0) NO dispara este aviso — lo cubre el caso 2', () => {
|
||||
const { container } = render(
|
||||
<TransparencySection
|
||||
activities={[makeActivityDomain('a1', 'T', true, false)]}
|
||||
investment={0} // caso 2 activo
|
||||
roi={makeRoi(Infinity)}
|
||||
/>
|
||||
)
|
||||
// El caso 2 (investment=0) sí aparece, pero NO el aviso de "ROI inusualmente alto"
|
||||
expect(screen.queryByText(/ROI inusualmente alto detectado/i)).not.toBeInTheDocument()
|
||||
// El caso 2 sí está presente
|
||||
expect(container.firstChild).not.toBeNull()
|
||||
expect(screen.getByText(/Inversión en automatización no configurada/i)).toBeInTheDocument()
|
||||
})
|
||||
|
||||
it('Caso 4: ROI negativo NO dispara el aviso de ROI inusual', () => {
|
||||
const { container } = render(
|
||||
<TransparencySection
|
||||
activities={[makeActivityDomain('a1', 'T', true, false)]}
|
||||
investment={50_000}
|
||||
roi={makeRoi(-50)}
|
||||
/>
|
||||
)
|
||||
expect(container.firstChild).toBeNull()
|
||||
expect(screen.queryByText(/ROI inusualmente alto detectado/i)).not.toBeInTheDocument()
|
||||
})
|
||||
|
||||
it('Caso 4 coexiste con Caso 1: ROI alto Y actividad con costo=0 → ambos mensajes', () => {
|
||||
render(
|
||||
<TransparencySection
|
||||
activities={[makeActivityDomain('a1', 'Facturación', true, true)]} // costo=0
|
||||
investment={50_000} // no es cero
|
||||
roi={makeRoi(5000)} // > 1000 y finite
|
||||
/>
|
||||
)
|
||||
expect(screen.getByText('Facturación')).toBeInTheDocument() // Caso 1
|
||||
expect(screen.getByText(/ROI inusualmente alto detectado/i)).toBeInTheDocument() // Caso 4
|
||||
})
|
||||
})
|
||||
|
||||
// ─── TopSavingsChart ──────────────────────────────────────────────────────────
|
||||
|
||||
import { TopSavingsChart } from '@/features/report/TopSavingsChart'
|
||||
|
||||
describe('TopSavingsChart', () => {
|
||||
it('muestra empty state cuando no hay ahorros positivos', () => {
|
||||
// perActivityAutomated con costos mayores → ahorro negativo
|
||||
const actualCosts = [makeActivity('a1', 'Tarea', 100)]
|
||||
const autoCosts = [makeActivity('a1', 'Tarea', 200)]
|
||||
render(
|
||||
<TopSavingsChart
|
||||
perActivityActual={actualCosts}
|
||||
perActivityAutomated={autoCosts}
|
||||
currency="USD"
|
||||
/>
|
||||
)
|
||||
expect(screen.getByText(/Sin actividades con ahorro positivo/i)).toBeInTheDocument()
|
||||
})
|
||||
|
||||
it('con ahorros positivos: renderiza el chart ECharts', () => {
|
||||
render(
|
||||
<TopSavingsChart
|
||||
perActivityActual={perActivityActual}
|
||||
perActivityAutomated={perActivityAutomated}
|
||||
currency="USD"
|
||||
/>
|
||||
)
|
||||
expect(screen.getByTestId('echarts-chart')).toBeInTheDocument()
|
||||
})
|
||||
|
||||
it('excluye actividades con ahorro cero o negativo del chart', () => {
|
||||
// a3 no tiene ahorro (costos iguales) → no debe aparecer en el chart
|
||||
// Solo a1 y a2 tienen ahorro positivo
|
||||
// Si renderiza chart → hay ≥1 actividad con ahorro > 0
|
||||
render(
|
||||
<TopSavingsChart
|
||||
perActivityActual={perActivityActual}
|
||||
perActivityAutomated={perActivityAutomated}
|
||||
currency="USD"
|
||||
/>
|
||||
)
|
||||
// Chart renderizado → hay actividades con ahorro positivo
|
||||
expect(screen.getByTestId('echarts-chart')).toBeInTheDocument()
|
||||
})
|
||||
|
||||
it('con más de 5 actividades: sigue renderizando chart (top-5 filtrado internamente)', () => {
|
||||
const manyActual = Array.from({ length: 8 }, (_, i) =>
|
||||
makeActivity(`a${i}`, `Tarea ${i}`, (i + 1) * 100)
|
||||
)
|
||||
const manyAuto = Array.from({ length: 8 }, (_, i) =>
|
||||
makeActivity(`a${i}`, `Tarea ${i}`, (i + 1) * 10)
|
||||
)
|
||||
render(
|
||||
<TopSavingsChart
|
||||
perActivityActual={manyActual}
|
||||
perActivityAutomated={manyAuto}
|
||||
currency="USD"
|
||||
/>
|
||||
)
|
||||
// No debe tirar error ni mostrar más de 5 en el chart (ECharts mockeado — no podemos inspeccionar option)
|
||||
expect(screen.getByTestId('echarts-chart')).toBeInTheDocument()
|
||||
})
|
||||
})
|
||||
|
||||
// ─── CumulativeSavingsChart ───────────────────────────────────────────────────
|
||||
|
||||
import { CumulativeSavingsChart } from '@/features/report/CumulativeSavingsChart'
|
||||
|
||||
describe('CumulativeSavingsChart', () => {
|
||||
it('renderiza el chart sin crash (payback dentro del horizonte)', () => {
|
||||
render(
|
||||
<CumulativeSavingsChart
|
||||
roi={mockRoi}
|
||||
horizonYears={3}
|
||||
currency="USD"
|
||||
investment={50_000}
|
||||
/>
|
||||
)
|
||||
expect(screen.getByTestId('echarts-chart')).toBeInTheDocument()
|
||||
})
|
||||
|
||||
it('renderiza el chart sin crash cuando payback = Infinity (sin ahorro)', () => {
|
||||
render(
|
||||
<CumulativeSavingsChart
|
||||
roi={roiNoSavings}
|
||||
horizonYears={3}
|
||||
currency="USD"
|
||||
investment={50_000}
|
||||
/>
|
||||
)
|
||||
expect(screen.getByTestId('echarts-chart')).toBeInTheDocument()
|
||||
})
|
||||
|
||||
it('renderiza el chart sin crash cuando investment = 0', () => {
|
||||
render(
|
||||
<CumulativeSavingsChart
|
||||
roi={roiZeroInvestment}
|
||||
horizonYears={3}
|
||||
currency="USD"
|
||||
investment={0}
|
||||
/>
|
||||
)
|
||||
expect(screen.getByTestId('echarts-chart')).toBeInTheDocument()
|
||||
})
|
||||
})
|
||||
|
||||
// ─── ReportPage — comportamiento de tabs ──────────────────────────────────────
|
||||
|
||||
import { useReportData } from '@/features/report/useReportData'
|
||||
import { ReportPage } from '@/features/report/ReportPage'
|
||||
|
||||
const mockProcessBase = {
|
||||
id: 'test-proc-id', name: 'Proceso Test', clientName: 'Cliente',
|
||||
bpmnXml: '<?xml version="1.0"?><definitions xmlns="http://www.omg.org/spec/BPMN/20100524/MODEL"><process id="p"><startEvent id="s"><outgoing>f1</outgoing></startEvent><task id="t1" name="Task 1"><incoming>f1</incoming><outgoing>f2</outgoing></task><endEvent id="e"><incoming>f2</incoming></endEvent><sequenceFlow id="f1" sourceRef="s" targetRef="t1"/><sequenceFlow id="f2" sourceRef="t1" targetRef="e"/></process></definitions>',
|
||||
currency: 'USD', overheadPercentage: 0.2,
|
||||
annualFrequency: 1200, analysisHorizonYears: 3, automationInvestment: 50_000,
|
||||
createdAt: Date.now() - 3600_000, updatedAt: Date.now() - 3600_000,
|
||||
}
|
||||
|
||||
const mockSimulationBase = {
|
||||
id: 'sim-1', processId: 'test-proc-id',
|
||||
executedAt: Date.now() - 600_000,
|
||||
result: mockResult,
|
||||
}
|
||||
|
||||
const automtableActivity: Activity = {
|
||||
id: 'act-1', processId: 'test-proc-id', bpmnElementId: 'bpmn_a1', name: 'Recibir solicitud',
|
||||
type: 'task', directCostFixed: 500, executionTimeMinutes: 60, assignedResources: [],
|
||||
automatable: true, automatedCostFixed: 50, automatedTimeMinutes: 5,
|
||||
}
|
||||
|
||||
const nonAutomatableActivity: Activity = {
|
||||
...automtableActivity, id: 'act-2', bpmnElementId: 'bpmn_a2', name: 'Procesar',
|
||||
automatable: false,
|
||||
}
|
||||
|
||||
describe('ReportPage — comportamiento de tabs', () => {
|
||||
beforeEach(() => {
|
||||
vi.clearAllMocks()
|
||||
})
|
||||
|
||||
it('sin resultAutomated (snapshot viejo): tabs "Automatizado" y "ROI" están disabled', () => {
|
||||
vi.mocked(useReportData).mockReturnValue({
|
||||
process: mockProcessBase,
|
||||
simulation: { ...mockSimulationBase }, // sin resultAutomated
|
||||
activities: [automtableActivity],
|
||||
resources: [],
|
||||
isLoading: false,
|
||||
error: null,
|
||||
})
|
||||
render(
|
||||
<TooltipProvider>
|
||||
<ReportPage />
|
||||
</TooltipProvider>
|
||||
)
|
||||
const tabAuto = screen.getByRole('tab', { name: /automatizado/i })
|
||||
const tabRoi = screen.getByRole('tab', { name: /comparación/i })
|
||||
expect(tabAuto).toBeDisabled()
|
||||
expect(tabRoi).toBeDisabled()
|
||||
})
|
||||
|
||||
it('con resultAutomated pero SIN actividades automatizables: tabs disabled', () => {
|
||||
vi.mocked(useReportData).mockReturnValue({
|
||||
process: mockProcessBase,
|
||||
simulation: { ...mockSimulationBase, resultAutomated: mockResultAutomated },
|
||||
activities: [nonAutomatableActivity], // no hay automatable
|
||||
resources: [],
|
||||
isLoading: false,
|
||||
error: null,
|
||||
})
|
||||
render(
|
||||
<TooltipProvider>
|
||||
<ReportPage />
|
||||
</TooltipProvider>
|
||||
)
|
||||
const tabAuto = screen.getByRole('tab', { name: /automatizado/i })
|
||||
const tabRoi = screen.getByRole('tab', { name: /comparación/i })
|
||||
expect(tabAuto).toBeDisabled()
|
||||
expect(tabRoi).toBeDisabled()
|
||||
})
|
||||
|
||||
it('con resultAutomated Y actividades automatizables: tabs habilitados', () => {
|
||||
vi.mocked(useReportData).mockReturnValue({
|
||||
process: mockProcessBase,
|
||||
simulation: { ...mockSimulationBase, resultAutomated: mockResultAutomated },
|
||||
activities: [automtableActivity], // hay 1 automatable
|
||||
resources: [],
|
||||
isLoading: false,
|
||||
error: null,
|
||||
})
|
||||
render(
|
||||
<TooltipProvider>
|
||||
<ReportPage />
|
||||
</TooltipProvider>
|
||||
)
|
||||
const tabAuto = screen.getByRole('tab', { name: /automatizado/i })
|
||||
const tabRoi = screen.getByRole('tab', { name: /comparación/i })
|
||||
expect(tabAuto).not.toBeDisabled()
|
||||
expect(tabRoi).not.toBeDisabled()
|
||||
})
|
||||
|
||||
it('tab "Actual" activo por defecto: muestra los 4 KPI cards del costo actual', () => {
|
||||
vi.mocked(useReportData).mockReturnValue({
|
||||
process: mockProcessBase,
|
||||
simulation: { ...mockSimulationBase, resultAutomated: mockResultAutomated },
|
||||
activities: [automtableActivity],
|
||||
resources: [],
|
||||
isLoading: false,
|
||||
error: null,
|
||||
})
|
||||
render(
|
||||
<TooltipProvider>
|
||||
<ReportPage />
|
||||
</TooltipProvider>
|
||||
)
|
||||
// Tab "Actual" activo por defecto → 4 kpi-cards (no 5 roi-kpi-cards)
|
||||
expect(screen.getAllByTestId('kpi-card')).toHaveLength(4)
|
||||
expect(screen.queryByTestId('roi-kpi-card')).toBeNull()
|
||||
})
|
||||
|
||||
it('click en tab "Comparación + ROI": muestra 5 ROI KPI cards', async () => {
|
||||
const user = userEvent.setup()
|
||||
vi.mocked(useReportData).mockReturnValue({
|
||||
process: mockProcessBase,
|
||||
simulation: { ...mockSimulationBase, resultAutomated: mockResultAutomated },
|
||||
activities: [automtableActivity],
|
||||
resources: [],
|
||||
isLoading: false,
|
||||
error: null,
|
||||
})
|
||||
render(
|
||||
<TooltipProvider>
|
||||
<ReportPage />
|
||||
</TooltipProvider>
|
||||
)
|
||||
await user.click(screen.getByRole('tab', { name: /comparación/i }))
|
||||
await waitFor(() => expect(screen.getAllByTestId('roi-kpi-card')).toHaveLength(5))
|
||||
})
|
||||
|
||||
it('click en tab "Comparación + ROI": la tabla de comparación tiene N+1 rows', async () => {
|
||||
const user = userEvent.setup()
|
||||
vi.mocked(useReportData).mockReturnValue({
|
||||
process: mockProcessBase,
|
||||
simulation: { ...mockSimulationBase, resultAutomated: mockResultAutomated },
|
||||
activities: [automtableActivity],
|
||||
resources: [],
|
||||
isLoading: false,
|
||||
error: null,
|
||||
})
|
||||
render(
|
||||
<TooltipProvider>
|
||||
<ReportPage />
|
||||
</TooltipProvider>
|
||||
)
|
||||
await user.click(screen.getByRole('tab', { name: /comparación/i }))
|
||||
// mockResult tiene 3 actividades → 3 data rows + 1 header
|
||||
await waitFor(() => expect(screen.getAllByRole('row')).toHaveLength(perActivityActual.length + 1))
|
||||
})
|
||||
|
||||
it('click en tab "Comparación + ROI" con investment=0: TransparencySection visible', async () => {
|
||||
const user = userEvent.setup()
|
||||
vi.mocked(useReportData).mockReturnValue({
|
||||
process: { ...mockProcessBase, automationInvestment: 0 },
|
||||
simulation: { ...mockSimulationBase, resultAutomated: mockResultAutomated },
|
||||
activities: [automtableActivity],
|
||||
resources: [],
|
||||
isLoading: false,
|
||||
error: null,
|
||||
})
|
||||
render(
|
||||
<TooltipProvider>
|
||||
<ReportPage />
|
||||
</TooltipProvider>
|
||||
)
|
||||
await user.click(screen.getByRole('tab', { name: /comparación/i }))
|
||||
await waitFor(() => expect(screen.getByText(/Transparencia metodológica/i)).toBeInTheDocument())
|
||||
})
|
||||
|
||||
it('tab "Automatizado": muestra los 4 KPI cards del escenario automatizado', () => {
|
||||
vi.mocked(useReportData).mockReturnValue({
|
||||
process: mockProcessBase,
|
||||
simulation: { ...mockSimulationBase, resultAutomated: mockResultAutomated },
|
||||
activities: [automtableActivity],
|
||||
resources: [],
|
||||
isLoading: false,
|
||||
error: null,
|
||||
})
|
||||
render(
|
||||
<TooltipProvider>
|
||||
<ReportPage />
|
||||
</TooltipProvider>
|
||||
)
|
||||
fireEvent.click(screen.getByRole('tab', { name: /automatizado/i }))
|
||||
// El tab automatizado también muestra 4 kpi-cards (del escenario automatizado)
|
||||
const kpiCards = screen.getAllByTestId('kpi-card')
|
||||
// Puede haber 4 del tab actual (ocultos) + 4 del tab automatizado = 8
|
||||
// O solo 4 si Radix desmonta el tab inactivo
|
||||
expect(kpiCards.length).toBeGreaterThanOrEqual(4)
|
||||
})
|
||||
|
||||
it('tab "Automatizado": la nota de AutomationScenarioNote está presente', async () => {
|
||||
const user = userEvent.setup()
|
||||
vi.mocked(useReportData).mockReturnValue({
|
||||
process: mockProcessBase,
|
||||
simulation: { ...mockSimulationBase, resultAutomated: mockResultAutomated },
|
||||
activities: [automtableActivity],
|
||||
resources: [],
|
||||
isLoading: false,
|
||||
error: null,
|
||||
})
|
||||
render(
|
||||
<TooltipProvider>
|
||||
<ReportPage />
|
||||
</TooltipProvider>
|
||||
)
|
||||
await user.click(screen.getByRole('tab', { name: /automatizado/i }))
|
||||
await waitFor(() =>
|
||||
expect(screen.getByText(/actividades no marcadas como automatizables/i)).toBeInTheDocument()
|
||||
)
|
||||
})
|
||||
})
|
||||
Reference in New Issue
Block a user