@truedat/df 7.5.9 → 7.5.11

package/src/templates/components/TemplateLoader.js

@@ -1,110 +1,34 @@
 import _ from "lodash/fp";
-import React from "react";
-import PropTypes from "prop-types";
-import { compose } from "redux";
-import { connect } from "react-redux";
-import { withRouter } from "react-router-dom";
+import { useEffect } from "react";
+import { useParams } from "react-router";
+import { useDispatch, useSelector } from "react-redux";
 import { Loading } from "@truedat/core/components";
-import { clearTemplate, fetchTemplate } from "../routines";
-import { clearSelectedDomain, clearSelectedDomains } from "../../routines";
+import { fetchTemplate } from "../routines";
 
-export class TemplateLoader extends React.Component {
-  static propTypes = {
-    clearSelectedDomain: PropTypes.func,
-    clearSelectedDomains: PropTypes.func,
-    clearTemplate: PropTypes.func,
-    domainId: PropTypes.number,
-    domainIds: PropTypes.array,
-    fetchTemplate: PropTypes.func,
-    match: PropTypes.object.isRequired,
-    templateId: PropTypes.number,
-    templateLoading: PropTypes.bool,
-  };
+export function TemplateLoader() {
+  const dispatch = useDispatch();
+  const selectedDomain = useSelector((state) => state.selectedDomain);
+  const selectedDomains = useSelector((state) => state.selectedDomains);
+  const selectedTemplate = useSelector((state) => state.selectedTemplate);
+  const templateLoading = useSelector((state) => state.templateLoading);
 
-  componentDidMount() {
-    const { fetchTemplate, domainId, domainIds, templateId, match } =
-      this.props;
-    if (match?.params?.templateId) {
-      fetchTemplate({ templateId: match.params.templateId });
-    } else if (templateId) {
-      fetchTemplate({ domainId, domainIds, templateId });
-    }
-  }
-
-  componentDidUpdate(prevProps) {
-    const {
-      clearTemplate,
-      domainId,
-      domainIds,
-      fetchTemplate,
-      match,
-      templateId,
-    } = this.props;
-    const {
-      domainId: prevDomainId,
-      domainIds: prevDomainIds,
-      match: prevMatch,
-      templateId: prevTemplateId,
-    } = prevProps;
-    if (match?.params?.templateId) {
-      if (match.params.templateId === prevMatch?.params?.templateId) {
-        // No change
-      } else {
-        fetchTemplate({ templateId: match.params.templateId });
-      }
-    } else if (templateId) {
-      if (
-        domainId !== prevDomainId ||
-        domainIds !== prevDomainIds ||
-        templateId !== prevTemplateId
-      ) {
-        fetchTemplate({
-          domainId,
-          domainIds,
-          templateId,
-        });
-      }
-    } else if (templateId !== prevTemplateId) {
-      clearTemplate();
-    }
-  }
+  const domainId = _.prop("id")(selectedDomain);
+  const domainIds = selectedDomains;
+  const selectedTemplateId = _.prop("id")(selectedTemplate);
 
-  componentWillUnmount() {
-    const { clearTemplate, clearSelectedDomain, clearSelectedDomains } =
-      this.props;
-    clearTemplate();
-    clearSelectedDomain();
-    clearSelectedDomains();
-  }
+  const { templateId } = useParams();
 
-  render() {
-    const { templateLoading } = this.props;
-    if (templateLoading) {
-      return <Loading />;
-    } else {
-      return null;
+  useEffect(() => {
+    if (templateId) {
+      dispatch(fetchTemplate({ templateId }));
+    } else if (selectedTemplateId) {
+      dispatch(
+        fetchTemplate({ domainId, domainIds, templateId: selectedTemplateId })
+      );
     }
-  }
-}
+  }, [domainId, domainIds, templateId, selectedTemplateId]);
 
-const mapStateToProps = ({
-  selectedDomain,
-  selectedDomains,
-  selectedTemplate,
-  templateLoading,
-}) => ({
-  domainId: _.prop("id")(selectedDomain),
-  domainIds: selectedDomains,
-  templateId: _.prop("id")(selectedTemplate),
-  templateLoading,
-});
+  return templateLoading ? <Loading /> : null;
+}
 
-export default compose(
-  withRouter,
-  connect(mapStateToProps, {
-    clearSelectedDomain,
-    clearSelectedDomains,
-    clearTemplate,
-    fetchTemplate,
-  })
-)(TemplateLoader);
+export default TemplateLoader;

package/src/templates/components/TemplateRoutes.js

@@ -1,58 +1,42 @@
 import React from "react";
-import { Route, Switch } from "react-router-dom";
-import { Unauthorized } from "@truedat/core/components";
-import { useAuthorized } from "@truedat/core/hooks";
+import { Route, Routes } from "react-router";
 import { TEMPLATE, TEMPLATES, TEMPLATES_NEW } from "@truedat/core/routes";
+import { ProtectedRoute, Loader } from "@truedat/core/router";
 import NewTemplate from "./NewTemplate";
 import Templates from "./Templates";
 import Template from "./Template";
-import TemplatesLoader from "./TemplatesLoader";
+import TemplatesLoader from "@truedat/core/components/TemplatesLoader";
 import TemplateLoader from "./TemplateLoader";
 import TemplatesContextProvider from "./TemplatesContext";
 
 export const TemplateRoutes = () => {
-  const authorized = useAuthorized();
   return (
-    <Route
-      path={TEMPLATES}
-      render={() =>
-        authorized ? (
-          <TemplatesContextProvider
-            initialSortColumn="updated_at"
-            initialSortDirection="descending"
-          >
-            <Switch>
-              <Route
-                path={TEMPLATES}
-                render={() => (
-                  <>
-                    <TemplatesLoader />
-                    <Templates />
-                  </>
-                )}
-                exact
-              />
-              <Route
-                path={TEMPLATES_NEW}
-                render={() => <NewTemplate />}
-                exact
-              />
-              <Route
-                path={TEMPLATE}
-                render={() => (
-                  <>
-                    <TemplateLoader />
-                    <Template />
-                  </>
-                )}
-              />
-            </Switch>
-          </TemplatesContextProvider>
-        ) : (
-          <Unauthorized />
-        )
-      }
-    />
+    <Routes>
+      <Route path={TEMPLATES} element={<ProtectedRoute />}>
+        <Route
+          index
+          element={
+            <TemplatesContextProvider
+              initialSortColumn="updated_at"
+              initialSortDirection="descending"
+            >
+              <TemplatesLoader /> <Templates />
+            </TemplatesContextProvider>
+          }
+        />
+        <Route path={TEMPLATES_NEW} element={<NewTemplate />} />
+        <Route
+          path={TEMPLATE}
+          element={
+            <>
+              <TemplateLoader />
+              <Template />
+            </>
+          }
+        />
+      </Route>
+      <Route path="*" element={null} />
+    </Routes>
   );
 };
 

package/src/templates/components/Templates.js

@@ -1,4 +1,3 @@
-import React from "react";
 import { FormattedMessage, useIntl } from "react-intl";
 import {
   Header,
@@ -8,7 +7,7 @@ import {
   Container,
   Button,
 } from "semantic-ui-react";
-import { Link } from "react-router-dom";
+import { Link } from "react-router";
 import { TEMPLATES_NEW } from "@truedat/core/routes";
 import TemplateFilters from "./TemplateFilters";
 import TemplatesTable from "./TemplatesTable";
@@ -32,12 +31,10 @@ export default function Templates() {
           </Header.Subheader>
         </Header.Content>
       </Header>
-
       <Grid>
         <Grid.Column width={8}>
           <TemplateFilters />
         </Grid.Column>
-
         <Grid.Column width={8}>
           <Container textAlign="right">
             <Button
@@ -49,7 +46,6 @@ export default function Templates() {
           </Container>
         </Grid.Column>
       </Grid>
-
       <TemplatesTable />
     </Segment>
   );

package/src/templates/components/TemplatesContext.js

@@ -1,10 +1,10 @@
 import _ from "lodash/fp";
-import React, { useState, useContext, createContext } from "react";
+import { useState, use, createContext } from "react";
 import { useSelector } from "react-redux";
 import { matchSorter } from "match-sorter";
 
 export const TemplatesContext = createContext();
-export const useTemplatesContext = () => useContext(TemplatesContext);
+export const useTemplatesContext = () => use(TemplatesContext);
 
 const HIDDEN_SCOPES = ["cx", "ca", "actions"];
 const isHiddenScope = (scope) => _.includes(scope)(HIDDEN_SCOPES);
@@ -57,9 +57,5 @@ export default function TemplatesContextProvider(props) {
     setSortDirection,
   };
 
-  return (
-    <TemplatesContext.Provider value={context}>
-      {children}
-    </TemplatesContext.Provider>
-  );
+  return <TemplatesContext value={context}>{children}</TemplatesContext>;
 }

package/src/templates/components/TemplatesTable.js

@@ -1,7 +1,6 @@
 import _ from "lodash/fp";
-import React from "react";
 import { FormattedMessage } from "react-intl";
-import { Link } from "react-router-dom";
+import { Link } from "react-router";
 import { Table, Header, Icon } from "semantic-ui-react";
 import { linkTo } from "@truedat/core/routes";
 import { sortColumn as sortHandler } from "@truedat/core/services/sort";

package/src/templates/components/__tests__/NewTemplate.spec.js

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

package/src/templates/components/__tests__/Template.spec.js

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

package/src/templates/components/__tests__/TemplateLoader.spec.js

@@ -1,128 +1,90 @@
-import React from "react";
-import ReactDOM from "react-dom";
-import { shallow } from "enzyme";
+import { render, waitForLoad } from "@truedat/test/render";
 import { TemplateLoader } from "../TemplateLoader";
+import { clearTemplate, fetchTemplate } from "../../routines";
+import { clearSelectedDomain, clearSelectedDomains } from "../../../routines";
+
+jest.mock("react-router", () => ({
+  ...jest.requireActual("react-router"),
+  useParams: () => ({ templateId: "1" }),
+}));
 
 describe("<TemplateLoader />", () => {
-  const clearTemplate = jest.fn();
-  const fetchTemplate = jest.fn();
-  const clearSelectedDomain = jest.fn();
-  const clearSelectedDomains = jest.fn();
-  const match = {};
+  let mockDispatch;
 
-  it("matches the latest snapshot", () => {
-    const templateLoading = true;
-    const props = {
-      clearSelectedDomain,
-      clearSelectedDomains,
-      clearTemplate,
-      fetchTemplate,
-      templateLoading,
-      match,
-    };
-    const wrapper = shallow(<TemplateLoader {...props} />);
-    expect(wrapper).toMatchSnapshot();
+  beforeEach(() => {
+    jest.clearAllMocks();
+    mockDispatch = jest.fn();
   });
 
-  it("renders a loader if templateLoading is true", () => {
-    const templateLoading = true;
-    const props = {
-      clearSelectedDomain,
-      clearSelectedDomains,
-      clearTemplate,
-      fetchTemplate,
-      templateLoading,
-      match,
-    };
-    const wrapper = shallow(<TemplateLoader {...props} />);
-    expect(wrapper.find("Loading").length).toBe(1);
+  it("matches the latest snapshot", async () => {
+    const rendered = render(<TemplateLoader />, {
+      state: { templateLoading: true },
+      dispatch: mockDispatch,
+    });
+    expect(rendered.container).toMatchSnapshot();
   });
 
-  it("renders null if templateLoading is false", () => {
-    const templateLoading = false;
-    const props = {
-      clearSelectedDomain,
-      clearSelectedDomains,
-      clearTemplate,
-      fetchTemplate,
-      templateLoading,
-      match,
-    };
-    const wrapper = shallow(<TemplateLoader {...props} />);
-    expect(wrapper.getElement()).toBeNull();
+  it("renders a loader if templateLoading is true", async () => {
+    const rendered = render(<TemplateLoader />, {
+      state: { templateLoading: true },
+      dispatch: mockDispatch,
+    });
+    expect(rendered.container.querySelector(".loader")).toBeInTheDocument();
   });
 
-  it("calls fetchTemplate when component mounts, clearTemplate when component unmounts", () => {
-    const fetchTemplate = jest.fn();
-    const clearTemplate = jest.fn();
-    const clearSelectedDomain = jest.fn();
-    const clearSelectedDomains = jest.fn();
-    const templateLoading = false;
-    const domainId = 1;
-    const templateId = 2;
-    const props = {
-      clearSelectedDomain,
-      clearSelectedDomains,
-      fetchTemplate,
-      templateLoading,
-      clearTemplate,
-      domainId,
-      templateId,
-      match,
-    };
-    jest.spyOn(TemplateLoader.prototype, "componentDidMount");
-    const wrapper = shallow(<TemplateLoader {...props} />);
-    expect(TemplateLoader.prototype.componentDidMount.mock.calls.length).toBe(
-      1
-    );
-    expect(clearTemplate.mock.calls.length).toBe(0);
-    expect(fetchTemplate.mock.calls.length).toBe(1);
-    expect(fetchTemplate.mock.calls[0]).toEqual([
-      { domainId: 1, templateId: 2 },
-    ]);
-    expect(clearSelectedDomain.mock.calls.length).toBe(0);
-    expect(clearSelectedDomains.mock.calls.length).toBe(0);
-    wrapper.unmount();
-    expect(clearTemplate.mock.calls.length).toBe(1);
-    expect(fetchTemplate.mock.calls.length).toBe(1);
-    expect(clearSelectedDomain.mock.calls.length).toBe(1);
-    expect(clearSelectedDomains.mock.calls.length).toBe(1);
+  it("renders null if templateLoading is false", async () => {
+    const rendered = render(<TemplateLoader />, {
+      state: { templateLoading: false },
+      dispatch: mockDispatch,
+    });
+    await waitForLoad(rendered);
+    expect(rendered.container.firstChild).toBeNull();
   });
 
-  it("calls fetchTemplate when component updates, clearTemplate when component receives null templateId", () => {
-    const fetchTemplate = jest.fn();
-    const clearTemplate = jest.fn();
-    const templateLoading = false;
-    const domainId = 1;
-    const templateId = 2;
-    const props = {
-      fetchTemplate,
-      templateLoading,
-      clearTemplate,
-      domainId,
-      templateId,
-      match,
-    };
-    const newProps = { ...props, templateId: 3 };
-    const newNullProps = { ...props, templateId: null };
+  it("dispatches fetchTemplate when mounted", async () => {
+    const rendered = render(<TemplateLoader />, {
+      state: {
+        selectedDomain: { id: 1 },
+        selectedDomains: [2, 3],
+        selectedTemplate: { id: 4 },
+        templateLoading: false,
+      },
+      dispatch: mockDispatch,
+    });
 
-    const node = document.createElement("div");
-    ReactDOM.render(<TemplateLoader {...props} />, node);
-    jest.spyOn(TemplateLoader.prototype, "componentDidUpdate");
-    ReactDOM.render(<TemplateLoader {...newProps} />, node);
+    await waitForLoad(rendered);
 
-    expect(TemplateLoader.prototype.componentDidUpdate.mock.calls.length).toBe(
-      1
+    // Check that fetchTemplate was called with the right params
+    expect(mockDispatch).toHaveBeenCalledWith(
+      fetchTemplate({ templateId: "1" })
     );
-    expect(clearTemplate.mock.calls.length).toBe(0);
-    expect(fetchTemplate.mock.calls.length).toBe(2);
-    expect(fetchTemplate.mock.calls[1]).toEqual([
-      { domainId: 1, templateId: 3 },
-    ]);
 
-    ReactDOM.render(<TemplateLoader {...newNullProps} />, node);
-    expect(clearTemplate.mock.calls.length).toBe(1);
+    mockDispatch.mockClear();
+    rendered.unmount();
   });
 
-  // TODO: Tests for componentDidUpdate
+  it("dispatches fetchTemplate with selectedTemplateId when no templateId is present", async () => {
+    // Mock useParams to return an empty object for this test only
+    jest.spyOn(require("react-router"), "useParams").mockReturnValue({});
+
+    const rendered = render(<TemplateLoader />, {
+      state: {
+        selectedDomain: { id: 5 },
+        selectedDomains: [6, 7],
+        selectedTemplate: { id: 8 },
+        templateLoading: false,
+      },
+      dispatch: mockDispatch,
+    });
+
+    await waitForLoad(rendered);
+
+    expect(mockDispatch).toHaveBeenCalledWith(
+      fetchTemplate({
+        domainId: 5,
+        domainIds: [6, 7],
+        templateId: 8,
+      })
+    );
+  });
 });

package/src/templates/components/__tests__/TemplateRoutes.spec.js

@@ -0,0 +1,63 @@
+import React from "react";
+import { render, waitForLoad } from "@truedat/test/render";
+import { TemplateRoutes } from "../TemplateRoutes";
+import { useAuthorized } from "@truedat/core/hooks/useAuthorized";
+import { TEMPLATE, TEMPLATES, TEMPLATES_NEW } from "@truedat/core/routes";
+
+jest.mock("@truedat/core/hooks/useAuthorized", () => ({
+  useAuthorized: jest.fn(() => true),
+}));
+
+// Mock all child components
+jest.mock("../NewTemplate", () => () => <div>NewTemplate</div>);
+jest.mock("../Templates", () => () => <div>Templates</div>);
+jest.mock("../Template", () => () => <div>Template</div>);
+jest.mock("../TemplateLoader", () => () => <div>TemplateLoader</div>);
+jest.mock("../TemplatesContext", () => () => <div>TemplatesContext</div>);
+jest.mock("@truedat/core/components/TemplatesLoader", () => () => (
+  <div>TemplatesLoader</div>
+));
+jest.mock("@truedat/core/router/Unauthorized", () => () => (
+  <div>Unauthorized</div>
+));
+
+describe("<TemplateRoutes />", () => {
+  it("renders correctly with default route", async () => {
+    const rendered = render(<TemplateRoutes />);
+    await waitForLoad(rendered);
+    expect(rendered.container).toMatchSnapshot();
+  });
+
+  it("renders correctly with templates route", async () => {
+    const rendered = render(<TemplateRoutes />, {
+      routes: [TEMPLATES],
+    });
+    await waitForLoad(rendered);
+    expect(rendered.container).toMatchSnapshot();
+  });
+
+  it("renders correctly with templates new route", async () => {
+    const rendered = render(<TemplateRoutes />, {
+      routes: [TEMPLATES_NEW],
+    });
+    await waitForLoad(rendered);
+    expect(rendered.container).toMatchSnapshot();
+  });
+
+  it("renders correctly with template route", async () => {
+    const rendered = render(<TemplateRoutes />, {
+      routes: [TEMPLATE.replace(":id", "123")],
+    });
+    await waitForLoad(rendered);
+    expect(rendered.container).toMatchSnapshot();
+  });
+
+  it("renders unauthorized component when not authorized", async () => {
+    useAuthorized.mockReturnValueOnce(false);
+    const rendered = render(<TemplateRoutes />, {
+      routes: [TEMPLATES],
+    });
+    await waitForLoad(rendered);
+    expect(rendered.container).toMatchSnapshot();
+  });
+});

package/src/templates/components/__tests__/TemplatesTable.spec.js

@@ -1,29 +1,35 @@
-import React from "react";
-import { shallowWithIntl } from "@truedat/test/intl-stub";
+import { render, waitForLoad } from "@truedat/test/render";
 import TemplatesTable from "../TemplatesTable";
-import { TemplatesContext } from "../TemplatesContext";
+import TemplatesContext from "../TemplatesContext";
 
 describe("<TemplatesTable />", () => {
   const templates = [
     {
+      id: "1",
       scope: "bg",
       name: "testbg",
       label: "testbg",
     },
     {
+      id: "2",
       scope: "dq",
       name: "testdq",
       label: "testdq",
     },
   ];
-  const context = { templates };
 
-  it("matches the latest snapshot", () => {
-    const wrapper = shallowWithIntl(
-      <TemplatesContext.Provider values={context}>
+  const renderOpts = {
+    state: { templates },
+  };
+
+  it("matches the latest snapshot", async () => {
+    const rendered = render(
+      <TemplatesContext>
         <TemplatesTable />
-      </TemplatesContext.Provider>
+      </TemplatesContext>,
+      renderOpts
     );
-    expect(wrapper).toMatchSnapshot();
+    await waitForLoad(rendered);
+    expect(rendered.container).toMatchSnapshot();
   });
 });