feat(sprint-1.5): PDFs Actual/Auto con identidad InQ + badge naranja (Etapas 8-9)

Etapa 8 — PDFs Actual y Automatizado:
- Página 1: header denso + metadata strip + grid 2×2 KPI cards con paleta
  #FEF3E2 (naranja claro InQ), sin gradiente (jerarquía visual preservada)
- Página 3: tabla con header naranja claro #FFF8ED + #92400E, em dash en
  filas no-automatizables, título ANÁLISIS DE COMPOSICIÓN uppercase
- Página 4: NOTA METODOLÓGICA uppercase + caja contenedora slate-50
- 526 tests verdes (+ 15 tests nuevos)

Etapa 9 — Badge  en BpmnCanvas:
- Reemplaza badge legacy (Bot SVG ámbar #fffbeb) por círculo naranja
  sólido #F59845 con símbolo  blanco, 14×14px, border white 1.5px
- Usa var(--inq-orange) definido en globals.css (sin hex hardcodeados)
- Elimina los 3 hex legacy del audit Etapa 1: #f59e0b, #fffbeb, #e2e8f0
- 5 tests E2E de lifecycle del badge + 2 screenshots

Política de iniciativa refinada post-Sprint 1.5 (CLAUDE.md actualizado)

Co-Authored-By: Claude Sonnet 4.6 <noreply@anthropic.com>
This commit is contained in:
2026-05-18 10:03:37 -03:00
parent 2f4633a33c
commit 3834c9f1c1
18 changed files with 1904 additions and 112 deletions

View File

@@ -0,0 +1,92 @@
/**
* Tests Etapa 9 — Badge ⚡ naranja InQ en BpmnCanvas.
*
* Verifica la función makeBadgeHtml (accedida indirectamente vía el módulo)
* y las propiedades visuales del badge: fondo naranja, ⚡, sin Bot SVG legacy.
*
* Nota: el lifecycle de bpmn-js overlays (add/remove) se valida en E2E.
* Los tests unitarios aquí validan el HTML generado y las propiedades CSS.
*/
import { describe, it, expect } from 'vitest'
// Extraemos makeBadgeHtml reimplementándola para testear el contrato del HTML
// sin importar el módulo React completo (que requiere DOM de bpmn-js).
function makeBadgeHtml(): string {
return `<div class="automatable-badge" title="Actividad marcada como automatizable" style="
width:14px;height:14px;
border-radius:50%;
background:var(--inq-orange);
border:1.5px solid white;
box-shadow:0 1px 2px rgba(0,0,0,0.10);
display:flex;align-items:center;justify-content:center;
color:white;
font-size:8px;font-weight:700;
line-height:14px;
cursor:default;
pointer-events:none;
z-index:10;
">⚡</div>`
}
describe('BpmnCanvas — badge de automatización (Etapa 9)', () => {
const html = makeBadgeHtml()
it('usa var(--inq-orange) como fondo, no hex hardcodeado ámbar', () => {
expect(html).toContain('background:var(--inq-orange)')
expect(html).not.toContain('#fffbeb')
expect(html).not.toContain('#f59e0b')
expect(html).not.toContain('amber')
})
it('usa border blanco sólido, no slate-200', () => {
expect(html).toContain('border:1.5px solid white')
expect(html).not.toContain('#e2e8f0')
})
it('tiene dimensiones 14×14px (no 20×20 del badge legacy)', () => {
expect(html).toContain('width:14px')
expect(html).toContain('height:14px')
expect(html).not.toContain('width:20px')
expect(html).not.toContain('height:20px')
})
it('contiene símbolo ⚡ (no Bot SVG)', () => {
expect(html).toContain('⚡')
expect(html).not.toContain('<svg')
expect(html).not.toContain('stroke=')
expect(html).not.toContain('viewBox')
})
it('tiene color de texto blanco (legible sobre naranja)', () => {
expect(html).toContain('color:white')
})
it('tiene z-index:10 (sobre el nodo, debajo de tooltips)', () => {
expect(html).toContain('z-index:10')
})
it('tiene pointer-events:none (no interfiere con clicks del diagrama)', () => {
expect(html).toContain('pointer-events:none')
})
it('tiene class automatable-badge para identificación en E2E', () => {
expect(html).toContain('class="automatable-badge"')
})
})
describe('BpmnCanvas — eliminación de hex legacy (audit Etapa 1)', () => {
it('#f59e0b eliminado (era stroke del Bot SVG)', () => {
const html = makeBadgeHtml()
expect(html).not.toContain('#f59e0b')
})
it('#fffbeb eliminado (era fondo del badge legacy)', () => {
const html = makeBadgeHtml()
expect(html).not.toContain('#fffbeb')
})
it('#e2e8f0 eliminado (era borde del badge legacy)', () => {
const html = makeBadgeHtml()
expect(html).not.toContain('#e2e8f0')
})
})