markdown-converter/tests/inline-ai-popover.test.js

/**
 * @jest-environment jsdom
 *
 * Inline AI popover — DOM + interaction tests.
 */

const { createInlineAiPopover } = require('../src/ai-assist/inline-ai-popover');

function mount(deps = {}) {
  const container = document.createElement('div');
  document.body.appendChild(container);
  const popover = createInlineAiPopover(container, {
    onAction: deps.onAction || jest.fn(),
    onCancel: deps.onCancel || jest.fn(),
    onRetry: deps.onRetry || jest.fn(),
  });
  return { container, popover };
}

function clickAction(popover, action) {
  const root = popover.getRoot();
  if (!root) throw new Error('Popover not mounted');
  const btn = root.querySelector(`button[data-action="${action}"]`);
  if (!btn) throw new Error(`No button for action ${action}`);
  btn.click();
}

describe('createInlineAiPopover — mount + visibility', () => {
  test('show() mounts into container and opens', () => {
    const { container, popover } = mount();
    popover.show({ text: 'hello', rect: { top: 100, left: 50, width: 80, bottom: 120 } });
    expect(container.querySelector('.inline-ai-popover')).not.toBeNull();
    expect(popover.isVisible()).toBe(true);
  });

  test('hide() keeps DOM but removes open class', () => {
    const { container, popover } = mount();
    popover.show({ text: 'x', rect: { top: 100, left: 50, width: 80, bottom: 120 } });
    popover.hide();
    const el = container.querySelector('.inline-ai-popover');
    expect(el).not.toBeNull();
    expect(el.classList.contains('open')).toBe(false);
    expect(popover.isVisible()).toBe(false);
  });

  test('destroy() removes DOM entirely', () => {
    const { container, popover } = mount();
    popover.show({ text: 'x', rect: { top: 100, left: 50, width: 80, bottom: 120 } });
    popover.destroy();
    expect(container.querySelector('.inline-ai-popover')).toBeNull();
  });

  test('multiple show/hide cycles reuse the same DOM node', () => {
    const { container, popover } = mount();
    popover.show({ text: 'x', rect: { top: 100, left: 50, width: 80, bottom: 120 } });
    const a = container.querySelector('.inline-ai-popover');
    popover.hide();
    popover.show({ text: 'y', rect: { top: 100, left: 50, width: 80, bottom: 120 } });
    const b = container.querySelector('.inline-ai-popover');
    expect(a).toBe(b);
  });
});

describe('createInlineAiPopover — idle actions', () => {
  test('clicking Rewrite fires onAction with the selection text', () => {
    const onAction = jest.fn();
    const { popover } = mount({ onAction });
    popover.show({
      text: 'original sentence',
      rect: { top: 100, left: 50, width: 80, bottom: 120 },
    });
    clickAction(popover, 'rewrite');
    expect(onAction).toHaveBeenCalledWith('rewrite', 'original sentence');
  });

  test('clicking Shorten fires onAction(shorten, text)', () => {
    const onAction = jest.fn();
    const { popover } = mount({ onAction });
    popover.show({
      text: 'a longer selection',
      rect: { top: 100, left: 50, width: 80, bottom: 120 },
    });
    clickAction(popover, 'shorten');
    expect(onAction).toHaveBeenCalledWith('shorten', 'a longer selection');
  });

  test('clicking Expand fires onAction(expand, text)', () => {
    const onAction = jest.fn();
    const { popover } = mount({ onAction });
    popover.show({ text: 'tiny', rect: { top: 100, left: 50, width: 80, bottom: 120 } });
    clickAction(popover, 'expand');
    expect(onAction).toHaveBeenCalledWith('expand', 'tiny');
  });

  test('Cancel button fires onCancel', () => {
    const onCancel = jest.fn();
    const { popover } = mount({ onCancel });
    popover.show({ text: 'x', rect: { top: 100, left: 50, width: 80, bottom: 120 } });
    popover.setState('loading');
    clickAction(popover, 'cancel');
    expect(onCancel).toHaveBeenCalledTimes(1);
  });
});

describe('createInlineAiPopover — state transitions', () => {
  test('setState(loading) hides actions and shows loading', () => {
    const { container, popover } = mount();
    popover.show({ text: 'x', rect: { top: 100, left: 50, width: 80, bottom: 120 } });
    popover.setState('loading');
    const actions = container.querySelector('.inline-ai-actions');
    const loading = container.querySelector('.inline-ai-loading');
    expect(actions.hidden).toBe(true);
    expect(loading.hidden).toBe(false);
  });

  test('setState(error) hides actions and loading and shows error', () => {
    const { container, popover } = mount();
    popover.show({ text: 'x', rect: { top: 100, left: 50, width: 80, bottom: 120 } });
    popover.setState('error', { message: 'Provider timed out' });
    const actions = container.querySelector('.inline-ai-actions');
    const loading = container.querySelector('.inline-ai-loading');
    const error = container.querySelector('.inline-ai-error');
    expect(actions.hidden).toBe(true);
    expect(loading.hidden).toBe(true);
    expect(error.hidden).toBe(false);
    expect(container.querySelector('.inline-ai-error-message').textContent).toBe(
      'Provider timed out'
    );
  });

  test('Retry button in error state fires onRetry', () => {
    const onRetry = jest.fn();
    const { popover } = mount({ onRetry });
    popover.show({ text: 'x', rect: { top: 100, left: 50, width: 80, bottom: 120 } });
    popover.setState('error', { message: 'boom' });
    clickAction(popover, 'retry');
    expect(onRetry).toHaveBeenCalledTimes(1);
  });

  test('Dismiss button in error state fires onCancel', () => {
    const onCancel = jest.fn();
    const { popover } = mount({ onCancel });
    popover.show({ text: 'x', rect: { top: 100, left: 50, width: 80, bottom: 120 } });
    popover.setState('error', { message: 'boom' });
    clickAction(popover, 'dismiss');
    expect(onCancel).toHaveBeenCalledTimes(1);
  });

  test('actions are disabled while in loading state', () => {
    const onAction = jest.fn();
    const { popover } = mount({ onAction });
    popover.show({ text: 'x', rect: { top: 100, left: 50, width: 80, bottom: 120 } });
    popover.setState('loading');
    clickAction(popover, 'rewrite');
    expect(onAction).not.toHaveBeenCalled();
  });

  test('setState(idle) restores action buttons', () => {
    const { container, popover } = mount();
    popover.show({ text: 'x', rect: { top: 100, left: 50, width: 80, bottom: 120 } });
    popover.setState('loading');
    popover.setState('idle');
    expect(container.querySelector('.inline-ai-actions').hidden).toBe(false);
    expect(container.querySelector('.inline-ai-loading').hidden).toBe(true);
  });
});

describe('createInlineAiPopover — positioning', () => {
  test('positions above the selection by default', () => {
    const { popover } = mount();
    popover.show({
      text: 'x',
      rect: { top: 200, left: 100, width: 80, bottom: 220 },
    });
    // jsdom doesn't compute layout, so offsetWidth is 0; assert that
    // style.left was set on the popover (non-empty).
    const el = popover._el ? popover._el() : null; // noop accessor
    void el;
    // We can at least verify show() didn't throw when rect is provided.
    expect(popover.isVisible()).toBe(true);
  });

  test('flips below the selection when there is no room above', () => {
    const { popover } = mount();
    popover.show({ text: 'x', rect: { top: -100, left: 100, width: 80, bottom: -80 } });
    expect(popover.isVisible()).toBe(true);
  });
});