erikgh
bd16de2aa3
Cada línea resuelta tomaba el grosor de LINEAS_SIMBOLO[0] sin importar a qué barra pertenecía; funcionaba por coincidencia porque las tres barras del manual comparten height: 8. Se indexa ahora por DISPERSAS[i].barra, y se agrega una prueba de regresión que fija el grosor de cada línea al de su propia barra (derivado de LINEAS_SIMBOLO, no hardcodeado).
69 lines
2.8 KiB
TypeScript
69 lines
2.8 KiB
TypeScript
import { render } from '@testing-library/react';
|
|
import { describe, it, expect, afterEach } from 'vitest';
|
|
import { SecuenciaClaridad } from '../SecuenciaClaridad';
|
|
import { LINEAS_SIMBOLO } from '@/lib/simbolo';
|
|
|
|
describe('<SecuenciaClaridad />', () => {
|
|
const matchMediaOriginal = window.matchMedia;
|
|
afterEach(() => {
|
|
window.matchMedia = matchMediaOriginal;
|
|
});
|
|
|
|
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('gives each resolved line its own bar\'s stroke width, not the first bar\'s', () => {
|
|
// Force the reduced-motion branch: it is the only one where stroke-width
|
|
// is a literal DOM attribute rather than a Framer Motion `animate` target
|
|
// jsdom's inert IntersectionObserver stub never resolves (see
|
|
// lib/__tests__/motion.test.tsx), so the animated branch's `enVista` never
|
|
// flips true and its resolved strokeWidth is unreachable from the DOM.
|
|
window.matchMedia = (query: string) =>
|
|
({
|
|
matches: true,
|
|
media: query,
|
|
onchange: null,
|
|
addEventListener: () => {},
|
|
removeEventListener: () => {},
|
|
addListener: () => {},
|
|
removeListener: () => {},
|
|
dispatchEvent: () => false,
|
|
}) as unknown as MediaQueryList;
|
|
|
|
const { container } = render(<SecuenciaClaridad variant="completa" />);
|
|
const resueltas = container.querySelectorAll('[data-resolucion]');
|
|
expect(resueltas).toHaveLength(3);
|
|
|
|
// The three survivors appear in document order following DISPERSAS, one
|
|
// per group, so they line up 1:1 with the symbol's own three bars.
|
|
resueltas.forEach((linea, i) => {
|
|
expect(linea).toHaveAttribute('stroke-width', String(LINEAS_SIMBOLO[i].grosor));
|
|
});
|
|
});
|
|
|
|
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');
|
|
});
|
|
});
|