@truedat/dd 7.5.9 → 7.5.11

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

@@ -1,15 +1,189 @@
 import React from "react";
-import { shallow } from "enzyme";
-import { DictionaryRoutes } from "../DictionaryRoutes";
+import { render, waitForLoad } from "@truedat/test/render";
+import DictionaryRoutes from "../DictionaryRoutes";
+import { useAuthorized } from "@truedat/core/hooks/useAuthorized";
+import {
+  BUCKET_VIEW_CONFIG_EDIT,
+  BUCKET_VIEW_CONFIG_NEW,
+  BUCKET_VIEW_CONFIGS,
+  STRUCTURES,
+  SYSTEMS,
+  STRUCTURE_TAGS,
+  STRUCTURE_TYPES,
+  STRUCTURES_UPLOAD_EVENTS,
+  PENDING_STRUCTURE_NOTES,
+  REFERENCE_DATASETS,
+  PROFILE_GROUP,
+  PROFILE_EXECUTION,
+  TASKS,
+} from "@truedat/core/routes";
 
-jest.mock("react-router-dom", () => ({
-  ...jest.requireActual("react-router-dom"),
-  useRouteMatch: () => ({ path: "/systems" })
+jest.mock("@truedat/core/hooks/useAuthorized", () => ({
+  useAuthorized: jest.fn(() => true),
 }));
 
+jest.mock("@truedat/core/components/SystemsLoader", () => () => (
+  <div>SystemsLoader</div>
+));
+jest.mock("@truedat/core/components/TemplatesLoader", () => () => (
+  <div>TemplatesLoader</div>
+));
+
+jest.mock("../CatalogViewConfigs", () => () => <div>CatalogViewConfigs</div>);
+jest.mock("../CatalogViewConfigForm", () => ({
+  CatalogViewConfigFormConnected: () => (
+    <div>CatalogViewConfigFormConnected</div>
+  ),
+  CatalogViewConfigFormLoader: () => <div>CatalogViewConfigFormLoader</div>,
+}));
+jest.mock("../PendingStructureNotes", () => () => (
+  <div>PendingStructureNotes</div>
+));
+jest.mock("../ProfileExecution", () => () => <div>ProfileExecution</div>);
+jest.mock("../ProfileExecutionBreadcrumbs", () => () => (
+  <div>ProfileExecutionBreadcrumbs</div>
+));
+jest.mock("../ProfileExecutionLoader", () => () => (
+  <div>ProfileExecutionLoader</div>
+));
+jest.mock("../ProfileGroupLoader", () => () => <div>ProfileGroupLoader</div>);
+jest.mock("../ProfileGroup", () => () => <div>ProfileGroup</div>);
+jest.mock("../ReferenceDatasetRoutes", () => () => (
+  <div>ReferenceDatasetRoutes</div>
+));
+jest.mock("../StructuresRoutes", () => () => <div>StructuresRoutes</div>);
+jest.mock("../StructuresUploadEvents", () => () => (
+  <div>StructuresUploadEvents</div>
+));
+jest.mock("../StructureTypesLoader", () => () => (
+  <div>StructureTypesLoader</div>
+));
+jest.mock("../StructureTypesRoutes", () => () => (
+  <div>StructureTypesRoutes</div>
+));
+jest.mock("../SystemsRoutes", () => () => <div>SystemsRoutes</div>);
+jest.mock("../TagsRoutes", () => () => <div>TagsRoutes</div>);
+jest.mock("../TasksRoutes", () => () => <div>TasksRoutes</div>);
+jest.mock("../StructuresView", () => () => <div>StructuresView</div>);
+jest.mock("../BucketView", () => () => <div>BucketView</div>);
+
 describe("<DictionaryRoutes />", () => {
-  it("matches the latest snapshot", () => {
-    const wrapper = shallow(<DictionaryRoutes />);
-    expect(wrapper).toMatchSnapshot();
+  it("renders correctly with default route", async () => {
+    const rendered = render(<DictionaryRoutes />);
+    await waitForLoad(rendered);
+    expect(rendered.container).toMatchSnapshot();
+  });
+
+  it("renders correctly with structures route", async () => {
+    const rendered = render(<DictionaryRoutes />, {
+      routes: [STRUCTURES],
+    });
+    await waitForLoad(rendered);
+    expect(rendered.container).toMatchSnapshot();
+  });
+
+  it("renders correctly with systems route", async () => {
+    const rendered = render(<DictionaryRoutes />, {
+      routes: [SYSTEMS],
+    });
+    await waitForLoad(rendered);
+    expect(rendered.container).toMatchSnapshot();
+  });
+
+  it("renders correctly with reference datasets route", async () => {
+    const rendered = render(<DictionaryRoutes />, {
+      routes: [REFERENCE_DATASETS],
+    });
+    await waitForLoad(rendered);
+    expect(rendered.container).toMatchSnapshot();
+  });
+
+  it("renders correctly with structure tags route", async () => {
+    const rendered = render(<DictionaryRoutes />, {
+      routes: [STRUCTURE_TAGS],
+    });
+    await waitForLoad(rendered);
+    expect(rendered.container).toMatchSnapshot();
+  });
+
+  it("renders correctly with tasks route", async () => {
+    const rendered = render(<DictionaryRoutes />, {
+      routes: [TASKS],
+    });
+    await waitForLoad(rendered);
+    expect(rendered.container).toMatchSnapshot();
+  });
+
+  it("renders correctly with structure types route", async () => {
+    const rendered = render(<DictionaryRoutes />, {
+      routes: [STRUCTURE_TYPES],
+    });
+    await waitForLoad(rendered);
+    expect(rendered.container).toMatchSnapshot();
+  });
+
+  it("renders correctly with structure notes route", async () => {
+    const rendered = render(<DictionaryRoutes />, {
+      routes: [PENDING_STRUCTURE_NOTES],
+    });
+    await waitForLoad(rendered);
+    expect(rendered.container).toMatchSnapshot();
+  });
+
+  it("renders correctly with bucket view configs route", async () => {
+    const rendered = render(<DictionaryRoutes />, {
+      routes: [BUCKET_VIEW_CONFIGS],
+    });
+    await waitForLoad(rendered);
+    expect(rendered.container).toMatchSnapshot();
+  });
+
+  it("renders correctly with bucket view config edit route", async () => {
+    const rendered = render(<DictionaryRoutes />, {
+      routes: [BUCKET_VIEW_CONFIG_EDIT],
+    });
+    await waitForLoad(rendered);
+    expect(rendered.container).toMatchSnapshot();
+  });
+
+  it("renders correctly with bucket view config new route", async () => {
+    const rendered = render(<DictionaryRoutes />, {
+      routes: [BUCKET_VIEW_CONFIG_NEW],
+    });
+    await waitForLoad(rendered);
+    expect(rendered.container).toMatchSnapshot();
+  });
+
+  it("renders correctly with structures upload events route", async () => {
+    const rendered = render(<DictionaryRoutes />, {
+      routes: [STRUCTURES_UPLOAD_EVENTS],
+    });
+    await waitForLoad(rendered);
+    expect(rendered.container).toMatchSnapshot();
+  });
+
+  it("renders correctly with profile group route", async () => {
+    const rendered = render(<DictionaryRoutes />, {
+      routes: [PROFILE_GROUP],
+    });
+    await waitForLoad(rendered);
+    expect(rendered.container).toMatchSnapshot();
+  });
+
+  it("renders correctly with profile execution route", async () => {
+    const rendered = render(<DictionaryRoutes />, {
+      routes: [PROFILE_EXECUTION],
+    });
+    await waitForLoad(rendered);
+    expect(rendered.container).toMatchSnapshot();
+  });
+
+  it("renders unauthorized component when not authorized", async () => {
+    useAuthorized.mockReturnValueOnce(false);
+    const rendered = render(<DictionaryRoutes />, {
+      routes: [STRUCTURES],
+    });
+    await waitForLoad(rendered);
+    expect(rendered.container).toMatchSnapshot();
   });
 });

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

@@ -1,7 +1,6 @@
-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 { EditDomainForm } from "../EditDomainForm";
 
@@ -31,38 +30,35 @@ describe("<EditDomainForm />", () => {
     jest.clearAllMocks();
   });
 
-  it("matches the latest snapshot", () => {
-    const { container } = render(<EditDomainForm {...props} />, renderOpts);
-    expect(container).toMatchSnapshot();
+  it("matches the latest snapshot", async () => {
+    const rendered = render(<EditDomainForm {...props} />, renderOpts);
+    await waitForLoad(rendered);
+    expect(rendered.container).toMatchSnapshot();
   });
 
   it("enables send button when selecting domain", async () => {
-    const { getByRole, findByText } = render(
-      <EditDomainForm {...props} />,
-      renderOpts
-    );
+    const rendered = render(<EditDomainForm {...props} />, renderOpts);
+    await waitForLoad(rendered);
 
-    const button = getByRole("button", { name: /update/i });
+    const button = rendered.getByRole("button", { name: /update/i });
 
     expect(button).toBeDisabled();
-    userEvent.click(await findByText("fooDomain"));
+    userEvent.click(await rendered.findByText(/foodomain/i));
     await waitFor(() => {
       expect(button).not.toBeDisabled();
     });
   });
 
   it("invokes function when send button clicked", async () => {
-    const { getByRole, findByText } = render(
-      <EditDomainForm {...props} />,
-      renderOpts
-    );
+    const rendered = render(<EditDomainForm {...props} />, renderOpts);
+    await waitForLoad(rendered);
 
-    const button = getByRole("button", { name: /update/i });
-    const checkbox = getByRole("checkbox");
+    const button = rendered.getByRole("button", { name: /update/i });
+    const checkbox = rendered.getByRole("checkbox");
 
     expect(button).toBeDisabled();
     expect(checkbox).toBeChecked();
-    userEvent.click(await findByText("fooDomain"));
+    userEvent.click(await rendered.findByText(/foodomain/i));
     await waitFor(() => {
       expect(button).not.toBeDisabled();
     });
@@ -80,17 +76,15 @@ describe("<EditDomainForm />", () => {
   });
 
   it("invokes function when send button clicked with modified inheritance", async () => {
-    const { getByRole, findByText } = render(
-      <EditDomainForm {...props} />,
-      renderOpts
-    );
+    const rendered = render(<EditDomainForm {...props} />, renderOpts);
+    await waitForLoad(rendered);
 
-    const button = getByRole("button", { name: /update/i });
-    const checkbox = getByRole("checkbox");
+    const button = rendered.getByRole("button", { name: /update/i });
+    const checkbox = rendered.getByRole("checkbox");
 
     expect(button).toBeDisabled();
     expect(checkbox).toBeChecked();
-    userEvent.click(await findByText("fooDomain"));
+    userEvent.click(await rendered.findByText(/foodomain/i));
     userEvent.click(checkbox);
     await waitFor(() => {
       expect(button).not.toBeDisabled();
@@ -109,18 +103,16 @@ describe("<EditDomainForm />", () => {
   });
 
   it("send selected multiple domain ids when button clicked", async () => {
-    const { getByRole, findByText } = render(
-      <EditDomainForm {...props} />,
-      renderOpts
-    );
+    const rendered = render(<EditDomainForm {...props} />, renderOpts);
+    await waitForLoad(rendered);
 
-    const button = getByRole("button", { name: /update/i });
-    const checkbox = getByRole("checkbox");
+    const button = rendered.getByRole("button", { name: /update/i });
+    const checkbox = rendered.getByRole("checkbox");
 
     expect(button).toBeDisabled();
     expect(checkbox).toBeChecked();
-    userEvent.click(await findByText("barDomain"));
-    userEvent.click(await findByText("fooDomain"));
+    userEvent.click(await rendered.findByText(/bardomain/i));
+    userEvent.click(await rendered.findByText(/foodomain/i));
     await waitFor(() => {
       expect(button).not.toBeDisabled();
     });

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

@@ -1,19 +1,16 @@
-import React from "react";
-import { intl } from "@truedat/test/intl-stub";
-import { shallow } from "enzyme";
+import { render, waitForLoad } from "@truedat/test/render";
 import { EditDomainPopup } from "../EditDomainPopup";
 
-// workaround for enzyme issue with React.useContext
-// see https://github.com/airbnb/enzyme/issues/2176#issuecomment-532361526
-jest.spyOn(React, "useContext").mockImplementation(() => intl);
-
 describe("<EditDomainPopup />", () => {
-  const props = {
-    userPermissions: { update: true, update_domain: true }
+  const renderOpts = {
+    state: {
+      userPermissions: { update: true, update_domain: true },
+    },
   };
 
-  it("matches the latest snapshot", () => {
-    const wrapper = shallow(<EditDomainPopup {...props} />);
-    expect(wrapper).toMatchSnapshot();
+  it("matches the latest snapshot", async () => {
+    const rendered = render(<EditDomainPopup />, renderOpts);
+    await waitForLoad(rendered);
+    expect(rendered.container).toMatchSnapshot();
   });
 });

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

@@ -1,10 +1,8 @@
-import React from "react";
 import userEvent from "@testing-library/user-event";
-import { render } from "@truedat/test/render";
-import { act } from "react-dom/test-utils";
-import en from "../../messages/en";
-
+import { act } from "react";
+import { render, waitForLoad } from "@truedat/test/render";
 import FilteredNavLoader, { FilteredNav } from "../FilteredNav";
+import en from "../../messages/en";
 
 jest.mock("../../hooks/useBucketStructures", () => {
   const originalModule = jest.requireActual("../../hooks/useBucketStructures");
@@ -12,8 +10,8 @@ jest.mock("../../hooks/useBucketStructures", () => {
   const { lowerDeburrTrim } = require("@truedat/core/services/sort");
 
   const data = [
-    { id: 1, name: "bank_capital" },
-    { id: 2, name: "consumorenovables" },
+    { id: "1", name: "bank_capital" },
+    { id: "2", name: "consumorenovables" },
   ];
 
   const elasticSearchMock = (collection, searchValue) => {
@@ -74,72 +72,70 @@ const renderOpts = {
 };
 
 describe("<FilteredNav />", () => {
-  it("FilterNavLoader loads from useBucketStructures and shows structures", () => {
-    const { getByText } = render(
+  it("FilterNavLoader loads from useBucketStructures and shows structures", async () => {
+    const rendered = render(
       <FilteredNavLoader navFilter={navFilter} />,
       renderOpts
     );
-    expect(getByText("bank_capital")).toBeInTheDocument();
-    expect(getByText("consumorenovables")).toBeInTheDocument();
+    await waitForLoad(rendered);
+
+    expect(rendered.getByText(/bank_capital/i)).toBeInTheDocument();
+    expect(rendered.getByText(/consumorenovables/i)).toBeInTheDocument();
   });
 
   it("StructureSearch: one element matching", async () => {
-    const { getByRole, getByText, queryByText } = render(
+    const rendered = render(
       <FilteredNavLoader navFilter={navFilter} />,
       renderOpts
     );
-    expect(getByText("bank_capital")).toBeInTheDocument();
-    expect(getByText("consumorenovables")).toBeInTheDocument();
+    await waitForLoad(rendered);
+    const user = userEvent.setup({ delay: null });
+
+    expect(rendered.getByText(/bank_capital/i)).toBeInTheDocument();
+    expect(rendered.getByText(/consumorenovables/i)).toBeInTheDocument();
 
     jest.useFakeTimers();
-    const inputSearch = getByRole("textbox");
-    userEvent.type(inputSearch, "bank");
+    await user.type(rendered.getByRole("textbox"), "bank");
     act(() => jest.runAllTimers());
-    expect(getByText("bank_capital")).toBeInTheDocument();
-    expect(queryByText("consumorenovables")).not.toBeInTheDocument();
+
+    expect(rendered.getByText(/bank_capital/i)).toBeInTheDocument();
+    expect(rendered.queryByText(/consumorenovables/i)).not.toBeInTheDocument();
   });
 
-  it("StructureSearch: no elements matching", () => {
-    const { getByRole, getByText, queryByText } = render(
+  it("StructureSearch: no elements matching", async () => {
+    const rendered = render(
       <FilteredNavLoader navFilter={navFilter} />,
       renderOpts
     );
-    expect(getByText("bank_capital")).toBeInTheDocument();
-    expect(getByText("consumorenovables")).toBeInTheDocument();
+    await waitForLoad(rendered);
+    const user = userEvent.setup({ delay: null });
+
+    expect(rendered.getByText(/bank_capital/i)).toBeInTheDocument();
+    expect(rendered.getByText(/consumorenovables/i)).toBeInTheDocument();
 
     jest.useFakeTimers();
-    const inputSearch = getByRole("textbox");
-    userEvent.type(inputSearch, "renovabless");
+    await user.type(rendered.getByRole("textbox"), "renovabless");
     act(() => jest.runAllTimers());
-    expect(queryByText("bank_capital")).not.toBeInTheDocument();
-    expect(queryByText("consumorenovables")).not.toBeInTheDocument();
-  });
 
-  // it("FilterNavLoader shows displayed/total structures message", () => {
-  //   const { queryByText, getByText, getByRole } = render(
-  //     <FilteredNavLoader navFilter={navFilter} />,
-  //     renderOpts
-  //   );
-
-  //   const inputSearch = getByRole("textbox");
-  //   expect(queryByText("1 from a total of 2")).not.toBeInTheDocument();
-  //   userEvent.type(inputSearch, "bank");
-  //   expect(getByText("1 from a total of 2")).toBeInTheDocument();
-  // });
+    expect(rendered.queryByText(/bank_capital/i)).not.toBeInTheDocument();
+    expect(rendered.queryByText(/consumorenovables/i)).not.toBeInTheDocument();
+  });
 
   it("test Alias Name Mode functionality", async () => {
     const childStructures = [
-      { id: 1, name: "bank_capital" },
-      { id: 2, name: "consumorenovables" },
+      { id: "1", name: "bank_capital" },
+      { id: "2", name: "consumorenovables" },
     ];
     const toggleStructuresAliasNameMode = jest.fn();
     const props = { toggleStructuresAliasNameMode, childStructures };
-    const { getByRole } = render(<FilteredNav {...props} />, renderOpts);
+    const rendered = render(<FilteredNav {...props} />, renderOpts);
+    await waitForLoad(rendered);
+    const user = userEvent.setup({ delay: null });
 
-    userEvent.click(getByRole("button", { name: /enable/i }));
+    await user.click(rendered.getByRole("button", { name: /enable/i }));
     expect(toggleStructuresAliasNameMode).toHaveBeenCalledWith(true);
 
-    userEvent.click(getByRole("button", { name: /disable/i }));
+    await user.click(rendered.getByRole("button", { name: /disable/i }));
     expect(toggleStructuresAliasNameMode).toHaveBeenCalledWith(false);
   });
 });

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

@@ -1,9 +1,6 @@
-import React from "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 { Grant } from "../Grant";
-import en from "../../messages/en";
 
 jest.mock("../../hooks/useGrant.js", () => {
   const originalModule = jest.requireActual("../../hooks/useGrant.js");
@@ -25,9 +22,9 @@ jest.mock("../../hooks/useGrant.js", () => {
 describe("<Grant />", () => {
   const grant = {
     data_structure: {
-      id: 2,
+      id: "2",
     },
-    id: 1,
+    id: "1",
     data_structure_version: {
       name: "foo",
     },
@@ -56,20 +53,10 @@ describe("<Grant />", () => {
     onStatusChange: jest.fn(),
   };
 
-  const renderOpts = {
-    messages: {
-      en: {
-        ...en,
-        "confirmation.yes": "yes",
-        "confirmation.no": "no",
-      },
-    },
-    fallback: "lazy",
-  };
-
-  it("matches the latest snapshot", () => {
-    const { container } = render(<Grant {...defaultProps} />, renderOpts);
-    expect(container).toMatchSnapshot();
+  it("matches the latest snapshot", async () => {
+    const rendered = render(<Grant {...defaultProps} />);
+    await waitForLoad(rendered);
+    expect(rendered.container).toMatchSnapshot();
   });
 
   it("matches the latest snapshot with manage_grant_removal action", async () => {
@@ -80,9 +67,9 @@ describe("<Grant />", () => {
         manage_grant_removal: {},
       },
     };
-    const { container, queryByText } = render(<Grant {...props} />, renderOpts);
-    await waitFor(() => expect(queryByText(/lazy/i)).not.toBeInTheDocument());
-    expect(container).toMatchSnapshot();
+    const rendered = render(<Grant {...props} />);
+    await waitForLoad(rendered);
+    expect(rendered.container).toMatchSnapshot();
   });
 
   it("matches the latest snapshot with update action", async () => {
@@ -92,23 +79,31 @@ describe("<Grant />", () => {
         update: {},
       },
     };
-    const { container, queryByText } = render(<Grant {...props} />, renderOpts);
-    await waitFor(() => expect(queryByText(/lazy/i)).not.toBeInTheDocument());
-    expect(container).toMatchSnapshot();
+    const rendered = render(<Grant {...props} />);
+    await waitForLoad(rendered);
+    expect(rendered.container).toMatchSnapshot();
   });
 
   it("on click removal onStatusChange is called", async () => {
-    const { findByText } = render(<Grant {...defaultProps} />, renderOpts);
+    const rendered = render(<Grant {...defaultProps} />);
+    await waitForLoad(rendered);
 
-    userEvent.click(await findByText("Remove"));
-    expect(await findByText("Request grant removal")).toBeInTheDocument();
+    const user = userEvent.setup({ delay: null });
+    await user.click(
+      await rendered.findByText(/grant.actions.markpendingremoval.button/i)
+    );
+    expect(
+      await rendered.findByText(
+        /grant.actions.markpendingremoval.confirmation.header/i
+      )
+    ).toBeInTheDocument();
 
-    userEvent.click(await findByText("yes"));
+    await user.click(await rendered.findByText(/yes/i));
 
     expect(defaultProps.onStatusChange).toHaveBeenLastCalledWith({
       action: "mark_pending_removal",
-      data_structure_id: 2,
-      id: 1,
+      data_structure_id: "2",
+      id: "1",
     });
   });
 
@@ -123,8 +118,10 @@ describe("<Grant />", () => {
       grant: updatedGrant,
     };
 
-    const { queryByText } = render(<Grant {...updatedProps} />, renderOpts);
-    const buttonText = queryByText("request grant change");
-    expect(buttonText).toBeNull();
+    const rendered = render(<Grant {...updatedProps} />);
+    await waitForLoad(rendered);
+    expect(
+      rendered.queryByText(/grantrequest.header.update/i)
+    ).not.toBeInTheDocument();
   });
 });