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

describe('<PatronPuntos />', () => {
  it('draws rows x cols dots', () => {
    const { container } = render(<PatronPuntos rows={3} cols={8} />);
    expect(container.querySelectorAll('circle')).toHaveLength(24);
  });
  it('shrinks the dots left to right, as the manual does', () => {
    const { container } = render(<PatronPuntos rows={1} cols={6} />);
    const radii = Array.from(container.querySelectorAll('circle')).map((c) => Number(c.getAttribute('r')));
    for (let i = 1; i < radii.length; i++) expect(radii[i]).toBeLessThan(radii[i - 1]);
  });
  it('is decorative, so it stays out of the accessibility tree', () => {
    const { container } = render(<PatronPuntos />);
    const svg = container.querySelector('svg');
    expect(svg?.getAttribute('aria-hidden')).toBe('true');
  });
  it('takes its colour from currentColor so it works on light and dark', () => {
    const { container } = render(<PatronPuntos rows={1} cols={2} />);
    for (const c of Array.from(container.querySelectorAll('circle'))) {
      expect(c.getAttribute('fill')).toBe('currentColor');
    }
  });
});