Marcos Benítez
3834c9f1c1
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>
93 lines
3.0 KiB
TypeScript
93 lines
3.0 KiB
TypeScript
/**
|
||
* 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')
|
||
})
|
||
})
|