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

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

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

/**
 * Taps the badge with the given label and returns what it asked.
 *
 * @param {string} label - The badge's label.
 * @param {boolean} contentSite - Whether the account is a content site.
 * @return {string} The prompt the tap sent.
 */
const promptOf = (label: string, contentSite: boolean): string => {
  const onPick = jest.fn();
  act(() =>
    root.render(<CapabilityBadges onPick={onPick} contentSite={contentSite} />)
  );
  const badge = Array.from(host.querySelectorAll('button')).find(
    button => button.textContent === label
  );
  act(() => badge?.click());
  return onPick.mock.calls[0]?.[0] ?? '';
};

describe('the capability row', () => {
  it('offers a content site no badge that works on a catalog', () => {
    act(() => root.render(<CapabilityBadges onPick={jest.fn()} contentSite />));
    expect(host.textContent).not.toContain('Product copy');
    act(() => root.render(<CapabilityBadges onPick={jest.fn()} />));
    expect(host.textContent).toContain('Product copy');
  });

  // The badge is the merchant's own first message: the copilot answered in
  // the words it was asked in, "storefront chatbot" included.
  it('asks about the chatbot on the website and a post for the business', () => {
    for (const contentSite of [true, false]) {
      const chatbot = promptOf('My chatbot', contentSite);
      expect(chatbot).toContain('the chatbot on my website');
      expect(chatbot).not.toMatch(/storefront/i);
      expect(promptOf('LinkedIn post', contentSite)).toContain(
        'for my business'
      );
    }
  });
});