Files
inq-roi-simulador-web/tests/e2e/etapa-7-pdfs.spec.ts
Marcos Benítez 2f4633a33c feat(sprint-1.5): rediseño visual PDF ROI + identidad InQ (Etapas 4-7)
- Header/footer compartidos con paleta InQ naranja en los 3 PDFs (Etapa 4)
- Layout híbrido portrait+landscape en PDFs Actual/Automatizado:
  página 2 landscape para diagrama BPMN heatmap (Etapa 5)
- Página 1 PDF ROI rediseñada: header denso, banner narrativo, KPI Hero
  con gradiente naranja→magenta, grid 2×2 de KPIs secundarios, Top 3
  actividades por ahorro (Etapa 6)
- Páginas 2-5 PDF ROI con identidad InQ: tabla con paleta naranja,
  análisis del ahorro, nota metodológica, trayectoria del ahorro
  acumulado con gráfico SVG nativo (Etapa 7)
- 500 tests verdes (+ 34 tests nuevos del Sprint 1.5)
- BACKLOG.md, TECH_DEBT.md, OBSERVATIONS.md: sistema de planificación
  reemplaza TODO.md

Co-Authored-By: Claude Sonnet 4.6 <noreply@anthropic.com>
2026-05-17 20:45:01 -03:00

158 lines
7.2 KiB
TypeScript

/**
* Etapa 7 Sprint 1.5 — PDF ROI páginas 2-5 con identidad InQ.
*
* Validaciones mandatorias:
* 1. PDF ROI: 5 páginas, todas portrait
* 2. Página 5: "TRAYECTORIA DEL AHORRO ACUMULADO" presente (gráfico real, no placeholder)
* 3. Página 3: "COMPOSICIÓN DEL AHORRO", "TRAYECTORIA DEL AHORRO ACUMULADO" (uppercase)
* 4. Página 4: "NOTA METODOLOGICA" (sin caracteres Unicode)
* 5. Tamaño ROI > 30 KB (gráfico SVG + imagen gradiente)
* 6. Sin regresiones de marca: "InQ ROI", "Powered by InQuality"
* 7. PDFs Actual y Automatizado sin cambios: 4 páginas, ['portrait','landscape','portrait','portrait']
* 8. Tests previos >= 500
*/
import { test, expect } from '@playwright/test'
import { resolve } from 'path'
import { mkdirSync, readFileSync } from 'fs'
import { fileURLToPath } from 'url'
import { PDFParse } from 'pdf-parse'
import { getDocument } from 'pdfjs-dist/legacy/build/pdf.mjs'
const __dirname = fileURLToPath(new URL('.', import.meta.url))
const BPMN_DIR = resolve(__dirname, '../../public/sample-processes')
const OUT_DIR = resolve(__dirname, './__output__')
test.beforeAll(() => { mkdirSync(OUT_DIR, { recursive: true }) })
// ─── Helpers ──────────────────────────────────────────────────────────────────
async function parsePdf(buffer: Buffer): Promise<{ numpages: number; text: string }> {
const parser = new PDFParse({ data: buffer })
const result = await parser.getText()
await parser.destroy()
return { numpages: result.total, text: result.text }
}
async function getPageOrientations(buffer: Buffer): Promise<Array<'portrait' | 'landscape'>> {
const uint8 = new Uint8Array(buffer)
const pdf = await getDocument({ data: uint8 }).promise
const orientations: Array<'portrait' | 'landscape'> = []
for (let i = 1; i <= pdf.numPages; i++) {
const page = await pdf.getPage(i)
const viewport = page.getViewport({ scale: 1 })
orientations.push(viewport.width > viewport.height ? 'landscape' : 'portrait')
}
return orientations
}
async function setupAndSimulate(page: import('@playwright/test').Page) {
await page.goto('/')
await page.locator('#bpmn-file-input').setInputFiles(resolve(BPMN_DIR, 'medium-with-gateways.bpmn'))
await page.waitForURL(/\/workspace\//, { timeout: 15_000 })
await page.waitForSelector('button:has-text("Simular")', { timeout: 10_000 })
await page.waitForTimeout(800)
for (const [id, cost, auto] of [['task_recv', 200, 20], ['task_score', 200, 20], ['task_analisis', 200, 20]] as [string, number, number][]) {
await page.locator(`[data-element-id="${id}"]`).first().click()
await page.waitForTimeout(400)
const toggle = page.getByRole('switch', { name: /automatizable/i })
if (await toggle.getAttribute('aria-checked') === 'false') await toggle.click()
await page.waitForTimeout(200)
await page.getByLabel(/Costo directo fijo/i).fill(String(cost))
await page.getByLabel(/Costo automatizado/i).fill(String(auto))
await page.getByLabel(/Tiempo automatizado/i).fill('10')
await page.getByRole('button', { name: /Guardar/i }).click()
await page.waitForTimeout(400)
}
await page.getByRole('tab', { name: /Global/i }).click()
await page.waitForTimeout(300)
await page.getByLabel(/Frecuencia anual/i).fill('5000')
await page.getByLabel(/Inversión en automatización/i).fill('80000')
await page.getByRole('button', { name: /Guardar/i }).click()
await page.waitForTimeout(400)
await page.getByRole('button', { name: 'Simular' }).click()
await page.waitForURL(/\/report\//, { timeout: 20_000 })
await page.waitForSelector('button:has-text("Exportar PDF")', { timeout: 15_000 })
await page.waitForSelector('.bpmn-container .djs-group', { timeout: 30_000 })
await page.waitForTimeout(800)
}
async function downloadPdf(page: import('@playwright/test').Page, tab: 'actual' | 'automatizado' | 'roi', outPath: string) {
if (tab === 'actual') {
await page.getByRole('tab', { name: 'Actual' }).click()
await page.waitForTimeout(400)
} else if (tab === 'automatizado') {
await page.getByRole('tab', { name: 'Automatizado' }).click()
await page.waitForTimeout(400)
} else {
await page.getByRole('tab', { name: /Comparación/i }).click()
await page.waitForSelector('[data-testid="roi-kpi-card"]', { timeout: 10_000 })
await page.waitForTimeout(500)
}
const [download] = await Promise.all([
page.waitForEvent('download', { timeout: 30_000 }),
page.getByRole('button', { name: 'Exportar PDF' }).click(),
])
await download.saveAs(outPath)
}
// ─── Tests ─────────────────────────────────────────────────────────────────────
test('etapa-7-roi.pdf — 5 págs, gráfico SVG real p.5, paleta InQ p.2-4', async ({ page }) => {
await setupAndSimulate(page)
const outPath = resolve(OUT_DIR, 'etapa-7-roi.pdf')
await downloadPdf(page, 'roi', outPath)
const buffer = readFileSync(outPath)
const sizeKB = buffer.length / 1024
console.log(`Tamaño ROI: ${sizeKB.toFixed(1)} KB`)
expect(sizeKB, 'PDF ROI debe superar 30 KB').toBeGreaterThan(30)
const { numpages, text } = await parsePdf(buffer)
console.log(`Páginas: ${numpages}`)
console.log(`Texto primeros 600: ${text.slice(0, 600).replace(/\n/g, ' ')}`)
expect(numpages).toBe(5)
// Marcas globales
expect(text).toMatch(/InQ ROI/)
expect(text).toMatch(/Powered by InQuality/)
expect(text).not.toContain('Process Cost Platform')
expect(text).not.toContain('v0.1.0')
// Página 5: gráfico real (no placeholder)
expect(text, 'p.5 debe tener título del gráfico').toMatch(/TRAYECTORIA DEL AHORRO ACUMULADO/)
expect(text, 'p.5 no debe tener texto placeholder de Etapa 6').not.toContain('próxima versión del reporte')
// Página 3: títulos uppercase InQ
expect(text, 'p.3 debe tener sección COMPOSICIÓN').toMatch(/COMPOSICIÓN DEL AHORRO|COMPOSICION DEL AHORRO/)
// Página 4: nota metodológica
expect(text, 'p.4 debe tener nota metodológica').toMatch(/NOTA METODOLOGICA|NOTA METODOLÓGICA/)
const orientations = await getPageOrientations(buffer)
console.log('Orientaciones ROI:', orientations)
expect(orientations).toEqual(['portrait', 'portrait', 'portrait', 'portrait', 'portrait'])
})
test('etapa-7: PDFs Actual y Automatizado intactos (no-regresión)', async ({ page }) => {
await setupAndSimulate(page)
for (const [tab, label] of [['actual', 'actual'], ['automatizado', 'automatizado']] as ['actual' | 'automatizado', string][]) {
const outPath = resolve(OUT_DIR, `etapa-7-${label}.pdf`)
await downloadPdf(page, tab, outPath)
const buffer = readFileSync(outPath)
const { numpages, text } = await parsePdf(buffer)
console.log(`Páginas ${label}: ${numpages}`)
expect(numpages, `${label}: 4 páginas`).toBe(4)
expect(text).toMatch(/InQ ROI/)
expect(text).toMatch(/Powered by InQuality/)
const orientations = await getPageOrientations(buffer)
console.log(`Orientaciones ${label}:`, orientations)
expect(orientations).toEqual(['portrait', 'landscape', 'portrait', 'portrait'])
}
})