773 lines
25 KiB
TypeScript
773 lines
25 KiB
TypeScript
// @vitest-environment jsdom
|
|
|
|
import React, { act, useEffect } 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 type { CanvasNodeTemplate } from "@/lib/canvas-node-templates";
|
|
import { useCanvasEdgeInsertions } from "@/components/canvas/use-canvas-edge-insertions";
|
|
import { computeEdgeInsertLayout } from "@/components/canvas/canvas-helpers";
|
|
|
|
const latestHandlersRef: {
|
|
current: ReturnType<typeof useCanvasEdgeInsertions> | null;
|
|
} = { current: null };
|
|
|
|
(globalThis as typeof globalThis & { IS_REACT_ACT_ENVIRONMENT?: boolean }).IS_REACT_ACT_ENVIRONMENT = true;
|
|
|
|
const asCanvasId = (id: string): Id<"canvases"> => id as Id<"canvases">;
|
|
|
|
function createNode(overrides: Partial<RFNode> & Pick<RFNode, "id">): RFNode {
|
|
return {
|
|
type: "note",
|
|
position: { x: 0, y: 0 },
|
|
style: { width: 100, height: 60 },
|
|
data: {},
|
|
...overrides,
|
|
} as RFNode;
|
|
}
|
|
|
|
function createEdge(
|
|
overrides: Partial<RFEdge> & Pick<RFEdge, "id" | "source" | "target">,
|
|
): RFEdge {
|
|
return {
|
|
...overrides,
|
|
} as RFEdge;
|
|
}
|
|
|
|
type HookHarnessProps = {
|
|
nodes: RFNode[];
|
|
edges: RFEdge[];
|
|
runCreateNodeWithEdgeSplitOnlineOnly?: ReturnType<typeof vi.fn>;
|
|
runBatchMoveNodesMutation?: ReturnType<typeof vi.fn>;
|
|
applyLocalNodeMoves?: ReturnType<typeof vi.fn>;
|
|
showConnectionRejectedToast?: ReturnType<typeof vi.fn>;
|
|
onReflowStateChange?: (isReflowing: boolean) => void;
|
|
reflowSettleMs?: number;
|
|
};
|
|
|
|
function HookHarness({
|
|
nodes,
|
|
edges,
|
|
runCreateNodeWithEdgeSplitOnlineOnly = vi.fn(async () => "node-new"),
|
|
runBatchMoveNodesMutation = vi.fn(async () => undefined),
|
|
applyLocalNodeMoves,
|
|
showConnectionRejectedToast = vi.fn(),
|
|
onReflowStateChange,
|
|
reflowSettleMs = 0,
|
|
}: HookHarnessProps) {
|
|
const hookArgs = {
|
|
canvasId: asCanvasId("canvas-1"),
|
|
nodes,
|
|
edges,
|
|
runCreateNodeWithEdgeSplitOnlineOnly,
|
|
runBatchMoveNodesMutation,
|
|
applyLocalNodeMoves,
|
|
showConnectionRejectedToast,
|
|
onReflowStateChange,
|
|
reflowSettleMs,
|
|
} as Parameters<typeof useCanvasEdgeInsertions>[0];
|
|
|
|
const handlers = useCanvasEdgeInsertions(hookArgs);
|
|
|
|
useEffect(() => {
|
|
latestHandlersRef.current = handlers;
|
|
}, [handlers]);
|
|
|
|
return null;
|
|
}
|
|
|
|
describe("useCanvasEdgeInsertions", () => {
|
|
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("opens edge insert menu for persisted edges", async () => {
|
|
container = document.createElement("div");
|
|
document.body.appendChild(container);
|
|
root = createRoot(container);
|
|
|
|
await act(async () => {
|
|
root?.render(
|
|
<HookHarness
|
|
nodes={[
|
|
createNode({ id: "source", type: "image" }),
|
|
createNode({ id: "target", type: "text" }),
|
|
]}
|
|
edges={[createEdge({ id: "edge-1", source: "source", target: "target" })]}
|
|
/>,
|
|
);
|
|
});
|
|
|
|
await act(async () => {
|
|
latestHandlersRef.current?.openEdgeInsertMenu({
|
|
edgeId: "edge-1",
|
|
screenX: 120,
|
|
screenY: 240,
|
|
});
|
|
});
|
|
|
|
expect(latestHandlersRef.current?.edgeInsertMenu).toEqual({
|
|
edgeId: "edge-1",
|
|
screenX: 120,
|
|
screenY: 240,
|
|
});
|
|
});
|
|
|
|
it("ignores temp, optimistic, and missing edges when opening menu", async () => {
|
|
container = document.createElement("div");
|
|
document.body.appendChild(container);
|
|
root = createRoot(container);
|
|
|
|
await act(async () => {
|
|
root?.render(
|
|
<HookHarness
|
|
nodes={[
|
|
createNode({ id: "source", type: "image" }),
|
|
createNode({ id: "target", type: "text" }),
|
|
]}
|
|
edges={[
|
|
createEdge({ id: "edge-temp", source: "source", target: "target", className: "temp" }),
|
|
createEdge({ id: "optimistic_edge_1", source: "source", target: "target" }),
|
|
]}
|
|
/>,
|
|
);
|
|
});
|
|
|
|
await act(async () => {
|
|
latestHandlersRef.current?.openEdgeInsertMenu({
|
|
edgeId: "edge-temp",
|
|
screenX: 1,
|
|
screenY: 2,
|
|
});
|
|
latestHandlersRef.current?.openEdgeInsertMenu({
|
|
edgeId: "optimistic_edge_1",
|
|
screenX: 3,
|
|
screenY: 4,
|
|
});
|
|
latestHandlersRef.current?.openEdgeInsertMenu({
|
|
edgeId: "edge-missing",
|
|
screenX: 5,
|
|
screenY: 6,
|
|
});
|
|
});
|
|
|
|
expect(latestHandlersRef.current?.edgeInsertMenu).toBeNull();
|
|
});
|
|
|
|
it("resolves optimistic edge menu opens to a persisted twin edge id", async () => {
|
|
const runCreateNodeWithEdgeSplitOnlineOnly = vi.fn(async () => "node-new");
|
|
|
|
container = document.createElement("div");
|
|
document.body.appendChild(container);
|
|
root = createRoot(container);
|
|
|
|
await act(async () => {
|
|
root?.render(
|
|
<HookHarness
|
|
nodes={[
|
|
createNode({ id: "source", type: "image", position: { x: 0, y: 0 } }),
|
|
createNode({ id: "target", type: "text", position: { x: 500, y: 0 } }),
|
|
]}
|
|
edges={[
|
|
createEdge({
|
|
id: "optimistic_edge_req-1",
|
|
source: "source",
|
|
target: "target",
|
|
sourceHandle: "source-handle",
|
|
targetHandle: "target-handle",
|
|
}),
|
|
createEdge({
|
|
id: "edge-real-1",
|
|
source: "source",
|
|
target: "target",
|
|
sourceHandle: "source-handle",
|
|
targetHandle: "target-handle",
|
|
}),
|
|
]}
|
|
runCreateNodeWithEdgeSplitOnlineOnly={runCreateNodeWithEdgeSplitOnlineOnly}
|
|
/>,
|
|
);
|
|
});
|
|
|
|
await act(async () => {
|
|
latestHandlersRef.current?.openEdgeInsertMenu({
|
|
edgeId: "optimistic_edge_req-1",
|
|
screenX: 20,
|
|
screenY: 30,
|
|
});
|
|
});
|
|
|
|
expect(latestHandlersRef.current?.edgeInsertMenu).toEqual({
|
|
edgeId: "edge-real-1",
|
|
screenX: 20,
|
|
screenY: 30,
|
|
});
|
|
|
|
await act(async () => {
|
|
await latestHandlersRef.current?.handleEdgeInsertPick({
|
|
type: "prompt",
|
|
label: "Prompt",
|
|
width: 320,
|
|
height: 220,
|
|
defaultData: { prompt: "", aspectRatio: "1:1" },
|
|
} as CanvasNodeTemplate);
|
|
});
|
|
|
|
expect(runCreateNodeWithEdgeSplitOnlineOnly).toHaveBeenCalledWith(
|
|
expect.objectContaining({
|
|
splitEdgeId: "edge-real-1",
|
|
}),
|
|
);
|
|
});
|
|
|
|
it("shows toast and skips create when split validation fails", async () => {
|
|
const runCreateNodeWithEdgeSplitOnlineOnly = vi.fn(async () => "node-new");
|
|
const runBatchMoveNodesMutation = vi.fn(async () => undefined);
|
|
const showConnectionRejectedToast = vi.fn();
|
|
|
|
container = document.createElement("div");
|
|
document.body.appendChild(container);
|
|
root = createRoot(container);
|
|
|
|
await act(async () => {
|
|
root?.render(
|
|
<HookHarness
|
|
nodes={[
|
|
createNode({ id: "source", type: "image", position: { x: 0, y: 0 } }),
|
|
createNode({ id: "target", type: "curves", position: { x: 300, y: 0 } }),
|
|
]}
|
|
edges={[createEdge({ id: "edge-1", source: "source", target: "target" })]}
|
|
runCreateNodeWithEdgeSplitOnlineOnly={runCreateNodeWithEdgeSplitOnlineOnly}
|
|
runBatchMoveNodesMutation={runBatchMoveNodesMutation}
|
|
showConnectionRejectedToast={showConnectionRejectedToast}
|
|
/>,
|
|
);
|
|
});
|
|
|
|
await act(async () => {
|
|
latestHandlersRef.current?.openEdgeInsertMenu({ edgeId: "edge-1", screenX: 10, screenY: 10 });
|
|
});
|
|
|
|
await act(async () => {
|
|
await latestHandlersRef.current?.handleEdgeInsertPick({
|
|
type: "prompt",
|
|
label: "Prompt",
|
|
width: 320,
|
|
height: 220,
|
|
defaultData: { prompt: "", aspectRatio: "1:1" },
|
|
} as CanvasNodeTemplate);
|
|
});
|
|
|
|
expect(showConnectionRejectedToast).toHaveBeenCalledWith("adjustment-source-invalid");
|
|
expect(runCreateNodeWithEdgeSplitOnlineOnly).not.toHaveBeenCalled();
|
|
expect(runBatchMoveNodesMutation).not.toHaveBeenCalled();
|
|
});
|
|
|
|
it("creates split node with computed payload when split is valid", async () => {
|
|
const runCreateNodeWithEdgeSplitOnlineOnly = vi.fn(async () => "node-new");
|
|
const runBatchMoveNodesMutation = vi.fn(async () => undefined);
|
|
const showConnectionRejectedToast = vi.fn();
|
|
|
|
container = document.createElement("div");
|
|
document.body.appendChild(container);
|
|
root = createRoot(container);
|
|
|
|
await act(async () => {
|
|
root?.render(
|
|
<HookHarness
|
|
nodes={[
|
|
createNode({ id: "source", type: "image", position: { x: 0, y: 0 } }),
|
|
createNode({ id: "target", type: "text", position: { x: 500, y: 0 } }),
|
|
]}
|
|
edges={[
|
|
createEdge({
|
|
id: "edge-1",
|
|
source: "source",
|
|
target: "target",
|
|
sourceHandle: "source-handle",
|
|
targetHandle: "target-handle",
|
|
}),
|
|
]}
|
|
runCreateNodeWithEdgeSplitOnlineOnly={runCreateNodeWithEdgeSplitOnlineOnly}
|
|
runBatchMoveNodesMutation={runBatchMoveNodesMutation}
|
|
showConnectionRejectedToast={showConnectionRejectedToast}
|
|
/>,
|
|
);
|
|
});
|
|
|
|
await act(async () => {
|
|
latestHandlersRef.current?.openEdgeInsertMenu({ edgeId: "edge-1", screenX: 10, screenY: 10 });
|
|
});
|
|
|
|
await act(async () => {
|
|
await latestHandlersRef.current?.handleEdgeInsertPick({
|
|
type: "prompt",
|
|
label: "Prompt",
|
|
width: 320,
|
|
height: 220,
|
|
defaultData: { prompt: "", aspectRatio: "1:1" },
|
|
} as CanvasNodeTemplate);
|
|
});
|
|
|
|
expect(runCreateNodeWithEdgeSplitOnlineOnly).toHaveBeenCalledWith({
|
|
canvasId: "canvas-1",
|
|
type: "prompt",
|
|
positionX: 140,
|
|
positionY: -80,
|
|
width: 320,
|
|
height: 220,
|
|
data: {
|
|
prompt: "",
|
|
model: "google/gemini-2.5-flash-image",
|
|
aspectRatio: "1:1",
|
|
canvasId: "canvas-1",
|
|
},
|
|
splitEdgeId: "edge-1",
|
|
newNodeTargetHandle: "image-in",
|
|
newNodeSourceHandle: "prompt-out",
|
|
splitSourceHandle: "source-handle",
|
|
splitTargetHandle: "target-handle",
|
|
});
|
|
expect(runBatchMoveNodesMutation).not.toHaveBeenCalled();
|
|
expect(showConnectionRejectedToast).not.toHaveBeenCalled();
|
|
expect(latestHandlersRef.current?.edgeInsertMenu).toBeNull();
|
|
});
|
|
|
|
it("moves chain nodes before create when spacing is too tight", async () => {
|
|
const runCreateNodeWithEdgeSplitOnlineOnly = vi.fn(async () => "node-new");
|
|
const runBatchMoveNodesMutation = vi.fn(async () => undefined);
|
|
const events: string[] = [];
|
|
|
|
runBatchMoveNodesMutation.mockImplementation(async () => {
|
|
events.push("move");
|
|
});
|
|
runCreateNodeWithEdgeSplitOnlineOnly.mockImplementation(async () => {
|
|
events.push("create");
|
|
return "node-new";
|
|
});
|
|
|
|
container = document.createElement("div");
|
|
document.body.appendChild(container);
|
|
root = createRoot(container);
|
|
|
|
await act(async () => {
|
|
root?.render(
|
|
<HookHarness
|
|
nodes={[
|
|
createNode({ id: "upstream", type: "image", position: { x: -120, y: 0 } }),
|
|
createNode({ id: "source", type: "image", position: { x: 0, y: 0 } }),
|
|
createNode({ id: "target", type: "text", position: { x: 120, y: 0 } }),
|
|
createNode({ id: "downstream", type: "text", position: { x: 240, y: 0 } }),
|
|
]}
|
|
edges={[
|
|
createEdge({ id: "edge-upstream", source: "upstream", target: "source" }),
|
|
createEdge({ id: "edge-1", source: "source", target: "target" }),
|
|
createEdge({ id: "edge-downstream", source: "target", target: "downstream" }),
|
|
]}
|
|
runCreateNodeWithEdgeSplitOnlineOnly={runCreateNodeWithEdgeSplitOnlineOnly}
|
|
runBatchMoveNodesMutation={runBatchMoveNodesMutation}
|
|
/>,
|
|
);
|
|
});
|
|
|
|
await act(async () => {
|
|
latestHandlersRef.current?.openEdgeInsertMenu({ edgeId: "edge-1", screenX: 10, screenY: 10 });
|
|
});
|
|
|
|
await act(async () => {
|
|
await latestHandlersRef.current?.handleEdgeInsertPick({
|
|
type: "note",
|
|
label: "Notiz",
|
|
width: 220,
|
|
height: 120,
|
|
defaultData: { content: "" },
|
|
} as CanvasNodeTemplate);
|
|
});
|
|
|
|
expect(runCreateNodeWithEdgeSplitOnlineOnly).toHaveBeenCalledTimes(1);
|
|
expect(runBatchMoveNodesMutation).toHaveBeenCalledWith({
|
|
moves: [
|
|
{ nodeId: "upstream", positionX: -230, positionY: 0 },
|
|
{ nodeId: "source", positionX: -110, positionY: 0 },
|
|
{ nodeId: "target", positionX: 230, positionY: 0 },
|
|
{ nodeId: "downstream", positionX: 350, positionY: 0 },
|
|
],
|
|
});
|
|
expect(events).toEqual(["move", "create"]);
|
|
});
|
|
|
|
it("computes insert position from post-reflow source/target positions", async () => {
|
|
const runCreateNodeWithEdgeSplitOnlineOnly = vi.fn(async () => "node-new");
|
|
const runBatchMoveNodesMutation = vi.fn(async () => undefined);
|
|
|
|
const source = createNode({
|
|
id: "source",
|
|
type: "image",
|
|
position: { x: 0, y: 20 },
|
|
style: { width: 160, height: 60 },
|
|
});
|
|
const target = createNode({
|
|
id: "target",
|
|
type: "text",
|
|
position: { x: 150, y: 20 },
|
|
style: { width: 80, height: 120 },
|
|
});
|
|
|
|
container = document.createElement("div");
|
|
document.body.appendChild(container);
|
|
root = createRoot(container);
|
|
|
|
await act(async () => {
|
|
root?.render(
|
|
<HookHarness
|
|
nodes={[source, target]}
|
|
edges={[createEdge({ id: "edge-1", source: "source", target: "target" })]}
|
|
runCreateNodeWithEdgeSplitOnlineOnly={runCreateNodeWithEdgeSplitOnlineOnly}
|
|
runBatchMoveNodesMutation={runBatchMoveNodesMutation}
|
|
/>,
|
|
);
|
|
});
|
|
|
|
await act(async () => {
|
|
latestHandlersRef.current?.openEdgeInsertMenu({ edgeId: "edge-1", screenX: 10, screenY: 10 });
|
|
});
|
|
|
|
const initialLayout = computeEdgeInsertLayout({
|
|
sourceNode: source,
|
|
targetNode: target,
|
|
newNodeWidth: 220,
|
|
newNodeHeight: 120,
|
|
gapPx: 10,
|
|
});
|
|
|
|
await act(async () => {
|
|
await latestHandlersRef.current?.handleEdgeInsertPick({
|
|
type: "note",
|
|
label: "Notiz",
|
|
width: 220,
|
|
height: 120,
|
|
defaultData: { content: "" },
|
|
} as CanvasNodeTemplate);
|
|
});
|
|
|
|
const typedBatchMoveMock = runBatchMoveNodesMutation as unknown as {
|
|
mock: { calls: unknown[][] };
|
|
};
|
|
const firstMoveCallUnknown = typedBatchMoveMock.mock.calls[0]?.[0];
|
|
const firstMoveCall = firstMoveCallUnknown as
|
|
| {
|
|
moves: {
|
|
nodeId: string;
|
|
positionX: number;
|
|
positionY: number;
|
|
}[];
|
|
}
|
|
| undefined;
|
|
expect(firstMoveCall).toBeDefined();
|
|
const moveByNodeId = new Map(
|
|
(firstMoveCall?.moves ?? []).map((move) => [move.nodeId, move]),
|
|
);
|
|
|
|
const sourceMove = moveByNodeId.get("source");
|
|
const targetMove = moveByNodeId.get("target");
|
|
expect(sourceMove).toBeDefined();
|
|
expect(targetMove).toBeDefined();
|
|
|
|
const sourceAfter = {
|
|
...source,
|
|
position: {
|
|
x: sourceMove?.positionX ?? source.position.x,
|
|
y: sourceMove?.positionY ?? source.position.y,
|
|
},
|
|
};
|
|
const targetAfter = {
|
|
...target,
|
|
position: {
|
|
x: targetMove?.positionX ?? target.position.x,
|
|
y: targetMove?.positionY ?? target.position.y,
|
|
},
|
|
};
|
|
|
|
const postMoveLayout = computeEdgeInsertLayout({
|
|
sourceNode: sourceAfter,
|
|
targetNode: targetAfter,
|
|
newNodeWidth: 220,
|
|
newNodeHeight: 120,
|
|
gapPx: 10,
|
|
});
|
|
|
|
expect(initialLayout.insertPosition).not.toEqual(postMoveLayout.insertPosition);
|
|
expect(runCreateNodeWithEdgeSplitOnlineOnly).toHaveBeenCalledWith(
|
|
expect.objectContaining({
|
|
positionX: postMoveLayout.insertPosition.x,
|
|
positionY: postMoveLayout.insertPosition.y,
|
|
}),
|
|
);
|
|
});
|
|
|
|
it("publishes reflow state while chain nodes are moving", async () => {
|
|
const runCreateNodeWithEdgeSplitOnlineOnly = vi.fn(async () => "node-new");
|
|
const runBatchMoveNodesMutation = vi.fn(async () => undefined);
|
|
const onReflowStateChange = vi.fn();
|
|
|
|
container = document.createElement("div");
|
|
document.body.appendChild(container);
|
|
root = createRoot(container);
|
|
|
|
await act(async () => {
|
|
root?.render(
|
|
<HookHarness
|
|
nodes={[
|
|
createNode({ id: "source", type: "image", position: { x: 0, y: 0 } }),
|
|
createNode({ id: "target", type: "text", position: { x: 120, y: 0 } }),
|
|
]}
|
|
edges={[createEdge({ id: "edge-1", source: "source", target: "target" })]}
|
|
runCreateNodeWithEdgeSplitOnlineOnly={runCreateNodeWithEdgeSplitOnlineOnly}
|
|
runBatchMoveNodesMutation={runBatchMoveNodesMutation}
|
|
onReflowStateChange={onReflowStateChange}
|
|
/>,
|
|
);
|
|
});
|
|
|
|
await act(async () => {
|
|
latestHandlersRef.current?.openEdgeInsertMenu({ edgeId: "edge-1", screenX: 10, screenY: 10 });
|
|
});
|
|
|
|
await act(async () => {
|
|
await latestHandlersRef.current?.handleEdgeInsertPick({
|
|
type: "note",
|
|
label: "Notiz",
|
|
width: 220,
|
|
height: 120,
|
|
defaultData: { content: "" },
|
|
} as CanvasNodeTemplate);
|
|
});
|
|
|
|
expect(onReflowStateChange.mock.calls).toEqual([[true], [false]]);
|
|
});
|
|
|
|
it("applies local reflow moves before creating split node", async () => {
|
|
const runCreateNodeWithEdgeSplitOnlineOnly = vi.fn(async () => "node-new");
|
|
const runBatchMoveNodesMutation = vi.fn(async () => undefined);
|
|
const applyLocalNodeMoves = vi.fn();
|
|
|
|
container = document.createElement("div");
|
|
document.body.appendChild(container);
|
|
root = createRoot(container);
|
|
|
|
await act(async () => {
|
|
root?.render(
|
|
<HookHarness
|
|
nodes={[
|
|
createNode({ id: "upstream", type: "image", position: { x: -120, y: 0 } }),
|
|
createNode({ id: "source", type: "image", position: { x: 0, y: 0 } }),
|
|
createNode({ id: "target", type: "text", position: { x: 120, y: 0 } }),
|
|
createNode({ id: "downstream", type: "text", position: { x: 240, y: 0 } }),
|
|
]}
|
|
edges={[
|
|
createEdge({ id: "edge-upstream", source: "upstream", target: "source" }),
|
|
createEdge({ id: "edge-1", source: "source", target: "target" }),
|
|
createEdge({ id: "edge-downstream", source: "target", target: "downstream" }),
|
|
]}
|
|
runCreateNodeWithEdgeSplitOnlineOnly={runCreateNodeWithEdgeSplitOnlineOnly}
|
|
runBatchMoveNodesMutation={runBatchMoveNodesMutation}
|
|
applyLocalNodeMoves={applyLocalNodeMoves}
|
|
/>,
|
|
);
|
|
});
|
|
|
|
await act(async () => {
|
|
latestHandlersRef.current?.openEdgeInsertMenu({ edgeId: "edge-1", screenX: 10, screenY: 10 });
|
|
});
|
|
|
|
await act(async () => {
|
|
await latestHandlersRef.current?.handleEdgeInsertPick({
|
|
type: "note",
|
|
label: "Notiz",
|
|
width: 220,
|
|
height: 120,
|
|
defaultData: { content: "" },
|
|
} as CanvasNodeTemplate);
|
|
});
|
|
|
|
expect(applyLocalNodeMoves).toHaveBeenCalledTimes(1);
|
|
expect(applyLocalNodeMoves).toHaveBeenCalledWith([
|
|
{ nodeId: "upstream", positionX: -230, positionY: 0 },
|
|
{ nodeId: "source", positionX: -110, positionY: 0 },
|
|
{ nodeId: "target", positionX: 230, positionY: 0 },
|
|
{ nodeId: "downstream", positionX: 350, positionY: 0 },
|
|
]);
|
|
expect(applyLocalNodeMoves.mock.invocationCallOrder[0]).toBeLessThan(
|
|
runCreateNodeWithEdgeSplitOnlineOnly.mock.invocationCallOrder[0],
|
|
);
|
|
});
|
|
|
|
it("does not apply local reflow moves when no move is needed", async () => {
|
|
const runCreateNodeWithEdgeSplitOnlineOnly = vi.fn(async () => "node-new");
|
|
const runBatchMoveNodesMutation = vi.fn(async () => undefined);
|
|
const applyLocalNodeMoves = vi.fn();
|
|
|
|
container = document.createElement("div");
|
|
document.body.appendChild(container);
|
|
root = createRoot(container);
|
|
|
|
await act(async () => {
|
|
root?.render(
|
|
<HookHarness
|
|
nodes={[
|
|
createNode({ id: "source", type: "image", position: { x: 0, y: 0 } }),
|
|
createNode({ id: "target", type: "text", position: { x: 500, y: 0 } }),
|
|
]}
|
|
edges={[createEdge({ id: "edge-1", source: "source", target: "target" })]}
|
|
runCreateNodeWithEdgeSplitOnlineOnly={runCreateNodeWithEdgeSplitOnlineOnly}
|
|
runBatchMoveNodesMutation={runBatchMoveNodesMutation}
|
|
applyLocalNodeMoves={applyLocalNodeMoves}
|
|
/>,
|
|
);
|
|
});
|
|
|
|
await act(async () => {
|
|
latestHandlersRef.current?.openEdgeInsertMenu({ edgeId: "edge-1", screenX: 10, screenY: 10 });
|
|
});
|
|
|
|
await act(async () => {
|
|
await latestHandlersRef.current?.handleEdgeInsertPick({
|
|
type: "prompt",
|
|
label: "Prompt",
|
|
width: 320,
|
|
height: 220,
|
|
defaultData: { prompt: "", model: "google/gemini-2.5-flash-image", aspectRatio: "1:1" },
|
|
} as CanvasNodeTemplate);
|
|
});
|
|
|
|
expect(runBatchMoveNodesMutation).not.toHaveBeenCalled();
|
|
expect(applyLocalNodeMoves).not.toHaveBeenCalled();
|
|
expect(runCreateNodeWithEdgeSplitOnlineOnly).toHaveBeenCalledTimes(1);
|
|
});
|
|
|
|
it("ignores temp edges when validating a split into adjustment targets", async () => {
|
|
const runCreateNodeWithEdgeSplitOnlineOnly = vi.fn(async () => "node-new");
|
|
const runBatchMoveNodesMutation = vi.fn(async () => undefined);
|
|
const showConnectionRejectedToast = vi.fn();
|
|
|
|
container = document.createElement("div");
|
|
document.body.appendChild(container);
|
|
root = createRoot(container);
|
|
|
|
await act(async () => {
|
|
root?.render(
|
|
<HookHarness
|
|
nodes={[
|
|
createNode({ id: "source", type: "image", position: { x: 0, y: 0 } }),
|
|
createNode({ id: "target", type: "curves", position: { x: 280, y: 0 } }),
|
|
createNode({ id: "other", type: "image", position: { x: 0, y: 160 } }),
|
|
]}
|
|
edges={[
|
|
createEdge({ id: "edge-1", source: "source", target: "target" }),
|
|
createEdge({ id: "edge-temp", source: "other", target: "target", className: "temp" }),
|
|
]}
|
|
runCreateNodeWithEdgeSplitOnlineOnly={runCreateNodeWithEdgeSplitOnlineOnly}
|
|
runBatchMoveNodesMutation={runBatchMoveNodesMutation}
|
|
showConnectionRejectedToast={showConnectionRejectedToast}
|
|
/>,
|
|
);
|
|
});
|
|
|
|
await act(async () => {
|
|
latestHandlersRef.current?.openEdgeInsertMenu({ edgeId: "edge-1", screenX: 20, screenY: 20 });
|
|
});
|
|
|
|
await act(async () => {
|
|
await latestHandlersRef.current?.handleEdgeInsertPick({
|
|
type: "color-adjust",
|
|
label: "Farbe",
|
|
width: 320,
|
|
height: 800,
|
|
defaultData: {},
|
|
} as CanvasNodeTemplate);
|
|
});
|
|
|
|
expect(runCreateNodeWithEdgeSplitOnlineOnly).toHaveBeenCalledTimes(1);
|
|
expect(showConnectionRejectedToast).not.toHaveBeenCalled();
|
|
});
|
|
|
|
it("exposes only edge-compatible templates for selected edge", async () => {
|
|
container = document.createElement("div");
|
|
document.body.appendChild(container);
|
|
root = createRoot(container);
|
|
|
|
await act(async () => {
|
|
root?.render(
|
|
<HookHarness
|
|
nodes={[
|
|
createNode({ id: "source", type: "color-adjust", position: { x: 0, y: 0 } }),
|
|
createNode({ id: "target", type: "render", position: { x: 360, y: 0 } }),
|
|
]}
|
|
edges={[createEdge({ id: "edge-1", source: "source", target: "target" })]}
|
|
/>,
|
|
);
|
|
});
|
|
|
|
await act(async () => {
|
|
latestHandlersRef.current?.openEdgeInsertMenu({ edgeId: "edge-1", screenX: 20, screenY: 20 });
|
|
});
|
|
|
|
const templateTypes = (latestHandlersRef.current?.edgeInsertTemplates ?? []).map(
|
|
(template) => template.type,
|
|
);
|
|
|
|
expect(templateTypes).toContain("curves");
|
|
expect(templateTypes).toContain("color-adjust");
|
|
expect(templateTypes).toContain("image");
|
|
expect(templateTypes).toContain("asset");
|
|
|
|
expect(templateTypes).not.toContain("render");
|
|
expect(templateTypes).not.toContain("prompt");
|
|
expect(templateTypes).not.toContain("text");
|
|
expect(templateTypes).not.toContain("ai-image");
|
|
});
|
|
|
|
it("offers video-prompt as valid split for text to ai-video", async () => {
|
|
container = document.createElement("div");
|
|
document.body.appendChild(container);
|
|
root = createRoot(container);
|
|
|
|
await act(async () => {
|
|
root?.render(
|
|
<HookHarness
|
|
nodes={[
|
|
createNode({ id: "source", type: "text", position: { x: 0, y: 0 } }),
|
|
createNode({ id: "target", type: "ai-video", position: { x: 360, y: 0 } }),
|
|
]}
|
|
edges={[createEdge({ id: "edge-1", source: "source", target: "target" })]}
|
|
/>,
|
|
);
|
|
});
|
|
|
|
await act(async () => {
|
|
latestHandlersRef.current?.openEdgeInsertMenu({ edgeId: "edge-1", screenX: 20, screenY: 20 });
|
|
});
|
|
|
|
const templateTypes = (latestHandlersRef.current?.edgeInsertTemplates ?? []).map(
|
|
(template) => template.type,
|
|
);
|
|
|
|
expect(templateTypes).toContain("video-prompt");
|
|
expect(templateTypes).not.toContain("prompt");
|
|
});
|
|
});
|