@truedat/dd 7.5.9 → 7.5.11

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

@@ -1,9 +1,8 @@
-import React from "react";
 import { render } from "@truedat/test/render";
 import { GrantRequestLoader } from "../GrantRequestLoader";
 
-jest.mock("react-router-dom", () => ({
-  ...jest.requireActual("react-router-dom"),
+jest.mock("react-router", () => ({
+  ...jest.requireActual("react-router"),
   useParams: () => ({ id: 1 }),
 }));
 

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

@@ -1,18 +1,15 @@
-import React from "react";
-import { waitFor } from "@testing-library/react";
 import userEvent from "@testing-library/user-event";
+import { waitFor } from "@testing-library/react";
 import { render } from "@truedat/test/render";
 import { linkTo } from "@truedat/core/routes";
 
 import GrantRequestRow from "../GrantRequestRow";
 
-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,
 }));
 
 const columns = [
@@ -47,65 +44,67 @@ describe("<GrantRequestRow />", () => {
     approveView: true,
   };
 
-  it("matches the latest snapshot", () => {
-    const { container } = render(
+  it("matches the latest snapshot", async () => {
+    const rendered = render(
       <table>
         <tbody>
           <GrantRequestRow {...props} />
         </tbody>
       </table>
     );
-    expect(container).toMatchSnapshot();
+    expect(rendered.container).toMatchSnapshot();
   });
 
-  it("disable checkbox when can not Approve", () => {
+  it("disable checkbox when can not Approve", async () => {
     const newProps = {
       ...props,
       canApprove: false,
     };
-    const { container } = render(
+    const rendered = render(
       <table>
         <tbody>
           <GrantRequestRow {...newProps} />
         </tbody>
       </table>
     );
-    expect(container).toMatchSnapshot();
+    expect(rendered.container).toMatchSnapshot();
   });
 
   it("click on checkbox element", async () => {
-    const { getByText, getByRole } = render(
+    const rendered = render(
       <table>
         <tbody>
           <GrantRequestRow {...props} />
         </tbody>
       </table>
     );
+    const user = userEvent.setup({ delay: null });
+
     await waitFor(() => {
-      expect(getByText(/blah/i)).toBeTruthy();
+      expect(rendered.queryByText(/blah/i)).toBeInTheDocument();
     });
 
-    userEvent.click(await getByRole("checkbox"));
+    await user.click(await rendered.findByRole("checkbox"));
     await waitFor(() => {
       expect(onClick).toBeCalledTimes(1);
     });
   });
 
   it("navigates to grant request", async () => {
-    const { getByText, queryByText } = render(
+    const rendered = render(
       <table>
         <tbody>
           <GrantRequestRow {...props} />
         </tbody>
       </table>
     );
+    const user = userEvent.setup({ delay: null });
+
     await waitFor(() => {
-      expect(getByText(/blah/i)).toBeTruthy();
+      expect(rendered.queryByText(/blah/i)).toBeInTheDocument();
     });
 
-    userEvent.click(queryByText(/blah/i));
-    expect(mockHistory.push).toHaveBeenCalledWith(
-      linkTo.GRANT_REQUEST({ id: 1 })
-    );
+    await user.click(rendered.queryByText(/blah/i));
+    expect(mockHistory).toHaveBeenCalledWith(linkTo.GRANT_REQUEST({ id: 1 }));
   });
 });

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

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

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

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

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

@@ -1,4 +1,3 @@
-import React from "react";
 import { render } from "@truedat/test/render";
 import SearchContext from "@truedat/core/search/SearchContext";
 import GrantRequestsLabelResults from "../GrantRequestsLabelResults";
@@ -25,9 +24,9 @@ describe("<GrantRequestsLabelResults />", () => {
 
   it("matches the latest snapshot", () => {
     const { container } = render(
-      <SearchContext.Provider value={searchContext}>
+      <SearchContext value={searchContext}>
         <GrantRequestsLabelResults {...props} />
-      </SearchContext.Provider>,
+      </SearchContext>,
       renderOpts
     );
     expect(container).toMatchSnapshot();
@@ -36,9 +35,9 @@ describe("<GrantRequestsLabelResults />", () => {
   it("When not in approve view", () => {
     const newProps = { ...props, approveView: false };
     const { container } = render(
-      <SearchContext.Provider value={searchContext}>
+      <SearchContext value={searchContext}>
         <GrantRequestsLabelResults {...newProps} />
-      </SearchContext.Provider>,
+      </SearchContext>,
       renderOpts
     );
     expect(container).toMatchSnapshot();
@@ -47,9 +46,9 @@ describe("<GrantRequestsLabelResults />", () => {
   it("When is loading", () => {
     const newSearchContext = { ...searchContext, loading: true };
     const { container } = render(
-      <SearchContext.Provider value={newSearchContext}>
+      <SearchContext value={newSearchContext}>
         <GrantRequestsLabelResults {...props} />,
-      </SearchContext.Provider>,
+      </SearchContext>,
       renderOpts
     );
     expect(container).toMatchSnapshot();

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

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

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

@@ -1,6 +1,5 @@
-import React from "react";
 import userEvent from "@testing-library/user-event";
-import { render } from "@truedat/test/render";
+import { render, waitForLoad } from "@truedat/test/render";
 import SearchContext from "@truedat/core/search/SearchContext";
 import GrantRequestsSearchResults from "../GrantRequestsSearchResults";
 
@@ -8,25 +7,6 @@ describe("<GrantRequestsSearchResults />", () => {
   const grantRequests = [{ id: 1 }, { id: 2 }];
   const rolesPermission = ["foo", "bar"];
 
-  const renderOpts = {
-    messages: {
-      en: {
-        "grantRequestApproval.form.role.select": "select",
-        "grantRequest.actions.reject": "reject",
-        "grantRequest.actions.approve": "approve",
-        "grantRequest.search.placeholder": "placeholder",
-        "grantRequests.subheader.approve": "subheader approve",
-        "grantRequests.header.approve": "header approve",
-        "grantRequests.bulk.selected": "selected",
-        "grantRequests.retrieved.results": "results",
-        "search.applied_filters": "Filters:",
-        "search.clear_filters": "Clear filters",
-        "search.placeholder": "placeholder",
-        "grantRequests.empty": "empty",
-      },
-    },
-  };
-
   const baseSearchContext = {
     searchData: { data: grantRequests, _permissions: rolesPermission },
     loading: false,
@@ -38,23 +18,24 @@ describe("<GrantRequestsSearchResults />", () => {
     cleanQuery: jest.fn(),
   };
 
-  it("matches the latest snapshot", () => {
-    const { container } = render(
-      <SearchContext.Provider value={baseSearchContext}>
-        <GrantRequestsSearchResults />,
-      </SearchContext.Provider>,
-      renderOpts
+  it("matches the latest snapshot", async () => {
+    const rendered = render(
+      <SearchContext value={baseSearchContext}>
+        <GrantRequestsSearchResults />
+      </SearchContext>
     );
-    expect(container).toMatchSnapshot();
+    await waitForLoad(rendered);
+    expect(rendered.container).toMatchSnapshot();
   });
 
   it("select a role", async () => {
-    const { getByRole } = render(
-      <SearchContext.Provider value={baseSearchContext}>
-        <GrantRequestsSearchResults />,
-      </SearchContext.Provider>,
-      renderOpts
+    const rendered = render(
+      <SearchContext value={baseSearchContext}>
+        <GrantRequestsSearchResults />
+      </SearchContext>
     );
-    userEvent.click(getByRole("option", { name: /foo/i }));
+    await waitForLoad(rendered);
+
+    userEvent.click(rendered.getByRole("option", { name: /foo/i }));
   });
 });

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

@@ -1,4 +1,3 @@
-import React from "react";
 import { render } from "@truedat/test/render";
 import SearchContext from "@truedat/core/search/SearchContext";
 import { GrantRequestsTable } from "../GrantRequestsTable";
@@ -43,9 +42,9 @@ describe("<GrantRequestsTable />", () => {
 
   it("matches the latest snapshot", () => {
     const { container } = render(
-      <SearchContext.Provider value={searchContext}>
+      <SearchContext value={searchContext}>
         <GrantRequestsTable {...props} />
-      </SearchContext.Provider>,
+      </SearchContext>,
       renderOpts
     );
     expect(container).toMatchSnapshot();

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

@@ -1,15 +1,258 @@
-import React from "react";
-import { shallow } from "enzyme";
+import { render, waitForLoad } from "@truedat/test/render";
+import { useAuthorized } from "@truedat/core/hooks";
+import {
+  GRANT,
+  GRANTS,
+  MY_GRANTS,
+  MY_GRANT_REQUESTS,
+  GRANT_APPROVAL_RULE_NEW,
+  GRANT_APPROVAL_RULE_EDIT,
+  GRANT_APPROVAL_RULE,
+  GRANT_APPROVAL_RULES,
+  STRUCTURES_GRANT_REQUEST,
+  GRANT_REQUEST_GROUP,
+  GRANT_REQUESTS,
+  GRANT_REQUESTS_APPROVALS_RESULT,
+  GRANT_REQUEST,
+  GRANTS_REQUESTS_CHECKOUT,
+} from "@truedat/core/routes";
 import { GrantRoutes } from "../GrantRoutes";
 
-jest.mock("react-router-dom", () => ({
-  ...jest.requireActual("react-router-dom"),
-  useRouteMatch: () => ({ path: "/systems" }),
-}));
+jest.mock("@truedat/core/hooks");
+
+// Mock child components
+jest.mock(
+  "../Grant",
+  () =>
+    function Grant() {
+      return <div>Grant</div>;
+    }
+);
+jest.mock(
+  "../GrantApprovalRule",
+  () =>
+    function GrantApprovalRule() {
+      return <div>GrantApprovalRule</div>;
+    }
+);
+jest.mock(
+  "../GrantApprovalRuleEdit",
+  () =>
+    function GrantApprovalRuleEdit() {
+      return <div>GrantApprovalRuleEdit</div>;
+    }
+);
+jest.mock(
+  "../GrantApprovalRuleNew",
+  () =>
+    function GrantApprovalRuleNew() {
+      return <div>GrantApprovalRuleNew</div>;
+    }
+);
+jest.mock(
+  "../GrantApprovalRules",
+  () =>
+    function GrantApprovalRules() {
+      return <div>GrantApprovalRules</div>;
+    }
+);
+jest.mock(
+  "../GrantFiltersLoader",
+  () =>
+    function GrantFiltersLoader() {
+      return <div>GrantFiltersLoader</div>;
+    }
+);
+jest.mock(
+  "../GrantRequest",
+  () =>
+    function GrantRequest() {
+      return <div>GrantRequest</div>;
+    }
+);
+jest.mock(
+  "../GrantRequestLoader",
+  () =>
+    function GrantRequestLoader() {
+      return <div>GrantRequestLoader</div>;
+    }
+);
+jest.mock(
+  "../GrantRequestsLoader",
+  () =>
+    function GrantRequestsLoader() {
+      return <div>GrantRequestsLoader</div>;
+    }
+);
+jest.mock(
+  "../GrantRequestsSearchResults",
+  () =>
+    function GrantRequestsSearchResults() {
+      return <div>GrantRequestsSearchResults</div>;
+    }
+);
+jest.mock(
+  "../GrantRequestApprovalResults",
+  () =>
+    function GrantRequestApprovalResults() {
+      return <div>GrantRequestApprovalResults</div>;
+    }
+);
+jest.mock(
+  "../Grants",
+  () =>
+    function Grants() {
+      return <div>Grants</div>;
+    }
+);
+jest.mock(
+  "../GrantsLoader",
+  () =>
+    function GrantsLoader() {
+      return <div>GrantsLoader</div>;
+    }
+);
+jest.mock(
+  "../MyGrantRequests",
+  () =>
+    function MyGrantRequests() {
+      return <div>MyGrantRequests</div>;
+    }
+);
+jest.mock(
+  "../StructureGrantCartCheckout",
+  () =>
+    function StructureGrantCartCheckout() {
+      return <div>StructureGrantCartCheckout</div>;
+    }
+);
+jest.mock(
+  "../StructuresGrantRequestView",
+  () =>
+    function StructuresGrantRequestView() {
+      return <div>StructuresGrantRequestView</div>;
+    }
+);
 
 describe("<GrantRoutes />", () => {
-  it("matches the latest snapshot", () => {
-    const wrapper = shallow(<GrantRoutes />);
-    expect(wrapper).toMatchSnapshot();
+  it("renders correctly with GRANTS_REQUESTS_CHECKOUT route", async () => {
+    const rendered = render(<GrantRoutes />, {
+      routes: [GRANTS_REQUESTS_CHECKOUT],
+    });
+    await waitForLoad(rendered);
+    expect(rendered.container).toMatchSnapshot();
+  });
+
+  it("renders correctly with GRANT route", async () => {
+    const rendered = render(<GrantRoutes />, {
+      routes: [GRANT],
+    });
+    await waitForLoad(rendered);
+    expect(rendered.container).toMatchSnapshot();
+  });
+
+  it("renders correctly with GRANTS route", async () => {
+    const rendered = render(<GrantRoutes />, {
+      routes: [GRANTS],
+    });
+    await waitForLoad(rendered);
+    expect(rendered.container).toMatchSnapshot();
+  });
+
+  it("renders correctly with MY_GRANTS route", async () => {
+    const rendered = render(<GrantRoutes />, {
+      routes: [MY_GRANTS],
+    });
+    await waitForLoad(rendered);
+    expect(rendered.container).toMatchSnapshot();
+  });
+
+  it("renders correctly with MY_GRANT_REQUESTS route", async () => {
+    const rendered = render(<GrantRoutes />, {
+      routes: [MY_GRANT_REQUESTS],
+    });
+    await waitForLoad(rendered);
+    expect(rendered.container).toMatchSnapshot();
+  });
+
+  it("renders correctly with GRANT_APPROVAL_RULE_NEW route", async () => {
+    const rendered = render(<GrantRoutes />, {
+      routes: [GRANT_APPROVAL_RULE_NEW],
+    });
+    await waitForLoad(rendered);
+    expect(rendered.container).toMatchSnapshot();
+  });
+
+  it("renders correctly with GRANT_APPROVAL_RULE_EDIT route", async () => {
+    const rendered = render(<GrantRoutes />, {
+      routes: [GRANT_APPROVAL_RULE_EDIT],
+    });
+    await waitForLoad(rendered);
+    expect(rendered.container).toMatchSnapshot();
+  });
+
+  it("renders correctly with GRANT_APPROVAL_RULE route", async () => {
+    const rendered = render(<GrantRoutes />, {
+      routes: [GRANT_APPROVAL_RULE],
+    });
+    await waitForLoad(rendered);
+    expect(rendered.container).toMatchSnapshot();
+  });
+
+  it("renders correctly with GRANT_APPROVAL_RULES route", async () => {
+    const rendered = render(<GrantRoutes />, {
+      routes: [GRANT_APPROVAL_RULES],
+    });
+    await waitForLoad(rendered);
+    expect(rendered.container).toMatchSnapshot();
+  });
+
+  it("renders correctly with STRUCTURES_GRANT_REQUEST route", async () => {
+    const rendered = render(<GrantRoutes />, {
+      routes: [STRUCTURES_GRANT_REQUEST],
+    });
+    await waitForLoad(rendered);
+    expect(rendered.container).toMatchSnapshot();
+  });
+
+  it("renders correctly with GRANT_REQUEST_GROUP route", async () => {
+    const rendered = render(<GrantRoutes />, {
+      routes: [GRANT_REQUEST_GROUP],
+    });
+    await waitForLoad(rendered);
+    expect(rendered.container).toMatchSnapshot();
+  });
+
+  it("renders correctly with GRANT_REQUESTS route", async () => {
+    const rendered = render(<GrantRoutes />, {
+      routes: [GRANT_REQUESTS],
+    });
+    await waitForLoad(rendered);
+    expect(rendered.container).toMatchSnapshot();
+  });
+
+  it("renders correctly with GRANT_REQUESTS_APPROVALS_RESULT route", async () => {
+    const rendered = render(<GrantRoutes />, {
+      routes: [GRANT_REQUESTS_APPROVALS_RESULT],
+    });
+    await waitForLoad(rendered);
+    expect(rendered.container).toMatchSnapshot();
+  });
+
+  it("renders correctly with GRANT_REQUEST route", async () => {
+    const rendered = render(<GrantRoutes grantRequestLoaded={true} />, {
+      routes: [GRANT_REQUEST],
+    });
+    await waitForLoad(rendered);
+    expect(rendered.container).toMatchSnapshot();
+  });
+
+  it("renders unauthorized component when not authorized", async () => {
+    useAuthorized.mockReturnValueOnce(false);
+    const rendered = render(<GrantRoutes />, {
+      routes: [GRANTS],
+    });
+    await waitForLoad(rendered);
+    expect(rendered.container).toMatchSnapshot();
   });
 });

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

@@ -1,26 +1,27 @@
-import React from "react";
-import { shallow } from "enzyme";
-import { intl } from "@truedat/test/intl-stub";
+import { render, waitForLoad } from "@truedat/test/render";
 import { GrantsDownloadButton } from "../GrantsDownloadButton";
 
-// workaround for enzyme issue with React.useContext
-// see https://github.com/airbnb/enzyme/issues/2176#issuecomment-532361526
-jest.spyOn(React, "useContext").mockImplementation(() => intl);
-
 describe("<GrantsDownloadButton />", () => {
+  const renderOpts = {
+    state: {
+      userPermissions: { update: true },
+    },
+  };
+
   const downloadGrants = jest.fn();
   const grantsLoading = false;
 
-  it("matches the latest snapshot", () => {
+  it("matches the latest snapshot", async () => {
     const props = { downloadGrants, grantsLoading };
-    const wrapper = shallow(<GrantsDownloadButton {...props} />);
-    expect(wrapper).toMatchSnapshot();
+    const rendered = render(<GrantsDownloadButton {...props} />, renderOpts);
+    await waitForLoad(rendered);
+    expect(rendered.container).toMatchSnapshot();
   });
 
-  it("is disabled if there are no structures to be downloaded", () => {
+  it("is disabled if there are no structures to be downloaded", async () => {
     const props = { downloadGrants, grantsLoading, grants: [] };
-    const wrapper = shallow(<GrantsDownloadButton {...props} />);
-    wrapper.find("Popup").props().content;
-    expect(wrapper.find({ disabled: false }).length).toBe(1);
+    const rendered = render(<GrantsDownloadButton {...props} />, renderOpts);
+    await waitForLoad(rendered);
+    expect(rendered.container.querySelector("button")).toBeDisabled();
   });
 });

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

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

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

@@ -1,5 +1,4 @@
-import React from "react";
-import { mount } from "enzyme";
+import { render, waitForLoad } from "@truedat/test/render";
 import { GrantsLoader } from "../GrantsLoader";
 
 const getProps = () => ({
@@ -10,32 +9,47 @@ const getProps = () => ({
 });
 
 describe("<GrantsLoader />", () => {
-  it("matches the latest snapshot", () => {
+  const renderOpts = {
+    state: {
+      userPermissions: { update: true },
+    },
+  };
+
+  it("matches the latest snapshot", async () => {
     const props = getProps();
-    const wrapper = mount(<GrantsLoader {...props} />);
-    expect(wrapper).toMatchSnapshot();
+    const rendered = render(<GrantsLoader {...props} />, renderOpts);
+    await waitForLoad(rendered);
+    expect(rendered.container).toMatchSnapshot();
   });
 
-  it("calls fetchGrants when component mounts but not when it unmounts", () => {
+  it("calls fetchGrants when component mounts but not when it unmounts", async () => {
     const props = getProps();
-    const wrapper = mount(<GrantsLoader {...props} />);
+    const rendered = render(<GrantsLoader {...props} />, renderOpts);
+    await waitForLoad(rendered);
     expect(props.fetchGrants).toHaveBeenCalledTimes(1);
-    wrapper.unmount();
+    rendered.unmount();
     expect(props.fetchGrants).toHaveBeenCalledTimes(1);
   });
 
-  it("calls clearGrants when component unmounts but not when it mounts", () => {
+  it("calls clearGrants when component unmounts but not when it mounts", async () => {
     const props = getProps();
-    const wrapper = mount(<GrantsLoader {...props} />);
+    const rendered = render(<GrantsLoader {...props} />, renderOpts);
+    await waitForLoad(rendered);
     expect(props.clearGrants).toHaveBeenCalledTimes(0);
-    wrapper.unmount();
+    rendered.unmount();
     expect(props.clearGrants).toHaveBeenCalledTimes(1);
   });
 
-  it("calls fetchGrants when payload is updated", () => {
+  it("calls fetchGrants when payload is updated", async () => {
     const props = getProps();
-    const wrapper = mount(<GrantsLoader {...props} />);
-    wrapper.setProps({ query: { "data_structure_version.name.raw": "XXX" } });
+    const rendered = render(<GrantsLoader {...props} />, renderOpts);
+    await waitForLoad(rendered);
+    rendered.rerender(
+      <GrantsLoader
+        {...props}
+        query={{ "data_structure_version.name.raw": "XXX" }}
+      />
+    );
     expect(props.fetchGrants).toHaveBeenCalledTimes(2);
   });
 });