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

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

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

// jsdom draws nothing: the preview cuts by characters then.
HTMLCanvasElement.prototype.getContext = (() =>
  null) as unknown as HTMLCanvasElement['getContext'];

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('SnippetPreview', () => {
  it('lays the desktop result out at Google width, the title on one line', () => {
    act(() =>
      root.render(
        <SnippetPreview
          siteName="Shop"
          url="https://shop.example/zipper-hoodie/"
          title="Zipper Hoodie: warm, light and made to last | Shop"
          description="The zipper hoodie for cold mornings."
        />
      )
    );
    const result = host.querySelector(
      '[aria-label="Search result preview on desktop"]'
    );
    expect((result?.parentElement as HTMLElement).style.width).toBe('640px');
    expect(result?.querySelector('p')?.className).toContain(
      'whitespace-nowrap'
    );

    act(() =>
      (host.querySelectorAll('[role="tab"]')[1] as HTMLElement).click()
    );
    const mobile = host.querySelector(
      '[aria-label="Search result preview on mobile"]'
    );
    expect((mobile?.parentElement as HTMLElement).style.width).toBe('');
  });
});