@marimo-team/frontend 0.23.1-dev7 → 0.23.1-dev9

package/src/components/slides/__tests__/minimap.test.ts

@@ -0,0 +1,402 @@
+/* Copyright 2026 Marimo. All rights reserved. */
+
+import { renderHook, act } from "@testing-library/react";
+import { afterEach, beforeEach, describe, expect, it, vi } from "vitest";
+import type { CellId } from "@/core/cells/ids";
+import type { DragMoveEvent } from "@dnd-kit/core";
+import { MultiColumn } from "@/utils/id-tree";
+import { exportedForTesting } from "../minimap";
+
+const { useVisibleCellIds, projectDropTarget, resolveDropTarget } =
+  exportedForTesting;
+
+let intersectionCallback: IntersectionObserverCallback;
+let mutationCallback: MutationCallback;
+let observeSpy: ReturnType<typeof vi.fn>;
+let intersectionDisconnectSpy: ReturnType<typeof vi.fn>;
+let mutationDisconnectSpy: ReturnType<typeof vi.fn>;
+let mutationObserveSpy: ReturnType<typeof vi.fn>;
+
+function createContainer(...cellIds: string[]): HTMLDivElement {
+  const container = document.createElement("div");
+  for (const id of cellIds) {
+    const child = document.createElement("button");
+    child.dataset.cellId = id;
+    container.appendChild(child);
+  }
+  return container;
+}
+
+function fakeEntry(
+  target: Element,
+  isIntersecting: boolean,
+): IntersectionObserverEntry {
+  return { target, isIntersecting } as unknown as IntersectionObserverEntry;
+}
+
+describe("useVisibleCellIds", () => {
+  beforeEach(() => {
+    observeSpy = vi.fn();
+    intersectionDisconnectSpy = vi.fn();
+    mutationDisconnectSpy = vi.fn();
+    mutationObserveSpy = vi.fn();
+
+    global.IntersectionObserver = class MockIntersectionObserver {
+      constructor(
+        callback: IntersectionObserverCallback,
+        _options?: IntersectionObserverInit,
+      ) {
+        intersectionCallback = callback;
+      }
+      observe = observeSpy;
+      unobserve = vi.fn();
+      disconnect = intersectionDisconnectSpy;
+      root = null;
+      rootMargin = "";
+      thresholds = [0];
+      takeRecords = vi.fn(() => []);
+    } as unknown as typeof IntersectionObserver;
+
+    global.MutationObserver = class MockMutationObserver {
+      constructor(callback: MutationCallback) {
+        mutationCallback = callback;
+      }
+      observe = mutationObserveSpy;
+      disconnect = mutationDisconnectSpy;
+      takeRecords = vi.fn(() => []);
+    } as unknown as typeof MutationObserver;
+  });
+
+  afterEach(() => {
+    vi.restoreAllMocks();
+  });
+
+  it("returns an empty set initially", () => {
+    const container = createContainer("cell-1");
+    const ref = { current: container };
+
+    const { result } = renderHook(() => useVisibleCellIds(ref));
+
+    expect(result.current.size).toBe(0);
+  });
+
+  it("observes all [data-cell-id] elements on mount", () => {
+    const container = createContainer("a", "b", "c");
+    const ref = { current: container };
+
+    renderHook(() => useVisibleCellIds(ref));
+
+    expect(observeSpy).toHaveBeenCalledTimes(3);
+  });
+
+  it("does not observe when container ref is null", () => {
+    const ref = { current: null };
+
+    const { result } = renderHook(() => useVisibleCellIds(ref));
+
+    expect(observeSpy).not.toHaveBeenCalled();
+    expect(result.current.size).toBe(0);
+  });
+
+  it("adds cell ids when entries become intersecting", () => {
+    const container = createContainer("cell-1", "cell-2");
+    const ref = { current: container };
+    const children = container.querySelectorAll("[data-cell-id]");
+
+    const { result } = renderHook(() => useVisibleCellIds(ref));
+
+    act(() => {
+      intersectionCallback(
+        [fakeEntry(children[0], true)],
+        {} as IntersectionObserver,
+      );
+    });
+
+    expect(result.current.has("cell-1" as CellId)).toBe(true);
+    expect(result.current.has("cell-2" as CellId)).toBe(false);
+  });
+
+  it("removes cell ids when entries stop intersecting", () => {
+    const container = createContainer("cell-1");
+    const ref = { current: container };
+    const children = container.querySelectorAll("[data-cell-id]");
+
+    const { result } = renderHook(() => useVisibleCellIds(ref));
+
+    act(() => {
+      intersectionCallback(
+        [fakeEntry(children[0], true)],
+        {} as IntersectionObserver,
+      );
+    });
+    expect(result.current.has("cell-1" as CellId)).toBe(true);
+
+    act(() => {
+      intersectionCallback(
+        [fakeEntry(children[0], false)],
+        {} as IntersectionObserver,
+      );
+    });
+    expect(result.current.has("cell-1" as CellId)).toBe(false);
+  });
+
+  it("preserves set identity when nothing changed", () => {
+    const container = createContainer("cell-1");
+    const ref = { current: container };
+    const children = container.querySelectorAll("[data-cell-id]");
+
+    const { result } = renderHook(() => useVisibleCellIds(ref));
+
+    act(() => {
+      intersectionCallback(
+        [fakeEntry(children[0], true)],
+        {} as IntersectionObserver,
+      );
+    });
+    const firstSet = result.current;
+
+    act(() => {
+      intersectionCallback(
+        [fakeEntry(children[0], true)],
+        {} as IntersectionObserver,
+      );
+    });
+    expect(result.current).toBe(firstSet);
+  });
+
+  it("handles batch intersection updates", () => {
+    const container = createContainer("a", "b", "c");
+    const ref = { current: container };
+    const children = container.querySelectorAll("[data-cell-id]");
+
+    const { result } = renderHook(() => useVisibleCellIds(ref));
+
+    act(() => {
+      intersectionCallback(
+        [
+          fakeEntry(children[0], true),
+          fakeEntry(children[1], true),
+          fakeEntry(children[2], false),
+        ],
+        {} as IntersectionObserver,
+      );
+    });
+
+    expect(result.current).toEqual(new Set(["a", "b"]));
+  });
+
+  it("ignores entries without data-cell-id", () => {
+    const container = createContainer("cell-1");
+    const orphan = document.createElement("div");
+    container.appendChild(orphan);
+    const ref = { current: container };
+
+    const { result } = renderHook(() => useVisibleCellIds(ref));
+
+    act(() => {
+      intersectionCallback(
+        [fakeEntry(orphan, true)],
+        {} as IntersectionObserver,
+      );
+    });
+
+    expect(result.current.size).toBe(0);
+  });
+
+  it("re-observes elements when MutationObserver fires", () => {
+    const container = createContainer("cell-1");
+    const ref = { current: container };
+
+    renderHook(() => useVisibleCellIds(ref));
+    expect(observeSpy).toHaveBeenCalledTimes(1);
+
+    const newChild = document.createElement("button");
+    newChild.dataset.cellId = "cell-2";
+    container.appendChild(newChild);
+
+    act(() => {
+      mutationCallback([], {} as MutationObserver);
+    });
+
+    // 1 from initial + 2 from re-observe (observe is idempotent on existing)
+    expect(observeSpy).toHaveBeenCalledTimes(3);
+  });
+
+  it("disconnects both observers on unmount", () => {
+    const container = createContainer("cell-1");
+    const ref = { current: container };
+
+    const { unmount } = renderHook(() => useVisibleCellIds(ref));
+
+    // 1 disconnect from the initial observeAll() call
+    expect(intersectionDisconnectSpy).toHaveBeenCalledTimes(1);
+    expect(mutationDisconnectSpy).not.toHaveBeenCalled();
+
+    unmount();
+
+    // +1 disconnect from cleanup
+    expect(intersectionDisconnectSpy).toHaveBeenCalledTimes(2);
+    expect(mutationDisconnectSpy).toHaveBeenCalledTimes(1);
+  });
+});
+
+function rect(top: number, height: number) {
+  return { top, height, left: 0, right: 0, bottom: 0, width: 0 };
+}
+
+type Rect = ReturnType<typeof rect>;
+
+function fakeDragEvent({
+  activeId = "a" as string | number,
+  overId = "b" as string | number | null,
+  translated = rect(0, 40) as Rect | null,
+  initial = undefined as Rect | null | undefined,
+  overRect = rect(0, 40),
+} = {}): DragMoveEvent {
+  return {
+    active: {
+      id: activeId,
+      rect: { current: { translated, initial: initial ?? translated } },
+    },
+    over: overId === null ? null : { id: overId, rect: overRect },
+  } as unknown as DragMoveEvent;
+}
+
+describe("projectDropTarget", () => {
+  it("returns null when over is null", () => {
+    expect(projectDropTarget(fakeDragEvent({ overId: null }))).toBeNull();
+  });
+
+  it("returns null when active id is not a string", () => {
+    expect(projectDropTarget(fakeDragEvent({ activeId: 42 }))).toBeNull();
+  });
+
+  it("returns null when over id is not a string", () => {
+    expect(projectDropTarget(fakeDragEvent({ overId: 42 }))).toBeNull();
+  });
+
+  it("returns null when active and over are the same cell", () => {
+    expect(
+      projectDropTarget(fakeDragEvent({ activeId: "x", overId: "x" })),
+    ).toBeNull();
+  });
+
+  it("returns null when no active rect is available", () => {
+    expect(
+      projectDropTarget(fakeDragEvent({ translated: null, initial: null })),
+    ).toBeNull();
+  });
+
+  it("falls back to initial rect when translated is null", () => {
+    expect(
+      projectDropTarget(
+        fakeDragEvent({
+          translated: null,
+          initial: rect(0, 40),
+          overRect: rect(100, 40),
+        }),
+      ),
+    ).toEqual({ overId: "b", position: "before" });
+  });
+
+  it("prefers translated rect over initial rect", () => {
+    expect(
+      projectDropTarget(
+        fakeDragEvent({
+          translated: rect(200, 40),
+          initial: rect(0, 40),
+          overRect: rect(100, 40),
+        }),
+      ),
+    ).toEqual({ overId: "b", position: "after" });
+  });
+});
+
+describe("resolveDropTarget", () => {
+  const A = "a" as CellId;
+  const B = "b" as CellId;
+  const C = "c" as CellId;
+  const D = "d" as CellId;
+
+  function makeSingleColumnIds(...ids: CellId[]) {
+    return MultiColumn.from([ids]);
+  }
+
+  it("returns null when activeId matches target overId", () => {
+    const cellIds = makeSingleColumnIds(A, B);
+    expect(
+      resolveDropTarget({
+        cellIds,
+        activeId: A,
+        target: { overId: A, position: "after" },
+      }),
+    ).toBeNull();
+  });
+
+  it("returns null for multi-column layouts", () => {
+    const cellIds = MultiColumn.from([[A, B], [C]]);
+    expect(
+      resolveDropTarget({
+        cellIds,
+        activeId: A,
+        target: { overId: B, position: "after" },
+      }),
+    ).toBeNull();
+  });
+
+  it('resolves "before" to the over index', () => {
+    const cellIds = makeSingleColumnIds(A, B, C);
+    const result = resolveDropTarget({
+      cellIds,
+      activeId: A,
+      target: { overId: C, position: "before" },
+    });
+    expect(result).toEqual({
+      cellId: A,
+      columnId: cellIds.atOrThrow(0).id,
+      index: 2,
+    });
+  });
+
+  it('resolves "after" to one past the over index', () => {
+    const cellIds = makeSingleColumnIds(A, B, C);
+    const result = resolveDropTarget({
+      cellIds,
+      activeId: C,
+      target: { overId: A, position: "after" },
+    });
+    expect(result).toEqual({
+      cellId: C,
+      columnId: cellIds.atOrThrow(0).id,
+      index: 1,
+    });
+  });
+
+  it('resolves "before" on first item to index 0', () => {
+    const cellIds = makeSingleColumnIds(A, B, C);
+    const result = resolveDropTarget({
+      cellIds,
+      activeId: C,
+      target: { overId: A, position: "before" },
+    });
+    expect(result).toEqual({
+      cellId: C,
+      columnId: cellIds.atOrThrow(0).id,
+      index: 0,
+    });
+  });
+
+  it('resolves "after" on last item to one past the end', () => {
+    const cellIds = makeSingleColumnIds(A, B, C, D);
+    const result = resolveDropTarget({
+      cellIds,
+      activeId: A,
+      target: { overId: D, position: "after" },
+    });
+    expect(result).toEqual({
+      cellId: A,
+      columnId: cellIds.atOrThrow(0).id,
+      index: 4,
+    });
+  });
+});