maestro/web/src/hooks/usePreview.test.tsx

// @vitest-environment happy-dom
import { act, cleanup, render } from "@testing-library/react";
import { afterEach, describe, expect, it, vi } from "vitest";

import { leaves } from "../layout.js";
import { createLayoutStore, type LayoutStoreApi } from "../stores/layoutStore.js";
import { usePreview, type UsePreviewResult } from "./usePreview.js";

function fakeScheduler() {
  const timers = new Map<number, () => void>();
  let id = 0;
  return {
    scheduler: {
      setTimer: (fn: () => void) => {
        const h = ++id;
        timers.set(h, fn);
        return h;
      },
      clearTimer: (h: number) => {
        timers.delete(h);
      },
    },
    flush() {
      for (const fn of [...timers.values()]) fn();
      timers.clear();
    },
  };
}

/** Hand-driven clock + timer queue for the preview schedule's own throttle,
 *  independent of the store's save-debounce scheduler above. */
function fakeClock() {
  let now = 1_000;
  const timers = new Map<number, { at: number; fn: () => void }>();
  let handle = 1;
  return {
    now: () => now,
    setTimer: (fn: () => void, ms: number) => {
      const h = handle++;
      timers.set(h, { at: now + ms, fn });
      return h;
    },
    clearTimer: (h: number) => {
      timers.delete(h);
    },
    advance(ms: number) {
      now += ms;
      for (const [h, t] of [...timers]) {
        if (t.at <= now) {
          timers.delete(h);
          act(() => t.fn());
        }
      }
    },
  };
}

function newStore(): LayoutStoreApi {
  return createLayoutStore({ load: () => null, save: vi.fn(), scheduler: fakeScheduler().scheduler });
}

let controls: UsePreviewResult;

function Probe({ store, clock }: { store: LayoutStoreApi; clock: ReturnType<typeof fakeClock> }) {
  controls = usePreview({
    store,
    scheduleDeps: { now: clock.now, setTimer: clock.setTimer, clearTimer: clock.clearTimer },
  });
  return <div>{controls.previewedSessionId ?? "none"}</div>;
}

afterEach(cleanup);

describe("usePreview", () => {
  it("shows the first preview immediately — no settling delay", () => {
    const store = newStore();
    store.getState().openSession("s1");
    const clock = fakeClock();
    const view = render(<Probe store={store} clock={clock} />);

    act(() => controls.preview("s9"));
    expect(view.container.textContent).toBe("s9");
    expect(leaves(store.getState().layout.tabs[1]?.root ?? null).map((l) => l.sessionId)).toEqual(["s9"]);
  });

  it("throttles a burst to one leading + one trailing pane swap", () => {
    const store = newStore();
    store.getState().openSession("s1");
    const clock = fakeClock();
    const view = render(<Probe store={store} clock={clock} />);

    act(() => {
      controls.preview("s1");
      controls.preview("s8");
      controls.preview("s9");
    });
    expect(view.container.textContent).toBe("s1");
    clock.advance(120);
    expect(view.container.textContent).toBe("s9");
  });

  it("touch never previews", () => {
    const store = newStore();
    store.getState().openSession("s1");
    const clock = fakeClock();
    const view = render(<Probe store={store} clock={clock} />);

    act(() => controls.previewFromPointer("s9", "touch"));
    expect(view.container.textContent).toBe("none");
    expect(store.getState().preview).toBeNull();
  });

  it("previewFromPointer still previews for mouse/pen", () => {
    const store = newStore();
    store.getState().openSession("s1");
    const clock = fakeClock();
    const view = render(<Probe store={store} clock={clock} />);

    act(() => controls.previewFromPointer("s9", "mouse"));
    expect(view.container.textContent).toBe("s9");
  });

  it("commit cancels a pending trailing preview and opens for real", () => {
    const store = newStore();
    store.getState().openSession("s1");
    const clock = fakeClock();
    const view = render(<Probe store={store} clock={clock} />);

    act(() => {
      controls.preview("s1"); // leading edge: previews the already-open s1
      controls.preview("s9"); // queued, gap not elapsed yet
      controls.commit("s9");
    });
    expect(view.container.textContent).toBe("none"); // committed: no longer a preview
    expect(leaves(store.getState().layout.tabs[0].root).map((l) => l.sessionId)).toEqual(["s9"]);

    clock.advance(120);
    // The cancelled trailing preview never fires.
    expect(view.container.textContent).toBe("none");
  });

  it("end drops a preview immediately, bypassing the throttle", () => {
    const store = newStore();
    store.getState().openSession("s1");
    const clock = fakeClock();
    const view = render(<Probe store={store} clock={clock} />);

    act(() => controls.preview("s9"));
    expect(view.container.textContent).toBe("s9");

    act(() => controls.end());
    expect(view.container.textContent).toBe("none");
    expect(store.getState().layout.tabs).toHaveLength(1);
  });

  it("cancels its pending trailing preview on unmount", () => {
    const store = newStore();
    store.getState().openSession("s1");
    store.getState().addTab();
    store.getState().openSession("s2"); // leading edge below will preview this, already on screen
    const clock = fakeClock();
    const view = render(<Probe store={store} clock={clock} />);

    act(() => {
      controls.preview("s2"); // leading edge: fires now
      controls.preview("s9"); // queued trailing preview
    });
    expect(store.getState().preview?.sessionId).toBe("s2");
    view.unmount();
    clock.advance(120);
    // The queued trailing preview must not fire after unmount.
    expect(store.getState().preview?.sessionId).toBe("s2");
  });
});