/app/chrome-extension/tests/web-editor-v2/event-controller.test.ts

/**
 * Unit tests for Web Editor V2 Event Controller.
 *
 * These tests focus on the selecting mode behavior:
 * - Clicking within selection subtree prepares drag candidate
 * - Clicking outside selection triggers reselection (Bug 1 fix)
 */

import { afterEach, beforeEach, describe, expect, it, vi } from 'vitest';

import {
  createEventController,
  type EventController,
  type EventControllerOptions,
  type Modifiers,
} from '@/entrypoints/web-editor-v2/core/event-controller';

import type { RestoreFn } from './test-utils/dom';
import { mockBoundingClientRect } from './test-utils/dom';

// =============================================================================
// Test Utilities
// =============================================================================

const NO_MODIFIERS: Modifiers = { alt: false, shift: false, ctrl: false, meta: false };

/**
 * Check if an element is part of the editor overlay.
 */
function isOverlayElement(node: unknown): boolean {
  return node instanceof Element && node.getAttribute('data-overlay') === 'true';
}

/**
 * Create a minimal mock PointerEvent for testing.
 * jsdom doesn't support PointerEvent, so we create a MouseEvent and extend it.
 */
function createPointerEvent(
  type: string,
  options: {
    clientX?: number;
    clientY?: number;
    button?: number;
    pointerId?: number;
    target?: EventTarget | null;
  } = {},
): MouseEvent & { pointerId: number } {
  const event = new MouseEvent(type, {
    bubbles: true,
    cancelable: true,
    clientX: options.clientX ?? 0,
    clientY: options.clientY ?? 0,
    button: options.button ?? 0,
  });

  // Add pointerId property (jsdom doesn't have PointerEvent)
  Object.defineProperty(event, 'pointerId', {
    value: options.pointerId ?? 1,
    writable: false,
  });

  // Mock composedPath to return target path
  if (options.target) {
    vi.spyOn(event, 'composedPath').mockReturnValue([options.target as EventTarget]);
  }

  return event as MouseEvent & { pointerId: number };
}

// =============================================================================
// Test Setup
// =============================================================================

let restores: RestoreFn[] = [];
let controller: EventController | null = null;

beforeEach(() => {
  restores = [];
  document.body.innerHTML = '';
});

afterEach(() => {
  controller?.dispose();
  controller = null;
  for (let i = restores.length - 1; i >= 0; i--) {
    restores[i]!();
  }
  restores = [];
  vi.restoreAllMocks();
});

// =============================================================================
// Selecting Mode Tests (Bug 1 Fix)
// =============================================================================

describe('event-controller: selecting mode click behavior', () => {
  it('clicking within selection subtree prepares drag candidate (does not trigger onSelect)', () => {
    // Setup DOM
    const selected = document.createElement('div');
    selected.id = 'selected';
    const child = document.createElement('span');
    child.id = 'child';
    selected.appendChild(child);
    document.body.appendChild(selected);

    // Mock rect for selected element
    restores.push(mockBoundingClientRect(selected, { left: 0, top: 0, width: 100, height: 100 }));
    restores.push(mockBoundingClientRect(child, { left: 10, top: 10, width: 50, height: 50 }));

    // Setup callbacks
    const onSelect = vi.fn();
    const onStartDrag = vi.fn().mockReturnValue(true);

    const options: EventControllerOptions = {
      isOverlayElement,
      isEditorUiElement: () => false,
      getSelectedElement: () => selected,
      getEditingElement: () => null,
      findTargetForSelect: () => child,
      onHover: vi.fn(),
      onSelect,
      onDeselect: vi.fn(),
      onStartDrag,
    };

    controller = createEventController(options);
    controller.setMode('selecting');

    // Simulate pointerdown within selected element
    const event = createPointerEvent('pointerdown', {
      clientX: 20,
      clientY: 20,
      target: child,
    });

    document.dispatchEvent(event);

    // onSelect should NOT be called (we're preparing drag instead)
    expect(onSelect).not.toHaveBeenCalled();
  });

  it('clicking outside selection triggers reselection (Bug 1 fix)', () => {
    // Setup DOM
    const selected = document.createElement('div');
    selected.id = 'selected';
    document.body.appendChild(selected);

    const other = document.createElement('div');
    other.id = 'other';
    document.body.appendChild(other);

    // Mock rects
    restores.push(mockBoundingClientRect(selected, { left: 0, top: 0, width: 100, height: 100 }));
    restores.push(mockBoundingClientRect(other, { left: 200, top: 0, width: 100, height: 100 }));

    // Setup callbacks
    const onSelect = vi.fn();
    const onStartDrag = vi.fn().mockReturnValue(true);

    const options: EventControllerOptions = {
      isOverlayElement,
      isEditorUiElement: () => false,
      getSelectedElement: () => selected,
      getEditingElement: () => null,
      findTargetForSelect: () => other, // Returns the "other" element as target
      onHover: vi.fn(),
      onSelect,
      onDeselect: vi.fn(),
      onStartDrag,
    };

    controller = createEventController(options);
    controller.setMode('selecting');

    // Simulate mousedown outside selected element (on "other")
    // Use mousedown since jsdom doesn't support PointerEvent
    const event = new MouseEvent('mousedown', {
      bubbles: true,
      cancelable: true,
      clientX: 250, // Outside selected (0-100), inside other (200-300)
      clientY: 50,
      button: 0,
    });

    // Mock composedPath to return a path that does NOT include "selected"
    // This simulates clicking outside the selection
    vi.spyOn(event, 'composedPath').mockReturnValue([other, document.body, document]);

    document.dispatchEvent(event);

    // onSelect SHOULD be called with the new element
    expect(onSelect).toHaveBeenCalledWith(other, expect.any(Object));
  });

  it('clicking outside with no valid target does not trigger onSelect', () => {
    // Setup DOM
    const selected = document.createElement('div');
    selected.id = 'selected';
    document.body.appendChild(selected);

    // Mock rect
    restores.push(mockBoundingClientRect(selected, { left: 0, top: 0, width: 100, height: 100 }));

    // Setup callbacks
    const onSelect = vi.fn();

    const options: EventControllerOptions = {
      isOverlayElement,
      isEditorUiElement: () => false,
      getSelectedElement: () => selected,
      getEditingElement: () => null,
      findTargetForSelect: () => null, // No valid target found
      onHover: vi.fn(),
      onSelect,
      onDeselect: vi.fn(),
      onStartDrag: vi.fn(),
    };

    controller = createEventController(options);
    controller.setMode('selecting');

    // Simulate pointerdown outside selected element
    const event = createPointerEvent('pointerdown', {
      clientX: 500,
      clientY: 500,
      target: document.body,
    });

    document.dispatchEvent(event);

    // onSelect should NOT be called (no valid target)
    expect(onSelect).not.toHaveBeenCalled();
  });
});