/* eslint-env jest */
import { act } from 'react';
import { createRoot, type Root } from 'react-dom/client';

import { CopilotMarkdown } from '../CopilotMarkdown';

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

let root: Root;
let host: HTMLDivElement;

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

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

describe('a reply with parts', () => {
  it('draws a heading as a bold line and a divider as a rule', () => {
    act(() =>
      root.render(
        <CopilotMarkdown
          content={'Here they are.\n\n---\n\n### Saving with SEO tools\nDone.'}
          onLink={() => undefined}
        />
      )
    );

    expect(host.querySelector('hr')).not.toBeNull();
    expect(host.textContent).not.toContain('###');
    expect(host.textContent).not.toContain('---');
    const heading = Array.from(host.querySelectorAll('p')).find(
      paragraph => paragraph.textContent === 'Saving with SEO tools'
    );
    expect(heading?.className).toContain('font-semibold');
  });

  it('keeps a list item a list item', () => {
    act(() =>
      root.render(
        <CopilotMarkdown
          content="- **Contact** (138 chars)"
          onLink={() => undefined}
        />
      )
    );
    expect(host.querySelector('hr')).toBeNull();
    expect(host.querySelector('strong')?.textContent).toBe('Contact');
  });
});