@truedat/core 8.11.6 → 8.11.9

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

@@ -1,9 +1,15 @@
-import { fireEvent, screen, waitFor } from "@testing-library/react";
+import { act, fireEvent, screen, waitFor } from "@testing-library/react";
 import { render } from "@truedat/test/render";
 import { Graph, getMinZoomForDiagram } from "../Graph";
 
 const mockGetNodesBounds = jest.fn();
+const mockGetFlowNodesBounds = jest.fn();
 const mockGetViewportForBounds = jest.fn();
+const mockGetNodes = jest.fn().mockReturnValue([]);
+const mockGetViewport = jest.fn().mockReturnValue({ x: 0, y: 0, zoom: 1 });
+const mockFitView = jest.fn();
+const mockSetCenter = jest.fn();
+const mockSetViewport = jest.fn();
 
 jest.mock("elkjs/lib/elk.bundled.js", () =>
   jest.fn().mockImplementation(() => ({
@@ -12,15 +18,25 @@ jest.mock("elkjs/lib/elk.bundled.js", () =>
 );
 
 jest.mock("@xyflow/react", () => ({
-  ReactFlow: ({ children }) => <div data-testid="react-flow">{children}</div>,
+  ReactFlow: ({ children, onInit }) => {
+    const React = require("react");
+
+    React.useEffect(() => onInit?.(), [onInit]);
+
+    return <div data-testid="react-flow">{children}</div>;
+  },
   ReactFlowProvider: ({ children }) => <>{children}</>,
   useNodesState: (initialNodes) => [initialNodes, jest.fn(), jest.fn()],
   useEdgesState: (initialEdges) => [initialEdges, jest.fn(), jest.fn()],
   useReactFlow: () => ({
-    fitView: jest.fn(),
+    fitView: mockFitView,
     zoomIn: jest.fn(),
     zoomOut: jest.fn(),
-    getNodes: jest.fn().mockReturnValue([]),
+    getNodes: mockGetNodes,
+    getNodesBounds: mockGetFlowNodesBounds,
+    getViewport: mockGetViewport,
+    setCenter: mockSetCenter,
+    setViewport: mockSetViewport,
   }),
   Position: {
     Right: "right",
@@ -31,7 +47,15 @@ jest.mock("@xyflow/react", () => ({
   MarkerType: {
     ArrowClosed: "arrowclosed",
   },
-  Controls: ({ children }) => <div>{children}</div>,
+  Controls: ({ children, className, orientation }) => (
+    <div
+      className={className}
+      data-orientation={orientation}
+      data-testid="graph-controls"
+    >
+      {children}
+    </div>
+  ),
   ControlButton: ({ children, ...props }) => (
     <button type="button" {...props}>
       {children}
@@ -56,40 +80,189 @@ describe("<Graph />", () => {
   };
 
   beforeEach(() => {
+    jest.useFakeTimers();
     mockGetNodesBounds.mockReturnValue({ x: 0, y: 0, width: 100, height: 50 });
+    mockGetFlowNodesBounds.mockReturnValue({
+      x: 0,
+      y: 0,
+      width: 100,
+      height: 50,
+    });
     mockGetViewportForBounds.mockReturnValue({ x: 0, y: 0, zoom: 0.75 });
+    mockGetNodes.mockReturnValue([]);
+    mockGetViewport.mockReturnValue({ x: 0, y: 0, zoom: 1 });
+    mockFitView.mockClear();
+    mockSetCenter.mockClear();
+    mockSetViewport.mockClear();
   });
 
   afterEach(() => {
+    jest.useRealTimers();
     mockGetNodesBounds.mockReset();
+    mockGetFlowNodesBounds.mockReset();
     mockGetViewportForBounds.mockReset();
+    mockFitView.mockReset();
+    mockSetCenter.mockReset();
+    mockSetViewport.mockReset();
   });
 
-  it("uses the fit view zoom as the minimum zoom level", () => {
-    expect(getMinZoomForDiagram(props.nodes, 600, 300)).toBe(0.75);
+  it("keeps the configured floor when the full diagram fits above it", () => {
+    expect(getMinZoomForDiagram(props.nodes, 600, 300)).toBe(0.03);
     expect(mockGetViewportForBounds).toHaveBeenCalledWith(
       { x: 0, y: 0, width: 100, height: 50 },
       600,
       300,
-      0.01,
-      0.8,
-      0.2,
+      0.03,
+      2,
+      0.15,
     );
   });
 
+  it("accepts instance-aware bounds for graphs with subflows", () => {
+    expect(
+      getMinZoomForDiagram(
+        props.nodes,
+        600,
+        300,
+        0.15,
+        0.03,
+        2,
+        mockGetFlowNodesBounds,
+      ),
+    ).toBe(0.03);
+    expect(mockGetFlowNodesBounds).toHaveBeenCalledWith(props.nodes);
+  });
+
   it("opens an expanded modal from the controls bar", async () => {
     render(<Graph {...props} />);
 
-    expect(screen.queryByText("graph.expanded.header")).not.toBeInTheDocument();
+    expect(screen.getAllByTestId("react-flow")).toHaveLength(1);
 
     fireEvent.click(screen.getByLabelText("graph.controls.open_expanded"));
 
     await waitFor(() => {
-      expect(screen.getByText("graph.expanded.header")).toBeInTheDocument();
       expect(screen.getAllByTestId("react-flow")).toHaveLength(2);
+      screen
+        .getAllByTestId("graph-controls")
+        .forEach((controls) =>
+          expect(controls).toHaveAttribute("data-orientation", "horizontal"),
+        );
       expect(
         screen.getAllByLabelText("graph.controls.open_expanded"),
       ).toHaveLength(1);
     });
   });
+
+  it("uses horizontal controls by default and keeps vertical controls in fullscreen", async () => {
+    render(
+      <Graph {...props} graphOptions={{ controlsOrientation: "vertical" }} />,
+    );
+
+    expect(screen.getByTestId("graph-controls")).toHaveAttribute(
+      "data-orientation",
+      "vertical",
+    );
+
+    fireEvent.click(screen.getByLabelText("graph.controls.open_expanded"));
+
+    await waitFor(() => {
+      expect(screen.getAllByTestId("graph-controls")).toHaveLength(2);
+      screen
+        .getAllByTestId("graph-controls")
+        .forEach((controls) =>
+          expect(controls).toHaveAttribute("data-orientation", "vertical"),
+        );
+    });
+  });
+
+  it("centers the same node again when its focus request key changes", async () => {
+    const focusNode = {
+      ...props.nodes[0],
+      width: 120,
+      height: 60,
+      position: { x: 80, y: 40 },
+    };
+
+    mockGetNodes.mockReturnValue([focusNode]);
+    const { rerender } = render(
+      <Graph
+        {...props}
+        graphOptions={{
+          focusNodeId: focusNode.id,
+          focusNodeRequestKey: 1,
+          layoutMode: "fixed",
+        }}
+      />,
+    );
+
+    await act(async () => {
+      jest.advanceTimersByTime(50);
+    });
+    const initialFocusCalls = mockSetCenter.mock.calls.length;
+
+    expect(initialFocusCalls).toBeGreaterThan(0);
+
+    rerender(
+      <Graph
+        {...props}
+        graphOptions={{
+          focusNodeId: focusNode.id,
+          focusNodeRequestKey: 2,
+          layoutMode: "fixed",
+        }}
+      />,
+    );
+    await act(async () => {
+      jest.advanceTimersByTime(50);
+    });
+
+    expect(mockSetCenter.mock.calls.length).toBeGreaterThan(initialFocusCalls);
+    expect(mockSetCenter).toHaveBeenLastCalledWith(140, 70, {
+      duration: 300,
+      zoom: expect.any(Number),
+    });
+  });
+
+  it("preserves x, y and zoom when a fixed layout changes internally", async () => {
+    const viewport = { x: -240, y: 96, zoom: 0.72 };
+
+    mockGetViewport.mockReturnValue(viewport);
+    const { rerender } = render(
+      <Graph
+        {...props}
+        allowExpandedView={false}
+        graphOptions={{
+          layoutMode: "fixed",
+          preserveUserViewportOnLayoutChange: true,
+        }}
+      />,
+    );
+
+    await act(async () => {
+      jest.advanceTimersByTime(50);
+    });
+    mockFitView.mockClear();
+    mockSetCenter.mockClear();
+    mockSetViewport.mockClear();
+
+    rerender(
+      <Graph
+        {...props}
+        allowExpandedView={false}
+        nodes={props.nodes.map((node) => ({ ...node, height: 240 }))}
+        graphOptions={{
+          layoutMode: "fixed",
+          preserveUserViewportOnLayoutChange: true,
+        }}
+      />,
+    );
+    await act(async () => {
+      jest.advanceTimersByTime(50);
+    });
+
+    expect(mockGetViewport()).toEqual(viewport);
+    expect(mockFitView).not.toHaveBeenCalled();
+    expect(mockSetCenter).not.toHaveBeenCalled();
+    expect(mockSetViewport).not.toHaveBeenCalled();
+  });
 });

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

@@ -0,0 +1,45 @@
+import { fireEvent } from "@testing-library/react";
+import { render } from "@truedat/test/render";
+import ColoredEdge from "@truedat/core/components/graph/ColoredEdge";
+import { redesignedLineageEdges } from "@truedat/dd/components/LineageGraph";
+
+jest.mock("@xyflow/react", () => ({
+  BaseEdge: ({ className, id, path, style }) => (
+    <path className={className} d={path} id={id} style={style} />
+  ),
+  EdgeLabelRenderer: ({ children }) => children,
+  getBezierPath: () => ["M 0,0 L 400,0", 200, 0],
+}));
+
+it("lets the rendered edge respond to hover after lineage style normalization", () => {
+  const [edge] = redesignedLineageEdges([
+    {
+      id: "edge",
+      source: "a",
+      target: "b",
+      style: { stroke: "#b0b8c8", strokeWidth: 2, strokeOpacity: 0.95 },
+      data: {},
+    },
+  ]);
+  const { container } = render(
+    <svg>
+      <ColoredEdge
+        {...edge}
+        sourceX={0}
+        sourceY={0}
+        targetX={400}
+        targetY={0}
+        sourcePosition="right"
+        targetPosition="left"
+      />
+    </svg>,
+  );
+  const path = container.querySelector(".td-graph-edge");
+  expect(path.style.strokeWidth).toBe("");
+  expect(path.style.strokeOpacity).toBe("");
+  expect(path.style.stroke).toContain("var(--td-graph-edge-stroke");
+  fireEvent.mouseEnter(container.querySelector(".td-graph-edge-hit-area"));
+  expect(path).toHaveClass("td-graph-edge--hovered");
+  fireEvent.mouseLeave(container.querySelector(".td-graph-edge-hit-area"));
+  expect(path).not.toHaveClass("td-graph-edge--hovered");
+});

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

@@ -0,0 +1,308 @@
+import { fireEvent } from "@testing-library/react";
+import { render } from "@truedat/test/render";
+import LineageGroupNode from "../graph/LineageGroupNode";
+import { EdgeHoverContext } from "../graph/ColoredEdge";
+import { lineageNodeIcon } from "../graph/lineageNodeIcon";
+
+jest.mock("@xyflow/react", () => ({
+  // eslint-disable-next-line react/prop-types
+  Handle: ({ id }) => <span data-handle-id={id} />,
+  Position: {
+    Bottom: "bottom",
+    Left: "left",
+    Right: "right",
+    Top: "top",
+  },
+}));
+
+describe("<LineageGroupNode />", () => {
+  it("renders the redesigned system hierarchy header", () => {
+    const rendered = render(
+      <LineageGroupNode
+        id="system-1"
+        data={{
+          designVariant: "redesigned",
+          label: "Teradata",
+          systemTypeLabel: "Warehouse",
+          variant: "absolute",
+          z: 1,
+        }}
+      />,
+    );
+
+    expect(rendered.getByText("Teradata")).toBeInTheDocument();
+    expect(rendered.getByText("Warehouse")).toBeInTheDocument();
+    expect(
+      rendered.container.querySelector(
+        ".td-lineage-group-node--design-redesigned",
+      ),
+    ).toBeInTheDocument();
+    expect(
+      rendered.container.querySelector(
+        ".td-lineage-group-node__system-indicator",
+      ),
+    ).not.toBeInTheDocument();
+    expect(
+      rendered.container.querySelectorAll("[data-handle-id]"),
+    ).toHaveLength(4);
+    expect(
+      rendered.container.querySelector(
+        ".td-lineage-group-node__type-icon.server.icon",
+      ),
+    ).toBeInTheDocument();
+  });
+
+  it("keeps collapse controls semantic and keyboard reachable", () => {
+    const onToggleCollapse = jest.fn();
+    const rendered = render(
+      <LineageGroupNode
+        id="database-1"
+        data={{
+          canCollapse: true,
+          collapsed: false,
+          designVariant: "redesigned",
+          label: "Analytics",
+          onToggleCollapse,
+          variant: "absolute",
+          z: 2,
+        }}
+      />,
+    );
+
+    expect(
+      rendered.getByRole("button", { name: "Collapse group" }),
+    ).toBeInTheDocument();
+    expect(
+      rendered.container.querySelector(
+        ".td-lineage-group-node__type-icon.database.icon",
+      ),
+    ).toBeInTheDocument();
+  });
+
+  it("omits a redundant single-node summary when the leaf group is open", () => {
+    const rendered = render(
+      <LineageGroupNode
+        id="open-leaf-group"
+        data={{
+          collapsed: false,
+          designVariant: "redesigned",
+          groupCount: 0,
+          label: "Leaf group",
+          nodeCount: 1,
+          variant: "absolute",
+        }}
+      />,
+    );
+
+    expect(rendered.queryByText("1 nodo")).not.toBeInTheDocument();
+    expect(
+      rendered.container.querySelector(".td-lineage-group-node__footer"),
+    ).not.toBeInTheDocument();
+  });
+
+  it("keeps the single-node summary while the leaf group is collapsed", () => {
+    const rendered = render(
+      <LineageGroupNode
+        id="collapsed-leaf-group"
+        data={{
+          collapsed: true,
+          designVariant: "redesigned",
+          groupCount: 0,
+          label: "Leaf group",
+          nodeCount: 1,
+          variant: "absolute",
+        }}
+      />,
+    );
+
+    expect(rendered.getByText("1 nodo")).toBeInTheDocument();
+  });
+
+  it("retains an explicit classic modifier", () => {
+    const rendered = render(
+      <LineageGroupNode
+        id="legacy-group"
+        data={{
+          designVariant: "classic",
+          label: "Legacy",
+          variant: "absolute",
+        }}
+      />,
+    );
+
+    expect(
+      rendered.container.querySelector(
+        ".td-lineage-group-node--design-classic",
+      ),
+    ).toBeInTheDocument();
+  });
+
+  it("keeps the active modifier used by the selected emphasis state", () => {
+    const rendered = render(
+      <LineageGroupNode
+        id="selected-group"
+        data={{
+          designVariant: "redesigned",
+          isActive: true,
+          label: "Selected group",
+          variant: "absolute",
+        }}
+      />,
+    );
+
+    expect(
+      rendered.container.querySelector(
+        ".td-lineage-group-node--design-redesigned.td-lineage-group-node--active",
+      ),
+    ).toBeInTheDocument();
+  });
+
+  it("marks the group under the pointer independently from related nodes", () => {
+    const rendered = render(
+      <EdgeHoverContext.Provider value={{ hoveredNodeId: "hovered-group" }}>
+        <LineageGroupNode
+          id="hovered-group"
+          data={{
+            designVariant: "redesigned",
+            label: "Hovered group",
+            variant: "absolute",
+          }}
+        />
+      </EdgeHoverContext.Provider>,
+    );
+
+    expect(
+      rendered.container.querySelector(
+        ".td-lineage-group-node--hovered:not(.td-lineage-group-node--connected)",
+      ),
+    ).toBeInTheDocument();
+  });
+
+  it("renders the oversized warning badge only for oversized groups", () => {
+    const rendered = render(
+      <LineageGroupNode
+        id="oversized-group"
+        data={{
+          designVariant: "redesigned",
+          label: "Oversized group",
+          oversized: true,
+          variant: "absolute",
+        }}
+      />,
+    );
+
+    expect(
+      rendered.container.querySelector(
+        ".td-lineage-group-node__oversized-warning",
+      ),
+    ).toBeInTheDocument();
+  });
+
+  it("renders the oversized warning title band and message", () => {
+    const rendered = render(
+      <LineageGroupNode
+        id="oversized-group"
+        data={{
+          designVariant: "redesigned",
+          label: "Oversized group",
+          oversized: true,
+          oversizedWarningOpen: true,
+          variant: "absolute",
+        }}
+      />,
+    );
+
+    expect(rendered.getByText("Warning")).toBeInTheDocument();
+    expect(rendered.getByText(/more than 20 nodes/)).toBeInTheDocument();
+  });
+
+  it("omits the oversized badge for regular groups", () => {
+    const rendered = render(
+      <LineageGroupNode
+        id="regular-group"
+        data={{
+          designVariant: "redesigned",
+          label: "Regular group",
+          variant: "absolute",
+        }}
+      />,
+    );
+
+    expect(
+      rendered.container.querySelector(
+        ".td-lineage-group-node__oversized-warning",
+      ),
+    ).not.toBeInTheDocument();
+  });
+
+  it("offers the Open link when the oversized warning was triggered", () => {
+    const onConfirmOversizedExpand = jest.fn();
+    const rendered = render(
+      <LineageGroupNode
+        id="blocked-group"
+        data={{
+          designVariant: "redesigned",
+          label: "Blocked group",
+          onConfirmOversizedExpand,
+          oversized: true,
+          oversizedWarningOpen: true,
+          variant: "absolute",
+        }}
+      />,
+    );
+
+    const openButton = rendered.getByRole("button", { name: "Open" });
+    expect(openButton).toBeInTheDocument();
+    fireEvent.click(openButton);
+    expect(onConfirmOversizedExpand).toHaveBeenCalled();
+  });
+});
+
+describe("lineageNodeIcon", () => {
+  it.each([
+    [{ kind: "resource" }, "table"],
+    [{ kind: "process" }, "random"],
+    [{ kind: "group" }, "database"],
+    [{ kind: "group", z: 1 }, "server"],
+    [{ kind: "group", z: 2 }, "database"],
+    [{ kind: "group", resourceContainer: true, z: 1 }, "table"],
+  ])("resolves %p as %s", (node, icon) => {
+    expect(lineageNodeIcon(node)).toBe(icon);
+  });
+});
+
+it.each(["direct", "contained"])(
+  "distinguishes %s query origins in collapsed groups",
+  (queryOrigin) => {
+    const rendered = render(
+      <EdgeHoverContext.Provider value={{ hoveredNodeId: "group" }}>
+        <LineageGroupNode
+          id="group"
+          data={{
+            label: "Warehouse",
+            variant: "absolute",
+            designVariant: "redesigned",
+            collapsed: true,
+            isActive: true,
+            queryOrigin,
+          }}
+        />
+      </EdgeHoverContext.Provider>,
+      { locale: "es" },
+    );
+    expect(
+      rendered.getByText(
+        queryOrigin === "direct"
+          ? "Origen de consulta"
+          : "Contiene origen de consulta",
+      ),
+    ).toBeInTheDocument();
+    expect(
+      rendered.container.querySelector(".td-lineage-group-node"),
+    ).toHaveClass(
+      "td-lineage-group-node--query-origin",
+      "td-lineage-group-node--active",
+      "td-lineage-group-node--hovered",
+    );
+  },
+);

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

@@ -0,0 +1,23 @@
+// Jest Snapshot v1, https://goo.gl/fbAQLP
+
+exports[`<ConceptNode /> matches the snapshot 1`] = `
+<div>
+  <div
+    class="td-concept-node td-concept-node--active"
+  >
+    <span
+      data-position="left"
+      data-testid="handle-target"
+    />
+    <span
+      class="td-concept-node__label"
+    >
+      Snapshot
+    </span>
+    <span
+      data-position="right"
+      data-testid="handle-source"
+    />
+  </div>
+</div>
+`;