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>
42 lines
1.8 KiB
TypeScript
42 lines
1.8 KiB
TypeScript
import { render } from '@testing-library/react';
|
|
import { describe, it, expect } from 'vitest';
|
|
import { IlustracionBifurcacion } from '../IlustracionBifurcacion';
|
|
|
|
describe('<IlustracionBifurcacion />', () => {
|
|
it('is decorative: hidden from assistive tech', () => {
|
|
const { container } = render(<IlustracionBifurcacion />);
|
|
const svg = container.querySelector('svg');
|
|
expect(svg).toHaveAttribute('aria-hidden', 'true');
|
|
expect(svg).toHaveAttribute('focusable', 'false');
|
|
});
|
|
|
|
it('draws one shared trunk and two diverging routes', () => {
|
|
const { container } = render(<IlustracionBifurcacion />);
|
|
expect(container.querySelectorAll('path')).toHaveLength(3);
|
|
});
|
|
|
|
it('tells the two routes apart: one solid, one dashed', () => {
|
|
const { container } = render(<IlustracionBifurcacion />);
|
|
// Framer Motion's pathLength reveal injects its own `stroke-dasharray`
|
|
// attribute on every animated path, so we can't count the attribute's
|
|
// presence. The genuinely dashed route carries the real "1 8" value —
|
|
// that is what marks it apart from the two solid routes.
|
|
const punteadas = Array.from(container.querySelectorAll('path')).filter(
|
|
(p) => p.getAttribute('stroke-dasharray') === '1 8',
|
|
);
|
|
expect(punteadas).toHaveLength(1);
|
|
});
|
|
|
|
it('marks the decision point', () => {
|
|
const { container } = render(<IlustracionBifurcacion />);
|
|
expect(container.querySelectorAll('circle').length).toBeGreaterThanOrEqual(1);
|
|
});
|
|
|
|
it('keeps every stroke within the shared line-art scale', () => {
|
|
const { container } = render(<IlustracionBifurcacion />);
|
|
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));
|
|
});
|
|
});
|