136 lines
3.9 KiB
TypeScript
136 lines
3.9 KiB
TypeScript
// @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,
|
|
});
|
|
});
|
|
});
|