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

describe('<IconoRed />', () => {
  it('is decorative: the link around it carries the name', () => {
    const { container } = render(<IconoRed nombre="whatsapp" />);
    expect(container.querySelector('svg')).toHaveAttribute('aria-hidden', 'true');
  });

  it.each(NOMBRES_RED)('renders a non-empty svg for "%s"', (nombre) => {
    const { container } = render(<IconoRed nombre={nombre} />);
    expect(container.querySelector('svg')?.children.length).toBeGreaterThan(0);
  });

  it('never brings its own brand colour onto the page', () => {
    for (const nombre of NOMBRES_RED) {
      const { container } = render(<IconoRed nombre={nombre} />);
      const pintados = container.querySelectorAll('[fill]:not([fill="none"]), [stroke]');
      pintados.forEach((el) => {
        const color = el.getAttribute('fill') ?? el.getAttribute('stroke');
        if (color !== 'none') expect(color).toBe('currentColor');
      });
    }
  });
});