323 lines
10 KiB
TypeScript
323 lines
10 KiB
TypeScript
// @vitest-environment jsdom
|
|
|
|
import React, { act, useEffect, useRef } from "react";
|
|
import { createRoot, type Root } from "react-dom/client";
|
|
import type { Connection, Edge as RFEdge, Node as RFNode } from "@xyflow/react";
|
|
import { afterEach, beforeEach, describe, expect, it, vi } from "vitest";
|
|
|
|
import type { Id } from "@/convex/_generated/dataModel";
|
|
import type { CanvasNodeTemplate } from "@/lib/canvas-node-templates";
|
|
import { CANVAS_NODE_TEMPLATES } from "@/lib/canvas-node-templates";
|
|
import { useCanvasConnections } from "@/components/canvas/use-canvas-connections";
|
|
|
|
const {
|
|
validateCanvasConnectionMock,
|
|
validateCanvasConnectionByTypeMock,
|
|
useCanvasReconnectHandlersMock,
|
|
getConnectEndClientPointMock,
|
|
} = vi.hoisted(() => ({
|
|
validateCanvasConnectionMock: vi.fn(),
|
|
validateCanvasConnectionByTypeMock: vi.fn(),
|
|
useCanvasReconnectHandlersMock: vi.fn(),
|
|
getConnectEndClientPointMock: vi.fn(),
|
|
}));
|
|
|
|
vi.mock("@/components/canvas/canvas-connection-validation", () => ({
|
|
validateCanvasConnection: validateCanvasConnectionMock,
|
|
validateCanvasConnectionByType: validateCanvasConnectionByTypeMock,
|
|
}));
|
|
|
|
vi.mock("@/components/canvas/canvas-reconnect", () => ({
|
|
useCanvasReconnectHandlers: useCanvasReconnectHandlersMock,
|
|
}));
|
|
|
|
vi.mock("@/components/canvas/canvas-helpers", async () => {
|
|
const actual = await vi.importActual<
|
|
typeof import("@/components/canvas/canvas-helpers")
|
|
>("@/components/canvas/canvas-helpers");
|
|
|
|
return {
|
|
...actual,
|
|
getConnectEndClientPoint: getConnectEndClientPointMock,
|
|
};
|
|
});
|
|
|
|
const asCanvasId = (id: string): Id<"canvases"> => id as Id<"canvases">;
|
|
const asNodeId = (id: string): Id<"nodes"> => id as Id<"nodes">;
|
|
|
|
type HarnessProps = {
|
|
nodes: RFNode[];
|
|
edges: RFEdge[];
|
|
runCreateEdgeMutation?: ReturnType<typeof vi.fn>;
|
|
runRemoveEdgeMutation?: ReturnType<typeof vi.fn>;
|
|
runCreateNodeWithEdgeFromSourceOnlineOnly?: ReturnType<typeof vi.fn>;
|
|
runCreateNodeWithEdgeToTargetOnlineOnly?: ReturnType<typeof vi.fn>;
|
|
syncPendingMoveForClientRequest?: ReturnType<typeof vi.fn>;
|
|
showConnectionRejectedToast?: ReturnType<typeof vi.fn>;
|
|
isReconnectDragActive?: boolean;
|
|
};
|
|
|
|
const latestHookRef: {
|
|
current: ReturnType<typeof useCanvasConnections> | null;
|
|
} = { current: null };
|
|
|
|
(globalThis as typeof globalThis & { IS_REACT_ACT_ENVIRONMENT?: boolean }).IS_REACT_ACT_ENVIRONMENT = true;
|
|
|
|
function HookHarness(props: HarnessProps) {
|
|
const nodesRef = useRef(props.nodes);
|
|
const edgesRef = useRef(props.edges);
|
|
const pendingConnectionCreatesRef = useRef(new Set<string>());
|
|
const resolvedRealIdByClientRequestRef = useRef(new Map<string, Id<"nodes">>());
|
|
const edgeReconnectSuccessful = useRef(true);
|
|
const isReconnectDragActiveRef = useRef(Boolean(props.isReconnectDragActive));
|
|
|
|
useEffect(() => {
|
|
nodesRef.current = props.nodes;
|
|
edgesRef.current = props.edges;
|
|
}, [props.edges, props.nodes]);
|
|
|
|
const hookValue = useCanvasConnections({
|
|
canvasId: asCanvasId("canvas-1"),
|
|
nodes: props.nodes,
|
|
edges: props.edges,
|
|
nodesRef,
|
|
edgesRef,
|
|
edgeReconnectSuccessful,
|
|
isReconnectDragActiveRef,
|
|
pendingConnectionCreatesRef,
|
|
resolvedRealIdByClientRequestRef,
|
|
setEdges: vi.fn(),
|
|
setEdgeSyncNonce: vi.fn(),
|
|
screenToFlowPosition: ({ x, y }: { x: number; y: number }) => ({ x: x - 10, y: y - 20 }),
|
|
syncPendingMoveForClientRequest:
|
|
props.syncPendingMoveForClientRequest ?? vi.fn(async () => undefined),
|
|
runCreateEdgeMutation: props.runCreateEdgeMutation ?? vi.fn(async () => undefined),
|
|
runRemoveEdgeMutation: props.runRemoveEdgeMutation ?? vi.fn(async () => undefined),
|
|
runCreateNodeWithEdgeFromSourceOnlineOnly:
|
|
props.runCreateNodeWithEdgeFromSourceOnlineOnly ?? vi.fn(async () => asNodeId("node-new")),
|
|
runCreateNodeWithEdgeToTargetOnlineOnly:
|
|
props.runCreateNodeWithEdgeToTargetOnlineOnly ?? vi.fn(async () => asNodeId("node-new")),
|
|
showConnectionRejectedToast:
|
|
props.showConnectionRejectedToast ?? vi.fn(),
|
|
});
|
|
|
|
useEffect(() => {
|
|
latestHookRef.current = hookValue;
|
|
}, [hookValue]);
|
|
|
|
return null;
|
|
}
|
|
|
|
describe("useCanvasConnections", () => {
|
|
let container: HTMLDivElement | null = null;
|
|
let root: Root | null = null;
|
|
|
|
beforeEach(() => {
|
|
validateCanvasConnectionMock.mockReturnValue(null);
|
|
validateCanvasConnectionByTypeMock.mockReturnValue(null);
|
|
getConnectEndClientPointMock.mockReturnValue({ x: 140, y: 220 });
|
|
useCanvasReconnectHandlersMock.mockReturnValue({
|
|
onReconnectStart: vi.fn(),
|
|
onReconnect: vi.fn(),
|
|
onReconnectEnd: vi.fn(),
|
|
});
|
|
});
|
|
|
|
afterEach(async () => {
|
|
latestHookRef.current = null;
|
|
vi.clearAllMocks();
|
|
if (root) {
|
|
await act(async () => {
|
|
root?.unmount();
|
|
});
|
|
}
|
|
container?.remove();
|
|
root = null;
|
|
container = null;
|
|
});
|
|
|
|
async function renderHook(props: HarnessProps) {
|
|
container = document.createElement("div");
|
|
document.body.appendChild(container);
|
|
root = createRoot(container);
|
|
|
|
await act(async () => {
|
|
root?.render(<HookHarness {...props} />);
|
|
});
|
|
}
|
|
|
|
it("creates a valid edge through centralized validation", async () => {
|
|
const runCreateEdgeMutation = vi.fn(async () => undefined);
|
|
|
|
await renderHook({
|
|
nodes: [
|
|
{ id: "node-image", type: "image", position: { x: 0, y: 0 }, data: {} },
|
|
{ id: "node-text", type: "text", position: { x: 10, y: 10 }, data: {} },
|
|
],
|
|
edges: [],
|
|
runCreateEdgeMutation,
|
|
});
|
|
|
|
const connection: Connection = {
|
|
source: "node-image",
|
|
target: "node-text",
|
|
sourceHandle: null,
|
|
targetHandle: null,
|
|
};
|
|
|
|
await act(async () => {
|
|
latestHookRef.current?.onConnect(connection);
|
|
});
|
|
|
|
expect(validateCanvasConnectionMock).toHaveBeenCalledWith(connection, expect.any(Array), []);
|
|
expect(runCreateEdgeMutation).toHaveBeenCalledWith({
|
|
canvasId: "canvas-1",
|
|
sourceNodeId: "node-image",
|
|
targetNodeId: "node-text",
|
|
sourceHandle: undefined,
|
|
targetHandle: undefined,
|
|
});
|
|
});
|
|
|
|
it("rejects invalid connections without mutating edges", async () => {
|
|
const runCreateEdgeMutation = vi.fn(async () => undefined);
|
|
const showConnectionRejectedToast = vi.fn();
|
|
validateCanvasConnectionMock.mockReturnValue("self-loop");
|
|
|
|
await renderHook({
|
|
nodes: [
|
|
{ id: "node-image", type: "image", position: { x: 0, y: 0 }, data: {} },
|
|
],
|
|
edges: [],
|
|
runCreateEdgeMutation,
|
|
showConnectionRejectedToast,
|
|
});
|
|
|
|
await act(async () => {
|
|
latestHookRef.current?.onConnect({
|
|
source: "node-image",
|
|
target: "node-image",
|
|
sourceHandle: null,
|
|
targetHandle: null,
|
|
});
|
|
});
|
|
|
|
expect(showConnectionRejectedToast).toHaveBeenCalledWith("self-loop");
|
|
expect(runCreateEdgeMutation).not.toHaveBeenCalled();
|
|
});
|
|
|
|
it("opens the connection drop menu from an invalid connect end", async () => {
|
|
await renderHook({
|
|
nodes: [
|
|
{ id: "node-image", type: "image", position: { x: 0, y: 0 }, data: {} },
|
|
],
|
|
edges: [],
|
|
});
|
|
|
|
await act(async () => {
|
|
latestHookRef.current?.onConnectEnd({} as MouseEvent, {
|
|
isValid: false,
|
|
fromNode: { id: "node-image" },
|
|
fromHandle: { id: "source", type: "source" },
|
|
} as never);
|
|
});
|
|
|
|
expect(latestHookRef.current?.connectionDropMenu).toEqual({
|
|
screenX: 140,
|
|
screenY: 220,
|
|
flowX: 130,
|
|
flowY: 200,
|
|
fromNodeId: "node-image",
|
|
fromHandleId: "source",
|
|
fromHandleType: "source",
|
|
});
|
|
});
|
|
|
|
it("routes connection-drop creation through type validation and source creation", async () => {
|
|
const runCreateNodeWithEdgeFromSourceOnlineOnly = vi.fn(async () => asNodeId("node-new"));
|
|
const syncPendingMoveForClientRequest = vi.fn(async () => undefined);
|
|
|
|
await renderHook({
|
|
nodes: [
|
|
{ id: "node-image", type: "image", position: { x: 0, y: 0 }, data: {} },
|
|
],
|
|
edges: [],
|
|
runCreateNodeWithEdgeFromSourceOnlineOnly,
|
|
syncPendingMoveForClientRequest,
|
|
});
|
|
|
|
await act(async () => {
|
|
latestHookRef.current?.onConnectEnd({} as MouseEvent, {
|
|
isValid: false,
|
|
fromNode: { id: "node-image" },
|
|
fromHandle: { id: "source", type: "source" },
|
|
} as never);
|
|
});
|
|
|
|
const template = {
|
|
...CANVAS_NODE_TEMPLATES.find((entry) => entry.type === "text")!,
|
|
defaultData: { content: "Hello" },
|
|
} as unknown as CanvasNodeTemplate;
|
|
|
|
await act(async () => {
|
|
latestHookRef.current?.handleConnectionDropPick(template);
|
|
await Promise.resolve();
|
|
});
|
|
|
|
expect(validateCanvasConnectionByTypeMock).toHaveBeenCalledWith({
|
|
sourceType: "image",
|
|
targetType: "text",
|
|
targetNodeId: expect.stringMatching(/^__pending_text_/),
|
|
edges: [],
|
|
});
|
|
expect(runCreateNodeWithEdgeFromSourceOnlineOnly).toHaveBeenCalledWith(
|
|
expect.objectContaining({
|
|
canvasId: "canvas-1",
|
|
type: "text",
|
|
positionX: 130,
|
|
positionY: 200,
|
|
sourceNodeId: "node-image",
|
|
sourceHandle: "source",
|
|
data: expect.objectContaining({
|
|
canvasId: "canvas-1",
|
|
content: "Hello",
|
|
}),
|
|
}),
|
|
);
|
|
expect(syncPendingMoveForClientRequest).toHaveBeenCalled();
|
|
});
|
|
|
|
it("adapts reconnect handlers through the shared connection validation", async () => {
|
|
const showConnectionRejectedToast = vi.fn();
|
|
|
|
await renderHook({
|
|
nodes: [
|
|
{ id: "node-image", type: "image", position: { x: 0, y: 0 }, data: {} },
|
|
{ id: "node-text", type: "text", position: { x: 10, y: 10 }, data: {} },
|
|
],
|
|
edges: [{ id: "edge-1", source: "node-image", target: "node-text" }],
|
|
showConnectionRejectedToast,
|
|
});
|
|
|
|
const reconnectArgs = useCanvasReconnectHandlersMock.mock.calls[0][0];
|
|
const reconnectValidation = reconnectArgs.validateConnection(
|
|
{ id: "edge-1", source: "node-image", target: "node-text" },
|
|
{ source: "node-image", target: "node-text" },
|
|
);
|
|
|
|
reconnectArgs.onInvalidConnection("unknown-node");
|
|
|
|
expect(validateCanvasConnectionMock).toHaveBeenCalledWith(
|
|
{ source: "node-image", target: "node-text" },
|
|
expect.any(Array),
|
|
expect.any(Array),
|
|
"edge-1",
|
|
);
|
|
expect(reconnectValidation).toBeNull();
|
|
expect(showConnectionRejectedToast).toHaveBeenCalledWith("unknown-node");
|
|
expect(latestHookRef.current?.onReconnect).toBe(
|
|
useCanvasReconnectHandlersMock.mock.results[0]?.value.onReconnect,
|
|
);
|
|
});
|
|
});
|