feat(canvas): accelerate local previews and harden edge flows

tests/canvas-delete-handlers.test.ts

@@ -0,0 +1,135 @@
+// @vitest-environment jsdom
+
+import React, { act, useEffect, useRef, useState } from "react";
+import { createRoot, type Root } from "react-dom/client";
+import type { Edge as RFEdge, Node as RFNode } from "@xyflow/react";
+import { afterEach, describe, expect, it, vi } from "vitest";
+
+import type { Id } from "@/convex/_generated/dataModel";
+import { useCanvasDeleteHandlers } from "@/components/canvas/canvas-delete-handlers";
+
+vi.mock("@/lib/toast", () => ({
+  toast: {
+    info: vi.fn(),
+    warning: vi.fn(),
+  },
+}));
+
+const asCanvasId = (id: string): Id<"canvases"> => id as Id<"canvases">;
+
+const latestHandlersRef: {
+  current: ReturnType<typeof useCanvasDeleteHandlers> | null;
+} = { current: null };
+
+(globalThis as typeof globalThis & { IS_REACT_ACT_ENVIRONMENT?: boolean }).IS_REACT_ACT_ENVIRONMENT = true;
+
+type HarnessProps = {
+  nodes: RFNode[];
+  edges: RFEdge[];
+  runBatchRemoveNodesMutation: ReturnType<typeof vi.fn>;
+  runCreateEdgeMutation: ReturnType<typeof vi.fn>;
+};
+
+function HookHarness(props: HarnessProps) {
+  const deletingNodeIds = useRef(new Set<string>());
+  const [, setAssetBrowserTargetNodeId] = useState<string | null>(null);
+
+  const handlers = useCanvasDeleteHandlers({
+    t: ((key: string, values?: Record<string, unknown>) =>
+      values ? `${key}:${JSON.stringify(values)}` : key) as never,
+    canvasId: asCanvasId("canvas-1"),
+    nodes: props.nodes,
+    edges: props.edges,
+    deletingNodeIds,
+    setAssetBrowserTargetNodeId,
+    runBatchRemoveNodesMutation: props.runBatchRemoveNodesMutation,
+    runCreateEdgeMutation: props.runCreateEdgeMutation,
+    runRemoveEdgeMutation: vi.fn(async () => undefined),
+  });
+
+  useEffect(() => {
+    latestHandlersRef.current = handlers;
+  }, [handlers]);
+
+  return null;
+}
+
+describe("useCanvasDeleteHandlers", () => {
+  let container: HTMLDivElement | null = null;
+  let root: Root | null = null;
+
+  afterEach(async () => {
+    latestHandlersRef.current = null;
+    vi.clearAllMocks();
+    if (root) {
+      await act(async () => {
+        root?.unmount();
+      });
+    }
+    container?.remove();
+    root = null;
+    container = null;
+  });
+
+  it("creates bridge edges only after batch node removal resolves", async () => {
+    let resolveBatchRemove: (() => void) | null = null;
+    const runBatchRemoveNodesMutation = vi.fn(
+      () =>
+        new Promise<void>((resolve) => {
+          resolveBatchRemove = resolve;
+        }),
+    );
+    const runCreateEdgeMutation = vi.fn(async () => undefined);
+
+    const imageNode: RFNode = { id: "node-image", type: "image", position: { x: 0, y: 0 }, data: {} };
+    const deletedNode: RFNode = {
+      id: "node-color",
+      type: "color-adjust",
+      position: { x: 200, y: 0 },
+      data: {},
+    };
+    const renderNode: RFNode = { id: "node-render", type: "render", position: { x: 400, y: 0 }, data: {} };
+
+    const edges: RFEdge[] = [
+      { id: "edge-in", source: "node-image", target: "node-color" },
+      { id: "edge-out", source: "node-color", target: "node-render" },
+    ];
+
+    container = document.createElement("div");
+    document.body.appendChild(container);
+    root = createRoot(container);
+
+    await act(async () => {
+      root?.render(
+        React.createElement(HookHarness, {
+          nodes: [imageNode, deletedNode, renderNode],
+          edges,
+          runBatchRemoveNodesMutation,
+          runCreateEdgeMutation,
+        }),
+      );
+    });
+
+    await act(async () => {
+      latestHandlersRef.current?.onNodesDelete([deletedNode]);
+    });
+
+    expect(runBatchRemoveNodesMutation).toHaveBeenCalledWith({
+      nodeIds: ["node-color"],
+    });
+    expect(runCreateEdgeMutation).not.toHaveBeenCalled();
+
+    await act(async () => {
+      resolveBatchRemove?.();
+      await Promise.resolve();
+    });
+
+    expect(runCreateEdgeMutation).toHaveBeenCalledWith({
+      canvasId: "canvas-1",
+      sourceNodeId: "node-image",
+      targetNodeId: "node-render",
+      sourceHandle: undefined,
+      targetHandle: undefined,
+    });
+  });
+});