@truedat/core 7.5.9 → 7.5.11

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

@@ -1,44 +1,49 @@
-import React from "react";
-import { mount } from "enzyme";
+import { render, waitForLoad } from "@truedat/test/render";
 import { FiltersLoader } from "../FiltersLoader";
 
 describe("<FiltersLoader/>", () => {
   const filters = { foo: "foo" };
 
-  it("dispatches fetchFilters on mount, clearFilters on unmount", () => {
+  it("calls fetchFilters when component mounts but not when it unmounts", async () => {
     const props = {
       filters,
       fetchFilters: jest.fn(),
-      clearFilters: jest.fn()
+      clearFilters: jest.fn(),
     };
-    const wrapper = mount(<FiltersLoader {...props} />);
-    expect(props.fetchFilters.mock.calls.length).toBe(1);
-    expect(props.fetchFilters.mock.calls[0][0]).toEqual({ filters });
-    wrapper.unmount();
-    expect(props.fetchFilters.mock.calls.length).toBe(1);
+    const rendered = render(<FiltersLoader {...props} />);
+    await waitForLoad(rendered);
+
+    expect(props.fetchFilters).toHaveBeenCalledTimes(1);
+    expect(props.fetchFilters).toHaveBeenCalledWith({ filters });
+    rendered.unmount();
+    expect(props.fetchFilters).toHaveBeenCalledTimes(1);
   });
 
-  it("dispatches clearFilters on unmount", () => {
+  it("calls clearFilters when component unmounts but not when it mounts", async () => {
     const props = {
       filters,
       fetchFilters: jest.fn(),
-      clearFilters: jest.fn()
+      clearFilters: jest.fn(),
     };
-    const wrapper = mount(<FiltersLoader {...props} />);
-    expect(props.clearFilters.mock.calls.length).toBe(0);
-    wrapper.unmount();
-    expect(props.clearFilters.mock.calls.length).toBe(1);
+    const rendered = render(<FiltersLoader {...props} />);
+    await waitForLoad(rendered);
+
+    expect(props.clearFilters).toHaveBeenCalledTimes(0);
+    rendered.unmount();
+    expect(props.clearFilters).toHaveBeenCalledTimes(1);
   });
 
-  it("dispatches clearSort on unmount if present", () => {
+  it("calls clearSort when component unmounts if present", async () => {
     const props = {
       filters,
       fetchFilters: jest.fn(),
       clearFilters: jest.fn(),
-      clearSort: jest.fn()
+      clearSort: jest.fn(),
     };
-    const wrapper = mount(<FiltersLoader {...props} />);
-    wrapper.unmount();
-    expect(props.clearSort.mock.calls.length).toBe(1);
+    const rendered = render(<FiltersLoader {...props} />);
+    await waitForLoad(rendered);
+
+    rendered.unmount();
+    expect(props.clearSort).toHaveBeenCalledTimes(1);
   });
 });

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

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

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

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

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

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

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

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

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

@@ -1,4 +1,3 @@
-import React from "react";
 import { render } from "@truedat/test/render";
 import Hierarchy from "../Hierarchy";
 import en from "../../../../df/src/messages/en";

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

@@ -1,4 +1,3 @@
-import React from "react";
 import { waitFor } from "@testing-library/react";
 import userEvent from "@testing-library/user-event";
 import { render } from "@truedat/test/render";
@@ -28,8 +27,10 @@ const hierarchy = {
   ],
 };
 
-jest.mock("@truedat/df/hooks/useHierarchies", () => {
-  const originalModule = jest.requireActual("@truedat/df/hooks/useHierarchies");
+jest.mock("@truedat/core/hooks/useHierarchies", () => {
+  const originalModule = jest.requireActual(
+    "@truedat/core/hooks/useHierarchies"
+  );
 
   return {
     __esModule: true,
@@ -42,6 +43,7 @@ jest.mock("@truedat/df/hooks/useHierarchies", () => {
 });
 
 describe("<HierarchyFilterDropdown />", () => {
+  const user = userEvent.setup({ delay: null });
   const toggleFilterValue = jest.fn();
   const openFilter = jest.fn();
   const closeFilter = jest.fn();
@@ -96,19 +98,19 @@ describe("<HierarchyFilterDropdown />", () => {
       }
     );
 
-    userEvent.click(getByRole("listbox"));
+    await user.click(getByRole("listbox"));
 
-    userEvent.click(container.querySelector('[class="chevron right icon"]'));
+    await user.click(container.querySelector('[class="chevron right icon"]'));
     await waitFor(() => {
       expect(getByRole("option", { name: /bar/i })).toBeTruthy();
     });
-    userEvent.click(container.querySelector('[class="chevron down icon"]'));
+    await user.click(container.querySelector('[class="chevron down icon"]'));
     await waitFor(() => {
       expect(queryByText(/bar/)).toBeFalsy();
     });
-    userEvent.click(container.querySelector('[class="chevron right icon"]'));
+    await user.click(container.querySelector('[class="chevron right icon"]'));
     // Select value
-    userEvent.click(getByRole("option", { name: /bar/i }));
+    await user.click(getByRole("option", { name: /bar/i }));
     await waitFor(() => {
       expect(toggleFilterValue).toHaveBeenCalledWith({
         filter,
@@ -119,13 +121,13 @@ describe("<HierarchyFilterDropdown />", () => {
       <HierarchyFilterDropdown {...{ ...props, activeValues: ["123_2"] }} />
     );
     // Unselect
-    userEvent.click(getByRole("option", { name: /bar/i }));
+    await user.click(getByRole("option", { name: /bar/i }));
     await waitFor(() => {
       expect(toggleFilterValue).toHaveBeenCalledWith({ filter, value: [] });
     });
     // Select parent
     rerender(<HierarchyFilterDropdown {...{ ...props, activeValues: [] }} />);
-    userEvent.click(getByRole("option", { name: /foo/i }));
+    await user.click(getByRole("option", { name: /foo/i }));
     await waitFor(() => {
       expect(toggleFilterValue).toHaveBeenCalledWith({
         filter,
@@ -138,7 +140,7 @@ describe("<HierarchyFilterDropdown />", () => {
         {...{ ...props, activeValues: ["123_1", "123_2"] }}
       />
     );
-    userEvent.click(getByRole("option", { name: /bar/i }));
+    await user.click(getByRole("option", { name: /bar/i }));
     await waitFor(() => {
       expect(toggleFilterValue).toHaveBeenCalledWith({
         filter,
@@ -146,7 +148,7 @@ describe("<HierarchyFilterDropdown />", () => {
       });
     });
     // Delete filter
-    userEvent.click(container.querySelector('[class="delete icon"]'));
+    await user.click(container.querySelector('[class="delete icon"]'));
     await waitFor(() => {
       expect(removeFilter).toBeCalledTimes(1);
     });
@@ -173,7 +175,7 @@ describe("<HierarchyFilterDropdown />", () => {
       }
     );
 
-    userEvent.click(getByRole("listbox"));
+    await user.click(getByRole("listbox"));
 
     await waitFor(() => {
       expect(getByRole("option", { name: /foo/i })).toBeTruthy();
@@ -181,7 +183,7 @@ describe("<HierarchyFilterDropdown />", () => {
     });
 
     const input = container.querySelector('[type="text"]');
-    userEvent.type(input, "bar");
+    await user.type(input, "bar");
 
     await waitFor(() => {
       expect(getByRole("option", { name: /bar/i })).toBeTruthy();

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

@@ -1,5 +1,4 @@
 import _ from "lodash/fp";
-import React from "react";
 import { render } from "@truedat/test/render";
 import HierarchyNodeFinder from "../HierarchyNodeFinder";
 

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

@@ -1,9 +1,7 @@
-import React from "react";
-import { waitFor } from "@testing-library/react";
 import userEvent from "@testing-library/user-event";
-import { render } from "@truedat/test/render";
+import { waitFor } from "@testing-library/react";
+import { render, waitForLoad } from "@truedat/test/render";
 import HierarchySelector from "../HierarchySelector";
-import en from "../../messages/en";
 
 const hierarchy = {
   id: 123,
@@ -21,13 +19,15 @@ const hierarchy = {
   ],
 };
 
-jest.mock("react-router-dom", () => ({
-  ...jest.requireActual("react-router-dom"),
+jest.mock("react-router", () => ({
+  ...jest.requireActual("react-router"),
   useParams: () => ({ id: 123 }),
 }));
 
-jest.mock("@truedat/df/hooks/useHierarchies", () => {
-  const originalModule = jest.requireActual("@truedat/df/hooks/useHierarchies");
+jest.mock("@truedat/core/hooks/useHierarchies", () => {
+  const originalModule = jest.requireActual(
+    "@truedat/core/hooks/useHierarchies"
+  );
 
   return {
     __esModule: true,
@@ -39,14 +39,6 @@ jest.mock("@truedat/df/hooks/useHierarchies", () => {
   };
 });
 
-const renderOpts = {
-  messages: {
-    en: {
-      ...en,
-    },
-  },
-  fallback: "lazy",
-};
 const props = {
   hierarchy,
   loading: false,
@@ -58,33 +50,34 @@ const props = {
 
 describe("<HierarchySelector />", () => {
   it("matches latest snapshot", async () => {
-    const { container, queryByText } = render(
-      <HierarchySelector {...props} />,
-      renderOpts
+    const rendered = render(<HierarchySelector {...props} />);
+    await waitForLoad(rendered);
+
+    await waitFor(() =>
+      expect(rendered.queryByText(/foo/i)).toBeInTheDocument()
     );
-    await waitFor(() => {
-      expect(queryByText(/foo/)).toBeInTheDocument();
-    });
-    expect(container).toMatchSnapshot();
+    expect(rendered.container).toMatchSnapshot();
   });
 
   it("calls onChange with selected values", async () => {
-    const { getByText, getByRole } = render(
-      <HierarchySelector {...props} />,
-      renderOpts
-    );
+    const rendered = render(<HierarchySelector {...props} />);
+    await waitForLoad(rendered);
+
+    const user = userEvent.setup({ delay: null });
 
-    await waitFor(() => {
-      expect(getByText(/Select Hierarchies/)).toBeTruthy();
-    });
+    await waitFor(() =>
+      expect(
+        rendered.queryByText(/hierarchy.multiple.placeholder/i)
+      ).toBeInTheDocument()
+    );
 
-    userEvent.click(getByText(/Select Hierarchies/));
+    await user.click(rendered.getByText(/hierarchy.multiple.placeholder/i));
 
-    await waitFor(() => {
-      expect(getByRole("option", { name: /foo/i })).toBeTruthy();
-    });
+    await waitFor(() =>
+      expect(rendered.getByRole("option", { name: /foo/i })).toBeInTheDocument()
+    );
 
-    userEvent.click(getByRole("option", { name: /foo/i }));
+    await user.click(rendered.getByRole("option", { name: /foo/i }));
     expect(props.onChange.mock.calls.length).toBe(1);
     expect(props.onChange.mock.calls[0][1]).toEqual({ value: [1] });
   });

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

@@ -1,35 +1,35 @@
-import React from "react";
-import { shallow, mount } from "enzyme";
-import { MemoryRouter } from "react-router-dom";
+import userEvent from "@testing-library/user-event";
+import { render, waitForLoad } from "@truedat/test/render";
 import { HistoryBackButton } from "../HistoryBackButton";
 
-const mockHistory = {
-  goBack: jest.fn()
-};
-
-jest.mock("react-router-dom", () => ({
-  ...jest.requireActual("react-router-dom"),
-  useHistory: () => mockHistory
+const mockNavigate = jest.fn();
+jest.mock("react-router", () => ({
+  ...jest.requireActual("react-router"),
+  useNavigate: () => mockNavigate,
 }));
 
 describe("<HistoryBackButton />", () => {
   const content = "Cancel";
   const props = { content };
 
-  it("matches the latest snapshot", () => {
-    const wrapper = shallow(<HistoryBackButton {...props} />);
-    expect(wrapper).toMatchSnapshot();
+  it("matches the latest snapshot", async () => {
+    const rendered = render(<HistoryBackButton {...props} />);
+    await waitForLoad(rendered);
+    expect(rendered.container).toMatchSnapshot();
   });
 
-  it("prevents submit and calls history.goBack when clicked", () => {
-    const e = { preventDefault: jest.fn() };
-    const wrapper = mount(
-      <MemoryRouter>
-        <HistoryBackButton {...props} />
-      </MemoryRouter>
-    );
-    wrapper.find("HistoryBackButton").simulate("click", e);
-    expect(e.preventDefault.mock.calls.length).toBe(1);
-    expect(mockHistory.goBack).toHaveBeenCalledTimes(1);
+  it("prevents submit and navigates back when clicked", async () => {
+    const rendered = render(<HistoryBackButton {...props} />);
+    await waitForLoad(rendered);
+
+    const user = userEvent.setup({ delay: null });
+    const preventDefault = jest.fn();
+
+    const button = rendered.getByText(/cancel/i);
+    button.addEventListener("click", preventDefault);
+
+    await user.click(button);
+    expect(preventDefault).toHaveBeenCalled();
+    expect(mockNavigate).toHaveBeenCalledWith(-1);
   });
 });

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

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

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

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

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

@@ -1,10 +1,9 @@
-import React from "react";
-import { shallow } from "enzyme";
+import { render } from "@truedat/test/render";
 import { Loading } from "../Loading";
 
 describe("<Loading />", () => {
-  it("matches the latest snapshot", () => {
-    const wrapper = shallow(<Loading inline="centered" />);
-    expect(wrapper).toMatchSnapshot();
+  it("matches the latest snapshot", async () => {
+    const rendered = render(<Loading inline="centered" />);
+    expect(rendered.container).toMatchSnapshot();
   });
 });

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

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

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

@@ -1,4 +1,3 @@
-import React from "react";
 import userEvent from "@testing-library/user-event";
 import { render } from "@truedat/test/render";
 import messages from "@truedat/core/messages";

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

@@ -1,12 +1,10 @@
-import React from "react";
-import { shallow } from "enzyme";
+import { render, waitForLoad } from "@truedat/test/render";
 import { OptionGroup } from "../OptionGroup";
 
 describe("<OptionGroup />", () => {
-  it("matches the latest snapshot", () => {
-    const wrapper = shallow(<OptionGroup />);
-    expect(wrapper).toMatchSnapshot();
+  it("matches the latest snapshot", async () => {
+    const rendered = render(<OptionGroup options={[]} />);
+    await waitForLoad(rendered);
+    expect(rendered.container).toMatchSnapshot();
   });
-
-  // TODO
 });

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

@@ -1,33 +1,39 @@
-import React from "react";
-import { shallow } from "enzyme";
-import { Pagination as SemanticPagination } from "semantic-ui-react";
+import { render, waitForLoad } from "@truedat/test/render";
 import { Pagination, MAX_PAGES } from "../Pagination";
 
 describe("<Pagination />", () => {
   const props = {
     activePage: 1,
-    selectPage: jest.fn()
+    selectPage: jest.fn(),
   };
 
-  it("matches the latest snapshot", () => {
-    const wrapper = shallow(<Pagination totalPages={10} {...props} />);
-    expect(wrapper).toMatchSnapshot();
+  it("matches the latest snapshot", async () => {
+    const rendered = render(<Pagination totalPages={10} {...props} />);
+    await waitForLoad(rendered);
+    expect(rendered.container).toMatchSnapshot();
   });
 
-  it("matches the latest snapshot (totalPages > 100)", () => {
-    const wrapper = shallow(<Pagination totalPages={200} {...props} />);
-    expect(wrapper).toMatchSnapshot();
+  it("matches the latest snapshot (totalPages > 100)", async () => {
+    const rendered = render(<Pagination totalPages={200} {...props} />);
+    await waitForLoad(rendered);
+    expect(rendered.container).toMatchSnapshot();
   });
 
-  it("has no last item if totalPages exceeds page limit", () => {
-    const wrapper = shallow(
+  it("has no last item if totalPages exceeds page limit", async () => {
+    const rendered = render(
       <Pagination totalPages={MAX_PAGES + 1} {...props} />
     );
-    expect(wrapper.find(SemanticPagination).prop("lastItem")).toBeNull();
+    await waitForLoad(rendered);
+    const pagination = rendered.container.querySelector(".ui.pagination");
+    expect(pagination.querySelector("[aria-label='Last item']")).toBeNull();
   });
 
-  it("has a last item if totalPages is within the page limit", () => {
-    const wrapper = shallow(<Pagination totalPages={MAX_PAGES} {...props} />);
-    expect(wrapper.prop("lastItem")).toMatchObject({ content: "»" });
+  it("has a last item if totalPages is within the page limit", async () => {
+    const rendered = render(<Pagination totalPages={MAX_PAGES} {...props} />);
+    await waitForLoad(rendered);
+    const pagination = rendered.container.querySelector(".ui.pagination");
+    expect(
+      pagination.querySelector("[aria-label='Last item']")
+    ).toHaveTextContent("»");
   });
 });

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

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

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

@@ -1,17 +1,12 @@
-import React from "react";
-import { mount } from "enzyme";
-import { MemoryRouter } from "react-router-dom";
+import { render, waitForLoad } from "@truedat/test/render";
 import { Redirector } from "../Redirector";
 
 describe("<Redirector />", () => {
-  it("dispatches clearRedirect on mount", () => {
+  it("dispatches clearRedirect on mount", async () => {
     const clearRedirect = jest.fn();
     const props = { clearRedirect };
-    mount(
-      <MemoryRouter>
-        <Redirector {...props} />
-      </MemoryRouter>
-    );
-    expect(clearRedirect.mock.calls).toHaveLength(1);
+    const rendered = render(<Redirector {...props} />);
+    await waitForLoad(rendered);
+    expect(clearRedirect).toHaveBeenCalledTimes(1);
   });
 });

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

@@ -1,16 +1,12 @@
-import React from "react";
+import { waitFor } from "@testing-library/react";
 import userEvent from "@testing-library/user-event";
-import { render } from "@truedat/test/render";
-import { intl } from "@truedat/test/intl-stub";
+import { render, waitForLoad } from "@truedat/test/render";
 import { useAclEntries } from "@truedat/core/hooks/useAclEntries";
 import { ResourceMembers } from "../ResourceMembers";
 
-// workaround for enzyme issue with React.useContext
-// see https://github.com/airbnb/enzyme/issues/2176#issuecomment-532361526
-jest.spyOn(React, "useContext").mockImplementation(() => intl);
 jest.mock("@truedat/core/hooks/useAclEntries");
-jest.mock("react-router-dom", () => ({
-  ...jest.requireActual("react-router-dom"),
+jest.mock("react-router", () => ({
+  ...jest.requireActual("react-router"),
 }));
 
 jest.mock("@truedat/core/hooks/useAclEntries", () => ({
@@ -73,7 +69,7 @@ describe("<ResourceMembers />", () => {
     ],
   };
 
-  const props = { type: "domain", id: 1 };
+  const props = { type: "domain", id: "1" };
 
   useAclEntries.mockReturnValue({
     data: { ...aclEntries, actions: { canCreate: true } },
@@ -81,36 +77,49 @@ describe("<ResourceMembers />", () => {
     mutate: jest.fn(),
   });
 
-  it("matches the latest snapshot", () => {
-    const { container } = render(<ResourceMembers {...props} />);
-    expect(container).toMatchSnapshot();
+  it("matches the latest snapshot", async () => {
+    const rendered = render(<ResourceMembers {...props} />);
+    await waitForLoad(rendered);
+    expect(rendered.container).toMatchSnapshot();
   });
 
-  it("filters users and groups according to search filter", () => {
-    const { getByRole } = render(<ResourceMembers {...props} />);
+  it("filters users and groups according to search filter", async () => {
+    const rendered = render(<ResourceMembers {...props} />);
+    await waitForLoad(rendered);
 
-    const input = getByRole("textbox");
+    const input = rendered.getByRole("textbox");
+    const user = userEvent.setup({ delay: null });
 
-    userEvent.type(input, "data");
+    await user.type(input, "data");
     expect(document.getElementsByClassName("card").length).toBe(2);
 
-    userEvent.type(input, " owner");
+    await user.type(input, " owner");
     expect(document.getElementsByClassName("card").length).toBe(1);
   });
 
-  it("renders users and groups grouped by role name", () => {
-    const { getByRole, queryByRole } = render(<ResourceMembers {...props} />);
+  it("renders users and groups grouped by role name", async () => {
+    const rendered = render(<ResourceMembers {...props} />);
+    await waitForLoad(rendered);
 
-    expect(getByRole("heading", { name: /data_owner/i })).toBeInTheDocument();
-    expect(getByRole("heading", { name: /datos a/i })).toBeInTheDocument();
-    expect(getByRole("heading", { name: /last r/i })).toBeInTheDocument();
+    expect(
+      rendered.getByRole("heading", { name: /data_owner/i })
+    ).toBeInTheDocument();
+    expect(
+      rendered.getByRole("heading", { name: /datos a/i })
+    ).toBeInTheDocument();
+    expect(
+      rendered.getByRole("heading", { name: /last r/i })
+    ).toBeInTheDocument();
 
-    const input = getByRole("textbox");
+    const input = rendered.getByRole("textbox");
+    const user = userEvent.setup({ delay: null });
 
-    userEvent.type(input, "data");
+    await user.type(input, "data");
 
-    expect(getByRole("heading", { name: /data_owner/i })).toBeInTheDocument();
-    expect(queryByRole("heading", { name: /datos a/i })).toBeNull();
-    expect(queryByRole("heading", { name: /last r/i })).toBeNull();
+    expect(
+      rendered.getByRole("heading", { name: /data_owner/i })
+    ).toBeInTheDocument();
+    expect(rendered.queryByRole("heading", { name: /datos a/i })).toBeNull();
+    expect(rendered.queryByRole("heading", { name: /last r/i })).toBeNull();
   });
 });

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

@@ -1,11 +1,10 @@
-import React from "react";
 import { render } from "@truedat/test/render";
 import { ResourceMembersActions } from "../ResourceMembersActions";
 
 const props = {
   resource: {
     type: "domain",
-    id: 1,
+    id: "1",
   },
   actions: {
     canCreate: true,