@truedat/dd 7.5.9 → 7.5.11

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

@@ -1,22 +1,23 @@
-import React from "react";
-import { shallow } from "enzyme";
-import { intl } from "@truedat/test/intl-stub";
+import userEvent from "@testing-library/user-event";
+import { render, waitForLoad } from "@truedat/test/render";
 import { GrantsTable } from "../GrantsTable";
 import { defaultGrantsTableColumns } from "../../selectors/getGrantsColumns";
 
-// workaround for enzyme issue with React.useContext
-// see https://github.com/airbnb/enzyme/issues/2176#issuecomment-532361526
-jest.spyOn(React, "useContext").mockImplementation(() => intl);
-
 describe("<GrantsTable />", () => {
+  const renderOpts = {
+    state: {
+      userPermissions: { update: true },
+    },
+  };
+
   const grants = [
     {
       data_structure_version: {
-        data_structure_id: 22075,
+        data_structure_id: "22075",
         description: "DEscripción",
         domain: {
           external_id: "Demo Truedat",
-          id: 3,
+          id: "3",
           name: "Demo Truedat",
           parent_ids: [],
           updated_at: "2020-07-21 07:45:41.068703Z",
@@ -28,22 +29,22 @@ describe("<GrantsTable />", () => {
       },
       detail: {},
       end_date: "2023-05-16",
-      id: 6,
+      id: "6",
       start_date: "2020-05-17",
       user: {
         email: "user1@example.com",
         full_name: "user_full_name_1",
         user_name: "user1",
       },
-      user_id: 23,
+      user_id: "23",
     },
     {
       data_structure_version: {
-        data_structure_id: 4570466,
+        data_structure_id: "4570466",
         description: null,
         domain: {
           external_id: "Truedat",
-          id: 2,
+          id: "2",
           name: "Truedat",
           parent_ids: [],
           updated_at: "2020-07-28 13:21:21.938189Z",
@@ -63,14 +64,14 @@ describe("<GrantsTable />", () => {
         access_type: "admin",
       },
       end_date: "2023-05-18",
-      id: 8,
+      id: "8",
       start_date: "2011-05-17",
       user: {
         email: "user2@example.com",
         full_name: "user_full_name_2",
         user_name: "user2",
       },
-      user_id: 171,
+      user_id: "171",
     },
   ];
 
@@ -85,62 +86,34 @@ describe("<GrantsTable />", () => {
     grantsSorting,
   };
 
-  it("matches the latest snapshot", () => {
-    const wrapper = shallow(<GrantsTable {...props} />);
-    expect(wrapper).toMatchSnapshot();
+  it("matches the latest snapshot", async () => {
+    const rendered = render(<GrantsTable {...props} />, renderOpts);
+    await waitForLoad(rendered);
+    expect(rendered.container).toMatchSnapshot();
   });
 
-  it("sorts column in the direction specified", () => {
-    const wrapper = shallow(<GrantsTable {...props} />);
-
-    const tableHeaderCells = wrapper
-      .find("TableHeader")
-      .find("TableRow")
-      .dive()
-      .find("TableHeaderCell");
+  it("sorts column in the direction specified", async () => {
+    const rendered = render(<GrantsTable {...props} />, renderOpts);
+    await waitForLoad(rendered);
 
-    expect(tableHeaderCells.at(0).props().sorted).toEqual(null);
-    expect(tableHeaderCells.at(1).props().sorted).toEqual("ascending");
-    expect(tableHeaderCells.at(2).props().sorted).toEqual(null);
-    expect(tableHeaderCells.at(3).props().sorted).toEqual(null);
+    const headers = rendered.container.querySelectorAll("th");
+    expect(headers[0]).not.toHaveClass("sorted");
+    expect(headers[1]).toHaveClass("ascending sorted");
+    expect(headers[2]).not.toHaveClass("sorted");
+    expect(headers[3]).not.toHaveClass("sorted");
   });
 
-  it("handles sort when column header is clicked", () => {
-    const wrapper = shallow(<GrantsTable {...props} />);
+  it("handles sort when column header is clicked", async () => {
+    const rendered = render(<GrantsTable {...props} />, renderOpts);
+    await waitForLoad(rendered);
 
-    wrapper
-      .find("TableHeader")
-      .find("TableRow")
-      .dive()
-      .find("TableHeaderCell")
-      .at(0)
-      .simulate("click");
+    const user = userEvent.setup({ delay: null });
+    const headers = rendered.container.querySelectorAll("th");
 
-    expect(
-      wrapper
-        .find("TableHeader")
-        .find("TableRow")
-        .dive()
-        .find("TableHeaderCell")
-        .at(0)
-        .props().sorted
-    ).toEqual("ascending");
+    await user.click(headers[0]);
+    expect(headers[0]).toHaveClass("ascending sorted");
 
-    wrapper
-      .find("TableHeader")
-      .find("TableRow")
-      .dive()
-      .find("TableHeaderCell")
-      .at(0)
-      .simulate("click");
-    expect(
-      wrapper
-        .find("TableHeader")
-        .find("TableRow")
-        .dive()
-        .find("TableHeaderCell")
-        .at(0)
-        .props().sorted
-    ).toEqual("descending");
+    await user.click(headers[0]);
+    expect(headers[0]).toHaveClass("descending sorted");
   });
 });

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

@@ -1,4 +1,3 @@
-import React from "react";
 import { render } from "@truedat/test/render";
 import { ImplementationStructuresLoader } from "../ImplementationStructuresLoader";
 

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

@@ -1,10 +1,16 @@
-import React from "react";
-import { shallow } from "enzyme";
+import { render, waitForLoad } from "@truedat/test/render";
 import Lineage from "../Lineage";
 
 describe("<Lineage />", () => {
-  it("matches the latest snapshot", () => {
-    const wrapper = shallow(<Lineage />);
-    expect(wrapper).toMatchSnapshot();
+  const renderOpts = {
+    state: {
+      userPermissions: { update: true },
+    },
+  };
+
+  it("matches the latest snapshot", async () => {
+    const rendered = render(<Lineage />, renderOpts);
+    await waitForLoad(rendered);
+    expect(rendered.container).toMatchSnapshot();
   });
 });

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

@@ -1,12 +1,16 @@
-import React from "react";
-import { shallow } from "enzyme";
+import { render, waitForLoad } from "@truedat/test/render";
 import { LineageDefs } from "../LineageDefs";
 
 describe("<LineageDefs />", () => {
-  const props = {};
+  const renderOpts = {
+    state: {
+      userPermissions: { update: true },
+    },
+  };
 
-  it("matches the latest snapshot", () => {
-    const wrapper = shallow(<LineageDefs {...props} />);
-    expect(wrapper).toMatchSnapshot();
+  it("matches the latest snapshot", async () => {
+    const rendered = render(<LineageDefs />, renderOpts);
+    await waitForLoad(rendered);
+    expect(rendered.container).toMatchSnapshot();
   });
 });

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

@@ -1,10 +1,6 @@
-import React from "react";
-import { shallowWithIntl, shallow } from "@truedat/test/intl-stub";
-import { intl } from "@truedat/test/intl-stub";
+import userEvent from "@testing-library/user-event";
+import { render, waitForLoad } from "@truedat/test/render";
 import { LineageDownloadButton } from "../LineageDownloadButton";
-// workaround for enzyme issue with React.useContext
-// see https://github.com/airbnb/enzyme/issues/2176#issuecomment-532361526
-jest.spyOn(React, "useContext").mockImplementation(() => intl);
 
 describe("<LineageDownloadButton />", () => {
   const downloadCsvGraph = jest.fn();
@@ -12,44 +8,34 @@ describe("<LineageDownloadButton />", () => {
     graph: { id: 1 },
     csvGraphDownloading: false,
     graphLoading: false,
-    downloadCsvGraph
+    downloadCsvGraph,
   };
 
-  it("matches the latest snapshot", () => {
-    const wrapper = shallowWithIntl(<LineageDownloadButton {...props} />);
-    expect(wrapper).toMatchSnapshot();
+  it("matches the latest snapshot", async () => {
+    const rendered = render(<LineageDownloadButton {...props} />);
+    await waitForLoad(rendered);
+    expect(rendered.container).toMatchSnapshot();
   });
 
-  it("renders LineageDownloadButton when graph is not loading", () => {
-    const wrapper = shallowWithIntl(<LineageDownloadButton {...props} />);
-    expect(wrapper.find("Popup")).toHaveLength(1);
-    wrapper.setProps({ ...props, graphLoading: true });
-    expect(wrapper.find("Popup")).toHaveLength(0);
-  });
+  it("renders LineageDownloadButton when graph is not loading", async () => {
+    const rendered = render(<LineageDownloadButton {...props} graphLoading />);
+    await waitForLoad(rendered);
 
-  it("Button is enabled when graph is not empty", () => {
-    const wrapper = shallowWithIntl(<LineageDownloadButton {...props} />);
+    expect(rendered.queryByRole("button")).not.toBeInTheDocument();
+  });
 
-    expect(
-      wrapper
-        .find("Popup")
-        .dive()
-        .find("Portal")
-        .dive()
-        .find("Button")
-        .prop("disabled")
-    ).not.toBeTruthy();
+  it("Button is enabled when graph is not empty", async () => {
+    const rendered = render(<LineageDownloadButton {...props} />);
+    await waitForLoad(rendered);
+    expect(rendered.queryByRole("button")).toBeEnabled();
   });
 
-  it("Button onClick calls downloadCsvGraph", () => {
-    const wrapper = shallowWithIntl(<LineageDownloadButton {...props} />);
-    const Button = wrapper
-      .find("Popup")
-      .dive()
-      .find("Portal")
-      .dive()
-      .find("Button");
-    Button.simulate("click");
-    expect(downloadCsvGraph.mock.calls).toHaveLength(1);
+  it("Button onClick calls downloadCsvGraph", async () => {
+    const user = userEvent.setup({ delay: null });
+    const rendered = render(<LineageDownloadButton {...props} />);
+    await waitForLoad(rendered);
+
+    await user.click(rendered.getByRole("button"));
+    expect(downloadCsvGraph).toHaveBeenCalledTimes(1);
   });
 });

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

@@ -1,4 +1,3 @@
-import React from "react";
 import { render } from "@truedat/test/render";
 import { LineageEventsTable } from "../LineageEventsTable";
 

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

@@ -1,13 +1,8 @@
-import React from "react";
-import { waitFor } from "@testing-library/react";
 import userEvent from "@testing-library/user-event";
-import { render } from "@truedat/test/render";
+import { render, waitForLoad } from "@truedat/test/render";
 import { domainsMock } from "@truedat/test/mocks";
 import { LineageForm } from "../LineageForm";
 
-const mocks = [domainsMock({ action: "viewLineage" })];
-const renderOpts = { mocks };
-
 describe("<LineageForm />", () => {
   const fetchNodes = jest.fn();
   const groupOptions = [
@@ -32,55 +27,51 @@ describe("<LineageForm />", () => {
     selectedResources: [],
   };
 
-  it("matches the latest snapshot", () => {
-    const { container } = render(<LineageForm {...props} />, renderOpts);
-    expect(container).toMatchSnapshot();
+  const renderOpts = {
+    mocks: [domainsMock({ action: "viewLineage" })],
+  };
+
+  it("matches the latest snapshot", async () => {
+    const rendered = render(<LineageForm {...props} />, renderOpts);
+    await waitForLoad(rendered);
+    expect(rendered.container).toMatchSnapshot();
   });
 
   it("selecting group will call selectGroup function", async () => {
     const selectGroup = jest.fn();
-    const { getByRole } = render(
+    const rendered = render(
       <LineageForm {...props} selectGroup={selectGroup} />,
       renderOpts
     );
-    await waitFor(() => {
-      expect(getByRole("option", { name: /grp1/i })).toBeInTheDocument();
-    });
+    await waitForLoad(rendered);
+    const user = userEvent.setup({ delay: null });
 
-    userEvent.click(getByRole("option", { name: /grp1/i }));
+    await user.click(rendered.getByRole("option", { name: /grp1/i }));
 
-    expect(selectGroup.mock.calls.length).toBe(1);
-    expect(selectGroup.mock.calls[0]).toEqual([
-      { id: "grp1", domain_id: null },
-    ]);
+    expect(selectGroup).toHaveBeenCalledTimes(1);
+    expect(selectGroup).toHaveBeenCalledWith({ id: "grp1", domain_id: null });
   });
 
   it("selecting resources will call selectResources function", async () => {
     const selectResources = jest.fn();
-    const { getByRole } = render(
+    const rendered = render(
       <LineageForm {...props} selectResources={selectResources} />,
       renderOpts
     );
-    await waitFor(() => {
-      expect(getByRole("option", { name: /grp1/i })).toBeInTheDocument();
-    });
-
-    userEvent.click(getByRole("option", { name: /grp1/i }));
-
-    await waitFor(() => {
-      expect(getByRole("option", { name: /res1/i })).toBeInTheDocument();
-    });
+    await waitForLoad(rendered);
+    const user = userEvent.setup({ delay: null });
 
-    userEvent.click(getByRole("option", { name: /res1/i }));
+    await user.click(rendered.getByRole("option", { name: /grp1/i }));
+    await user.click(rendered.getByRole("option", { name: /res1/i }));
 
-    expect(selectResources.mock.calls.length).toBe(1);
-    expect(selectResources.mock.calls[0]).toEqual([["res1"]]);
+    expect(selectResources).toHaveBeenCalledTimes(1);
+    expect(selectResources).toHaveBeenCalledWith(["res1"]);
   });
 
   it("handle submit action", async () => {
     const selectedResources = ["id1", "id2"];
     const createGraph = jest.fn();
-    const { findByText, findByRole } = render(
+    const rendered = render(
       <LineageForm
         {...props}
         createGraph={createGraph}
@@ -88,32 +79,44 @@ describe("<LineageForm />", () => {
       />,
       renderOpts
     );
+    await waitForLoad(rendered);
+    const user = userEvent.setup({ delay: null });
+
+    await user.click(rendered.getByText(/foodomain/i));
+    await user.click(
+      rendered.getByRole("button", {
+        name: /navigation.lineage.lineage/i,
+      })
+    );
 
-    userEvent.click(await findByText("fooDomain"));
-    userEvent.click(await findByRole("button", { name: "Lineage" }));
-
-    expect(createGraph.mock.calls.length).toBe(1);
-    expect(createGraph.mock.calls[0]).toEqual([
-      { ids: ["id1", "id2"], type: "lineage", levels: 4, isRedirected: true },
-    ]);
+    expect(createGraph).toHaveBeenCalledTimes(1);
+    expect(createGraph).toHaveBeenCalledWith({
+      ids: ["id1", "id2"],
+      type: "lineage",
+      levels: 4,
+      isRedirected: true,
+    });
   });
 
   it("calls clearNodes when component unmounts but not when it mounts", async () => {
     const clearNodes = jest.fn();
-    const { unmount } = render(
+    const rendered = render(
       <LineageForm {...props} resourceOptions={[]} clearNodes={clearNodes} />,
       renderOpts
     );
+    await waitForLoad(rendered);
+
     expect(clearNodes).toHaveBeenCalledTimes(0);
-    unmount();
+    rendered.unmount();
     expect(clearNodes).toHaveBeenCalledTimes(1);
   });
 
   it("handles domain selection", async () => {
-    const { getByRole } = render(<LineageForm {...props} />, renderOpts);
-    await waitFor(() => {
-      userEvent.click(getByRole("option", { name: /fooDomain/i }));
-    });
+    const rendered = render(<LineageForm {...props} />, renderOpts);
+    await waitForLoad(rendered);
+    const user = userEvent.setup({ delay: null });
+
+    await user.click(rendered.getByRole("option", { name: /foodomain/i }));
     expect(fetchNodes).toHaveBeenCalledWith({ domain_id: "1" });
   });
 });

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

@@ -1,7 +1,13 @@
-import React from "react";
-import { shallow } from "enzyme";
+import { render, waitForLoad } from "@truedat/test/render";
 import { LineageGroup } from "../LineageGroup";
 
+// Mock LineageContextMenu component
+jest.mock("../LineageContextMenu", () => {
+  return function MockLineageContextMenu(props) {
+    return <div data-testid="lineage-context-menu">Context Menu Mock</div>;
+  };
+});
+
 describe("<LineageGroup />", () => {
   const x = 10;
   const y = 10;
@@ -27,26 +33,47 @@ describe("<LineageGroup />", () => {
     active,
     structure_id,
     onClick,
-    onHover
+    onHover,
   };
 
-  it("matches the latest snapshot", () => {
-    const wrapper = shallow(<LineageGroup {...props} />);
-    expect(wrapper).toMatchSnapshot();
+  it("matches the latest snapshot", async () => {
+    const rendered = render(
+      <svg>
+        <LineageGroup {...props} />
+      </svg>
+    );
+    await waitForLoad(rendered);
+    expect(rendered.container).toMatchSnapshot();
   });
 
-  it("matches the latest snapshot (selected)", () => {
-    const wrapper = shallow(<LineageGroup selected {...props} />);
-    expect(wrapper).toMatchSnapshot();
+  it("matches the latest snapshot (selected)", async () => {
+    const rendered = render(
+      <svg>
+        <LineageGroup selected {...props} />
+      </svg>
+    );
+    await waitForLoad(rendered);
+    expect(rendered.container).toMatchSnapshot();
   });
 
-  it("includes a context menu when selected", () => {
-    const wrapper = shallow(<LineageGroup selected {...props} />);
-    expect(wrapper.find("Popup").length).toBe(1);
+  it("includes a context menu when selected", async () => {
+    const customProps = { ...props, selected: true };
+    const rendered = render(
+      <svg>
+        <LineageGroup {...customProps} />
+      </svg>
+    );
+    await waitForLoad(rendered);
+    expect(rendered.getByText("Context Menu Mock")).toBeInTheDocument();
   });
 
-  it("does not include a context menu when not selected", () => {
-    const wrapper = shallow(<LineageGroup {...props} />);
-    expect(wrapper.find("Popup").length).toBe(0);
+  it("does not include a context menu when not selected", async () => {
+    const rendered = render(
+      <svg>
+        <LineageGroup {...props} />
+      </svg>
+    );
+    await waitForLoad(rendered);
+    expect(rendered.container.querySelector(".popup")).not.toBeInTheDocument();
   });
 });

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

@@ -1,7 +1,13 @@
-import React from "react";
-import { shallow } from "enzyme";
+import { render, waitForLoad } from "@truedat/test/render";
 import { LineageResource } from "../LineageResource";
 
+// Mock LineageContextMenu component
+jest.mock("../LineageContextMenu", () => {
+  return function MockLineageContextMenu(props) {
+    return <div data-testid="lineage-context-menu">Context Menu Mock</div>;
+  };
+});
+
 describe("<LineageResource />", () => {
   const x = 10;
   const y = 10;
@@ -23,26 +29,47 @@ describe("<LineageResource />", () => {
     active,
     structure_id,
     onClick,
-    onHover
+    onHover,
   };
 
-  it("matches the latest snapshot", () => {
-    const wrapper = shallow(<LineageResource {...props} />);
-    expect(wrapper).toMatchSnapshot();
+  it("matches the latest snapshot", async () => {
+    const rendered = render(
+      <svg>
+        <LineageResource {...props} />
+      </svg>
+    );
+    await waitForLoad(rendered);
+    expect(rendered.container).toMatchSnapshot();
   });
 
-  it("matches the latest snapshot (selected)", () => {
-    const wrapper = shallow(<LineageResource selected {...props} />);
-    expect(wrapper).toMatchSnapshot();
+  it("matches the latest snapshot (selected)", async () => {
+    const rendered = render(
+      <svg>
+        <LineageResource selected {...props} />
+      </svg>
+    );
+    await waitForLoad(rendered);
+    expect(rendered.container).toMatchSnapshot();
   });
 
-  it("includes a context menu when selected", () => {
-    const wrapper = shallow(<LineageResource selected {...props} />);
-    expect(wrapper.find("Popup").length).toBe(1);
+  it("includes a context menu when selected", async () => {
+    const customProps = { ...props, selected: true };
+    const rendered = render(
+      <svg>
+        <LineageResource {...customProps} />
+      </svg>
+    );
+    await waitForLoad(rendered);
+    expect(rendered.getByText(/context menu mock/i)).toBeInTheDocument();
   });
 
-  it("does not include a context menu when not selected", () => {
-    const wrapper = shallow(<LineageResource {...props} />);
-    expect(wrapper.find("Popup").length).toBe(0);
+  it("does not include a context menu when not selected", async () => {
+    const rendered = render(
+      <svg>
+        <LineageResource {...props} />
+      </svg>
+    );
+    await waitForLoad(rendered);
+    expect(rendered.container.querySelector(".popup")).not.toBeInTheDocument();
   });
 });