@truedat/core 8.11.6 → 8.11.7

package/src/components/__tests__/ColoredEdge.spec.js

@@ -0,0 +1,372 @@
+import { fireEvent, waitFor } from "@testing-library/react";
+import { render } from "@truedat/test/render";
+import ColoredEdge, {
+  EdgeHoverContext,
+  edgeAnimationDuration,
+  getClassicArrowPoints,
+  getFlexibleEdgePath,
+} from "../graph/ColoredEdge";
+
+jest.mock("@xyflow/react", () => ({
+  // eslint-disable-next-line react/prop-types
+  BaseEdge: ({ className, id, path, style }) => (
+    <path className={className} d={path} id={id} style={style} />
+  ),
+  EdgeLabelRenderer: ({ children }) => children,
+  getBezierPath: ({ sourceX, sourceY, targetX, targetY }) => [
+    `M ${sourceX},${sourceY} C ${sourceX},${sourceY} ${targetX},${targetY} ${targetX},${targetY}`,
+    (sourceX + targetX) / 2,
+    (sourceY + targetY) / 2,
+  ],
+}));
+
+describe("<ColoredEdge /> flow animation", () => {
+  it("uses the measured path length for the motion duration", async () => {
+    const originalGetTotalLength = SVGElement.prototype.getTotalLength;
+
+    SVGElement.prototype.getTotalLength = jest.fn(() => 400);
+
+    try {
+      const rendered = render(
+        <svg>
+          <ColoredEdge
+            id="animated-edge"
+            source="a"
+            target="b"
+            sourceX={0}
+            sourceY={100}
+            targetX={400}
+            targetY={100}
+            sourcePosition="right"
+            targetPosition="left"
+            data={{ animated: true, edgePath: "orthogonal" }}
+          />
+        </svg>,
+      );
+
+      await waitFor(() => {
+        const motion = rendered.container.querySelector("animateMotion");
+
+        expect(motion).not.toBeNull();
+        expect(motion.getAttribute("dur")).toBe("10s");
+        expect(motion.getAttribute("calcMode")).toBe("paced");
+      });
+    } finally {
+      if (originalGetTotalLength) {
+        SVGElement.prototype.getTotalLength = originalGetTotalLength;
+      } else {
+        delete SVGElement.prototype.getTotalLength;
+      }
+    }
+  });
+
+  it("keeps the circle immediately visible on very long paths", async () => {
+    const originalGetTotalLength = SVGElement.prototype.getTotalLength;
+
+    SVGElement.prototype.getTotalLength = jest.fn(() => 4000);
+
+    try {
+      const rendered = render(
+        <svg>
+          <ColoredEdge
+            id="long-animated-edge"
+            source="a"
+            target="b"
+            sourceX={0}
+            sourceY={100}
+            targetX={4000}
+            targetY={100}
+            sourcePosition="right"
+            targetPosition="left"
+            data={{ animated: true, edgePath: "orthogonal" }}
+          />
+        </svg>,
+      );
+
+      await waitFor(() => {
+        const circle = rendered.container.querySelector(
+          ".td-graph-edge-flow-dot",
+        );
+
+        expect(circle).toHaveAttribute("opacity", "1");
+        expect(circle.querySelector("animateMotion")).toHaveAttribute(
+          "dur",
+          "100s",
+        );
+        expect(
+          circle.querySelector('animate[attributeName="opacity"]'),
+        ).toBeNull();
+      });
+    } finally {
+      if (originalGetTotalLength) {
+        SVGElement.prototype.getTotalLength = originalGetTotalLength;
+      } else {
+        delete SVGElement.prototype.getTotalLength;
+      }
+    }
+  });
+});
+
+describe("<ColoredEdge /> metadata badge", () => {
+  const baseProps = {
+    id: "edge-1",
+    source: "a",
+    target: "b",
+    sourceX: 0,
+    sourceY: 100,
+    targetX: 400,
+    targetY: 100,
+    sourcePosition: "right",
+    targetPosition: "left",
+    style: {},
+  };
+
+  it("opens the details handler when the metadata badge is clicked", () => {
+    const onClick = jest.fn();
+    const metadata = { source: "sales", relation: "derives" };
+    const rendered = render(
+      <ColoredEdge {...baseProps} data={{ metadata, onClick }} />,
+    );
+    const badge = rendered.container.querySelector(
+      ".td-graph-edge-metadata-badge",
+    );
+
+    expect(badge).not.toBeNull();
+    fireEvent.click(badge);
+    expect(onClick).toHaveBeenCalledWith(metadata);
+  });
+
+  it("does nothing when the edge has metadata but no click handler", () => {
+    const onClick = jest.fn();
+    const rendered = render(
+      <ColoredEdge {...baseProps} data={{ metadata: { source: "sales" } }} />,
+    );
+    const badge = rendered.container.querySelector(
+      ".td-graph-edge-metadata-badge",
+    );
+
+    fireEvent.click(badge);
+    expect(onClick).not.toHaveBeenCalled();
+  });
+});
+
+describe("<ColoredEdge /> arrow markers", () => {
+  const arrowProps = {
+    id: "edge-arrow",
+    source: "a",
+    target: "b",
+    sourceX: 0,
+    sourceY: 100,
+    targetX: 400,
+    targetY: 100,
+    sourcePosition: "right",
+    targetPosition: "left",
+    markerEnd: { type: "arrow" },
+    style: {},
+  };
+
+  it("draws the filled arrow at the target for impact edges", () => {
+    const rendered = render(
+      <ColoredEdge
+        {...arrowProps}
+        data={{ edgePath: "orthogonal", markerPosition: "target" }}
+      />,
+    );
+    const arrow = rendered.container.querySelector(".td-graph-edge-arrow");
+
+    expect(arrow).not.toBeNull();
+    expect(arrow.getAttribute("points")).toMatch(/^400,100/);
+  });
+
+  it("draws the filled arrow at the source for traceability edges", () => {
+    const rendered = render(
+      <ColoredEdge
+        {...arrowProps}
+        data={{ edgePath: "orthogonal", markerPosition: "source" }}
+      />,
+    );
+    const arrow = rendered.container.querySelector(".td-graph-edge-arrow");
+
+    expect(arrow).not.toBeNull();
+    expect(arrow.getAttribute("points")).toMatch(/^0,100/);
+  });
+
+  it("colors target arrows that share the hovered source bundle", () => {
+    const rendered = render(
+      <EdgeHoverContext.Provider
+        value={{
+          hoveredEdgeEndpoints: {
+            edgeId: "hovered-edge",
+            source: "a",
+            target: "first-target",
+          },
+        }}
+      >
+        <svg>
+          <ColoredEdge
+            {...arrowProps}
+            id="sibling-edge"
+            target="second-target"
+            data={{ edgePath: "bezier", bundleSource: true }}
+          />
+        </svg>
+      </EdgeHoverContext.Provider>,
+    );
+    const edge = rendered.container.querySelector(".td-graph-edge");
+    const arrow = rendered.container.querySelector(".td-graph-edge-arrow");
+
+    expect(edge).toHaveClass("td-graph-edge--source-bundle-hovered");
+    expect(arrow).toHaveAttribute(
+      "fill",
+      "var(--td-graph-edge-active, var(--td-graph-accent, #ed5c17))",
+    );
+  });
+
+  it("keeps arrows from another source field out of the hovered bundle", () => {
+    const rendered = render(
+      <EdgeHoverContext.Provider
+        value={{
+          hoveredEdgeEndpoints: {
+            edgeId: "hovered-edge",
+            source: "a",
+            sourceFieldIndex: 0,
+            target: "first-target",
+          },
+        }}
+      >
+        <svg>
+          <ColoredEdge
+            {...arrowProps}
+            id="other-field-edge"
+            target="second-target"
+            data={{
+              edgePath: "bezier",
+              bundleSource: true,
+              sourceFieldIndex: 1,
+            }}
+          />
+        </svg>
+      </EdgeHoverContext.Provider>,
+    );
+    const edge = rendered.container.querySelector(".td-graph-edge");
+    const arrow = rendered.container.querySelector(".td-graph-edge-arrow");
+
+    expect(edge).not.toHaveClass("td-graph-edge--source-bundle-hovered");
+    expect(arrow).toHaveAttribute(
+      "fill",
+      "var(--td-graph-edge-stroke, #b0b8c8)",
+    );
+  });
+
+  it("does not clear a newer edge hover when leaving an overlapping branch", () => {
+    const setHoveredEdgeEndpoints = jest.fn();
+    const rendered = render(
+      <EdgeHoverContext.Provider value={{ setHoveredEdgeEndpoints }}>
+        <svg>
+          <ColoredEdge
+            {...arrowProps}
+            data={{ edgePath: "bezier", bundleSource: true }}
+          />
+        </svg>
+      </EdgeHoverContext.Provider>,
+    );
+    const hitArea = rendered.container.querySelector(".td-graph-edge-hit-area");
+
+    fireEvent.mouseLeave(hitArea);
+    const clearHoveredEdge = setHoveredEdgeEndpoints.mock.calls[0][0];
+    const newerHover = { edgeId: "newer-edge" };
+
+    expect(clearHoveredEdge(newerHover)).toBe(newerHover);
+    expect(clearHoveredEdge({ edgeId: "edge-arrow" })).toBeNull();
+  });
+});
+
+describe("getFlexibleEdgePath", () => {
+  it("gives N-to-1 curves an identical final trunk", () => {
+    const first = getFlexibleEdgePath({
+      sourceX: 0,
+      sourceY: 20,
+      targetX: 400,
+      targetY: 100,
+      bundleTarget: true,
+    });
+    const second = getFlexibleEdgePath({
+      sourceX: 0,
+      sourceY: 180,
+      targetX: 400,
+      targetY: 100,
+      bundleTarget: true,
+    });
+
+    expect(first.path).toContain("M 360,100 L 400,100");
+    expect(second.path).toContain("M 360,100 L 400,100");
+  });
+
+  it("gives 1-to-N curves an identical initial trunk", () => {
+    const edge = getFlexibleEdgePath({
+      sourceX: 0,
+      sourceY: 100,
+      targetX: 400,
+      targetY: 20,
+      bundleSource: true,
+    });
+
+    expect(edge.path.startsWith("M 0,100 L 40,100")).toBe(true);
+  });
+
+  it("keeps shared trunks attached when the relation points left", () => {
+    const edge = getFlexibleEdgePath({
+      sourceX: 400,
+      sourceY: 100,
+      sourcePosition: "left",
+      targetX: 0,
+      targetY: 180,
+      targetPosition: "right",
+      bundleSource: true,
+      bundleTarget: true,
+    });
+
+    expect(edge.path.startsWith("M 400,100 L 360,100")).toBe(true);
+    expect(edge.path).toContain("M 40,180 L 0,180");
+  });
+});
+
+describe("getClassicArrowPoints", () => {
+  it("points a triangle at the target for a rightward edge", () => {
+    const points = getClassicArrowPoints({
+      targetX: 400,
+      targetY: 100,
+      targetTangent: { x: 1, y: 0 },
+    });
+
+    expect(points).toBe("400,100 390,104 390,96");
+  });
+
+  it("points a triangle at the target for a leftward edge", () => {
+    const points = getClassicArrowPoints({
+      targetX: 0,
+      targetY: 100,
+      targetTangent: { x: -1, y: 0 },
+    });
+
+    expect(points).toBe("0,100 10,96 10,104");
+  });
+});
+
+describe("edgeAnimationDuration", () => {
+  it("keeps the circle at the same slow speed for every path length", () => {
+    const shortPathDuration = edgeAnimationDuration(100);
+    const longPathDuration = edgeAnimationDuration(400);
+
+    expect(shortPathDuration).toBe(2.5);
+    expect(longPathDuration).toBe(10);
+    expect(100 / shortPathDuration).toBe(400 / longPathDuration);
+  });
+
+  it.each([0, -1, Number.NaN, Number.POSITIVE_INFINITY])(
+    "ignores an invalid path length (%p)",
+    (pathLength) => {
+      expect(edgeAnimationDuration(pathLength)).toBeNull();
+    },
+  );
+});

package/src/components/__tests__/ConceptNode.spec.js

@@ -0,0 +1,181 @@
+import { fireEvent } from "@testing-library/react";
+import { render } from "@truedat/test/render";
+import ConceptNode from "../graph/ConceptNode";
+import { EdgeHoverContext } from "../graph/ColoredEdge";
+
+jest.mock("@xyflow/react", () => ({
+  Handle: ({ type, position }) => (
+    <span data-testid={`handle-${type}`} data-position={position} />
+  ),
+  Position: {
+    Left: "left",
+    Right: "right",
+  },
+}));
+
+describe("<ConceptNode />", () => {
+  it("renders the label text", () => {
+    const rendered = render(
+      <ConceptNode id="node-1" data={{ label: "My Concept" }} />,
+    );
+
+    expect(rendered.getByText("My Concept")).toBeInTheDocument();
+    expect(
+      rendered.container.querySelector(".td-concept-node__label"),
+    ).toHaveTextContent("My Concept");
+  });
+
+  it("renders target and source handles", () => {
+    const rendered = render(
+      <ConceptNode id="node-1" data={{ label: "Test" }} />,
+    );
+
+    expect(rendered.getByTestId("handle-target")).toHaveAttribute(
+      "data-position",
+      "left",
+    );
+    expect(rendered.getByTestId("handle-source")).toHaveAttribute(
+      "data-position",
+      "right",
+    );
+  });
+
+  it("applies the active modifier when isActive is true", () => {
+    const rendered = render(
+      <ConceptNode id="node-1" data={{ label: "Active", isActive: true }} />,
+    );
+
+    expect(rendered.container.querySelector(".td-concept-node")).toHaveClass(
+      "td-concept-node--active",
+    );
+  });
+
+  it("does not apply the active modifier when isActive is false", () => {
+    const rendered = render(
+      <ConceptNode id="node-1" data={{ label: "Inactive", isActive: false }} />,
+    );
+
+    expect(
+      rendered.container.querySelector(".td-concept-node"),
+    ).not.toHaveClass("td-concept-node--active");
+  });
+
+  it("marks the node as connected when its id is in connectedNodeIds", () => {
+    const connectedNodeIds = new Set(["node-1", "node-2"]);
+    const rendered = render(
+      <EdgeHoverContext.Provider value={{ connectedNodeIds }}>
+        <ConceptNode id="node-1" data={{ label: "Connected" }} />
+      </EdgeHoverContext.Provider>,
+    );
+
+    expect(rendered.container.querySelector(".td-concept-node")).toHaveClass(
+      "td-concept-node--connected",
+    );
+  });
+
+  it("marks the node as connected when it is the source of a hovered edge", () => {
+    const rendered = render(
+      <EdgeHoverContext.Provider
+        value={{
+          hoveredEdgeEndpoints: { source: "node-1", target: "other" },
+        }}
+      >
+        <ConceptNode id="node-1" data={{ label: "Source" }} />
+      </EdgeHoverContext.Provider>,
+    );
+
+    expect(rendered.container.querySelector(".td-concept-node")).toHaveClass(
+      "td-concept-node--connected",
+    );
+  });
+
+  it("marks the node as connected when it is the target of a hovered edge", () => {
+    const rendered = render(
+      <EdgeHoverContext.Provider
+        value={{
+          hoveredEdgeEndpoints: { source: "other", target: "node-1" },
+        }}
+      >
+        <ConceptNode id="node-1" data={{ label: "Target" }} />
+      </EdgeHoverContext.Provider>,
+    );
+
+    expect(rendered.container.querySelector(".td-concept-node")).toHaveClass(
+      "td-concept-node--connected",
+    );
+  });
+
+  it("does not mark the node as connected when it is not in the hover context", () => {
+    const rendered = render(
+      <EdgeHoverContext.Provider
+        value={{
+          connectedNodeIds: new Set(["other"]),
+          hoveredEdgeEndpoints: { source: "a", target: "b" },
+        }}
+      >
+        <ConceptNode id="node-1" data={{ label: "Isolated" }} />
+      </EdgeHoverContext.Provider>,
+    );
+
+    expect(
+      rendered.container.querySelector(".td-concept-node"),
+    ).not.toHaveClass("td-concept-node--connected");
+  });
+
+  it("does not mark the node as connected when there is no hover context", () => {
+    const rendered = render(
+      <ConceptNode id="node-1" data={{ label: "No context" }} />,
+    );
+
+    expect(
+      rendered.container.querySelector(".td-concept-node"),
+    ).not.toHaveClass("td-concept-node--connected");
+  });
+
+  it("calls setHoveredNodeId with the node id on mouse enter", () => {
+    const setHoveredNodeId = jest.fn();
+    const rendered = render(
+      <EdgeHoverContext.Provider value={{ setHoveredNodeId }}>
+        <ConceptNode id="node-1" data={{ label: "Hover me" }} />
+      </EdgeHoverContext.Provider>,
+    );
+
+    fireEvent.mouseEnter(rendered.container.querySelector(".td-concept-node"));
+    expect(setHoveredNodeId).toHaveBeenCalledWith("node-1");
+  });
+
+  it("calls setHoveredNodeId with null on mouse leave", () => {
+    const setHoveredNodeId = jest.fn();
+    const rendered = render(
+      <EdgeHoverContext.Provider value={{ setHoveredNodeId }}>
+        <ConceptNode id="node-1" data={{ label: "Leave me" }} />
+      </EdgeHoverContext.Provider>,
+    );
+
+    fireEvent.mouseLeave(rendered.container.querySelector(".td-concept-node"));
+    expect(setHoveredNodeId).toHaveBeenCalledWith(null);
+  });
+
+  it("does not throw when hovering without a hover context", () => {
+    const rendered = render(
+      <ConceptNode id="node-1" data={{ label: "No context" }} />,
+    );
+
+    expect(() => {
+      fireEvent.mouseEnter(
+        rendered.container.querySelector(".td-concept-node"),
+      );
+      fireEvent.mouseLeave(
+        rendered.container.querySelector(".td-concept-node"),
+      );
+    }).not.toThrow();
+  });
+
+  it("matches the snapshot", () => {
+    const rendered = render(
+      <ConceptNode id="node-1" data={{ label: "Snapshot", isActive: true }} />,
+    );
+
+    expect(rendered.container).toMatchSnapshot();
+  });
+});