@runfusion/fusion 0.22.0 → 0.24.0

package/dist/plugins/fusion-plugin-dependency-graph/src/__tests__/DependencyGraph.test.tsx

@@ -0,0 +1,128 @@
+import { afterEach, beforeEach, describe, expect, it, vi } from "vitest";
+import { cleanup, fireEvent, render, screen } from "@testing-library/react";
+import type { Task } from "@fusion/core";
+import { DependencyGraph } from "../DependencyGraph";
+
+const fitToGraph = vi.fn();
+const zoomIn = vi.fn();
+const zoomOut = vi.fn();
+const resetView = vi.fn();
+const handleKeyDown = vi.fn();
+
+vi.mock("@fusion/dashboard/app/components/TaskCard", () => ({
+  TaskCard: ({ task, onOpenDetail, disableDrag }: { task: Task; onOpenDetail: (task: Task) => void; disableDrag?: boolean }) => (
+    <button data-testid={`task-${task.id}`} draggable={!disableDrag} onClick={() => onOpenDetail(task)}>{task.id}</button>
+  ),
+}));
+
+vi.mock("../useGraphInteraction", () => ({
+  useGraphInteraction: () => ({
+    transform: "translate(0px, 0px) scale(1)",
+    zoom: 1,
+    transitioning: false,
+    zoomIn,
+    zoomOut,
+    resetView,
+    fitToGraph,
+    onPointerDown: vi.fn(),
+    onPointerMove: vi.fn(),
+    onPointerUp: vi.fn(),
+    onWheelZoom: vi.fn(),
+    handleKeyDown,
+  }),
+}));
+
+function createTask(id: string, column: Task["column"], dependencies: string[] = []): Task {
+  return { id, description: id, column, dependencies, steps: [], currentStep: 0, log: [] } as Task;
+}
+
+describe("DependencyGraph", () => {
+  beforeEach(() => {
+    fitToGraph.mockReset();
+    zoomIn.mockReset();
+    zoomOut.mockReset();
+    resetView.mockReset();
+    handleKeyDown.mockReset();
+  });
+
+  afterEach(() => {
+    cleanup();
+  });
+
+  it("renders empty state for empty list", () => {
+    render(<DependencyGraph tasks={[]} onOpenTaskDetail={vi.fn()} />);
+    expect(screen.getByText(/No active tasks/i)).toBeTruthy();
+  });
+
+  it("renders only triage/todo/in-progress/in-review nodes from mixed columns", () => {
+    render(
+      <DependencyGraph
+        tasks={[
+          createTask("A", "triage"),
+          createTask("B", "todo"),
+          createTask("C", "in-progress"),
+          createTask("D", "in-review"),
+          createTask("E", "done"),
+          createTask("F", "archived"),
+        ]}
+        onOpenTaskDetail={vi.fn()}
+      />,
+    );
+
+    expect(screen.getByTestId("graph-task-node-A")).toBeTruthy();
+    expect(screen.getByTestId("graph-task-node-B")).toBeTruthy();
+    expect(screen.getByTestId("graph-task-node-C")).toBeTruthy();
+    expect(screen.getByTestId("graph-task-node-D")).toBeTruthy();
+    expect(screen.queryByTestId("graph-task-node-E")).toBeNull();
+    expect(screen.queryByTestId("graph-task-node-F")).toBeNull();
+  });
+
+  it("auto-fits on initial load with active tasks", () => {
+    render(<DependencyGraph tasks={[createTask("A", "todo")]} onOpenTaskDetail={vi.fn()} />);
+    expect(fitToGraph).toHaveBeenCalled();
+  });
+
+  it("forwards keyboard events to interaction hook", () => {
+    render(<DependencyGraph tasks={[createTask("A", "todo")]} onOpenTaskDetail={vi.fn()} />);
+    const viewport = document.querySelector(".dependency-graph__viewport");
+    if (!viewport) throw new Error("missing viewport");
+    fireEvent.keyDown(viewport, { key: "=", ctrlKey: true });
+    expect(handleKeyDown).toHaveBeenCalled();
+  });
+
+  it("sets viewport tabIndex for keyboard focus", () => {
+    render(<DependencyGraph tasks={[createTask("A", "todo")]} onOpenTaskDetail={vi.fn()} />);
+    const viewport = document.querySelector(".dependency-graph__viewport");
+    expect(viewport?.getAttribute("tabindex")).toBe("0");
+  });
+
+  it("renders toolbar controls", () => {
+    render(<DependencyGraph tasks={[createTask("A", "todo")]} onOpenTaskDetail={vi.fn()} />);
+    expect(screen.getByRole("button", { name: "Zoom in" })).toBeTruthy();
+    expect(screen.getByRole("button", { name: "Zoom out" })).toBeTruthy();
+    expect(screen.getByRole("button", { name: "Fit to graph" })).toBeTruthy();
+    expect(screen.getByRole("button", { name: "Reset view" })).toBeTruthy();
+    expect(screen.getByText("100%")).toBeTruthy();
+  });
+
+  it("fit-to-graph button triggers fitToGraph", () => {
+    render(<DependencyGraph tasks={[createTask("A", "todo")]} onOpenTaskDetail={vi.fn()} />);
+    fireEvent.click(screen.getByRole("button", { name: "Fit to graph" }));
+    expect(fitToGraph).toHaveBeenCalled();
+  });
+
+  it("clicking a card triggers onOpenDetail exactly once", () => {
+    const onOpenDetail = vi.fn();
+    render(<DependencyGraph tasks={[createTask("A", "in-progress")]} onOpenDetail={onOpenDetail} />);
+    fireEvent.click(screen.getByTestId("task-A"));
+    expect(onOpenDetail).toHaveBeenCalledTimes(1);
+    expect(onOpenDetail).toHaveBeenCalledWith(expect.objectContaining({ id: "A" }));
+  });
+
+  it("falls back to onOpenTaskDetail when onOpenDetail is not provided", () => {
+    const onOpenTaskDetail = vi.fn();
+    render(<DependencyGraph tasks={[createTask("A", "in-progress")]} onOpenTaskDetail={onOpenTaskDetail} />);
+    fireEvent.click(screen.getByTestId("task-A"));
+    expect(onOpenTaskDetail).toHaveBeenCalledWith("A");
+  });
+});

package/dist/plugins/fusion-plugin-dependency-graph/src/__tests__/GraphTaskNode.drag.test.tsx

@@ -0,0 +1,82 @@
+import { afterEach, describe, expect, it, vi } from "vitest";
+import { cleanup, fireEvent, render, screen } from "@testing-library/react";
+import type React from "react";
+import type { Task } from "@fusion/core";
+import { GraphTaskNode } from "../GraphTaskNode";
+
+function task(id = "FN-1"): Task {
+  return { id, description: id, column: "todo", dependencies: [], steps: [], currentStep: 0, log: [] } as Task;
+}
+
+function props(overrides: Partial<React.ComponentProps<typeof GraphTaskNode>> = {}): React.ComponentProps<typeof GraphTaskNode> {
+  return {
+    task: task(),
+    projectId: "p1",
+    position: { x: 0, y: 0 },
+    scale: 1,
+    isHighlighted: false,
+    isDimmed: false,
+    onNodePositionChange: vi.fn(),
+    onNodeDragStateChange: vi.fn(),
+    onOpenDetail: vi.fn(),
+    addToast: vi.fn(),
+    onUpdateTask: vi.fn(),
+    onArchiveTask: vi.fn(),
+    onUnarchiveTask: vi.fn(),
+    onDeleteTask: vi.fn(),
+    onRetryTask: vi.fn(),
+    onOpenDetailWithTab: vi.fn(),
+    onMoveTask: vi.fn(),
+    onOpenMission: vi.fn(),
+    taskStuckTimeoutMs: 1000,
+    lastFetchTimeMs: Date.now(),
+    workflowStepNameLookup: new Map<string, string>(),
+    ...overrides,
+  };
+}
+
+afterEach(() => {
+  cleanup();
+});
+
+describe("GraphTaskNode drag", () => {
+  it("does not open detail after drag threshold is exceeded", () => {
+    const onOpenDetail = vi.fn();
+    render(<GraphTaskNode {...props({ onOpenDetail })} />);
+    const node = screen.getByTestId("graph-task-node-FN-1");
+
+    fireEvent.pointerDown(node, { pointerId: 1, clientX: 10, clientY: 10, isPrimary: true });
+    fireEvent.pointerMove(node, { pointerId: 1, clientX: 25, clientY: 25, isPrimary: true });
+    fireEvent.pointerUp(node, { pointerId: 1, clientX: 25, clientY: 25, isPrimary: true });
+    fireEvent.click(node);
+
+    expect(onOpenDetail).not.toHaveBeenCalled();
+  });
+
+  it("applies dragging class only after threshold move", () => {
+    const onNodePositionChange = vi.fn();
+    render(<GraphTaskNode {...props({ onNodePositionChange })} />);
+    const node = screen.getByTestId("graph-task-node-FN-1");
+
+    fireEvent.pointerDown(node, { pointerId: 1, clientX: 10, clientY: 10, isPrimary: true });
+    fireEvent.pointerMove(node, { pointerId: 1, clientX: 12, clientY: 12, isPrimary: true });
+    expect(node.className).not.toContain("graph-node--dragging");
+
+    fireEvent.pointerMove(node, { pointerId: 1, clientX: 20, clientY: 20, isPrimary: true });
+    expect(node.className).toContain("graph-node--dragging");
+    expect(onNodePositionChange).toHaveBeenCalled();
+
+    fireEvent.pointerUp(node, { pointerId: 1, clientX: 20, clientY: 20, isPrimary: true });
+    expect(node.className).not.toContain("graph-node--dragging");
+  });
+
+  it("composes highlight and dragging classes", () => {
+    render(<GraphTaskNode {...props({ isHighlighted: true })} />);
+    const node = screen.getByTestId("graph-task-node-FN-1");
+    fireEvent.pointerDown(node, { pointerId: 1, clientX: 0, clientY: 0, isPrimary: true });
+    fireEvent.pointerMove(node, { pointerId: 1, clientX: 10, clientY: 10, isPrimary: true });
+
+    expect(node.className).toContain("graph-task-node--highlighted");
+    expect(node.className).toContain("graph-node--dragging");
+  });
+});

package/dist/plugins/fusion-plugin-dependency-graph/src/__tests__/GraphTaskNode.test.tsx

@@ -0,0 +1,307 @@
+import { cleanup, fireEvent, render, screen } from "@testing-library/react";
+import type { Task } from "@fusion/core";
+import { afterEach, describe, expect, it, vi } from "vitest";
+import { TaskCard } from "@fusion/dashboard/app/components/TaskCard";
+import { GraphTaskNode } from "../GraphTaskNode";
+
+function createTask(overrides: Partial<Task> = {}): Task {
+  return {
+    id: "FN-TEST",
+    description: "Task description",
+    column: "todo",
+    dependencies: [],
+    steps: [],
+    currentStep: 0,
+    log: [],
+    ...overrides,
+  } as Task;
+}
+
+function createProps(task: Task) {
+  return {
+    task,
+    position: { x: 0, y: 0 },
+    scale: 1,
+    onNodePositionChange: vi.fn(),
+    onNodeDragStateChange: vi.fn(),
+    projectId: "proj-1",
+    onOpenDetail: vi.fn(),
+    addToast: vi.fn(),
+    onUpdateTask: vi.fn(),
+    onArchiveTask: vi.fn(),
+    onUnarchiveTask: vi.fn(),
+    onDeleteTask: vi.fn(),
+    onRetryTask: vi.fn(),
+    onOpenDetailWithTab: vi.fn(),
+    onMoveTask: vi.fn(),
+    onOpenMission: vi.fn(),
+    taskStuckTimeoutMs: 60_000,
+    lastFetchTimeMs: Date.now(),
+    workflowStepNameLookup: new Map<string, string>(),
+  };
+}
+
+afterEach(() => {
+  cleanup();
+});
+
+describe("GraphTaskNode", () => {
+  it("renders a TaskCard and passes core props through", () => {
+    const props = createProps(createTask());
+    const { container } = render(<GraphTaskNode {...props} style={{ left: 10, top: 20 }} />);
+
+    const node = screen.getByTestId("graph-task-node-FN-TEST");
+    expect(node).toBeTruthy();
+    expect(container.querySelector(".card-title")?.textContent).toContain("Task description");
+    expect(node.getAttribute("draggable")).toBe("false");
+    expect(container.querySelector(".card")?.getAttribute("draggable")).toBe("false");
+  });
+
+  it("shows active indicator with capitalized status for in-progress executing tasks", () => {
+    const props = createProps(
+      createTask({
+        column: "in-progress",
+        status: "executing",
+        steps: [{ name: "step one", status: "in-progress" }],
+      }),
+    );
+
+    const { container } = render(<GraphTaskNode {...props} />);
+    const node = screen.getByTestId("graph-task-node-FN-TEST");
+    expect(node.className).toContain("graph-task-node--active");
+    expect(container.querySelector(".card")?.className).toContain("agent-active");
+    expect(screen.getByText("Executing")).toBeTruthy();
+    expect(container.querySelector(".graph-task-active-indicator")).toBeTruthy();
+  });
+
+  it("defaults indicator text to Executing when status is missing on in-progress tasks", () => {
+    const props = createProps(createTask({ column: "in-progress", status: undefined }));
+    const { container } = render(<GraphTaskNode {...props} />);
+
+    expect(container.querySelector(".graph-task-active-indicator")).toBeTruthy();
+    expect(screen.getByText("Executing")).toBeTruthy();
+  });
+
+  it("applies in-review visual class and does not apply active class for in-review tasks", () => {
+    const props = createProps(createTask({ column: "in-review", status: "idle" }));
+    const { container } = render(<GraphTaskNode {...props} />);
+
+    const node = screen.getByTestId("graph-task-node-FN-TEST");
+    expect(container.querySelector(".graph-task-active-indicator")).toBeFalsy();
+    expect(node.className).toContain("graph-task-node--in-review");
+    expect(node.className).not.toContain("graph-task-node--active");
+  });
+
+  it.each(["todo", "triage", "in-progress"] as const)("does not apply in-review class for %s tasks", (column) => {
+    const props = createProps(createTask({ column, status: column === "in-progress" ? "executing" : "idle" }));
+
+    render(<GraphTaskNode {...props} />);
+    expect(screen.getByTestId("graph-task-node-FN-TEST").className).not.toContain("graph-task-node--in-review");
+  });
+
+  it("does not render active indicator for paused in-progress tasks", () => {
+    const props = createProps(createTask({ column: "in-progress", status: "executing", paused: true }));
+    const { container } = render(<GraphTaskNode {...props} />);
+
+    expect(container.querySelector(".graph-task-active-indicator")).toBeFalsy();
+  });
+
+  it("does not render active indicator for failed in-progress tasks", () => {
+    const props = createProps(createTask({ column: "in-progress", status: "failed" }));
+    const { container } = render(<GraphTaskNode {...props} />);
+
+    expect(container.querySelector(".graph-task-active-indicator")).toBeFalsy();
+  });
+
+  it("sets current-step attribute for active task when current step is valid", () => {
+    const props = createProps(
+      createTask({
+        column: "in-progress",
+        status: "executing",
+        steps: [
+          { name: "step one", status: "done" },
+          { name: "step two", status: "done" },
+          { name: "step three", status: "in-progress" },
+        ],
+        currentStep: 2,
+      }),
+    );
+
+    render(<GraphTaskNode {...props} />);
+    expect(screen.getByTestId("graph-task-node-FN-TEST").getAttribute("data-current-step")).toBe("2");
+  });
+
+  it("sets current-step attribute to zero when first step is active", () => {
+    const props = createProps(
+      createTask({
+        column: "in-progress",
+        status: "executing",
+        steps: [{ name: "step one", status: "in-progress" }],
+        currentStep: 0,
+      }),
+    );
+
+    render(<GraphTaskNode {...props} />);
+    expect(screen.getByTestId("graph-task-node-FN-TEST").getAttribute("data-current-step")).toBe("0");
+  });
+
+  it("omits current-step attribute when current step is out of bounds", () => {
+    const props = createProps(
+      createTask({
+        column: "in-progress",
+        status: "executing",
+        steps: [{ name: "step one", status: "in-progress" }],
+        currentStep: 10,
+      }),
+    );
+
+    render(<GraphTaskNode {...props} />);
+    expect(screen.getByTestId("graph-task-node-FN-TEST").hasAttribute("data-current-step")).toBe(false);
+  });
+
+  it("omits current-step attribute when current step is negative", () => {
+    const props = createProps(createTask({ column: "in-progress", status: "executing", steps: [], currentStep: -1 }));
+
+    render(<GraphTaskNode {...props} />);
+    expect(screen.getByTestId("graph-task-node-FN-TEST").hasAttribute("data-current-step")).toBe(false);
+  });
+
+  it("omits current-step attribute when current step is undefined", () => {
+    const props = createProps(createTask({ column: "in-progress", status: "executing", steps: [], currentStep: undefined }));
+
+    render(<GraphTaskNode {...props} />);
+    expect(screen.getByTestId("graph-task-node-FN-TEST").hasAttribute("data-current-step")).toBe(false);
+  });
+
+  it("does not set current-step for non-active tasks", () => {
+    const props = createProps(
+      createTask({
+        column: "todo",
+        status: "queued",
+        steps: [{ name: "step one", status: "in-progress" }],
+        currentStep: 0,
+      }),
+    );
+
+    render(<GraphTaskNode {...props} />);
+    expect(screen.getByTestId("graph-task-node-FN-TEST").hasAttribute("data-current-step")).toBe(false);
+  });
+
+  it("sets current-step to native step index when workflow steps are present", () => {
+    const props = createProps(
+      createTask({
+        column: "in-progress",
+        status: "executing",
+        steps: [
+          { id: "native-1", name: "native one", status: "done" },
+          { id: "native-2", name: "native two", status: "in-progress" },
+        ],
+        enabledWorkflowSteps: ["wf-1"],
+        currentStep: 1,
+      }),
+    );
+
+    render(<GraphTaskNode {...props} />);
+    expect(screen.getByTestId("graph-task-node-FN-TEST").getAttribute("data-current-step")).toBe("1");
+  });
+
+  it("does not set current-step when native step list is empty even with workflow steps", () => {
+    const props = createProps(
+      createTask({
+        column: "in-progress",
+        status: "executing",
+        steps: [],
+        enabledWorkflowSteps: ["wf-1"],
+        currentStep: 0,
+      }),
+    );
+
+    render(<GraphTaskNode {...props} />);
+    expect(screen.getByTestId("graph-task-node-FN-TEST").hasAttribute("data-current-step")).toBe(false);
+  });
+
+  it("clicking card opens task detail exactly once", () => {
+    const props = createProps(createTask());
+    const { container } = render(<GraphTaskNode {...props} />);
+
+    const card = container.querySelector(".card");
+    expect(card).toBeTruthy();
+    fireEvent.click(card!);
+    expect(props.onOpenDetail).toHaveBeenCalledTimes(1);
+    expect(props.onOpenDetail).toHaveBeenCalledWith(expect.objectContaining({ id: "FN-TEST" }));
+  });
+
+  it("clicking active indicator surface opens task detail", () => {
+    const props = createProps(createTask({ column: "in-progress", status: "executing" }));
+    const { container } = render(<GraphTaskNode {...props} />);
+
+    const indicator = container.querySelector(".graph-task-active-indicator");
+    expect(indicator).toBeTruthy();
+    fireEvent.click(indicator!);
+
+    expect(props.onOpenDetail).toHaveBeenCalledTimes(1);
+    expect(props.onOpenDetail).toHaveBeenCalledWith(expect.objectContaining({ id: "FN-TEST" }));
+  });
+
+  it("applies highlighted class only when requested", () => {
+    const highlightedProps = createProps(createTask({ id: "FN-HL" }));
+    const neutralProps = createProps(createTask({ id: "FN-NEUTRAL" }));
+
+    const { unmount } = render(<GraphTaskNode {...highlightedProps} isHighlighted={true} />);
+    expect(screen.getByTestId("graph-task-node-FN-HL").className).toContain("graph-task-node--highlighted");
+    unmount();
+
+    render(<GraphTaskNode {...neutralProps} />);
+    const neutral = screen.getByTestId("graph-task-node-FN-NEUTRAL");
+    expect(neutral.className).not.toContain("graph-task-node--highlighted");
+    expect(neutral.className).not.toContain("graph-task-node--dimmed");
+  });
+
+  it("renders the same TaskCard structure as board usage", () => {
+    const task = createTask({
+      id: "FN-SAME",
+      column: "in-progress",
+      status: "executing",
+      error: "Execution failed",
+      missionId: "M-1",
+      sourceType: "automation",
+      sourceAgentId: "agent-1",
+      steps: [{ name: "sync", status: "in-progress" }],
+      currentStep: 0,
+    });
+    const props = createProps(task);
+
+    const { container } = render(
+      <div>
+        <TaskCard {...props} disableDrag={true} />
+        <GraphTaskNode {...props} />
+      </div>,
+    );
+
+    const cards = container.querySelectorAll(".card");
+    expect(cards.length).toBe(2);
+
+    const [boardCard, graphCard] = cards;
+    const selectors = [
+      ".card-id",
+      ".card-title",
+      ".card-status-badge",
+      ".card-step-dot",
+      ".card-step-name",
+      ".card-progress",
+      ".card-progress-fill",
+      ".card-error",
+      ".card-mission-badge",
+      ".card-provider-icons",
+      ".card-agent-badge",
+    ];
+
+    for (const selector of selectors) {
+      expect(Boolean(boardCard.querySelector(selector))).toBe(Boolean(graphCard.querySelector(selector)));
+    }
+
+    expect(Boolean(boardCard.querySelector(".card-error"))).toBe(Boolean(graphCard.querySelector(".card-error")));
+    expect(boardCard.querySelector(".card-id")?.textContent).toBe(graphCard.querySelector(".card-id")?.textContent);
+    expect(boardCard.querySelector(".card-title")?.textContent).toBe(graphCard.querySelector(".card-title")?.textContent);
+  });
+});

package/dist/plugins/fusion-plugin-dependency-graph/src/__tests__/GraphToolbar.test.tsx

@@ -0,0 +1,60 @@
+import { afterEach, describe, expect, it, vi } from "vitest";
+import { cleanup, fireEvent, render, screen } from "@testing-library/react";
+import { GraphToolbar } from "../GraphToolbar";
+
+describe("GraphToolbar", () => {
+  afterEach(() => {
+    cleanup();
+  });
+  it("renders controls and zoom percent", () => {
+    render(
+      <GraphToolbar
+        zoom={1.25}
+        onZoomIn={vi.fn()}
+        onZoomOut={vi.fn()}
+        onFitToGraph={vi.fn()}
+        onResetView={vi.fn()}
+      />,
+    );
+
+    expect(screen.getByRole("button", { name: "Zoom in" })).toBeTruthy();
+    expect(screen.getByRole("button", { name: "Zoom out" })).toBeTruthy();
+    expect(screen.getByRole("button", { name: "Fit to graph" })).toBeTruthy();
+    expect(screen.getByRole("button", { name: "Reset view" })).toBeTruthy();
+    expect(screen.getByText("125%")).toBeTruthy();
+  });
+
+  it("fires callbacks", () => {
+    const onZoomIn = vi.fn();
+    const onZoomOut = vi.fn();
+    const onFitToGraph = vi.fn();
+    const onResetView = vi.fn();
+
+    render(
+      <GraphToolbar
+        zoom={1}
+        onZoomIn={onZoomIn}
+        onZoomOut={onZoomOut}
+        onFitToGraph={onFitToGraph}
+        onResetView={onResetView}
+      />,
+    );
+
+    fireEvent.click(screen.getByRole("button", { name: "Zoom in" }));
+    fireEvent.click(screen.getByRole("button", { name: "Zoom out" }));
+    fireEvent.click(screen.getByRole("button", { name: "Fit to graph" }));
+    fireEvent.click(screen.getByRole("button", { name: "Reset view" }));
+
+    expect(onZoomIn).toHaveBeenCalledOnce();
+    expect(onZoomOut).toHaveBeenCalledOnce();
+    expect(onFitToGraph).toHaveBeenCalledOnce();
+    expect(onResetView).toHaveBeenCalledOnce();
+  });
+
+  it("applies toolbar class", () => {
+    render(
+      <GraphToolbar zoom={1} onZoomIn={vi.fn()} onZoomOut={vi.fn()} onFitToGraph={vi.fn()} onResetView={vi.fn()} />,
+    );
+    expect(screen.getByTestId("graph-toolbar").className).toContain("graph-toolbar");
+  });
+});

package/dist/plugins/fusion-plugin-dependency-graph/src/__tests__/edges.test.tsx

@@ -0,0 +1,75 @@
+import { afterEach, describe, expect, it } from "vitest";
+import { cleanup, render, screen } from "@testing-library/react";
+import { GraphEdges } from "../edges";
+import type { GraphEdge } from "../types";
+
+function renderEdges(edges: GraphEdge[], highlightedEdgeIds?: Set<string>) {
+  const positions = new Map([
+    ["A", { x: 0, y: 0 }],
+    ["B", { x: 320, y: 180 }],
+    ["C", { x: 640, y: 180 }],
+  ]);
+
+  return render(
+    <GraphEdges
+      edges={edges}
+      positions={positions}
+      highlightedEdgeIds={highlightedEdgeIds}
+    />,
+  );
+}
+
+describe("GraphEdges", () => {
+  afterEach(() => {
+    cleanup();
+  });
+  it("renders single edge", () => {
+    renderEdges([{ source: "A", target: "B" }]);
+    const edge = screen.getAllByTestId("dependency-edge")[0];
+    expect(edge.getAttribute("opacity")).toBe("1");
+    expect(edge.getAttribute("stroke")).toBe("var(--border)");
+  });
+
+  it("renders multiple edges", () => {
+    renderEdges([
+      { source: "A", target: "B" },
+      { source: "A", target: "C" },
+    ]);
+    expect(screen.getAllByTestId("dependency-edge")).toHaveLength(2);
+  });
+
+  it("supports edges with same source", () => {
+    renderEdges([
+      { source: "A", target: "B" },
+      { source: "A", target: "C" },
+    ]);
+    expect(screen.getAllByTestId("dependency-edge")).toHaveLength(2);
+  });
+
+  it("supports edges with same target", () => {
+    renderEdges([
+      { source: "B", target: "A" },
+      { source: "C", target: "A" },
+    ]);
+    expect(screen.getAllByTestId("dependency-edge")).toHaveLength(2);
+  });
+
+  it("dims non-highlighted edges when highlight set provided", () => {
+    renderEdges(
+      [
+        { source: "A", target: "B" },
+        { source: "A", target: "C" },
+      ],
+      new Set(["A->B"]),
+    );
+
+    const all = screen.getAllByTestId("dependency-edge");
+    const highlighted = all.find((edge) => edge.getAttribute("data-edge-id") === "A->B");
+    const dimmed = all.find((edge) => edge.getAttribute("data-edge-id") === "A->C");
+
+    expect(highlighted?.getAttribute("opacity")).toBe("1");
+    expect(highlighted?.getAttribute("class") ?? "").toContain("graph-edge--highlighted");
+    expect(dimmed?.getAttribute("opacity")).toBe("0.15");
+    expect(dimmed?.getAttribute("class") ?? "").toContain("graph-edge--dimmed");
+  });
+});