feat(grafico): SecuenciaClaridad — la metáfora del manual, dibujada

components/primitives/__tests__/SecuenciaClaridad.test.tsx

@@ -0,0 +1,33 @@
+import { render } from '@testing-library/react';
+import { describe, it, expect } from 'vitest';
+import { SecuenciaClaridad } from '../SecuenciaClaridad';
+
+describe('<SecuenciaClaridad />', () => {
+  it('is decorative: hidden from assistive tech', () => {
+    const { container } = render(<SecuenciaClaridad />);
+    const svg = container.querySelector('svg');
+    expect(svg).toHaveAttribute('aria-hidden', 'true');
+    expect(svg).toHaveAttribute('focusable', 'false');
+  });
+
+  it('draws the tangle of lines that stands for complexity', () => {
+    const { container } = render(<SecuenciaClaridad />);
+    expect(container.querySelectorAll('line').length).toBeGreaterThanOrEqual(18);
+  });
+
+  it('resolves into the mark itself, not a lookalike', () => {
+    const { container } = render(<SecuenciaClaridad variant="completa" />);
+    const resolucion = container.querySelectorAll('[data-resolucion]');
+    expect(resolucion).toHaveLength(3);
+  });
+
+  it('leaves the tension unresolved in the hero variant', () => {
+    const { container } = render(<SecuenciaClaridad variant="hero" />);
+    expect(container.querySelectorAll('[data-resolucion]')).toHaveLength(0);
+  });
+
+  it('shares the viewBox with the symbol so both scale alike', () => {
+    const { container } = render(<SecuenciaClaridad />);
+    expect(container.querySelector('svg')).toHaveAttribute('viewBox', '0 0 64 64');
+  });
+});