import { afterEach, beforeEach, describe, expect, test } from 'vitest';
import { act } from 'react';
import { createRoot, type Root } from 'react-dom/client';
import { Icon } from './Icon';

(globalThis as { IS_REACT_ACT_ENVIRONMENT?: boolean }).IS_REACT_ACT_ENVIRONMENT = true;

let container: HTMLDivElement;
let root: Root;

beforeEach(() => {
  container = document.createElement('div');
  document.body.appendChild(container);
  root = createRoot(container);
});

afterEach(() => {
  act(() => root.unmount());
  container.remove();
});

function render(node: React.ReactNode) {
  act(() => root.render(node));
  const svg = container.querySelector('svg');
  if (!svg) throw new Error('no <svg> rendered');
  return svg;
}

describe('Icon', () => {
  test('size maps to a single, changeable class token', () => {
    const sm = render(<Icon name="add" />); // default
    const smClass = sm.getAttribute('class') ?? '';
    const md = render(<Icon name="add" size="md" />);
    const mdClass = md.getAttribute('class') ?? '';
    // Whatever the CSS-module hashing, the two sizes must resolve to different
    // class strings so the 16/20/24/32 scale is actually applied, not ignored.
    expect(smClass).not.toBe(mdClass);
  });
});
