@truedat/dd 8.11.6 → 8.11.9

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

@@ -0,0 +1,366 @@
+import { fireEvent, screen } from "@testing-library/react";
+import { render } from "@truedat/test/render";
+import { LineageGraphToolbar, visibleLegendKeys } from "../LineageGraphToolbar";
+
+const defaultProps = {
+  activePanel: null,
+  visibleLegend: ["deleted", "PK"],
+  collapsible: true,
+  context: {
+    type: "node",
+    node: {
+      graphNodeId: "orders",
+      id: "orders",
+      lineageKind: "resource",
+      iconName: "table",
+      name: "Orders",
+    },
+  },
+  indicators: [{ icon: "key", key: "pk", label: "PK" }],
+  legendItems: [{ color: "#123456", key: "oracle", label: "Oracle" }],
+  onClosePanel: jest.fn(),
+  onClearContext: jest.fn(),
+  onCollapseAll: jest.fn(),
+  onExpandAll: jest.fn(),
+  onExpansionDepthChange: jest.fn(),
+  onMinimizeInspector: jest.fn(),
+  onPanelChange: jest.fn(),
+  onSearchInputChange: jest.fn(),
+  onSearchResultSelect: jest.fn(),
+  onSystemTypeFilterChange: jest.fn(),
+  onTogglePin: jest.fn(),
+  onUnpin: jest.fn(),
+  pinned: false,
+  relationTypes: ["depends_on"],
+  searchInput: "",
+  searchResults: [],
+  searchResultsTotal: 0,
+  selectedGraphNodeId: "orders",
+  systemTypeFilter: "",
+};
+
+const renderToolbar = (props = {}, state = { graph: { id: "graph-1" } }) =>
+  render(<LineageGraphToolbar {...defaultProps} {...props} />, { state });
+
+describe("<LineageGraphToolbar />", () => {
+  beforeEach(() => jest.clearAllMocks());
+
+  it("opens the legend from the empty context slot", () => {
+    renderToolbar({ context: null });
+    const button = screen.getByRole("button", { name: "Lineage legend" });
+    expect(button).toBeEnabled();
+    expect(button).toHaveAttribute("aria-expanded", "false");
+    fireEvent.click(button);
+    expect(defaultProps.onPanelChange).toHaveBeenCalledWith("legend");
+  });
+
+  it("shows the basic legend in simplified views and hides it for a selection", () => {
+    const rendered = renderToolbar({
+      context: null,
+      activePanel: "legend",
+      simplified: true,
+    });
+    expect(
+      screen.getByRole("region", { name: "Lineage legend" }),
+    ).toBeInTheDocument();
+    expect(screen.getByText("PK")).toBeInTheDocument();
+    expect(
+      screen.getByText("Deleted structure · red dashed border"),
+    ).toBeInTheDocument();
+    fireEvent.click(screen.getByRole("button", { name: "Close panel" }));
+    expect(defaultProps.onClosePanel).toHaveBeenCalled();
+    rendered.unmount();
+    renderToolbar({ activePanel: "legend", simplified: true });
+    expect(
+      screen.queryByRole("region", { name: "Lineage legend" }),
+    ).not.toBeInTheDocument();
+    expect(screen.getByText("Orders")).toBeInTheDocument();
+  });
+
+  it("keeps the requested dock order and exposes accessible tooltips", () => {
+    renderToolbar();
+
+    const buttonNames = screen
+      .getAllByRole("button")
+      .map((button) => button.getAttribute("aria-label"));
+
+    expect(buttonNames).toEqual([
+      "Clear selection for Orders",
+      "Search nodes",
+      "graph.actions.download.tooltip",
+      "Graph settings",
+      "Visible levels",
+      "Collapse all",
+      "Expand all",
+    ]);
+    expect(
+      screen.getByRole("button", { name: "Search nodes" }),
+    ).toHaveAttribute("title", "Search nodes");
+  });
+
+  it("changes visible depth independently through the accessible selector", () => {
+    renderToolbar();
+
+    const trigger = screen.getByRole("button", { name: "Visible levels" });
+
+    expect(trigger).toHaveAttribute("aria-expanded", "false");
+    expect(trigger).toHaveAttribute("aria-haspopup", "dialog");
+    expect(trigger).toHaveTextContent("4");
+    expect(trigger.querySelector(".lucide-layers")).toBeInTheDocument();
+    expect(
+      trigger.closest(".lineage-graph__dock-tooltip-trigger"),
+    ).not.toBeInTheDocument();
+
+    fireEvent.click(trigger);
+
+    expect(trigger).toHaveAttribute("aria-expanded", "true");
+    expect(trigger).toHaveClass("lineage-graph__dock-button--active");
+    expect(
+      screen.getByRole("dialog", { name: "Visible levels" }),
+    ).toBeInTheDocument();
+    expect(document.querySelector(".lineage-graph__depth-popup")).toHaveClass(
+      "left",
+      "center",
+    );
+    expect(
+      document.querySelector(".lineage-graph__depth-popover-scale"),
+    ).toHaveAttribute("aria-hidden", "true");
+    expect(
+      document.querySelector(".lineage-graph__depth-popover-value"),
+    ).not.toBeInTheDocument();
+
+    const slider = screen.getByRole("slider", { name: "Visible levels" });
+    expect(slider).toHaveAttribute("min", "0");
+    fireEvent.change(slider, {
+      target: { value: "0" },
+    });
+
+    expect(defaultProps.onExpansionDepthChange).toHaveBeenCalledWith("0");
+  });
+
+  it("shows the selected context summary and clear action without a reopen button", () => {
+    const rendered = renderToolbar();
+    const summary = rendered.container.querySelector(
+      ".lineage-graph__dock-context-summary",
+    );
+
+    expect(summary).toHaveTextContent("Orders");
+    expect(summary).toHaveTextContent("Data structure");
+    expect(summary.querySelector(".lucide-table-2")).toBeInTheDocument();
+    expect(
+      summary
+        .querySelector(".lucide-table-2")
+        .closest(".lineage-graph__dock-context-summary-icon"),
+    ).toBeInTheDocument();
+    expect(
+      rendered.container.querySelector(".lineage-graph__dock-context-maximize"),
+    ).not.toBeInTheDocument();
+
+    fireEvent.click(
+      screen.getByRole("button", { name: "Clear selection for Orders" }),
+    );
+    expect(defaultProps.onClearContext).toHaveBeenCalledTimes(1);
+  });
+
+  it("renders only the active panel and marks its trigger as active", () => {
+    renderToolbar({ activePanel: "search" });
+
+    expect(
+      screen.getByRole("textbox", { name: "Search graph nodes" }),
+    ).toBeInTheDocument();
+    expect(screen.queryByText("Lineage legend")).not.toBeInTheDocument();
+    expect(
+      screen.queryByLabelText("Lineage inspector"),
+    ).not.toBeInTheDocument();
+    expect(
+      screen.getByRole("button", { name: "Search nodes" }),
+    ).toHaveAttribute("aria-expanded", "true");
+    expect(screen.getByRole("button", { name: "Search nodes" })).toHaveClass(
+      "lineage-graph__dock-button--active",
+    );
+  });
+
+  it("keeps the selected name in the minimized banner in structure views", () => {
+    const rendered = renderToolbar({
+      activePanel: "inspector",
+      simplified: true,
+    });
+
+    const contextBar = rendered.container.querySelector(
+      ".lineage-graph__dock-context-bar",
+    );
+    expect(contextBar).toHaveTextContent("Orders");
+    expect(contextBar).not.toHaveClass(
+      "lineage-graph__dock-context-bar--expanded",
+    );
+    expect(
+      screen.queryByLabelText("Lineage inspector"),
+    ).not.toBeInTheDocument();
+    fireEvent.click(screen.getByText("Orders"));
+    expect(defaultProps.onPanelChange).not.toHaveBeenCalled();
+    expect(
+      screen.queryByLabelText("Lineage inspector"),
+    ).not.toBeInTheDocument();
+    fireEvent.click(
+      screen.getByRole("button", { name: "Clear selection for Orders" }),
+    );
+    expect(defaultProps.onClearContext).toHaveBeenCalledTimes(1);
+  });
+
+  it("reuses and expands the minimized context bar with the inspector", () => {
+    const rendered = renderToolbar({ activePanel: "inspector" });
+
+    const clearButton = screen.getByRole("button", {
+      name: "Clear selection for Orders",
+    });
+    const contextBar = rendered.container.querySelector(
+      ".lineage-graph__dock-context-bar",
+    );
+    const summary = rendered.container.querySelector(
+      ".lineage-graph__dock-context-summary",
+    );
+
+    expect(contextBar).toHaveClass("lineage-graph__dock-context-bar--expanded");
+    expect(summary).toHaveTextContent("Orders");
+    expect(summary).toHaveTextContent("Data structure");
+    expect(clearButton.querySelector(".lucide-x")).toBeInTheDocument();
+    expect(contextBar.closest(".lineage-graph__dock-context")).toHaveClass(
+      "lineage-graph__dock-context--inspector-open",
+    );
+    expect(screen.getByLabelText("Lineage inspector")).toBeInTheDocument();
+    expect(screen.getByLabelText("Lineage inspector")).toHaveClass(
+      "lineage-inspector--body-only",
+    );
+
+    fireEvent.click(clearButton);
+    expect(defaultProps.onClearContext).toHaveBeenCalledTimes(1);
+  });
+
+  it("renders the pinned minimized bar with unpin and accent state", () => {
+    renderToolbar({ pinned: true });
+
+    const unpin = screen.getByRole("button", { name: "Unpin focus" });
+
+    expect(unpin).toHaveAttribute("aria-pressed", "true");
+    expect(unpin.querySelector(".lucide-pin")).toBeInTheDocument();
+    expect(screen.getByRole("button", { name: "Search nodes" })).toBeDisabled();
+
+    fireEvent.click(unpin);
+    expect(defaultProps.onUnpin).toHaveBeenCalledTimes(1);
+  });
+
+  it("forwards search, collapse and expand interactions", () => {
+    renderToolbar({ activePanel: "search" });
+
+    fireEvent.change(
+      screen.getByRole("textbox", { name: "Search graph nodes" }),
+      {
+        target: { value: "orders" },
+      },
+    );
+    fireEvent.click(screen.getByRole("button", { name: "Collapse all" }));
+    fireEvent.click(screen.getByRole("button", { name: "Expand all" }));
+
+    expect(defaultProps.onSearchInputChange).toHaveBeenCalledWith("orders");
+    expect(defaultProps.onCollapseAll).toHaveBeenCalledTimes(1);
+    expect(defaultProps.onExpandAll).toHaveBeenCalledTimes(1);
+  });
+
+  it("preserves the disabled download state when there is no graph", () => {
+    renderToolbar({}, {});
+
+    expect(
+      screen.getByRole("button", { name: "graph.actions.download.popup" }),
+    ).toBeDisabled();
+  });
+
+  it("keeps the context button visible without a selection summary", () => {
+    const rendered = renderToolbar({ context: null });
+
+    expect(
+      screen.getByRole("button", { name: "Lineage legend" }),
+    ).toBeEnabled();
+    expect(
+      screen.getByRole("button", { name: "Lineage legend" }),
+    ).toHaveAttribute("title", "Lineage legend");
+    expect(
+      rendered.container.querySelector(".lineage-graph__dock-context-summary"),
+    ).not.toBeInTheDocument();
+  });
+
+  it("toggles whether a double click expands or collapses nodes", () => {
+    const onDoubleClickExpandsNodesChange = jest.fn();
+    renderToolbar({ onDoubleClickExpandsNodesChange });
+
+    const settingsButton = screen.getByRole("button", {
+      name: "Graph settings",
+    });
+
+    expect(
+      settingsButton.querySelector(".lucide-settings"),
+    ).toBeInTheDocument();
+    fireEvent.click(settingsButton);
+
+    const toggle = screen.getByRole("checkbox", {
+      name: "Double-click expands or collapses nodes",
+    });
+
+    expect(toggle).not.toBeChecked();
+    fireEvent.click(toggle);
+    expect(onDoubleClickExpandsNodesChange).toHaveBeenCalledWith(true);
+  });
+});
+
+describe("visibleLegendKeys", () => {
+  it("omits unloaded, hidden and collapsed field indicators", () => {
+    const nodes = [
+      {
+        className:
+          "td-lineage-catalog--present td-lineage-group-node--entity-system",
+        data: { entityType: "system" },
+      },
+      {
+        hidden: true,
+        className: "td-lineage-catalog--deleted",
+        data: { fields: [{ isPK: true }] },
+      },
+      {
+        data: {
+          fields: [{ isCDE: true }, { isFK: true }],
+          fieldHandleLimit: 1,
+        },
+      },
+    ];
+    expect(visibleLegendKeys(nodes, [{ data: { containment: true } }])).toEqual(
+      ["system", "CDE"],
+    );
+    expect(visibleLegendKeys([], [])).toEqual([]);
+  });
+  it("includes only the loaded dependency direction and visible node states", () => {
+    expect(
+      visibleLegendKeys(
+        [
+          { className: "td-lineage-catalog--absent" },
+          {
+            className: "td-lineage-catalog--deleted",
+            data: { fieldLike: true, lineageNode: { isPK: true } },
+          },
+        ],
+        [{ id: "edge" }],
+        "lineage",
+      ),
+    ).toEqual(["absent", "deleted", "lineage", "PK"]);
+  });
+  it("does not render entries absent from the current graph", () => {
+    renderToolbar({
+      context: null,
+      activePanel: "legend",
+      visibleLegend: ["impact"],
+    });
+    expect(screen.getByText("Impact dependencies")).toBeInTheDocument();
+    expect(screen.queryByText("PK")).not.toBeInTheDocument();
+    expect(
+      screen.queryByText("Deleted structure · red dashed border"),
+    ).not.toBeInTheDocument();
+  });
+});

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

@@ -0,0 +1,116 @@
+import {
+  lineagePositionedLayoutNodes,
+  preparePositionedLineageHierarchy,
+} from "../LineageGraph";
+
+const group = (id, x, y, w, h, z = 0) => ({ id, name: id, x, y, w, h, z });
+const resource = (id, x, y, z = 2) => ({
+  ...group(id, x, y, 120, 50, z),
+  fields: Array.from({ length: 9 }, (_, index) => ({ name: `field-${index}` })),
+});
+
+describe("prepared lineage hierarchy", () => {
+  it("keeps the rendered card width equal to its layout width", () => {
+    const groups = [group("database", 0, 0, 700, 600)];
+    const resources = [resource("table", 30, 80)];
+    [240, 288, 360].forEach((nodeWidth) => {
+      const nodes = lineagePositionedLayoutNodes({
+        groups,
+        resources,
+        nodeWidth,
+      });
+      const table = nodes.find(({ id }) => id === "table");
+      expect(table.style["--td-lineage-node-width"]).toBe(`${nodeWidth}px`);
+      expect(table.data.absoluteGeometry.w).toBe(nodeWidth);
+    });
+  });
+
+  it("chooses the deepest and then smallest parent, preserving input order on ties", () => {
+    const outer = group("outer", 0, 0, 900, 900);
+    const wide = group("wide", 10, 10, 600, 600, 1);
+    const first = group("first", 20, 20, 300, 300, 1);
+    const tied = group("tied", 20, 20, 300, 300, 1);
+    const leaf = resource("leaf", 50, 70);
+    const prepared = preparePositionedLineageHierarchy(
+      [outer, wide, first, tied],
+      [leaf],
+    );
+
+    expect(prepared.parentByNode.get(leaf)).toBe(first);
+    expect(prepared.childrenByParent.get(first)).toContain(leaf);
+    expect(prepared.parentByNode.get(first)).toBe(outer);
+  });
+
+  it("keeps duplicate canonical instances in their geometric parent", () => {
+    const left = group("left", 0, 0, 500, 500);
+    const right = group("right", 1000, 0, 500, 500);
+    const first = resource("shared", 30, 80);
+    const second = resource("shared", 1030, 80);
+    const groups = [left, right];
+    const resources = [first, second];
+    const preparedHierarchy = preparePositionedLineageHierarchy(
+      groups,
+      resources,
+    );
+    const nodes = lineagePositionedLayoutNodes({
+      groups,
+      resources,
+      preparedHierarchy,
+    });
+
+    expect(preparedHierarchy.parentByNode.get(first)).toBe(left);
+    expect(preparedHierarchy.parentByNode.get(second)).toBe(right);
+    const instances = nodes.filter(
+      (node) => node.data.canonicalId === "shared",
+    );
+    expect(new Set(instances.map((node) => node.id)).size).toBe(2);
+    expect(new Set(instances.map((node) => node.parentId))).toEqual(
+      new Set(["left", "right"]),
+    );
+  });
+
+  it("preserves anchored containment and the fallback for partial geometry", () => {
+    const parent = group("parent", 0, 0, 400, 400);
+    const anchored = resource("anchored", 350, 100);
+    const partial = { id: "partial", name: "partial", x: 50, y: 150 };
+    const outside = resource("outside", 900, 900);
+    const invalidGroup = { id: "invalid", x: 0, y: 0 };
+    const prepared = preparePositionedLineageHierarchy(
+      [parent, invalidGroup],
+      [anchored, partial, outside],
+    );
+
+    expect(prepared.parentByNode.get(anchored)).toBe(parent);
+    expect(prepared.parentByNode.get(partial)).toBe(parent);
+    expect(prepared.parentByNode.get(outside)).toBeUndefined();
+    expect([...prepared.parentByNode.values()]).not.toContain(invalidGroup);
+  });
+
+  it("reuses the same hierarchy across field expansion without changing parents or counters", () => {
+    const groups = [group("database", 0, 0, 700, 600)];
+    const resources = [resource("table", 30, 80)];
+    const preparedHierarchy = preparePositionedLineageHierarchy(
+      groups,
+      resources,
+    );
+    const parentLookup = jest.spyOn(preparedHierarchy.parentByNode, "get");
+    const base = { groups, resources, preparedHierarchy };
+    const initial = lineagePositionedLayoutNodes(base);
+    const expanded = lineagePositionedLayoutNodes({
+      ...base,
+      expandedFieldNodeIds: new Set(["table"]),
+    });
+
+    expect(parentLookup).toHaveBeenCalledWith(resources[0]);
+    expect(initial.map(({ id, parentId }) => [id, parentId])).toEqual(
+      expanded.map(({ id, parentId }) => [id, parentId]),
+    );
+    expect(expanded.find(({ id }) => id === "table").height).toBeGreaterThan(
+      initial.find(({ id }) => id === "table").height,
+    );
+    expect(expanded.find(({ id }) => id === "database").data.nodeCount).toBe(1);
+    expect(lineagePositionedLayoutNodes({ groups, resources })).toEqual(
+      initial,
+    );
+  });
+});