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