erikgh
ca949f35c2
La ruta del 'no' se revela por opacidad (no por pathLength): el stroke dasharray '1 8' sobrevive y el camino queda realmente punteado, en lugar de que framer-motion lo pise con el dasharray que usa para dibujar el trazo. El test afina la aserción al valor '1 8' para no contar la inyección de pathLength en las dos rutas sólidas.
35 lines
1.5 KiB
TypeScript
35 lines
1.5 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);
|
|
});
|
|
});
|