feat(canvas): implement dropped connection resolution and enhance connection handling

tests/use-pipeline-preview.test.ts

@@ -0,0 +1,122 @@
+// @vitest-environment jsdom
+
+import { act, createElement } from "react";
+import { createRoot, type Root } from "react-dom/client";
+import { afterEach, beforeEach, describe, expect, it, vi } from "vitest";
+
+import { emptyHistogram } from "@/lib/image-pipeline/histogram";
+import type { PipelineStep } from "@/lib/image-pipeline/contracts";
+
+const workerClientMocks = vi.hoisted(() => ({
+  renderPreviewWithWorkerFallback: vi.fn(),
+}));
+
+vi.mock("@/lib/image-pipeline/worker-client", () => ({
+  isPipelineAbortError: () => false,
+  renderPreviewWithWorkerFallback: workerClientMocks.renderPreviewWithWorkerFallback,
+}));
+
+import { usePipelinePreview } from "@/hooks/use-pipeline-preview";
+
+function PreviewHarness({
+  sourceUrl,
+  steps,
+}: {
+  sourceUrl: string | null;
+  steps: PipelineStep[];
+}) {
+  const { canvasRef } = usePipelinePreview({
+    sourceUrl,
+    steps,
+    nodeWidth: 320,
+  });
+
+  return createElement("canvas", { ref: canvasRef });
+}
+
+(globalThis as typeof globalThis & { IS_REACT_ACT_ENVIRONMENT?: boolean }).IS_REACT_ACT_ENVIRONMENT = true;
+
+describe("usePipelinePreview", () => {
+  let container: HTMLDivElement | null = null;
+  let root: Root | null = null;
+
+  beforeEach(() => {
+    vi.useFakeTimers();
+    workerClientMocks.renderPreviewWithWorkerFallback.mockReset();
+    workerClientMocks.renderPreviewWithWorkerFallback.mockResolvedValue({
+      width: 120,
+      height: 80,
+      imageData: { data: new Uint8ClampedArray(120 * 80 * 4) },
+      histogram: emptyHistogram(),
+    });
+
+    vi.spyOn(HTMLCanvasElement.prototype, "getContext").mockReturnValue({
+      putImageData: vi.fn(),
+    } as unknown as CanvasRenderingContext2D);
+
+    container = document.createElement("div");
+    document.body.appendChild(container);
+    root = createRoot(container);
+  });
+
+  afterEach(async () => {
+    vi.restoreAllMocks();
+    if (root) {
+      await act(async () => {
+        root?.unmount();
+      });
+    }
+    container?.remove();
+    root = null;
+    container = null;
+    vi.useRealTimers();
+  });
+
+  it("does not restart preview rendering when only step references change", async () => {
+    const stepsA: PipelineStep[] = [
+      {
+        nodeId: "light-1",
+        type: "light-adjust",
+        params: { brightness: 10 },
+      },
+    ];
+
+    await act(async () => {
+      root?.render(
+        createElement(PreviewHarness, {
+          sourceUrl: "https://cdn.example.com/source.png",
+          steps: stepsA,
+        }),
+      );
+    });
+
+    await act(async () => {
+      vi.advanceTimersByTime(16);
+      await Promise.resolve();
+    });
+
+    const stepsB: PipelineStep[] = [
+      {
+        nodeId: "light-1",
+        type: "light-adjust",
+        params: { brightness: 10 },
+      },
+    ];
+
+    await act(async () => {
+      root?.render(
+        createElement(PreviewHarness, {
+          sourceUrl: "https://cdn.example.com/source.png",
+          steps: stepsB,
+        }),
+      );
+    });
+
+    await act(async () => {
+      vi.advanceTimersByTime(16);
+      await Promise.resolve();
+    });
+
+    expect(workerClientMocks.renderPreviewWithWorkerFallback).toHaveBeenCalledTimes(1);
+  });
+});