erikghandClaude Opus 5
29837022ce
El nudo, la bifurcación y la convergencia usaban 2.5 y 3.5 sueltos, así que
las tres se veían de pesos distintos puestas una al lado de otra.
Un test de contrato por ilustración exige ahora que todo trazo pertenezca a
{1.5, 2, 3}, de modo que la escala no se pueda romper en silencio más
adelante. SecuenciaClaridad queda fuera a propósito: resuelve en las barras
reales del ≡ y su grosor lo manda LINEAS_SIMBOLO.
Co-Authored-By: Claude Opus 5 <noreply@anthropic.com>
56 lines
2.2 KiB
TypeScript
56 lines
2.2 KiB
TypeScript
import { render } from '@testing-library/react';
|
|
import { describe, it, expect, afterEach } from 'vitest';
|
|
import { IlustracionNudo } from '../IlustracionNudo';
|
|
|
|
describe('<IlustracionNudo />', () => {
|
|
const matchMediaOriginal = window.matchMedia;
|
|
afterEach(() => {
|
|
window.matchMedia = matchMediaOriginal;
|
|
});
|
|
|
|
it('is decorative: hidden from assistive tech', () => {
|
|
const { container } = render(<IlustracionNudo />);
|
|
const svg = container.querySelector('svg');
|
|
expect(svg).toHaveAttribute('aria-hidden', 'true');
|
|
expect(svg).toHaveAttribute('focusable', 'false');
|
|
});
|
|
|
|
it('tangles several strands rather than drawing one line', () => {
|
|
const { container } = render(<IlustracionNudo />);
|
|
expect(container.querySelectorAll('path').length).toBeGreaterThanOrEqual(3);
|
|
});
|
|
|
|
it('keeps every stroke within the shared line-art scale', () => {
|
|
const { container } = render(<IlustracionNudo />);
|
|
const anchos = Array.from(container.querySelectorAll('path')).map((p) => p.getAttribute('stroke-width'));
|
|
expect(anchos.length).toBeGreaterThan(0);
|
|
anchos.forEach((a) => expect(['1.5', '2', '3']).toContain(a));
|
|
});
|
|
|
|
it('renders plain, fully-visible strands under reduced motion instead of motion.path\'s dash scaffolding', () => {
|
|
// Force the reduced-motion branch. motion.path applies stroke-dasharray/
|
|
// stroke-dashoffset even with no explicit initial/animate resolution,
|
|
// which leaves the drawing invisible for reduced-motion users — see
|
|
// lib/motion.ts. The reduced branch must use plain <path> elements
|
|
// instead, so none of them should carry that dash scaffolding.
|
|
window.matchMedia = (query: string) =>
|
|
({
|
|
matches: true,
|
|
media: query,
|
|
onchange: null,
|
|
addEventListener: () => {},
|
|
removeEventListener: () => {},
|
|
addListener: () => {},
|
|
removeListener: () => {},
|
|
dispatchEvent: () => false,
|
|
}) as unknown as MediaQueryList;
|
|
|
|
const { container } = render(<IlustracionNudo />);
|
|
const paths = container.querySelectorAll('path');
|
|
expect(paths.length).toBeGreaterThanOrEqual(3);
|
|
paths.forEach((path) => {
|
|
expect(path).not.toHaveAttribute('stroke-dasharray');
|
|
});
|
|
});
|
|
});
|