erikghandClaude Opus 5
9a8534f10b
El dibujo de convergencia llevaba desde el principio al lado de las tres tarjetas sin relación con ellas: tres objetos sueltos en una página. Al señalar una disciplina, su hebra se enciende en dorado y engorda, y las otras dos se apagan al 35%. Es mejora solo con puntero, y a propósito: no esconde nada. Las tres tarjetas y las tres hebras están completas sin tocar el ratón, así que quien no lo tenga no pierde nada. Verificado en navegador, no solo en jsdom: al señalar «Digital» la hebra central queda en rgb(196,148,46) —el dorado de marca— a 3,5px, y las otras en rgba(170,170,170,0.35) a 2px. Co-Authored-By: Claude Opus 5 <noreply@anthropic.com>
49 lines
2.3 KiB
TypeScript
49 lines
2.3 KiB
TypeScript
import { render } from '@testing-library/react';
|
|
import { describe, it, expect } from 'vitest';
|
|
import { IlustracionConvergencia } from '../IlustracionConvergencia';
|
|
|
|
describe('<IlustracionConvergencia />', () => {
|
|
it('is decorative: hidden from assistive tech', () => {
|
|
const { container } = render(<IlustracionConvergencia />);
|
|
const svg = container.querySelector('svg');
|
|
expect(svg).toHaveAttribute('aria-hidden', 'true');
|
|
expect(svg).toHaveAttribute('focusable', 'false');
|
|
});
|
|
|
|
it('draws one strand per discipline plus the strategy they serve', () => {
|
|
const { container } = render(<IlustracionConvergencia />);
|
|
expect(container.querySelectorAll('path')).toHaveLength(4);
|
|
});
|
|
|
|
it('keeps every stroke within the shared line-art scale', () => {
|
|
const { container } = render(<IlustracionConvergencia />);
|
|
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('lights one strand and dims the rest when a discipline is pointed at', () => {
|
|
const { container } = render(<IlustracionConvergencia activa={1} />);
|
|
const hebras = Array.from(container.querySelectorAll('[data-hebra]'));
|
|
expect(hebras).toHaveLength(3);
|
|
// The point of the highlight is the pairing: the reader has to be able to
|
|
// tell WHICH strand belongs to the card under the cursor. One gold, two
|
|
// faded — if all three stayed grey the drawing would still be decoration.
|
|
const doradas = hebras.filter((h) => (h.getAttribute('class') ?? '').includes('text-dorado'));
|
|
expect(doradas).toHaveLength(1);
|
|
expect(doradas[0].getAttribute('data-hebra')).toBe('1');
|
|
hebras
|
|
.filter((h) => h.getAttribute('data-hebra') !== '1')
|
|
.forEach((h) => expect(h.getAttribute('class') ?? '').toMatch(/text-gris-medio\/35/));
|
|
});
|
|
|
|
it('keeps the three strands equal when nothing is pointed at', () => {
|
|
const { container } = render(<IlustracionConvergencia />);
|
|
const hebras = Array.from(container.querySelectorAll('[data-hebra]'));
|
|
hebras.forEach((h) => {
|
|
const cls = h.getAttribute('class') ?? '';
|
|
expect(cls).toContain('text-gris-medio');
|
|
expect(cls).not.toContain('text-dorado');
|
|
});
|
|
});
|
|
}); |