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

import { analyze } from '../../analysis/analyzer';
import { PrePublishSummary } from '../PrePublishSummary';

(
  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();
});

const page = {
  title: 'Zipper hoodie: warm and light | Shop',
  description: 'The zipper hoodie for cold mornings.',
  slug: 'zipper-hoodie',
  content: '<p>The zipper hoodie keeps you warm.</p>',
  hasFeaturedImage: false,
  siteHost: 'shop.example',
};

describe('PrePublishSummary', () => {
  it('says the score, the keyword, the tests to fix and opens the panel', () => {
    const onOpen = jest.fn();
    const analysis = analyze({ ...page, keyword: 'zipper hoodie' });
    act(() =>
      root.render(
        <PrePublishSummary
          analysis={analysis}
          keyword="zipper hoodie"
          onOpen={onOpen}
        />
      )
    );
    const text = host.textContent ?? '';
    expect(text).toContain(`${analysis.score}/100`);
    expect(text).toContain('Focus keyword: zipper hoodie');
    expect(text).toMatch(/\d+ of \d+ tests passed · \d+ to fix/);
    act(() => host.querySelector('button')?.click());
    expect(onOpen).toHaveBeenCalled();
  });

  it('asks for a keyword when there is none', () => {
    act(() =>
      root.render(
        <PrePublishSummary
          analysis={analyze({ ...page, keyword: '' })}
          keyword=""
          onOpen={() => undefined}
        />
      )
    );
    expect(host.textContent).toContain('No score yet: add a focus keyword');
    expect(host.textContent).not.toContain('Focus keyword:');
  });
});