import { render } from '@testing-library/react';
import { describe, it, expect } from 'vitest';
import { SecuenciaClaridad } from '../SecuenciaClaridad';

describe('<SecuenciaClaridad />', () => {
  it('is decorative: hidden from assistive tech', () => {
    const { container } = render(<SecuenciaClaridad />);
    const svg = container.querySelector('svg');
    expect(svg).toHaveAttribute('aria-hidden', 'true');
    expect(svg).toHaveAttribute('focusable', 'false');
  });

  it('draws the tangle of lines that stands for complexity', () => {
    const { container } = render(<SecuenciaClaridad />);
    expect(container.querySelectorAll('line').length).toBeGreaterThanOrEqual(18);
  });

  it('resolves into the mark itself, not a lookalike', () => {
    const { container } = render(<SecuenciaClaridad variant="completa" />);
    const resolucion = container.querySelectorAll('[data-resolucion]');
    expect(resolucion).toHaveLength(3);
  });

  it('leaves the tension unresolved in the hero variant', () => {
    const { container } = render(<SecuenciaClaridad variant="hero" />);
    expect(container.querySelectorAll('[data-resolucion]')).toHaveLength(0);
  });

  it('shares the viewBox with the symbol so both scale alike', () => {
    const { container } = render(<SecuenciaClaridad />);
    expect(container.querySelector('svg')).toHaveAttribute('viewBox', '0 0 64 64');
  });
});