@truedat/dd 7.5.9 → 7.5.10

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

@@ -1,45 +1,51 @@
-import React from "react";
-import { shallow } from "enzyme";
+import { render, waitForLoad } from "@truedat/test/render";
 import { StructureCrumbs } from "../StructureCrumbs";
 
 describe("<StructureCrumbs />", () => {
-  const id = 123;
+  const id = "123";
   const name = "structure a";
   const version = "32";
-  const field = { id: 1, name: "field 1" };
+  const field = { id: "1", name: "field 1" };
   const ancestry = [
-    { data_structure_id: 123, name: "grandparent" },
-    { data_structure_id: 124, name: "parent" }
+    { data_structure_id: "123", name: "grandparent" },
+    { data_structure_id: "124", name: "parent" },
   ];
-  const system = { id: 42, name: "system1" };
+  const system = { id: "42", name: "system1" };
 
-  it("matches the latest snapshot (empty)", () => {
+  const renderProps = { state: { navFilter: {} } };
+
+  it("matches the latest snapshot (empty)", async () => {
     const props = {};
-    const wrapper = shallow(<StructureCrumbs {...props} />);
-    expect(wrapper).toMatchSnapshot();
+    const rendered = render(<StructureCrumbs {...props} />, renderProps);
+    await waitForLoad(rendered);
+    expect(rendered.container).toMatchSnapshot();
   });
 
-  it("matches the latest snapshot (system, ancestry and structure)", () => {
+  it("matches the latest snapshot (system, ancestry and structure)", async () => {
     const props = { ancestry, id, name, system };
-    const wrapper = shallow(<StructureCrumbs {...props} />);
-    expect(wrapper).toMatchSnapshot();
+    const rendered = render(<StructureCrumbs {...props} />, renderProps);
+    await waitForLoad(rendered);
+    expect(rendered.container).toMatchSnapshot();
   });
 
-  it("matches the latest snapshot (system, ancestry, structure and version)", () => {
+  it("matches the latest snapshot (system, ancestry, structure and version)", async () => {
     const props = { ancestry, id, name, version, system };
-    const wrapper = shallow(<StructureCrumbs {...props} />);
-    expect(wrapper).toMatchSnapshot();
+    const rendered = render(<StructureCrumbs {...props} />, renderProps);
+    await waitForLoad(rendered);
+    expect(rendered.container).toMatchSnapshot();
   });
 
-  it("matches the latest snapshot (system, ancestry, structure and field)", () => {
+  it("matches the latest snapshot (system, ancestry, structure and field)", async () => {
     const props = { ancestry, id, name, field, system };
-    const wrapper = shallow(<StructureCrumbs {...props} />);
-    expect(wrapper).toMatchSnapshot();
+    const rendered = render(<StructureCrumbs {...props} />, renderProps);
+    await waitForLoad(rendered);
+    expect(rendered.container).toMatchSnapshot();
   });
 
-  it("matches the latest snapshot (system. ancestry, structure, version and field)", () => {
+  it("matches the latest snapshot (system. ancestry, structure, version and field)", async () => {
     const props = { ancestry, id, name, version, field, system };
-    const wrapper = shallow(<StructureCrumbs {...props} />);
-    expect(wrapper).toMatchSnapshot();
+    const rendered = render(<StructureCrumbs {...props} />, renderProps);
+    await waitForLoad(rendered);
+    expect(rendered.container).toMatchSnapshot();
   });
 });

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

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

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

@@ -1,9 +1,8 @@
-import React from "react";
-import { shallow } from "enzyme";
+import { render, waitForLoad } from "@truedat/test/render";
 import { StructureEvents } from "../StructureEvents";
 
 describe("<StructureEvents />", () => {
-  it("matches the latest snapshot", () => {
+  it("matches the latest snapshot", async () => {
     const events = [
       {
         id: 1,
@@ -31,7 +30,8 @@ describe("<StructureEvents />", () => {
     const replace = jest.fn();
     const history = { replace };
     const props = { events, history, structure };
-    const wrapper = shallow(<StructureEvents {...props} />);
-    expect(wrapper).toMatchSnapshot();
+    const rendered = render(<StructureEvents {...props} />);
+    await waitForLoad(rendered);
+    expect(rendered.container).toMatchSnapshot();
   });
 });

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

@@ -1,4 +1,3 @@
-import React from "react";
 import { render } from "@truedat/test/render";
 import { StructureFieldRow } from "../StructureFieldRow";
 import { defaultStructureFieldColumns } from "../../selectors/getStructureFieldColumns";
@@ -6,14 +5,14 @@ import { defaultStructureFieldColumns } from "../../selectors/getStructureFieldC
 describe("<StructureFieldRow />", () => {
   it("matches the latest snapshot", () => {
     const field = {
-      data_structure_id: 1,
+      data_structure_id: "1",
       name: "f1",
       description: "dd",
-      structureId: 123,
-      version: 12,
+      structureId: "123",
+      version: "12",
       links: [
-        { business_concept_version_id: 1, name: "foo", resource_id: 1 },
-        { business_concept_version_id: 2, name: "Bar", resource_id: 2 },
+        { business_concept_version_id: "1", name: "foo", resource_id: "1" },
+        { business_concept_version_id: "2", name: "Bar", resource_id: "2" },
       ],
       metadata: {
         type: "tp",
@@ -37,14 +36,14 @@ describe("<StructureFieldRow />", () => {
 
   it("row prints column fields", () => {
     const field = {
-      data_structure_id: 1,
+      data_structure_id: "1",
       name: "f1",
       description: "dd",
-      structureId: 123,
-      version: 12,
+      structureId: "123",
+      version: "12",
       links: [
-        { business_concept_version_id: 1, name: "foo", resource_id: 1 },
-        { business_concept_version_id: 2, name: "Bar", resource_id: 2 },
+        { business_concept_version_id: "1", name: "foo", resource_id: "1" },
+        { business_concept_version_id: "2", name: "Bar", resource_id: "2" },
       ],
       metadata: {
         nullable: true,

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

@@ -1,4 +1,3 @@
-import React from "react";
 import { render } from "@truedat/test/render";
 import { useQuery } from "@apollo/client";
 import StructureFields from "../StructureFields";
@@ -10,11 +9,11 @@ jest.mock("@apollo/client", () => ({
 
 const page = [
   {
-    id: 123,
-    data_structure_id: 1,
+    id: "123",
+    data_structure_id: "1",
     name: "foo",
     description: "desc1",
-    links: [{ resource_id: 123 }],
+    links: [{ resource_id: "123" }],
     metadata: {
       nullable: true,
       precision: "22",
@@ -22,8 +21,8 @@ const page = [
     },
   },
   {
-    id: 122,
-    data_structure_id: 2,
+    id: "122",
+    data_structure_id: "2",
     name: "bar",
     description: "desc2",
     external_id: "foo",

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

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

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

@@ -1,5 +1,4 @@
-import React, { Suspense } from "react";
-import { render } from "@truedat/test/render";
+import { render, waitForLoad } from "@truedat/test/render";
 import { singleTemplateMock } from "@truedat/test/mocks";
 import { StructureGrantCartInformation } from "../StructureGrantCartInformation";
 
@@ -38,27 +37,16 @@ describe("<StructureGrantCartInformation />", () => {
     updateGrantRequestTemplateContent,
   };
 
-  const messages = {
-    en: {
-      "structure.grant.cart.template": "template",
-      "structure.grant.cart.template.placeholder": "Select request type",
-      "structureType.template": "Type",
-    },
-  };
-
   const renderOpts = {
     mocks: [singleTemplateMock(variables)],
-    messages,
-    fallback: "lazy",
   };
 
-  it("matches the latest snapshot", () => {
-    const { container } = render(
-      <Suspense fallback={null}>
-        <StructureGrantCartInformation {...props} />
-      </Suspense>,
+  it("matches the latest snapshot", async () => {
+    const rendered = render(
+      <StructureGrantCartInformation {...props} />,
       renderOpts
     );
-    expect(container).toMatchSnapshot();
+    await waitForLoad(rendered);
+    expect(rendered.container).toMatchSnapshot();
   });
 });

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

@@ -1,5 +1,4 @@
-import React from "react";
-import { render } from "@truedat/test/render";
+import { render, waitForLoad } from "@truedat/test/render";
 import StructureGrantCartUserSelector from "../StructureGrantCartUserSelector";
 
 const defaultRenderOpts = {
@@ -7,19 +6,19 @@ const defaultRenderOpts = {
     grantRequestsCart: { user: { id: 5 } },
     usersSearch: [{ full_name: "name", id: 1 }],
   },
-  fallback: "lazy",
 };
 
 describe("<StructureGrantCartUserSelector />", () => {
-  it("matches the latest snapshot", () => {
-    const { container } = render(
+  it("matches the latest snapshot", async () => {
+    const rendered = render(
       <StructureGrantCartUserSelector query="abc" />,
       defaultRenderOpts
     );
-    expect(container).toMatchSnapshot();
+    await waitForLoad(rendered);
+    expect(rendered.container).toMatchSnapshot();
   });
 
-  it("matches the latest snapshot on update grant", () => {
+  it("matches the latest snapshot on update grant", async () => {
     const renderOpts = {
       ...defaultRenderOpts,
       state: {
@@ -35,10 +34,11 @@ describe("<StructureGrantCartUserSelector />", () => {
       },
     };
 
-    const { container } = render(
+    const rendered = render(
       <StructureGrantCartUserSelector query="abc" />,
       renderOpts
     );
-    expect(container).toMatchSnapshot();
+    await waitForLoad(rendered);
+    expect(rendered.container).toMatchSnapshot();
   });
 });

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

@@ -1,12 +1,9 @@
-import React from "react";
-import { fireEvent } from "@testing-library/react";
-import { render } from "@truedat/test/render";
 import userEvent from "@testing-library/user-event";
+import { fireEvent } from "@testing-library/react";
+import { render, waitForLoad } from "@truedat/test/render";
 import StructureGrantDropdown from "../StructureGrantDropdown";
 import en from "../../messages/en";
 
-const renderOpts = { messages: { en } };
-
 const propsBuilder = (grant, structureGrantPopup, requested) => ({
   structure: { grant },
   grant,
@@ -14,17 +11,15 @@ const propsBuilder = (grant, structureGrantPopup, requested) => ({
   requested,
 });
 
-const mockHistory = {
-  push: jest.fn(),
-};
+const mockHistory = jest.fn();
 
-jest.mock("react-router-dom", () => ({
-  ...jest.requireActual("react-router-dom"),
-  useHistory: () => mockHistory,
+jest.mock("react-router", () => ({
+  ...jest.requireActual("react-router"),
+  useNavigate: () => mockHistory,
 }));
 
 describe("<StructureGrantDropdown />", () => {
-  it("matches the latest snapshot for pendingRequest state", () => {
+  it("matches the latest snapshot for pendingRequest state", async () => {
     const status = "pending";
     const grantRequest = {
       status: { status },
@@ -34,15 +29,13 @@ describe("<StructureGrantDropdown />", () => {
       grantRequest,
       grantRequestStatus: status,
     };
-    const { container } = render(
-      <StructureGrantDropdown {...props} />,
-      renderOpts
-    );
+    const rendered = render(<StructureGrantDropdown {...props} />);
+    await waitForLoad(rendered);
 
-    expect(container).toMatchSnapshot();
+    expect(rendered.container).toMatchSnapshot();
   });
 
-  it("matches the latest snapshot for pendingRequest state with modification", () => {
+  it("matches the latest snapshot for pendingRequest state with modification", async () => {
     const status = "pending";
     const grantRequest = {
       group: { grant: { id: 1 } },
@@ -53,15 +46,13 @@ describe("<StructureGrantDropdown />", () => {
       grantRequest,
       grantRequestStatus: status,
     };
-    const { container } = render(
-      <StructureGrantDropdown {...props} />,
-      renderOpts
-    );
+    const rendered = render(<StructureGrantDropdown {...props} />);
+    await waitForLoad(rendered);
 
-    expect(container).toMatchSnapshot();
+    expect(rendered.container).toMatchSnapshot();
   });
 
-  it("matches the latest snapshot for processingRequest state", () => {
+  it("matches the latest snapshot for processingRequest state", async () => {
     const status = "processing";
     const grantRequest = {
       status: { status },
@@ -71,15 +62,13 @@ describe("<StructureGrantDropdown />", () => {
       grantRequest,
       grantRequestStatus: status,
     };
-    const { container } = render(
-      <StructureGrantDropdown {...props} />,
-      renderOpts
-    );
+    const rendered = render(<StructureGrantDropdown {...props} />);
+    await waitForLoad(rendered);
 
-    expect(container).toMatchSnapshot();
+    expect(rendered.container).toMatchSnapshot();
   });
 
-  it("matches the latest snapshot for processingRequest state with modification", () => {
+  it("matches the latest snapshot for processingRequest state with modification", async () => {
     const status = "processing";
     const grantRequest = {
       group: { grant: { id: 1 } },
@@ -90,27 +79,23 @@ describe("<StructureGrantDropdown />", () => {
       grantRequest,
       grantRequestStatus: status,
     };
-    const { container } = render(
-      <StructureGrantDropdown {...props} />,
-      renderOpts
-    );
+    const rendered = render(<StructureGrantDropdown {...props} />);
+    await waitForLoad(rendered);
 
-    expect(container).toMatchSnapshot();
+    expect(rendered.container).toMatchSnapshot();
   });
 
-  it("matches the latest snapshot for activeGrant state", () => {
+  it("matches the latest snapshot for activeGrant state", async () => {
     const grantRequest = null;
     const props = {
       ...propsBuilder({ pending_removal: false }),
       grantRequest,
       grantRequestStatus: null,
     };
-    const { container } = render(
-      <StructureGrantDropdown {...props} />,
-      renderOpts
-    );
+    const rendered = render(<StructureGrantDropdown {...props} />);
+    await waitForLoad(rendered);
 
-    expect(container).toMatchSnapshot();
+    expect(rendered.container).toMatchSnapshot();
   });
 
   it("when hovering on activeGrant state, renders grant detail", async () => {
@@ -131,17 +116,15 @@ describe("<StructureGrantDropdown />", () => {
       grantRequest,
       grantRequestStatus: null,
     };
-    const { findByRole, findByText } = render(
-      <StructureGrantDropdown {...props} />,
-      renderOpts
-    );
+    const rendered = render(<StructureGrantDropdown {...props} />);
+    await waitForLoad(rendered);
 
-    fireEvent.mouseOver(await findByRole("listbox"));
+    fireEvent.mouseOver(await rendered.findByRole("listbox"));
     expect(
-      await findByText(en["structure.grant.has_grant"])
+      await rendered.findByText(/structure.grant.has_grant/i)
     ).toBeInTheDocument();
-    expect(await findByText("2022-08-25")).toBeInTheDocument();
-    expect(await findByText("bar")).toBeInTheDocument();
+    expect(await rendered.findByText("2022-08-25")).toBeInTheDocument();
+    expect(await rendered.findByText("bar")).toBeInTheDocument();
   });
 
   it("when clicking on viewRequest action, will redirect to grantResquest page", async () => {
@@ -155,16 +138,16 @@ describe("<StructureGrantDropdown />", () => {
       grantRequest,
       grantRequestStatus: status,
     };
-
-    const { findByText } = render(
-      <StructureGrantDropdown {...props} />,
-      renderOpts
-    );
-
-    userEvent.click(
-      await findByText(en["grant.actions.viewRequest.confirmation.header"])
+    const rendered = render(<StructureGrantDropdown {...props} />);
+    await waitForLoad(rendered);
+    const user = userEvent.setup({ delay: null, skipHover: true });
+
+    await user.click(
+      await rendered.findByText(
+        /grant.actions.viewrequest.confirmation.header/i
+      )
     );
 
-    expect(mockHistory.push).toHaveBeenCalledWith("/grantRequests/8");
+    expect(mockHistory).toHaveBeenCalledWith("/grantRequests/8");
   });
 });

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

@@ -1,4 +1,3 @@
-import React from "react";
 import { render } from "@truedat/test/render";
 import SearchContextWrapper from "@truedat/core/components/common/SearchContextWrapper";
 import StructureGrantListButton from "../StructureGrantListButton";
@@ -27,7 +26,6 @@ const renderOpts = {
       structures: [{ id: 1 }],
     },
   },
-  fallback: "lazy",
 };
 
 const searchProps = { filterParams: { foo: "bar" } };

package/src/components/__tests__/StructureGrantRequestButton.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";

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

@@ -1,4 +1,3 @@
-import React from "react";
 import { waitFor } from "@testing-library/react";
 import { render } from "@truedat/test/render";
 import { LATEST_GRANT_REQUEST_BY_DS_QUERY } from "../../api/queries";
@@ -32,7 +31,6 @@ const renderOptsBuilder = (status, grant) => ({
     userPermissions: { request_grant: true },
   },
   messages: { en },
-  fallback: "lazy",
 });
 
 const expectToRenderDropdownComponent = (container) =>

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

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

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

@@ -1,68 +1,68 @@
-import React from "react";
-import { render } from "@truedat/test/render";
-import { shallow } from "enzyme";
-import { Link } from "react-router-dom";
-import { intl } from "@truedat/test/intl-stub";
+import { render, waitForLoad } from "@truedat/test/render";
 import DefaultStructureItem, {
   StructureItem,
   mapStateToProps,
 } from "../StructureItem";
 
-// workaround for enzyme issue with React.useContext
-// see https://github.com/airbnb/enzyme/issues/2176#issuecomment-532361526
-jest.spyOn(React, "useContext").mockImplementation(() => intl);
-
 describe("<StructureItem />", () => {
-  const id = 1;
+  const id = "1";
   const name = "foo";
 
-  it("matches the latest snapshot", () => {
-    const props = { id, name };
-
-    const { container } = render(<DefaultStructureItem {...props} />);
-    expect(container).toMatchSnapshot();
+  it("matches the latest snapshot", async () => {
+    const rendered = render(<DefaultStructureItem id={id} name={name} />);
+    await waitForLoad(rendered);
+    expect(rendered.container).toMatchSnapshot();
   });
 
-  it("matches the latest snapshot (active state)", () => {
-    const props = { data_structure_id: 8, name, type: "not_system" };
-    const state = {
-      structure: { id: 8 },
+  it("matches the latest snapshot (active state)", async () => {
+    const props = { data_structure_id: "8", name, type: "not_system" };
+    const renderOpts = {
+      state: {
+        structure: { id: "8" },
+      },
     };
-    const { container } = render(<DefaultStructureItem {...props} />, {
-      state,
-    });
-    expect(container).toMatchSnapshot();
+    const rendered = render(<DefaultStructureItem {...props} />, renderOpts);
+    await waitForLoad(rendered);
+    expect(rendered.container).toMatchSnapshot();
   });
 
-  it("matches the latest snapshot with alias", () => {
-    const props = { id, name, alias: "alias" };
-
-    const { container } = render(<DefaultStructureItem {...props} />);
-    expect(container).toMatchSnapshot();
+  it("matches the latest snapshot with alias", async () => {
+    const rendered = render(
+      <DefaultStructureItem id={id} name={name} alias="alias" />
+    );
+    await waitForLoad(rendered);
+    expect(rendered.container).toMatchSnapshot();
   });
 
-  it("renders as a link to the /structures/:id route if id is present", () => {
-    const props = { id, name };
-    const wrapper = shallow(<StructureItem {...props} />);
-    expect(wrapper.prop("as")).toBe(Link);
-    expect(wrapper.prop("to")).toEqual("/structures/1");
+  it("renders as a link to the /structures/:id route if id is present", async () => {
+    const rendered = render(<StructureItem id={id} name={name} />);
+    await waitForLoad(rendered);
+
+    expect(rendered.container.querySelector("a")).toHaveAttribute(
+      "href",
+      "/structures/1"
+    );
   });
 
-  it("renders as a link to the /structures route if id is not present", () => {
-    const props = { name };
-    const wrapper = shallow(<StructureItem {...props} />);
-    expect(wrapper.prop("as")).toBe(Link);
-    expect(wrapper.prop("to")).toEqual("/structures");
-    expect(wrapper.prop("title")).toBeTruthy();
+  it("renders as a link to the /structures route if id is not present", async () => {
+    const rendered = render(<StructureItem name={name} />);
+    await waitForLoad(rendered);
+
+    const link = rendered.container.querySelector("a");
+    expect(link).toHaveAttribute("href", "/structures");
+    expect(link).toHaveAttribute("title");
   });
 
-  it("renders as an anchor tag if active is true", () => {
-    const props = { id, name, active: true };
-    const wrapper = shallow(<StructureItem {...props} />);
-    expect(wrapper.prop("as")).toBe("a");
-    expect(wrapper.prop("to")).toBeUndefined();
-    expect(wrapper.prop("active")).toBeTruthy();
-    expect(wrapper.prop("title")).toBeTruthy();
+  it("renders as an anchor tag if active is true", async () => {
+    const rendered = render(
+      <StructureItem id={id} name={name} active={true} />
+    );
+    await waitForLoad(rendered);
+
+    const anchor = rendered.container.querySelector("a");
+    expect(anchor).toHaveAttribute("class");
+    expect(anchor.className).toContain("active");
+    expect(anchor).toHaveAttribute("title");
   });
 
   describe("mapStateToProps", () => {
@@ -80,11 +80,12 @@ describe("<StructureItem />", () => {
 
     it("maps active to true if data_structure_id coincides with structure id", () => {
       const ownProps = { data_structure_id };
-      const structure = { id: data_structure_id };
-      const state = { structure };
+      const state = { structure: { id: parseInt(data_structure_id) } };
 
       expect(mapStateToProps(state, ownProps)).toMatchObject({
+        id: data_structure_id,
         active: true,
+        navFilter: undefined,
       });
     });
   });