177 lines
7.2 KiB
TypeScript
177 lines
7.2 KiB
TypeScript
/**
|
|
* Etapa 2 Sprint 1.5 — Validación visual de formatPayback.
|
|
*
|
|
* 1. Screenshot del RoiKpiBar mostrando payback formateado (no "0.0 meses").
|
|
* 2. Screenshot de TransparencySection con ROI > 1000%.
|
|
* 3. PDF correcto del tab "Comparación + ROI" guardado para validación visual.
|
|
*
|
|
* Setup: medium-with-gateways, task_recv + task_score + task_analisis automatizables,
|
|
* $200 costo directo / $20 costo automatizado, 5000 ejecuciones/año, $80.000 inversión.
|
|
*
|
|
* Root cause del PDF erróneo en run anterior: el test exportaba antes de navegar al
|
|
* tab ROI, por lo que activeTab = 'actual' y se generaba el PDF del escenario actual.
|
|
* Fix: navegar al tab "Comparación + ROI" ANTES de exportar.
|
|
*/
|
|
import { test, expect } from '@playwright/test'
|
|
import { resolve } from 'path'
|
|
import { mkdirSync } from 'fs'
|
|
import { fileURLToPath } from 'url'
|
|
|
|
test.use({ storageState: 'tests/e2e/setup/auth-state.json' })
|
|
|
|
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 importBpmn(page: import('@playwright/test').Page, filename: string) {
|
|
await page.goto('/import')
|
|
await page.locator('#bpmn-file-input').setInputFiles(resolve(BPMN_DIR, filename))
|
|
await page.waitForURL(/\/workspace\//, { timeout: 15_000 })
|
|
await page.waitForSelector('button:has-text("Simular")', { timeout: 10_000 })
|
|
await page.waitForTimeout(1_000)
|
|
}
|
|
|
|
async function setActivityCosts(
|
|
page: import('@playwright/test').Page,
|
|
elementId: string,
|
|
directCost: number,
|
|
automatedCost: number,
|
|
automatedTime: number
|
|
) {
|
|
await page.locator(`[data-element-id="${elementId}"]`).first().click()
|
|
await page.waitForTimeout(500)
|
|
|
|
const toggle = page.getByRole('switch', { name: /automatizable/i })
|
|
if (await toggle.getAttribute('aria-checked') === 'false') {
|
|
await toggle.click()
|
|
await page.waitForTimeout(300)
|
|
}
|
|
|
|
const directCostInput = page.getByLabel(/Costo directo fijo/i)
|
|
await directCostInput.fill(String(directCost))
|
|
|
|
const autoCostInput = page.getByLabel(/Costo automatizado/i)
|
|
await autoCostInput.fill(String(automatedCost))
|
|
|
|
const autoTimeInput = page.getByLabel(/Tiempo automatizado/i)
|
|
await autoTimeInput.fill(String(automatedTime))
|
|
|
|
await page.waitForSelector('[data-testid="save-activity-btn"]:not([disabled])', { timeout: 10_000 })
|
|
await page.click('[data-testid="save-activity-btn"]')
|
|
await page.waitForSelector('[data-testid="save-activity-btn"][disabled]', { timeout: 10_000 })
|
|
}
|
|
|
|
async function configureGlobal(
|
|
page: import('@playwright/test').Page,
|
|
annualFrequency: number,
|
|
investment: number
|
|
) {
|
|
const globalTab = page.getByRole('tab', { name: /Global/i })
|
|
await globalTab.click()
|
|
await page.waitForTimeout(300)
|
|
|
|
const freqInput = page.getByLabel(/Frecuencia anual/i)
|
|
await freqInput.fill(String(annualFrequency))
|
|
|
|
const investInput = page.getByLabel(/Inversión en automatización/i)
|
|
await investInput.fill(String(investment))
|
|
|
|
const guardar = page.getByRole('button', { name: /Guardar/i })
|
|
await guardar.click()
|
|
await page.waitForTimeout(500)
|
|
}
|
|
|
|
async function setupRealisticScenario(page: import('@playwright/test').Page) {
|
|
await importBpmn(page, 'medium-with-gateways.bpmn')
|
|
await setActivityCosts(page, 'task_recv', 200, 20, 10)
|
|
await setActivityCosts(page, 'task_score', 200, 20, 10)
|
|
await setActivityCosts(page, 'task_analisis', 200, 20, 10)
|
|
await configureGlobal(page, 5000, 80000)
|
|
|
|
const simBtn = page.getByRole('button', { name: 'Simular' })
|
|
await expect(simBtn).not.toBeDisabled({ timeout: 5_000 })
|
|
await simBtn.click()
|
|
await page.waitForURL(/\/report\//, { timeout: 20_000 })
|
|
await page.waitForSelector('button:has-text("Exportar PDF")', { timeout: 15_000 })
|
|
await page.waitForTimeout(800)
|
|
|
|
// Navegar al tab Comparación + ROI — NECESARIO para que activeTab sea 'roi'
|
|
const roiTab = page.getByRole('tab', { name: /Comparación/i })
|
|
await expect(roiTab).not.toBeDisabled({ timeout: 5_000 })
|
|
await roiTab.click()
|
|
await page.waitForSelector('[data-testid="roi-kpi-card"]', { timeout: 10_000 })
|
|
await page.waitForTimeout(800)
|
|
}
|
|
|
|
// ─── Tests ────────────────────────────────────────────────────────────────────
|
|
|
|
test('screenshot RoiKpiBar — payback formateado (no "0.0 meses")', async ({ page }) => {
|
|
await setupRealisticScenario(page)
|
|
|
|
// Screenshot del viewport — muestra KPI bar
|
|
await page.screenshot({
|
|
path: resolve(OUT_DIR, 'payback-roi-kpi-bar.png'),
|
|
fullPage: false,
|
|
})
|
|
|
|
// Verificar que el payback card NO muestra "0.0 meses"
|
|
const cards = page.locator('[data-testid="roi-kpi-card"]')
|
|
const texts = await cards.allTextContents()
|
|
console.log('KPI card texts:', JSON.stringify(texts, null, 2))
|
|
const hasOldFormat = texts.some(t => /\b0\.0 meses\b/.test(t))
|
|
expect(hasOldFormat, 'Payback card must not show "0.0 meses" — use formatPayback').toBe(false)
|
|
})
|
|
|
|
test('screenshot TransparencySection — ROI > 1000% dispara aviso', async ({ page }) => {
|
|
await setupRealisticScenario(page)
|
|
|
|
// Verificar que ROI es > 1000% (condición para disparar Transparencia)
|
|
const cards = page.locator('[data-testid="roi-kpi-card"]')
|
|
const texts = await cards.allTextContents()
|
|
const roiText = texts.find(t => t.toLowerCase().includes('roi anual')) ?? ''
|
|
console.log('ROI card text:', roiText)
|
|
|
|
// Scroll hasta el final de la página para revelar TransparencySection
|
|
await page.evaluate(() => window.scrollTo(0, document.body.scrollHeight))
|
|
await page.waitForTimeout(500)
|
|
|
|
// Verificar que la sección existe en el DOM
|
|
const transparency = page.locator('text=Transparencia metodológica').first()
|
|
await expect(transparency).toBeVisible({ timeout: 5_000 })
|
|
|
|
// Screenshot full-page para capturar la sección
|
|
await page.screenshot({
|
|
path: resolve(OUT_DIR, 'payback-transparency-section.png'),
|
|
fullPage: true,
|
|
})
|
|
|
|
console.log('TransparencySection visible con ROI:', roiText)
|
|
})
|
|
|
|
test('PDF ROI correcto — tab "Comparación + ROI" activo al exportar', async ({ page }) => {
|
|
// Root cause del PDF erróneo anterior: exportar con activeTab = 'actual'.
|
|
// Fix: setupRealisticScenario ya navega al tab ROI ANTES de este punto.
|
|
await setupRealisticScenario(page)
|
|
|
|
// Tab ROI ya activo — el BPMN canvas no existe en este tab, no esperar por él
|
|
await page.waitForTimeout(500)
|
|
|
|
const [download] = await Promise.all([
|
|
page.waitForEvent('download', { timeout: 30_000 }),
|
|
page.getByRole('button', { name: 'Exportar PDF' }).click(),
|
|
])
|
|
|
|
const outPath = resolve(OUT_DIR, 'etapa-2-payback-roi-sample.pdf')
|
|
await download.saveAs(outPath)
|
|
console.log('PDF ROI guardado:', outPath)
|
|
|
|
expect(download.suggestedFilename()).toMatch(/_roi\.pdf$|\.pdf$/)
|
|
|
|
// El nombre debe contener "roi" si la implementación usa activeTab en el slug
|
|
console.log('Nombre sugerido:', download.suggestedFilename())
|
|
})
|