@truedat/lm 8.7.3 → 8.7.5

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

@@ -1,12 +1,16 @@
 import _ from "lodash/fp";
-import { waitFor } from "@testing-library/react";
+import { fireEvent, waitFor } from "@testing-library/react";
 import { render, waitForLoad } from "@truedat/test/render";
 import { useDataStructureSearch } from "@truedat/dd/hooks/useStructures";
 import { LinksPane } from "../LinksPane";
 
-jest.mock("@truedat/dd/hooks/useStructures", () => ({
-  useDataStructureSearch: jest.fn(),
-}));
+jest.mock(
+  "@truedat/dd/hooks/useStructures",
+  () => ({
+    useDataStructureSearch: jest.fn(),
+  }),
+  { virtual: true },
+);
 
 describe("<LinksPane />", () => {
   const renderOpts = {
@@ -17,6 +21,12 @@ describe("<LinksPane />", () => {
         "implementationRelation.table.title": "Relation Title",
         "implementationRelation.master.table.title": "Master title",
         "concept.column": "column",
+        "concept.name": "Name",
+        "concept.relation.relation_type_name": "Relation type",
+        "concept.type": "Type",
+        "conceptRelations.relationType.main": "Main",
+        "conceptRelations.relationType.secondary": "Secondary",
+        "filter.empty": "Empty",
       },
     },
   };
@@ -44,76 +54,32 @@ describe("<LinksPane />", () => {
     targetType: "concept",
     linksActions: <button>action</button>,
   };
+
   it("matches the latest snapshot", async () => {
     const rendered = render(<LinksPane {...props} />, renderOpts);
     await waitForLoad(rendered);
     expect(rendered.container).toMatchSnapshot();
   });
 
-  it("fetches structure notes for data_structure links", async () => {
-    const mockTrigger = jest.fn().mockResolvedValue({
-      data: {
-        data: [
-          { id: 123, note: { status: "published", content: "Test note" } },
-          { id: 456, note: { status: "draft", content: "Another note" } },
-        ],
-      },
-    });
-
-    useDataStructureSearch.mockReturnValue({
-      trigger: mockTrigger,
-    });
-
-    const structureLinks = [
-      {
-        id: 1,
-        resource_type: "data_structure",
-        resource_id: 123,
-        name: "Structure 1",
-      },
-      {
-        id: 2,
-        resource_type: "data_structure",
-        resource_id: 456,
-        name: "Structure 2",
-      },
-    ];
-
-    const propsWithStructures = {
-      ...props,
-      groups: [[columns, ["tag", structureLinks]]],
-    };
-
-    const rendered = render(<LinksPane {...propsWithStructures} />, renderOpts);
-    await waitForLoad(rendered);
-
-    expect(mockTrigger).toHaveBeenCalledWith({
-      must: { ids: [123, 456] },
-      page: 0,
-      size: 2,
-    });
-  });
-
-  it("handles empty structure links", async () => {
-    const mockTrigger = jest.fn();
-
-    useDataStructureSearch.mockReturnValue({
-      trigger: mockTrigger,
-    });
-
-    const nonStructureLinks = [
-      { id: 1, resource_type: "other", resource_id: 123, name: "Other 1" },
-    ];
-
-    const propsWithOther = {
-      ...props,
-      groups: [[columns, ["tag", nonStructureLinks]]],
-    };
+  it("renders multiple groups as separate tables", async () => {
+    const firstColumns = [{ name: "name" }, { name: "type" }];
+    const secondColumns = [{ name: "name" }, { name: "deleted_at" }];
+    const groupLinks = [{ id: 1, name: "Group 1", type: "table" }];
 
-    const rendered = render(<LinksPane {...propsWithOther} />, renderOpts);
+    const rendered = render(
+      <LinksPane
+        {...props}
+        groups={[
+          [firstColumns, ["tag", groupLinks]],
+          [secondColumns, ["deleted", groupLinks]],
+        ]}
+      />,
+      renderOpts,
+    );
     await waitForLoad(rendered);
 
-    expect(mockTrigger).not.toHaveBeenCalled();
+    const tables = rendered.container.querySelectorAll("table");
+    expect(tables).toHaveLength(2);
   });
 
   it("should display note columns only when note values are present for that column", async () => {
@@ -126,11 +92,20 @@ describe("<LinksPane />", () => {
       },
     });
 
-    useDataStructureSearch.mockReturnValue({
-      trigger: mockTrigger,
-    });
+    useDataStructureSearch.mockReturnValue({ trigger: mockTrigger });
 
-    const structureLinksMixedNotes = [
+    const noteColumns = [
+      { name: "name" },
+      {
+        name: "note.foo",
+        fieldSelector: _.path(["note", "foo"]),
+      },
+      {
+        name: "note.bar",
+        fieldSelector: _.path(["note", "bar"]),
+      },
+    ];
+    const noteLinks = [
       {
         id: 1,
         resource_type: "data_structure",
@@ -145,20 +120,6 @@ describe("<LinksPane />", () => {
       },
     ];
 
-    const columnsWithNotes = [
-      ...columns,
-      {
-        name: "note.foo",
-        header: "note.foo",
-        fieldSelector: _.path(["note", "foo"]),
-      },
-      {
-        name: "note.bar",
-        header: "note.bar",
-        fieldSelector: _.path(["note", "bar"]),
-      },
-    ];
-
     const renderOptsWithNotes = {
       messages: {
         en: {
@@ -169,13 +130,8 @@ describe("<LinksPane />", () => {
       },
     };
 
-    const propsWithMixedNotes = {
-      ...props,
-      groups: [[columnsWithNotes, ["tag", structureLinksMixedNotes]]],
-    };
-
     const rendered = render(
-      <LinksPane {...propsWithMixedNotes} />,
+      <LinksPane {...props} groups={[[noteColumns, ["tag", noteLinks]]]} />,
       renderOptsWithNotes,
     );
     await waitForLoad(rendered);
@@ -184,12 +140,6 @@ describe("<LinksPane />", () => {
       expect(rendered.queryByText(/foo/i)).toBeInTheDocument();
     });
 
-    expect(mockTrigger).toHaveBeenCalledWith({
-      must: { ids: [123, 456] },
-      page: 0,
-      size: 2,
-    });
-
     const fooCells = rendered.queryAllByText(/baz/i);
     expect(fooCells.length).toBeGreaterThan(0);
 
@@ -198,4 +148,19 @@ describe("<LinksPane />", () => {
 
     expect(rendered.container).toMatchSnapshot();
   });
+
+  it("passes linksActions to the UI", async () => {
+    const rendered = render(
+      <LinksPane
+        groups={[[columns, ["tag", links]]]}
+        sourceType="implementation"
+        targetType="concept"
+        linksActions={<button data-testid="action-btn">Action</button>}
+      />,
+      renderOpts,
+    );
+    await waitForLoad(rendered);
+
+    expect(rendered.getByTestId("action-btn")).toBeInTheDocument();
+  });
 });

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

@@ -0,0 +1,192 @@
+/**
+ * @jest-environment jsdom
+ */
+
+import _ from "lodash/fp";
+import { fireEvent, waitFor } from "@testing-library/react";
+import { render, waitForLoad } from "@truedat/test/render";
+import { LinksPaneDataCell } from "../LinksPaneDataCell";
+
+jest.mock(
+  "@truedat/core/services",
+  () => {
+    const lodashFp = require("lodash/fp");
+    return {
+      columnDecorator: (column) => (obj) => {
+        const { fieldSelector, fieldDecorator, name } = column || {};
+        const field = lodashFp.isFunction(fieldSelector)
+          ? fieldSelector(obj)
+          : lodashFp.path(lodashFp.defaultTo(name)(fieldSelector))(obj);
+        return lodashFp.isFunction(fieldDecorator)
+          ? fieldDecorator(field)
+          : field;
+      },
+      columnPredicate: ({ name, fieldSelector }) =>
+        lodashFp.flow(
+          lodashFp.isFunction(fieldSelector)
+            ? fieldSelector
+            : lodashFp.path(lodashFp.defaultTo(name)(fieldSelector)),
+          Boolean,
+        ),
+    };
+  },
+  { virtual: true },
+);
+
+describe("<LinksPaneDataCell />", () => {
+  const setHorizontalOverflow = (element, scrollWidth, clientWidth) => {
+    Object.defineProperties(element, {
+      scrollWidth: { configurable: true, value: scrollWidth },
+      clientWidth: { configurable: true, value: clientWidth },
+    });
+  };
+
+  const renderOpts = {
+    messages: {
+      en: {},
+    },
+  };
+
+  it("renders cell content from column", () => {
+    const column = { name: "name" };
+    const link = { id: 1, name: "Alpha" };
+
+    const { getByText } = render(
+      <LinksPaneDataCell column={column} link={link} />,
+      renderOpts,
+    );
+
+    expect(getByText("Alpha")).toBeInTheDocument();
+  });
+
+  it("renders fieldDecorator output", () => {
+    const column = {
+      name: "type",
+      fieldSelector: _.pick(["type"]),
+      fieldDecorator: ({ type }) => type,
+    };
+    const link = { id: 1, type: "column" };
+
+    const { getByText } = render(
+      <LinksPaneDataCell column={column} link={link} />,
+      renderOpts,
+    );
+
+    expect(getByText("column")).toBeInTheDocument();
+  });
+
+  it("shows the complete value when a data cell is truncated", async () => {
+    const value = "A complete value that does not fit in the table cell";
+    const column = { name: "name" };
+    const link = { id: 1, name: value };
+
+    const { container } = render(
+      <LinksPaneDataCell column={column} link={link} />,
+      renderOpts,
+    );
+
+    const cell = container.querySelector("td");
+    setHorizontalOverflow(cell, 240, 120);
+    expect(cell).not.toHaveAttribute("title");
+
+    fireEvent.mouseEnter(cell);
+
+    await waitFor(() => {
+      expect(
+        document.body.querySelector(".links-pane__truncated-popup"),
+      ).toHaveTextContent(value);
+    });
+  });
+
+  it("does not show a popup when the data cell content fits", async () => {
+    const value = "Visible value";
+    const column = { name: "name" };
+    const link = { id: 1, name: value };
+
+    const { container } = render(
+      <LinksPaneDataCell column={column} link={link} />,
+      renderOpts,
+    );
+
+    const cell = container.querySelector("td");
+    setHorizontalOverflow(cell, 120, 120);
+
+    fireEvent.mouseEnter(cell);
+
+    await waitFor(() => {
+      expect(
+        document.body.querySelector(".links-pane__truncated-popup"),
+      ).not.toBeInTheDocument();
+    });
+  });
+
+  it("does not add popup to action cells", async () => {
+    const column = {
+      name: "_actions",
+      fieldSelector: _.prop("_actions"),
+      fieldDecorator: () => <button type="button">delete</button>,
+    };
+    const link = { id: 1, _actions: { delete: true } };
+
+    const { container } = render(
+      <LinksPaneDataCell column={column} link={link} />,
+      renderOpts,
+    );
+
+    const cell = container.querySelector("td");
+    setHorizontalOverflow(cell, 240, 60);
+    fireEvent.mouseEnter(cell);
+
+    await waitFor(() => {
+      expect(
+        document.body.querySelector(".links-pane__truncated-popup"),
+      ).not.toBeInTheDocument();
+    });
+  });
+
+  it("does not add popup to group cells", async () => {
+    const column = {
+      name: "group",
+      fieldDecorator: (group) => group,
+    };
+    const link = { id: 1, group: "Analytics" };
+
+    const { container } = render(
+      <LinksPaneDataCell column={column} link={link} />,
+      renderOpts,
+    );
+
+    const cell = container.querySelector("td");
+    setHorizontalOverflow(cell, 240, 60);
+    fireEvent.mouseEnter(cell);
+
+    await waitFor(() => {
+      expect(
+        document.body.querySelector(".links-pane__truncated-popup"),
+      ).not.toBeInTheDocument();
+    });
+  });
+
+  it("does not add popup to note text cells", async () => {
+    const column = {
+      name: "note.text_input",
+      fieldSelector: _.path(["note", "text_input"]),
+    };
+    const link = { id: 1, note: { text_input: "Complete note value" } };
+
+    const { container } = render(
+      <LinksPaneDataCell column={column} link={link} />,
+      renderOpts,
+    );
+
+    const cell = container.querySelector("td");
+    setHorizontalOverflow(cell, 240, 60);
+    fireEvent.mouseEnter(cell);
+
+    await waitFor(() => {
+      expect(
+        document.body.querySelector(".links-pane__truncated-popup"),
+      ).not.toBeInTheDocument();
+    });
+  });
+});

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

@@ -0,0 +1,94 @@
+/**
+ * @jest-environment jsdom
+ */
+
+import _ from "lodash/fp";
+import { render } from "@truedat/test/render";
+import { LinksPaneRow } from "../LinksPaneRow";
+
+jest.mock(
+  "@truedat/core/services",
+  () => {
+    const lodashFp = require("lodash/fp");
+    return {
+      columnDecorator: (column) => (obj) => {
+        const { fieldSelector, fieldDecorator, name } = column || {};
+        const field = lodashFp.isFunction(fieldSelector)
+          ? fieldSelector(obj)
+          : lodashFp.path(lodashFp.defaultTo(name)(fieldSelector))(obj);
+        return lodashFp.isFunction(fieldDecorator)
+          ? fieldDecorator(field)
+          : field;
+      },
+      columnPredicate: ({ name, fieldSelector }) =>
+        lodashFp.flow(
+          lodashFp.isFunction(fieldSelector)
+            ? fieldSelector
+            : lodashFp.path(lodashFp.defaultTo(name)(fieldSelector)),
+          Boolean,
+        ),
+    };
+  },
+  { virtual: true },
+);
+
+describe("<LinksPaneRow />", () => {
+  const renderOpts = {
+    messages: { en: {} },
+  };
+
+  it("renders one cell per column", () => {
+    const columns = [{ name: "name" }, { name: "type" }];
+    const link = { name: "Alpha", type: "field" };
+
+    const { container } = render(
+      <table>
+        <tbody>
+          <LinksPaneRow columns={columns} link={link} />
+        </tbody>
+      </table>,
+      renderOpts,
+    );
+
+    const cells = container.querySelectorAll("td");
+    expect(cells).toHaveLength(2);
+    expect(cells[0]).toHaveTextContent("Alpha");
+    expect(cells[1]).toHaveTextContent("field");
+  });
+
+  it("renders empty row when no columns", () => {
+    const { container } = render(
+      <table>
+        <tbody>
+          <LinksPaneRow columns={[]} link={{ name: "Alpha" }} />
+        </tbody>
+      </table>,
+      renderOpts,
+    );
+
+    const cells = container.querySelectorAll("td");
+    expect(cells).toHaveLength(0);
+  });
+
+  it("renders fieldDecorator output", () => {
+    const columns = [
+      {
+        name: "type",
+        fieldSelector: _.pick(["type"]),
+        fieldDecorator: ({ type }) => `Type: ${type}`,
+      },
+    ];
+    const link = { type: "table" };
+
+    const { container } = render(
+      <table>
+        <tbody>
+          <LinksPaneRow columns={columns} link={link} />
+        </tbody>
+      </table>,
+      renderOpts,
+    );
+
+    expect(container.querySelector("td")).toHaveTextContent("Type: table");
+  });
+});

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

@@ -0,0 +1,164 @@
+/**
+ * @jest-environment jsdom
+ */
+
+import _ from "lodash/fp";
+import { fireEvent, waitFor } from "@testing-library/react";
+import { render } from "@truedat/test/render";
+import { LinksPaneTypeFilter } from "../LinksPaneTypeFilter";
+
+describe("<LinksPaneTypeFilter />", () => {
+  const renderOpts = {
+    messages: {
+      en: {
+        "structure.type.column.text": "Column",
+        "structure.type.table.text": "Table",
+      },
+    },
+  };
+
+  it("renders nothing when options are empty", () => {
+    const { container } = render(
+      <LinksPaneTypeFilter
+        onChange={jest.fn()}
+        options={[]}
+        selectedTypes={[]}
+      />,
+      renderOpts,
+    );
+
+    expect(container.querySelector(".filter.icon")).not.toBeInTheDocument();
+  });
+
+  it("renders filter icon with options", () => {
+    const { container } = render(
+      <LinksPaneTypeFilter
+        onChange={jest.fn()}
+        options={["column", "table"]}
+        selectedTypes={[]}
+      />,
+      renderOpts,
+    );
+
+    expect(container.querySelector(".filter.icon")).toBeInTheDocument();
+  });
+
+  it("opens popup on filter icon click", async () => {
+    const rendered = render(
+      <LinksPaneTypeFilter
+        onChange={jest.fn()}
+        options={["column", "table"]}
+        selectedTypes={[]}
+      />,
+      renderOpts,
+    );
+
+    fireEvent.click(rendered.container.querySelector(".filter.icon"));
+
+    await waitFor(() => {
+      expect(document.body.querySelector(".ui.popup")).toBeInTheDocument();
+    });
+  });
+
+  it("renders all options as checkboxes in the popup", async () => {
+    const rendered = render(
+      <LinksPaneTypeFilter
+        onChange={jest.fn()}
+        options={["column", "table"]}
+        selectedTypes={[]}
+      />,
+      renderOpts,
+    );
+
+    fireEvent.click(rendered.container.querySelector(".filter.icon"));
+
+    await waitFor(() => {
+      const menuItems = document.body.querySelectorAll(
+        ".links-pane__filter-menu-item",
+      );
+      expect(menuItems).toHaveLength(2);
+    });
+  });
+
+  it("calls onChange with [] when selecting an option makes all options selected", async () => {
+    const onChange = jest.fn();
+
+    const rendered = render(
+      <LinksPaneTypeFilter
+        onChange={onChange}
+        options={["column", "table"]}
+        selectedTypes={["column"]}
+      />,
+      renderOpts,
+    );
+
+    fireEvent.click(rendered.container.querySelector(".filter.icon"));
+
+    await waitFor(() => {
+      expect(document.body.querySelector(".ui.popup")).toBeInTheDocument();
+    });
+
+    const tableItem = Array.from(
+      document.body.querySelectorAll(".links-pane__filter-menu-item"),
+    ).find((item) => item.textContent.includes("Table"));
+
+    fireEvent.click(tableItem);
+
+    expect(onChange).toHaveBeenCalledWith([]);
+  });
+
+  it("calls onChange with remaining option when one is deselected", async () => {
+    const onChange = jest.fn();
+
+    const rendered = render(
+      <LinksPaneTypeFilter
+        onChange={onChange}
+        options={["column", "table"]}
+        selectedTypes={["column", "table"]}
+      />,
+      renderOpts,
+    );
+
+    fireEvent.click(rendered.container.querySelector(".filter.icon"));
+
+    await waitFor(() => {
+      expect(document.body.querySelector(".ui.popup")).toBeInTheDocument();
+    });
+
+    const columnItem = Array.from(
+      document.body.querySelectorAll(".links-pane__filter-menu-item"),
+    ).find((item) => item.textContent.includes("Column"));
+
+    fireEvent.click(columnItem);
+
+    expect(onChange).toHaveBeenCalledWith(["table"]);
+  });
+
+  it("shows icon in blue when some filters are active", () => {
+    const { container } = render(
+      <LinksPaneTypeFilter
+        onChange={jest.fn()}
+        options={["column", "table"]}
+        selectedTypes={["column"]}
+      />,
+      renderOpts,
+    );
+
+    const icon = container.querySelector(".filter.icon");
+    expect(icon).toHaveClass("blue");
+  });
+
+  it("shows icon in default color when no filters are active", () => {
+    const { container } = render(
+      <LinksPaneTypeFilter
+        onChange={jest.fn()}
+        options={["column", "table"]}
+        selectedTypes={[]}
+      />,
+      renderOpts,
+    );
+
+    const icon = container.querySelector(".filter.icon");
+    expect(icon).not.toHaveClass("blue");
+  });
+});

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

@@ -3,11 +3,11 @@
 exports[`<ConfirmDeleteRelation /> matches the latest snapshot 1`] = `
 <div>
   <button
-    class="ui red mini basic icon button"
+    class="ui red mini basic compact icon button relation-actions__delete-button"
   >
     <i
       aria-hidden="true"
-      class="red trash alternate outline icon"
+      class="red trash alternate outline small icon relation-actions__delete-icon"
     />
   </button>
 </div>