@truedat/core 7.5.9 → 7.5.10

package/src/i18n/components/Languages.js

@@ -1,5 +1,5 @@
 import _ from "lodash/fp";
-import React, { useState } from "react";
+import { useState } from "react";
 import PropTypes from "prop-types";
 import { useIntl } from "react-intl";
 import {
@@ -83,7 +83,6 @@ const LanguageRow = ({
           />
         </TableCell>
       ) : null}
-
       <TableCell>
         {!is_default ? (
           <ConfirmModal
@@ -187,13 +186,15 @@ const Languages = () => {
         </Button>
       </Form>
       <Dimmer.Dimmable dimmed={loading}>
-        <Dimmer active={loading} inverted>
-          <Loader />
-        </Dimmer>
+        {loading ? (
+          <Dimmer active inverted>
+            <Loader />
+          </Dimmer>
+        ) : null}
         <Table collapsing striped>
           <TableHeader>
             <TableRow>
-              <TableCell></TableCell>
+              <TableCell />
               <TableCell textAlign="center">
                 {formatMessage({
                   id: "i18n.messages.locale.required",
@@ -206,7 +207,7 @@ const Languages = () => {
                   })}
                 </TableCell>
               ) : null}
-              <TableCell></TableCell>
+              <TableCell />
             </TableRow>
           </TableHeader>
           <TableBody>

package/src/i18n/components/MessageForm.js

@@ -1,6 +1,5 @@
 import _ from "lodash/fp";
 import PropTypes from "prop-types";
-import React from "react";
 import { useForm, Controller } from "react-hook-form";
 import { useIntl } from "react-intl";
 import { Button, Form, Segment, Header, Loader } from "semantic-ui-react";
@@ -14,15 +13,13 @@ export const LangForm = ({
   formatMessage,
 }) => {
   return (
-    <Segment>
-      <Header
+    (<Segment><Header
         as="h4"
         content={formatMessage({
           id: `i18n.messages.locale.${lang}`,
           defaultMessage: `${name} ( ${local_name} )`,
         })}
-      />
-      <Controller
+      /><Controller
         control={control}
         name={`langs.${id}.definition`}
         rules={{
@@ -45,8 +42,7 @@ export const LangForm = ({
             required
           />
         )}
-      />
-      <Controller
+      /><Controller
         control={control}
         name={`langs.${id}.description`}
         render={({ field: { onBlur, onChange, value } }) => (
@@ -61,8 +57,7 @@ export const LangForm = ({
             value={value || ""}
           />
         )}
-      />
-    </Segment>
+      /></Segment>)
   );
 };
 
@@ -86,8 +81,7 @@ export const MessageForm = ({ onSubmit, isSubmitting }) => {
   const { errors, isDirty, isValid } = formState;
 
   return (
-    <Form onSubmit={handleSubmit(onSubmit)}>
-      <Controller
+    (<Form onSubmit={handleSubmit(onSubmit)}><Controller
         control={control}
         name="message_id"
         rules={{
@@ -110,9 +104,7 @@ export const MessageForm = ({ onSubmit, isSubmitting }) => {
             required
           />
         )}
-      />
-
-      {_.flow(
+      />{_.flow(
         _.filter("is_enabled"),
         _.orderBy(
           ["is_default", "is_required", "lang"],
@@ -127,23 +119,17 @@ export const MessageForm = ({ onSubmit, isSubmitting }) => {
             formatMessage={formatMessage}
           />
         ))
-      )(locales)}
-
-      <div className="actions">
-        <Button
+      )(locales)}<div className="actions"><Button
           floated="right"
           type="submit"
           primary
           loading={isSubmitting}
           disabled={isSubmitting || !isDirty || !isValid}
           content={formatMessage({ id: "actions.save" })}
-        />
-        <HistoryBackButton
+        /><HistoryBackButton
           content={formatMessage({ id: "actions.cancel" })}
           disabled={isSubmitting}
-        />
-      </div>
-    </Form>
+        /></div></Form>)
   );
 };
 

package/src/i18n/components/Messages.js

@@ -1,6 +1,7 @@
 import _ from "lodash/fp";
-import React, { useState } from "react";
-import { Link, useLocation, useHistory } from "react-router-dom";
+import { useState } from "react";
+import { Link, useLocation } from "react-router";
+import { useNavigate } from "react-router";
 import { useIntl, FormattedMessage } from "react-intl";
 import {
   Button,
@@ -23,7 +24,7 @@ const ITEMS_PER_PAGE = 30;
 export function MessagesContent() {
   const { locales, loading } = useLanguage();
 
-  const history = useHistory();
+  const navigate = useNavigate();
   const location = useLocation();
   const searchParams = new URLSearchParams(location.search);
   const selectedLang = searchParams.get("lang");
@@ -50,7 +51,7 @@ export function MessagesContent() {
   const handleSearch = (_e, data) => {
     const filter = _.propOr("", "value")(data);
     setPage(1);
-    history.push(urlTo({ filter }));
+    navigate(urlTo({ filter }));
   };
 
   const messages = selectedLang

package/src/i18n/components/MessagesTable.js

@@ -1,5 +1,4 @@
 import _ from "lodash/fp";
-import React from "react";
 import PropTypes from "prop-types";
 import { useIntl } from "react-intl";
 import { Table, Header, Icon } from "semantic-ui-react";

package/src/i18n/components/NewMessage.js

@@ -1,8 +1,8 @@
-import React from "react";
 import PropTypes from "prop-types";
 import { Breadcrumb, Header, Container, Segment } from "semantic-ui-react";
 import { useIntl, FormattedMessage } from "react-intl";
-import { useHistory, Link } from "react-router-dom";
+import { Link } from "react-router";
+import { useNavigate } from "react-router";
 import { useMessagePost } from "@truedat/core/hooks";
 import { I18N_MESSAGES } from "@truedat/core/routes";
 import { useLanguage } from "./LangProvider";
@@ -12,13 +12,14 @@ const NewMessage = () => {
   const { formatMessage } = useIntl();
   const { trigger } = useMessagePost();
   const { mutate } = useLanguage();
-  const history = useHistory();
+
+  const navigate = useNavigate();
 
   const onSubmit = (message) => {
     trigger({ message }).then(() => {
       mutate();
     });
-    history.push(I18N_MESSAGES);
+    navigate(I18N_MESSAGES);
   };
 
   return (

package/src/i18n/components/__tests__/EditableCell.spec.js

@@ -1,24 +1,22 @@
-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 messages from "@truedat/core/messages";
 import EditableCell from "../EditableCell";
 
-const renderOpts = { messages };
-
 describe("<EditableCell />", () => {
   const onChange = jest.fn();
   const value = "value";
   const placeholder = "placeholder";
 
-  it("matches the latest snapshot", () => {
+  it("matches the latest snapshot", async () => {
     const props = {
       onChange,
       value,
       placeholder,
     };
-    const { container } = render(<EditableCell {...props} />, renderOpts);
-    expect(container).toMatchSnapshot();
+    const rendered = render(<EditableCell {...props} />, { messages });
+    await waitForLoad(rendered);
+    expect(rendered.container).toMatchSnapshot();
   });
 
   it("clicking the cell will enter edition mode and match snapshot", async () => {
@@ -27,12 +25,12 @@ describe("<EditableCell />", () => {
       value,
       placeholder,
     };
-    const { container, findByText } = render(
-      <EditableCell {...props} />,
-      renderOpts
-    );
-    userEvent.click(await findByText(value));
-    expect(container).toMatchSnapshot();
+    const rendered = render(<EditableCell {...props} />, { messages });
+    await waitForLoad(rendered);
+
+    const user = userEvent.setup({ delay: null });
+    await user.click(await rendered.findByText(value));
+    expect(rendered.container).toMatchSnapshot();
   });
 
   it("on edition mode edition mode will call onChange on blur", async () => {
@@ -41,14 +39,14 @@ describe("<EditableCell />", () => {
       value,
       placeholder,
     };
-    const { getByRole, findByText } = render(
-      <EditableCell {...props} />,
-      renderOpts
-    );
-    userEvent.click(await findByText(value));
+    const rendered = render(<EditableCell {...props} />, { messages });
+    await waitForLoad(rendered);
+
+    const user = userEvent.setup({ delay: null });
+    await user.click(await rendered.findByText(value));
 
-    userEvent.type(getByRole("textbox", { type: /text/i }), "foo");
-    userEvent.tab(getByRole("textbox", { type: /text/i }));
+    await user.type(rendered.getByRole("textbox", { type: /text/i }), "foo");
+    await user.tab();
     expect(onChange).toHaveBeenCalledWith("valuefoo");
   });
 });

package/src/i18n/components/__tests__/I18nRoutes.spec.js

@@ -1,14 +1,48 @@
 import React from "react";
-import { render } from "@truedat/test/render";
+import { render, waitForLoad } from "@truedat/test/render";
 import I18nRoutes from "../I18nRoutes";
+import { useAuthorized } from "@truedat/core/hooks/useAuthorized";
 
-jest.mock("@truedat/core/hooks", () => ({
+jest.mock("@truedat/core/hooks/useAuthorized", () => ({
   useAuthorized: jest.fn(() => true),
 }));
 
+// Mock all components used in I18nRoutes
+jest.mock("../Messages", () => () => <div>Messages</div>);
+jest.mock("../NewMessage", () => () => <div>NewMessage</div>);
+jest.mock("@truedat/core/router/Unauthorized", () => () => (
+  <div>Unauthorized</div>
+));
+
 describe("<I18nRoutes />", () => {
-  it("matches the latest snapshot", () => {
-    const { container } = render(<I18nRoutes />);
-    expect(container).toMatchSnapshot();
+  it("renders correctly with default route", async () => {
+    const rendered = render(<I18nRoutes />);
+    await waitForLoad(rendered);
+    expect(rendered.container).toMatchSnapshot();
+  });
+
+  it("renders correctly with i18n/messages route", async () => {
+    const rendered = render(<I18nRoutes />, {
+      routes: ["/i18n/messages"],
+    });
+    await waitForLoad(rendered);
+    expect(rendered.container).toMatchSnapshot();
+  });
+
+  it("renders correctly with i18n/messages/new route", async () => {
+    const rendered = render(<I18nRoutes />, {
+      routes: ["/i18n/messages/new"],
+    });
+    await waitForLoad(rendered);
+    expect(rendered.container).toMatchSnapshot();
+  });
+
+  it("renders unauthorized component when not authorized", async () => {
+    useAuthorized.mockReturnValueOnce(false);
+    const rendered = render(<I18nRoutes />, {
+      routes: ["/i18n/messages"],
+    });
+    await waitForLoad(rendered);
+    expect(rendered.container).toMatchSnapshot();
   });
 });

package/src/i18n/components/__tests__/MessageForm.spec.js

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

package/src/i18n/components/__tests__/Messages.spec.js

@@ -1,31 +1,19 @@
-import React from "react";
-import { render } from "@truedat/test/render";
+import { render, waitForLoad } from "@truedat/test/render";
 import { LangProviderWrapper } from "@truedat/core/i18n";
 import Messages from "../Messages";
 
-const renderOpts = {
-  messages: {
-    en: {
-      "i18n.actions.refreshMessages": "Refresh messages",
-    },
-  },
-};
-
 jest.mock("@truedat/core/hooks", () => ({
   useMessagePatch: jest.fn(() => ({ trigger: jest.fn() })),
 }));
 
-const renderComponent = () =>
-  render(
-    <LangProviderWrapper langs={["es"]}>
-      <Messages />
-    </LangProviderWrapper>,
-    renderOpts
-  );
-
 describe("<Messages />", () => {
-  it("matches the latest snapshot", () => {
-    const { container } = renderComponent();
-    expect(container).toMatchSnapshot();
+  it("matches the latest snapshot", async () => {
+    const rendered = render(
+      <LangProviderWrapper langs={["es"]}>
+        <Messages />
+      </LangProviderWrapper>,
+    );
+    await waitForLoad(rendered);
+    expect(rendered.container).toMatchSnapshot();
   });
 });

package/src/i18n/components/__tests__/NewMessage.spec.js

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

package/src/i18n/components/__tests__/__snapshots__/I18nRoutes.spec.js.snap

@@ -1,3 +1,27 @@
 // Jest Snapshot v1, https://goo.gl/fbAQLP
 
-exports[`<I18nRoutes /> matches the latest snapshot 1`] = `<div />`;
+exports[`<I18nRoutes /> renders correctly with default route 1`] = `<div />`;
+
+exports[`<I18nRoutes /> renders correctly with i18n/messages route 1`] = `
+<div>
+  <div>
+    Messages
+  </div>
+</div>
+`;
+
+exports[`<I18nRoutes /> renders correctly with i18n/messages/new route 1`] = `
+<div>
+  <div>
+    NewMessage
+  </div>
+</div>
+`;
+
+exports[`<I18nRoutes /> renders unauthorized component when not authorized 1`] = `
+<div>
+  <div>
+    Unauthorized
+  </div>
+</div>
+`;

package/src/i18n/components/__tests__/__snapshots__/MessageForm.spec.js.snap

@@ -36,6 +36,7 @@ exports[`<MessageForm /> matches the latest snapshot 1`] = `
       </button>
       <a
         class="ui secondary button"
+        data-discover="true"
         href="/"
         role="button"
       >

package/src/i18n/components/__tests__/__snapshots__/Messages.spec.js.snap

@@ -29,10 +29,11 @@ exports[`<Messages /> matches the latest snapshot 1`] = `
       <button
         class="ui right floated button"
       >
-        Refresh messages
+        i18n.actions.refreshMessages
       </button>
       <a
         class="ui primary right floated button"
+        data-discover="true"
         href="/i18n/messages/new"
         role="button"
       >
@@ -47,15 +48,17 @@ exports[`<Messages /> matches the latest snapshot 1`] = `
       >
         <a
           class="active item"
+          data-discover="true"
           href="/i18n/messages"
         >
           i18n.messages.locale.manage
         </a>
         <a
           class="item"
+          data-discover="true"
           href="/i18n/messages?lang=es"
         >
-          undefined ( undefined )
+          es ( es )
         </a>
       </div>
       <div
@@ -114,17 +117,6 @@ exports[`<Messages /> matches the latest snapshot 1`] = `
       <div
         class="dimmable"
       >
-        <div
-          class="ui inverted dimmer"
-        >
-          <div
-            class="content"
-          >
-            <div
-              class="ui loader"
-            />
-          </div>
-        </div>
         <table
           class="ui collapsing striped table"
         >

package/src/i18n/components/__tests__/__snapshots__/NewMessage.spec.js.snap

@@ -7,6 +7,7 @@ exports[`<NewMessage /> matches the latest snapshot 1`] = `
   >
     <a
       class="section"
+      data-discover="true"
       href="/i18n/messages"
     >
       Translations
@@ -71,6 +72,7 @@ exports[`<NewMessage /> matches the latest snapshot 1`] = `
         </button>
         <a
           class="ui secondary button"
+          data-discover="true"
           href="/"
           role="button"
         >

package/src/reducers/__tests__/comments.spec.js

@@ -10,39 +10,42 @@ describe("reducers: comments", () => {
 
   it("should handle the clearComments.TRIGGER action", () => {
     expect(comments(fooState, { type: clearComments.TRIGGER })).toBe(
-      initialState
+      initialState,
     );
   });
 
   it("should handle the fetchComments.TRIGGER action", () => {
     expect(comments(fooState, { type: fetchComments.TRIGGER })).toBe(
-      initialState
+      initialState,
     );
   });
 
   it("should handle the fetchComments.SUCCESS action", () => {
     const someComments = [
       { content: "My first comment", resource_id: 2 },
-      { content: "My second comment", resource_id: 2 }
+      { content: "My second comment", resource_id: 2 },
     ];
 
     const data = someComments;
 
     expect(
-      comments(fooState, { type: fetchComments.SUCCESS, payload: { data } })
+      comments(fooState, { type: fetchComments.SUCCESS, payload: { data } }),
     ).toMatchObject(someComments);
   });
 
   it("should handle the createComment.SUCCESS action", () => {
     const someComments = [
       { content: "My first comment", resource_id: 2 },
-      { content: "My second comment", resource_id: 2 }
+      { content: "My second comment", resource_id: 2 },
     ];
     const newComment = { content: "My third comment", resource_id: 2 };
     const data = newComment;
     const resultState = [newComment, ...someComments];
     expect(
-      comments(someComments, { type: createComment.SUCCESS, payload: { data } })
+      comments(someComments, {
+        type: createComment.SUCCESS,
+        payload: { data },
+      }),
     ).toMatchObject(resultState);
   });
 

package/src/reducers/__tests__/commentsResource.spec.js

@@ -11,13 +11,16 @@ describe("reducers: commentsLoading", () => {
 
   it("should be true after receiving the fetchComments.REQUEST action", () => {
     expect(
-      commentsResource(fooState, { type: fetchComments.REQUEST, payload: data })
+      commentsResource(fooState, {
+        type: fetchComments.REQUEST,
+        payload: data,
+      }),
     ).toMatchObject(data);
   });
 
   it("should be false after receiving the clearComments.TRIGGER action", () => {
     expect(
-      commentsResource(fooState, { type: clearComments.TRIGGER })
+      commentsResource(fooState, { type: clearComments.TRIGGER }),
     ).toMatchObject({});
   });
 });

package/src/reducers/__tests__/coreMessage.spec.js

@@ -12,7 +12,7 @@ describe("reducers: coreMessage", () => {
 
   it("should handle the login.TRIGGER action", () => {
     expect(coreMessage(fooState, { type: dismissAlert.TRIGGER })).toEqual(
-      initialState
+      initialState,
     );
   });
 });

package/src/reducers/__tests__/dashboardDomains.spec.js

@@ -11,7 +11,7 @@ describe("reducers: dashboardDomains", () => {
 
   it("should handle the clearDashboardDomains.TRIGGER action", () => {
     expect(
-      dashboardDomains(fooState, { type: clearDashboardDomains.TRIGGER })
+      dashboardDomains(fooState, { type: clearDashboardDomains.TRIGGER }),
     ).toEqual(initialState);
   });
 
@@ -21,8 +21,8 @@ describe("reducers: dashboardDomains", () => {
     expect(
       dashboardDomains(fooState, {
         type: setDashboardDomains.TRIGGER,
-        payload: domains
-      })
+        payload: domains,
+      }),
     ).toMatchObject(domains);
   });
 
@@ -32,8 +32,8 @@ describe("reducers: dashboardDomains", () => {
     expect(
       dashboardDomains(domains, {
         type: setDashboardDomains.TRIGGER,
-        payload: domains
-      })
+        payload: domains,
+      }),
     ).toEqual(domains);
   });
 });

package/src/reducers/__tests__/systems.spec.js

@@ -0,0 +1,42 @@
+import { fetchSystems, clearSystems } from "../../routines";
+import { systems } from "..";
+
+const fooState = { foo: "bar" };
+
+describe("reducers: systems", () => {
+  const initialState = [];
+
+  it("should provide the initial state", () => {
+    expect(systems(undefined, {})).toEqual(initialState);
+  });
+
+  it("should handle the fetchSystems.TRIGGER action", () => {
+    expect(systems(fooState, { type: fetchSystems.TRIGGER })).toEqual(
+      initialState,
+    );
+  });
+
+  it("should handle the clearSystems.TRIGGER action", () => {
+    expect(systems(fooState, { type: clearSystems.TRIGGER })).toEqual(
+      initialState,
+    );
+  });
+
+  it("should handle the fetchSystems.SUCCESS action", () => {
+    const someSystems = [
+      { id: 1, name: "System 1", description: "Desc 1" },
+      { id: 2, name: "System 2", description: "Desc 2" },
+    ];
+
+    expect(
+      systems(fooState, {
+        type: fetchSystems.SUCCESS,
+        payload: { data: someSystems },
+      }),
+    ).toEqual(someSystems);
+  });
+
+  it("should ignore unknown actions", () => {
+    expect(systems(fooState, { type: "FOO" })).toBe(fooState);
+  });
+});

package/src/reducers/__tests__/systemsLoading.spec.js

@@ -0,0 +1,22 @@
+import { fetchSystems } from "../../routines";
+import { systemsLoading } from "..";
+
+const fooState = { foo: "bar" };
+
+describe("reducers: systemsLoading", () => {
+  it("should provide the initial state", () => {
+    expect(systemsLoading(undefined, {})).toBe(false);
+  });
+
+  it("should be true after receiving the fetchSystems.TRIGGER action", () => {
+    expect(systemsLoading(false, { type: fetchSystems.TRIGGER })).toBe(true);
+  });
+
+  it("should be false after receiving the fetchSystems.FULFILL action", () => {
+    expect(systemsLoading(true, { type: fetchSystems.FULFILL })).toBe(false);
+  });
+
+  it("should ignore unhandled actions", () => {
+    expect(systemsLoading(fooState, { type: "FOO" })).toBe(fooState);
+  });
+});