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

(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);
  act(() => root.render(<DonateModal />));
});

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

describe('DonateModal', () => {
  test('renders a sincere message referencing the project', () => {
    const text = container.textContent ?? '';
    expect(text).toMatch(/astrolabe/i);
    // Some mention of contribution / support
    expect(text).toMatch(/contribut|support/i);
  });

  test('renders exactly one primary CTA link', () => {
    const links = container.querySelectorAll('a');
    expect(links).toHaveLength(1);
  });

  test('the CTA link opens in a new tab with rel noopener', () => {
    const link = container.querySelector('a')!;
    expect(link.getAttribute('target')).toBe('_blank');
    expect(link.getAttribute('rel')).toContain('noopener');
  });

  test('the CTA link has visible text (not icon-only)', () => {
    const link = container.querySelector('a')!;
    expect((link.textContent ?? '').trim().length).toBeGreaterThan(0);
  });
});