Genarrative/apps/ai-game-creator-shell/tests/useNodeTransformInteraction.test.tsx

// @vitest-environment jsdom

import { act, renderHook } from '@testing-library/react';
import type { MutableRefObject } from 'react';
import { describe, expect, it, vi } from 'vitest';

import type { Node as UiNode } from '../src/features/ui-editor/types/Node';
import type { UITree } from '../src/features/ui-editor/types/UITree';
import { useNodeTransformInteraction } from '../src/view/ui-editor/components/preview/useNodeTransformInteraction';
import type { UiEditorCanvasProjection } from '../src/view/ui-editor/useUiEditorPage';

function node(id: string, children: UiNode[] = []): UiNode {
  return {
    id,
    layout: {
      transform: {
        anchor_min: [0, 0],
        anchor_max: [1, 1],
        offset_min: [0, 0],
        offset_max: [0, 0],
      },
      custom_minimum_size: [0, 0],
      size_flags_horizontal: 1,
      size_flags_vertical: 1,
      size_flags_stretch_ratio: 1,
      container: 'None',
    },
    metadata: {
      name: id,
      description: '',
      layout_status: 'NoProblem',
      components_status: 'NoProblem',
      allow_llm_edit_layout: true,
      allow_llm_edit_component: true,
      source: 'System',
    },
    components: [],
    children,
  };
}

const child = node('child');
const pageTree: UITree = {
  src_ui_design: 'page',
  root: node('root', [child]),
};

function gestureTarget() {
  const target = document.createElement('div');
  Object.assign(target, {
    setPointerCapture: vi.fn(),
    hasPointerCapture: vi.fn(() => true),
    releasePointerCapture: vi.fn(),
  });
  return target;
}

function pointerEvent(
  target: HTMLDivElement,
  pointerId: number,
  clientX: number,
  clientY: number,
  eventTarget: EventTarget = target,
) {
  return {
    button: 0,
    clientX,
    clientY,
    currentTarget: target,
    target: eventTarget,
    pointerId,
    preventDefault: vi.fn(),
    shiftKey: false,
    stopPropagation: vi.fn(),
  } as never;
}

function canvas() {
  return {
    selectNode: vi.fn(),
    updateNodeTransform: vi.fn(),
    selectedNodeId: null as string | null,
  } as Pick<UiEditorCanvasProjection, 'selectNode' | 'updateNodeTransform'> & {
    selectedNodeId: string | null;
  };
}

function renderInteraction({
  activeImageId = 'page',
  scale = 1,
  tree = pageTree,
  previewRef,
  selectedNodeId = null,
}: {
  activeImageId?: string | null;
  scale?: number;
  tree?: UITree | null;
  previewRef?: MutableRefObject<HTMLElement | null>;
  selectedNodeId?: string | null;
} = {}) {
  const canvasProjection = canvas();
  canvasProjection.selectedNodeId = selectedNodeId;
  const viewportRef = { current: { scale } };
  const hook = renderHook(
    ({ imageId, currentTree }) =>
      useNodeTransformInteraction({
        activeImageId: imageId,
        canvas: canvasProjection,
        logicalSize: { width: 320, height: 180 },
        spaceHeld: false,
        tree: currentTree,
        previewRef,
        selectedNodeId,
        viewportRef,
      }),
    { initialProps: { imageId: activeImageId, currentTree: tree } },
  );
  return { ...hook, canvasProjection, viewportRef };
}

describe('useNodeTransformInteraction', () => {
  it('prevents the browser default when starting a node drag', () => {
    const { result } = renderInteraction();
    const target = gestureTarget();
    const event = pointerEvent(target, 1, 0, 0);

    act(() => {
      result.current.onNodePointerDown(event, child);
    });

    expect(event.preventDefault).toHaveBeenCalledTimes(1);
  });

  it('moves the current selection when dragging another node', () => {
    const selected = node('selected');
    const treeWithSelection: UITree = {
      src_ui_design: 'page',
      root: node('root', [selected, child]),
    };
    const { result, canvasProjection } = renderInteraction({
      tree: treeWithSelection,
      selectedNodeId: 'selected',
    });
    const target = gestureTarget();

    act(() => {
      result.current.onNodePointerDown(pointerEvent(target, 1, 0, 0), child);
      result.current.onNodePointerMove(pointerEvent(target, 1, 4, 0));
    });

    expect(canvasProjection.updateNodeTransform).toHaveBeenCalledWith(
      'page',
      'selected',
      expect.anything(),
    );
  });

  it('defers node selection until a clean pointerup', () => {
    const { result, canvasProjection } = renderInteraction();
    const target = gestureTarget();

    act(() => {
      result.current.onNodePointerDown(pointerEvent(target, 1, 0, 0), child);
    });
    expect(canvasProjection.selectNode).not.toHaveBeenCalled();

    act(() => {
      result.current.onNodePointerUp(pointerEvent(target, 1, 1, 1));
    });
    expect(canvasProjection.selectNode).toHaveBeenCalledWith('child');
  });

  it('does not select after a drag or pointer cancellation', () => {
    const { result, canvasProjection } = renderInteraction();
    const target = gestureTarget();

    act(() => {
      result.current.onNodePointerDown(pointerEvent(target, 1, 0, 0), child);
      result.current.onNodePointerMove(pointerEvent(target, 1, 3, 0));
      result.current.onNodePointerUp(pointerEvent(target, 1, 3, 0));
    });
    expect(canvasProjection.selectNode).not.toHaveBeenCalled();
    expect(result.current.consumeNodeClick()).toBe(true);
    expect(result.current.consumeNodeClick()).toBe(false);

    act(() => {
      result.current.onNodePointerDown(pointerEvent(target, 2, 0, 0), child);
      result.current.onNodePointerMove(pointerEvent(target, 2, 3, 0));
      result.current.onNodePointerCancel(pointerEvent(target, 2, 0, 0));
    });
    expect(canvasProjection.selectNode).not.toHaveBeenCalled();
    expect(result.current.consumeNodeClick()).toBe(false);
  });

  it('does not select when a clean pointerup lands outside the preview', () => {
    const preview = document.createElement('div');
    vi.spyOn(preview, 'getBoundingClientRect').mockReturnValue({
      bottom: 10,
      height: 10,
      left: 0,
      right: 10,
      top: 0,
      width: 10,
      x: 0,
      y: 0,
      toJSON: () => ({}),
    });
    const previewRef = { current: preview };
    const { result, canvasProjection } = renderInteraction({ previewRef });
    const target = gestureTarget();

    act(() => {
      result.current.onNodePointerDown(pointerEvent(target, 1, 1, 1), child);
      result.current.onNodePointerUp(pointerEvent(target, 1, 20, 20));
    });

    expect(canvasProjection.selectNode).not.toHaveBeenCalled();
  });

  it('cancels the active gesture when the window loses focus', () => {
    const { result, canvasProjection } = renderInteraction();
    const target = gestureTarget();

    act(() => {
      result.current.onNodePointerDown(pointerEvent(target, 1, 0, 0), child);
      window.dispatchEvent(new Event('blur'));
      result.current.onNodePointerUp(pointerEvent(target, 1, 0, 0));
    });

    expect(canvasProjection.selectNode).not.toHaveBeenCalled();
    expect(target.releasePointerCapture).toHaveBeenCalledWith(1);
  });

  it('leaves nested child clicks to the child when the outer gesture did not move', () => {
    const { result, canvasProjection } = renderInteraction();
    const target = gestureTarget();
    const nestedTarget = document.createElement('span');
    nestedTarget.dataset.nodeId = 'nested';
    target.appendChild(nestedTarget);

    act(() => {
      result.current.onNodePointerDown(
        pointerEvent(target, 1, 0, 0, nestedTarget),
        child,
      );
      result.current.onNodePointerUp(
        pointerEvent(target, 1, 0, 0, nestedTarget),
      );
    });

    expect(canvasProjection.selectNode).toHaveBeenCalledWith('nested');
  });

  it('defers resize selection until a clean pointerup as well', () => {
    const { result, canvasProjection } = renderInteraction();
    const target = gestureTarget();

    act(() => {
      result.current.onNodeResizePointerDown(
        pointerEvent(target, 1, 0, 0),
        child,
        'se',
      );
    });
    expect(canvasProjection.selectNode).not.toHaveBeenCalled();

    act(() => {
      result.current.onNodeResizePointerUp(pointerEvent(target, 1, 1, 1));
    });
    expect(canvasProjection.selectNode).toHaveBeenCalledWith('child');
  });

  it('makes drag and resize mutually exclusive, then permits the next gesture', () => {
    const { result, canvasProjection } = renderInteraction();
    const dragTarget = gestureTarget();
    const resizeTarget = gestureTarget();

    act(() => {
      result.current.onNodePointerDown(
        pointerEvent(dragTarget, 1, 0, 0),
        child,
      );
      result.current.onNodeResizePointerDown(
        pointerEvent(resizeTarget, 2, 0, 0),
        child,
        'se',
      );
      result.current.onNodePointerMove(pointerEvent(dragTarget, 1, 12, 8));
    });

    expect(resizeTarget.setPointerCapture).not.toHaveBeenCalled();
    expect(canvasProjection.updateNodeTransform).toHaveBeenCalledTimes(1);

    act(() => {
      result.current.onNodePointerUp(pointerEvent(dragTarget, 1, 12, 8));
      result.current.onNodeResizePointerDown(
        pointerEvent(resizeTarget, 2, 0, 0),
        child,
        'se',
      );
    });
    expect(resizeTarget.setPointerCapture).toHaveBeenCalledWith(2);
  });

  it('cancels a gesture when its tree changes and ignores its later events', () => {
    const { result, rerender, canvasProjection } = renderInteraction();
    const target = gestureTarget();

    act(() => {
      result.current.onNodePointerDown(pointerEvent(target, 1, 0, 0), child);
    });
    act(() => {
      rerender({
        imageId: 'other',
        currentTree: { ...pageTree, src_ui_design: 'other' },
      });
    });
    act(() => {
      result.current.onNodePointerMove(pointerEvent(target, 1, 12, 8));
    });

    expect(target.releasePointerCapture).toHaveBeenCalledWith(1);
    expect(canvasProjection.updateNodeTransform).not.toHaveBeenCalled();
  });

  it('cancels instead of persisting a non-finite transform', () => {
    const { result, canvasProjection, viewportRef } = renderInteraction();
    const target = gestureTarget();

    act(() => {
      result.current.onNodePointerDown(pointerEvent(target, 1, 0, 0), child);
      viewportRef.current.scale = Number.NaN;
      result.current.onNodePointerMove(pointerEvent(target, 1, 12, 8));
    });

    expect(target.releasePointerCapture).toHaveBeenCalledWith(1);
    expect(canvasProjection.updateNodeTransform).not.toHaveBeenCalled();
  });

  it('releases a captured pointer when the preview unmounts', () => {
    const { result, unmount } = renderInteraction();
    const target = gestureTarget();

    act(() => {
      result.current.onNodePointerDown(pointerEvent(target, 1, 0, 0), child);
      unmount();
    });

    expect(target.releasePointerCapture).toHaveBeenCalledWith(1);
  });
});