49 lines
1.9 KiB
TypeScript
49 lines
1.9 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('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');
|
|
});
|
|
});
|
|
});
|