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');
    });
  });
});