test(studio): one crop drag helper, the band's candidate refresh in its own step, and formatting

Author: miguel-heygen

.fallowrc.jsonc

@@ -507,6 +507,11 @@
       "packages/studio-server/src/routes/files.test.ts",
       "packages/studio-server/src/routes/render.test.ts",
       "packages/studio-server/src/routes/lint.test.ts",
+      // Studio gesture tests: pre-existing parallel overlay-option setups and arrange/assert blocks.
+      "packages/studio/src/components/editor/domEditOverlayStartGesture.test.ts",
+      "packages/studio/src/components/editor/anchoredResizeCommitFeedsOffset.test.ts",
+      "packages/studio/src/components/editor/rotateInlineSave.test.ts",
+      "packages/studio/src/hooks/useDomGeometryCommits.test.tsx",
       // extractionCache.test.ts: pre-existing parallel describe setup and publish-case arrange/assert blocks.
       "packages/engine/src/services/extractionCache.test.ts",
       "packages/studio-server/src/routes/preview.test.ts",

packages/studio/src/components/editor/DomEditCropHandles.test.tsx

@@ -34,6 +34,19 @@ function makeEl(id: string, clip: string): HTMLElement {
   return el;
 }
 
+/** Presses at the first x, moves through the rest with their buttons, and lets go where the last held move was. */
+function dragCropRight(handle: HTMLElement, pointerId: number, points: [number, number][]) {
+  const [[start], ...moves] = points;
+  const release = moves.filter(([, buttons]) => buttons & 1).at(-1)?.[0] ?? start;
+  const send = (type: string, clientX: number, buttons: number) =>
+    handle.dispatchEvent(new PointerEvent(type, { bubbles: true, pointerId, buttons, clientX }));
+  act(() => {
+    send("pointerdown", start, 1);
+    for (const [x, buttons] of moves) send("pointermove", x, buttons);
+    send("pointerup", release, 0);
+  });
+}
+
 function render(
   el: HTMLElement,
   onStyleCommit: (property: string, value: string) => Promise<unknown> | void = () => undefined,
@@ -127,66 +140,35 @@ describe("DomEditCropHandles clip lift", () => {
     const onStyleCommit = vi.fn();
     render(makeEl("a", "inset(10px)"), onStyleCommit);
     const handle = document.querySelector<HTMLButtonElement>('[aria-label="Crop right"]')!;
-    act(() => {
-      for (const [type, clientX] of [
-        ["pointerdown", 100],
-        ["pointermove", 90],
-        ["pointermove", 80],
-        ["pointerup", 80],
-      ] as const) {
-        handle.dispatchEvent(
-          new PointerEvent(type, {
-            bubbles: true,
-            buttons: type === "pointerup" ? 0 : 1,
-            pointerId: 4,
-            clientX,
-          }),
-        );
-      }
-    });
+    dragCropRight(handle, 4, [
+      [100, 1],
+      [90, 1],
+      [80, 1],
+    ]);
     expect(onStyleCommit).toHaveBeenCalledWith("clip-path", "inset(10px 30px 10px 10px)");
   });
 
   it("commits where the pointer let go, not at a buttonless move back at the press point", () => {
     const onStyleCommit = vi.fn();
     render(makeEl("a", "inset(10px)"), onStyleCommit);
     const handle = document.querySelector<HTMLButtonElement>('[aria-label="Crop right"]')!;
-    act(() => {
-      for (const [type, clientX, buttons] of [
-        ["pointerdown", 100, 1],
-        ["pointermove", 80, 1],
-        ["pointermove", 100, 0],
-        ["pointerup", 80, 0],
-      ] as const) {
-        handle.dispatchEvent(
-          new PointerEvent(type, { bubbles: true, pointerId: 6, buttons, clientX }),
-        );
-      }
-    });
+    dragCropRight(handle, 6, [
+      [100, 1],
+      [80, 1],
+      [100, 0],
+    ]);
     expect(onStyleCommit).toHaveBeenCalledWith("clip-path", "inset(10px 30px 10px 10px)");
   });
 
   it("keeps a first crop on deselect when the release beats the last render", async () => {
     const a = makeEl("a", "");
     const { root } = render(a, (property, value) => void a.style.setProperty(property, value));
     const handle = document.querySelector<HTMLButtonElement>('[aria-label="Crop right"]')!;
-    act(() => {
-      for (const [type, clientX] of [
-        ["pointerdown", 100],
-        ["pointermove", 90],
-        ["pointermove", 80],
-        ["pointerup", 80],
-      ] as const) {
-        handle.dispatchEvent(
-          new PointerEvent(type, {
-            bubbles: true,
-            buttons: type === "pointerup" ? 0 : 1,
-            pointerId: 5,
-            clientX,
-          }),
-        );
-      }
-    });
+    dragCropRight(handle, 5, [
+      [100, 1],
+      [90, 1],
+      [80, 1],
+    ]);
     await act(async () => undefined);
     act(() => root.unmount());
     expect(a.style.getPropertyValue("clip-path")).toBe("inset(0px 20px 0px 0px)");

packages/studio/src/components/editor/marqueeCommit.test.tsx

@@ -42,18 +42,16 @@ function Overlay() {
 
 const pointer = (type: string, clientX: number, clientY: number) =>
   act(() => {
-    document
-      .querySelector("[data-overlay]")!
-      .dispatchEvent(
-        new PointerEvent(type, {
-          bubbles: true,
-          buttons: type === "pointerup" ? 0 : 1,
-          button: 0,
-          pointerId: 1,
-          clientX,
-          clientY,
-        }),
-      );
+    document.querySelector("[data-overlay]")!.dispatchEvent(
+      new PointerEvent(type, {
+        bubbles: true,
+        buttons: type === "pointerup" ? 0 : 1,
+        button: 0,
+        pointerId: 1,
+        clientX,
+        clientY,
+      }),
+    );
   });
 const escape = () => {
   const event = new KeyboardEvent("keydown", { key: "Escape", bubbles: true, cancelable: true });
@@ -99,17 +97,15 @@ it("a buttonless move back at the start does not shrink the band", () => {
   const band = () => document.querySelector<HTMLElement>("[data-band]")?.dataset.width;
   expect(band()).toBe("110");
   act(() => {
-    document
-      .querySelector("[data-overlay]")!
-      .dispatchEvent(
-        new PointerEvent("pointermove", {
-          bubbles: true,
-          pointerId: 1,
-          buttons: 0,
-          clientX: 10,
-          clientY: 10,
-        }),
-      );
+    document.querySelector("[data-overlay]")!.dispatchEvent(
+      new PointerEvent("pointermove", {
+        bubbles: true,
+        pointerId: 1,
+        buttons: 0,
+        clientX: 10,
+        clientY: 10,
+      }),
+    );
   });
   expect(band()).toBe("110");
 });

packages/studio/src/components/editor/marqueeCommit.ts

@@ -227,6 +227,18 @@ export function useMarqueeGestures<T>(deps: MarqueeGesturesDeps<T>): MarqueeGest
       window.removeEventListener("keydown", cancelBandBeforeHostEscape, { capture: true });
   }, [cancel]);
 
+  const showCandidates = useCallback(
+    (rect: Rect) => {
+      const iframe = deps.iframeRef.current;
+      const overlay = deps.overlayRef.current;
+      if (!iframe || !overlay) return;
+      const acp = deps.activeCompositionPathRef.current ?? "index.html";
+      candidatesRef.current ??= collectMarqueeCandidates(iframe, overlay, acp);
+      setCandidateRects(hitsWithin(rect, candidatesRef.current).map((h) => h.rect));
+    },
+    [deps.overlayRef, deps.iframeRef, deps.activeCompositionPathRef],
+  );
+
   const onPointerMove = useCallback(
     (event: React.PointerEvent<HTMLDivElement>) => {
       const m = marqueeRef.current;
@@ -250,18 +262,12 @@ export function useMarqueeGestures<T>(deps: MarqueeGesturesDeps<T>): MarqueeGest
           height: Math.abs(m.currentY - m.startY),
         };
         setMarqueeRect(rect);
-        const iframe = deps.iframeRef.current;
-        const overlay = deps.overlayRef.current;
-        if (iframe && overlay) {
-          const acp = deps.activeCompositionPathRef.current ?? "index.html";
-          candidatesRef.current ??= collectMarqueeCandidates(iframe, overlay, acp);
-          setCandidateRects(hitsWithin(rect, candidatesRef.current).map((h) => h.rect));
-        }
+        showCandidates(rect);
         return;
       }
       deps.gestures?.onPointerMove(event);
     },
-    [deps.gestures, deps.overlayRef, deps.iframeRef, deps.activeCompositionPathRef],
+    [deps.gestures, deps.overlayRef, showCandidates],
   );
 
   const onPointerUp = useCallback(