@truedat/dq 7.5.7 → 7.5.10

package/src/components/ruleImplementationForm/RuleImplementationForm.js

@@ -1,8 +1,8 @@
 import _ from "lodash/fp";
-import React, { Fragment, useEffect, useState } from "react";
+import { Fragment, useEffect, useState } from "react";
 import PropTypes from "prop-types";
 import { connect } from "react-redux";
-import { useHistory } from "react-router-dom";
+import { useNavigate } from "react-router";
 import { FormattedMessage, useIntl } from "react-intl";
 import {
   Button,
@@ -63,7 +63,7 @@ export const RuleImplementationForm = ({
   setValidations,
 }) => {
   const { formatMessage } = useIntl();
-  const history = useHistory();
+  const navigate = useNavigate();
 
   const [steps, setSteps] = useState([]);
   const [activeStep, setActiveStep] = useState("information");
@@ -287,8 +287,8 @@ export const RuleImplementationForm = ({
     return _.isEmpty(nextStep)
       ? null
       : nextStep?.disabled
-      ? getNextStep(nextStep.name)
-      : _.prop("name")(nextStep);
+        ? getNextStep(nextStep.name)
+        : _.prop("name")(nextStep);
   };
 
   const setPreviousStep = (stepName) => {
@@ -307,8 +307,8 @@ export const RuleImplementationForm = ({
     return _.isEmpty(prevStep)
       ? null
       : prevStep?.disabled
-      ? getPreviousStep(prevStep.name)
-      : _.prop("name")(prevStep);
+        ? getPreviousStep(prevStep.name)
+        : _.prop("name")(prevStep);
   };
 
   const isButtonDisabled = (currentStep) =>
@@ -332,7 +332,7 @@ export const RuleImplementationForm = ({
     }
   };
 
-  const doCancel = () => history.goBack();
+  const doCancel = () => navigate(-1);
 
   const {
     dataset: structures,

package/src/components/ruleImplementationForm/RuleImplementationRawForm.js

@@ -1,8 +1,9 @@
 import _ from "lodash/fp";
-import React, { useState, useEffect } from "react";
+import { lazy, useState, useEffect } from "react";
 import PropTypes from "prop-types";
 import { connect } from "react-redux";
-import { useHistory, useLocation } from "react-router-dom";
+import { useLocation } from "react-router";
+import { useNavigate } from "react-router";
 import { FormattedMessage, useIntl } from "react-intl";
 import { gql, useQuery } from "@apollo/client";
 import { Loading } from "@truedat/core/components";
@@ -13,8 +14,8 @@ import { DOMAIN_QUERY } from "@truedat/core/api/queries";
 import LimitsForm from "./LimitsForm";
 import { areLimitsValid } from "./limitsValidation";
 
-const SelectableDynamicForm = React.lazy(() =>
-  import("@truedat/df/components/SelectableDynamicForm")
+const SelectableDynamicForm = lazy(
+  () => import("@truedat/df/components/SelectableDynamicForm")
 );
 
 const DomainActionsLoader = ({ id, actions, onLoad }) => {
@@ -67,7 +68,7 @@ export const RuleImplementationRawForm = ({
   sourcesLoading,
 }) => {
   const { formatMessage } = useIntl();
-  const history = useHistory();
+  const navigate = useNavigate();
 
   const domainActions = ["publishImplementation"];
 
@@ -181,7 +182,7 @@ export const RuleImplementationRawForm = ({
     validations: validateContent("validations"),
   });
 
-  const doCancel = () => history.goBack();
+  const doCancel = () => navigate(-1);
   const errors = getErrors();
   const domainId =
     conceptDomainId || ruleImplementation?.domain_id || rule?.domain_id;
@@ -293,7 +294,7 @@ export const RuleImplementationRawForm = ({
         label={
           <label htmlFor="dataset">
             <FormattedMessage id="ruleImplementationRawForm.props.dataset" />
-            <Help message="ruleImplementationRawForm.props.dataset.help"></Help>
+            <Help message="ruleImplementationRawForm.props.dataset.help" />
           </label>
         }
         id="dataset"
@@ -317,7 +318,7 @@ export const RuleImplementationRawForm = ({
         label={
           <label>
             <FormattedMessage id="ruleImplementationRawForm.props.population" />
-            <Help message="ruleImplementationRawForm.props.population.help"></Help>
+            <Help message="ruleImplementationRawForm.props.population.help" />
           </label>
         }
         name="population"
@@ -339,7 +340,7 @@ export const RuleImplementationRawForm = ({
         label={
           <label>
             <FormattedMessage id="ruleImplementationRawForm.props.validations" />
-            <Help message="ruleImplementationRawForm.props.validations.help"></Help>
+            <Help message="ruleImplementationRawForm.props.validations.help" />
           </label>
         }
         name="validations"

package/src/components/ruleImplementationForm/SegmentsForm.js

@@ -1,5 +1,4 @@
 import _ from "lodash/fp";
-import React from "react";
 import PropTypes from "prop-types";
 import { dropAt, replaceAt } from "@truedat/core/services/arrays";
 import { FieldsGrid } from "./FieldsGrid";

package/src/components/ruleImplementationForm/StringField.js

@@ -1,6 +1,5 @@
 import _ from "lodash/fp";
 import PropTypes from "prop-types";
-import React from "react";
 import { Form } from "semantic-ui-react";
 
 export const StringField = ({ name, label, value, onChange }) => {
@@ -10,7 +9,7 @@ export const StringField = ({ name, label, value, onChange }) => {
       label={label ? label : ""}
       value={_.isEmpty(raw) ? "" : raw}
       name={name}
-      onChange={e => onChange(e, _.path("target.value", e))}
+      onChange={(e) => onChange(e, _.path("target.value", e))}
     />
   );
 };
@@ -19,7 +18,7 @@ StringField.propTypes = {
   name: PropTypes.string,
   label: PropTypes.string,
   value: PropTypes.string,
-  onChange: PropTypes.func
+  onChange: PropTypes.func,
 };
 
 export default StringField;

package/src/components/ruleImplementationForm/StringListField.js

@@ -1,6 +1,5 @@
 import _ from "lodash/fp";
 import PropTypes from "prop-types";
-import React from "react";
 import { Form } from "semantic-ui-react";
 
 export const StringListField = ({ name, label, value, onChange }) => {
@@ -18,7 +17,7 @@ export const StringListField = ({ name, label, value, onChange }) => {
       options={["", ...raw].map((o, i) => ({
         key: i,
         value: o,
-        text: o
+        text: o,
       }))}
     />
   );
@@ -27,7 +26,7 @@ export const StringListField = ({ name, label, value, onChange }) => {
 StringListField.propTypes = {
   name: PropTypes.string,
   label: PropTypes.string,
-  onChange: PropTypes.func
+  onChange: PropTypes.func,
 };
 
 export default StringListField;

package/src/components/ruleImplementationForm/ValidationsForm.js

@@ -1,5 +1,4 @@
 import _ from "lodash/fp";
-import React from "react";
 import PropTypes from "prop-types";
 import { dropAt, replaceAt } from "@truedat/core/services/arrays";
 import { FiltersGrid } from "./FiltersGrid";

package/src/components/ruleImplementationForm/ValueConditions.js

@@ -1,5 +1,5 @@
 import _ from "lodash/fp";
-import React from "react";
+import { Fragment } from "react";
 import PropTypes from "prop-types";
 import { Button, Grid, Icon } from "semantic-ui-react";
 import { dropAt, replaceAt } from "@truedat/core/services/arrays";
@@ -75,7 +75,7 @@ export const ValueConditions = ({
   };
 
   return population.map((clause, index) => (
-    <React.Fragment key={index}>
+    <Fragment key={index}>
       <Grid.Row>
         <Grid.Column width={14}>
           <FiltersFormGroup
@@ -107,7 +107,7 @@ export const ValueConditions = ({
           />
         </Grid.Column>
       </Grid.Row>
-    </React.Fragment>
+    </Fragment>
   ));
 };
 

package/src/components/ruleImplementationForm/__tests__/DataSetForm.spec.js

@@ -1,9 +1,6 @@
-import React from "react";
-import { render } from "@truedat/test/render";
-import { waitFor } from "@testing-library/react";
+import { render, waitForLoad } from "@truedat/test/render";
 import { REFERENCE_DATASETS_HEADERS_QUERY } from "@truedat/dd/api/queries";
 import DatasetForm from "../DatasetForm";
-import en from "../../../messages/en";
 
 const referenceDatasetsMock = {
   request: { query: REFERENCE_DATASETS_HEADERS_QUERY },
@@ -21,12 +18,10 @@ const referenceDatasetsMock = {
     },
   },
 };
-const messages = { en };
 
 const renderOpts = {
   mocks: [referenceDatasetsMock],
-  messages,
-  fallback: "lazy",
+  state: {},
 };
 
 describe("<DatasetForm />", () => {
@@ -47,16 +42,8 @@ describe("<DatasetForm />", () => {
   };
 
   it("matches the latest snapshot", async () => {
-    const { container, queryByText } = render(
-      <DatasetForm {...props} />,
-      renderOpts
-    );
-
-    await waitFor(() => {
-      expect(queryByText(/lazy/i)).not.toBeInTheDocument();
-      expect(container.querySelector(".loader")).not.toBeInTheDocument();
-    });
-
-    expect(container).toMatchSnapshot();
+    const rendered = render(<DatasetForm {...props} />, renderOpts);
+    await waitForLoad(rendered);
+    expect(rendered.container).toMatchSnapshot();
   });
 });

package/src/components/ruleImplementationForm/__tests__/FiltersField.spec.js

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

package/src/components/ruleImplementationForm/__tests__/FiltersFormGroup.spec.js

@@ -1,7 +1,6 @@
-import React, { Suspense } from "react";
-import { render } from "@truedat/test/render";
 import { createStore } from "redux";
 import { Provider } from "react-redux";
+import { render, waitForLoad } from "@truedat/test/render";
 import { FiltersFormGroup } from "../FiltersFormGroup";
 
 describe("<FiltersFormGroup />", () => {
@@ -41,27 +40,14 @@ describe("<FiltersFormGroup />", () => {
     scope,
   };
 
-  const messages = {
-    en: {
-      "filtersGrid.field.label": "Field",
-      "filtersGrid.field.operator": "Operator",
-      "operator.dropdown.placeholder": "Operator Dropdown",
-      "filtersGrid.field.value": "Value",
-    },
-  };
-
-  it("matches the latest snapshot", () => {
+  it("matches the latest snapshot", async () => {
     const store = createStore(() => ({ structuresSiblings }));
-    const { container } = render(
+    const rendered = render(
       <Provider store={store}>
-        <Suspense fallback={null}>
-          <FiltersFormGroup {...props} />
-        </Suspense>
-      </Provider>,
-      {
-        messages,
-      }
+        <FiltersFormGroup {...props} />
+      </Provider>
     );
-    expect(container).toMatchSnapshot();
+    await waitForLoad(rendered);
+    expect(rendered.container).toMatchSnapshot();
   });
 });

package/src/components/ruleImplementationForm/__tests__/FiltersGroup.spec.js

@@ -1,5 +1,5 @@
-import React, { Suspense } from "react";
-import { render } from "@truedat/test/render";
+import userEvent from "@testing-library/user-event";
+import { render, waitForLoad } from "@truedat/test/render";
 import { createStore } from "redux";
 import { Provider } from "react-redux";
 import { FiltersGroup } from "../FiltersGroup";
@@ -63,29 +63,20 @@ describe("<FiltersGroup />", () => {
     setRowValue,
   };
 
-  const messages = {
-    en: {
-      "filtersGrid.field.filters.popup": "Filters",
-      "filtersGrid.field.filters.deletion.popup": "Delete Filters",
-      "operator.dropdown.placeholder": "Operator Dropdown",
-      "filtersGrid.field.label": "Field",
-      "filtersGrid.field.operator": "Operator",
-      "filtersGrid.field.value": "Value",
+  const renderOpts = {
+    state: {
+      structuresSiblings,
     },
   };
 
-  it("matches the latest snapshot when siblings provided", () => {
-    const store = createStore(() => ({ structuresSiblings }));
-    const { container } = render(
-      <Provider store={store}>
-        <Suspense fallback={null}>
-          <FiltersGroup {...props} />
-        </Suspense>
+  it("matches the latest snapshot when siblings provided", async () => {
+    const rendered = render(
+      <Provider store={createStore(() => ({ structuresSiblings }))}>
+        <FiltersGroup {...props} />
       </Provider>,
-      {
-        messages,
-      }
+      renderOpts
     );
-    expect(container).toMatchSnapshot();
+    await waitForLoad(rendered);
+    expect(rendered.container).toMatchSnapshot();
   });
 });

package/src/components/ruleImplementationForm/__tests__/InformationForm.spec.js

@@ -1,6 +1,7 @@
-import React from "react";
 import { waitFor } from "@testing-library/react";
 import { render } from "@truedat/test/render";
+import { multipleTemplatesMock } from "@truedat/test/mocks";
+
 import { DOMAINS_QUERY } from "@truedat/core/api/queries";
 import InformationForm from "../InformationForm";
 
@@ -22,12 +23,17 @@ const domainsMock = {
   result: { data: { domains: domains } },
 };
 const renderOpts = {
-  mocks: [domainsMock],
+  mocks: [
+    domainsMock,
+    multipleTemplatesMock({
+      scope: "ri",
+      domainIds: null,
+    }),
+  ],
   state: {
     rule: {},
     ruleImplementationCreating: true,
   },
-  fallback: "lazy",
 };
 
 describe("<RuleImplementationForm />", () => {

package/src/components/ruleImplementationForm/__tests__/LimitsForm.spec.js

@@ -1,10 +1,9 @@
-import React from "react";
 import { fireEvent } from "@testing-library/react";
-import { render } from "@truedat/test/render";
+import { render, waitForLoad } from "@truedat/test/render";
 import LimitsForm from "../LimitsForm";
 
 describe("<LimitsForm />", () => {
-  it("input changes calls onChange prop", () => {
+  it("input changes calls onChange prop", async () => {
     const onChange = jest.fn();
     const props = {
       ruleImplementation: {
@@ -15,16 +14,17 @@ describe("<LimitsForm />", () => {
       onChange,
     };
 
-    const { container } = render(<LimitsForm {...props} />);
+    const rendered = render(<LimitsForm {...props} />);
+    await waitForLoad(rendered);
 
-    fireEvent.change(container.querySelector("input[name=goal]"), {
+    fireEvent.change(rendered.container.querySelector("input[name=goal]"), {
       target: { name: "goal", value: "5" },
     });
 
     expect(onChange).toBeCalledWith("goal", "5");
   });
 
-  it("shows required label", () => {
+  it("shows required label", async () => {
     const props = {
       ruleImplementation: {
         goal: null,
@@ -34,15 +34,20 @@ describe("<LimitsForm />", () => {
       onChange: jest.fn(),
     };
 
-    const { container, getByText } = render(<LimitsForm {...props} />);
-    expect(container).toMatchSnapshot();
-
-    const errorText = "Required field is empty";
-    expect(getByText("Goal")).toHaveTextContent(errorText);
-    expect(getByText("Threshold")).toHaveTextContent(errorText);
+    const rendered = render(<LimitsForm {...props} />);
+    await waitForLoad(rendered);
+    expect(rendered.container).toMatchSnapshot();
+
+    const errorText = /empty_required/i;
+    expect(
+      rendered.getByText(/ruleImplementations.props.goal/i)
+    ).toHaveTextContent(errorText);
+    expect(
+      rendered.getByText(/ruleImplementations.props.minimum/i)
+    ).toHaveTextContent(errorText);
   });
 
-  it("shows invalid number label", () => {
+  it("shows invalid number label", async () => {
     const props = {
       ruleImplementation: {
         goal: "text",
@@ -52,15 +57,20 @@ describe("<LimitsForm />", () => {
       onChange: jest.fn(),
     };
 
-    const { container, getByText } = render(<LimitsForm {...props} />);
-    expect(container).toMatchSnapshot();
-
-    const errorText = "Invalid number format";
-    expect(getByText("Goal")).toHaveTextContent(errorText);
-    expect(getByText("Threshold")).toHaveTextContent(errorText);
+    const rendered = render(<LimitsForm {...props} />);
+    await waitForLoad(rendered);
+    expect(rendered.container).toMatchSnapshot();
+
+    const errorText = /invalid_number_format/i;
+    expect(
+      rendered.getByText(/ruleImplementations.props.goal/i)
+    ).toHaveTextContent(errorText);
+    expect(
+      rendered.getByText(/ruleImplementations.props.minimum/i)
+    ).toHaveTextContent(errorText);
   });
 
-  it("shows label for percentage goal over 100", () => {
+  it("shows label for percentage goal over 100", async () => {
     const props = {
       ruleImplementation: {
         goal: "200",
@@ -70,14 +80,17 @@ describe("<LimitsForm />", () => {
       onChange: jest.fn(),
     };
 
-    const { container, getByText } = render(<LimitsForm {...props} />);
-    expect(container).toMatchSnapshot();
+    const rendered = render(<LimitsForm {...props} />);
+    await waitForLoad(rendered);
+    expect(rendered.container).toMatchSnapshot();
 
-    const errorText = "Goal percentage cannot be greater than 100";
-    expect(getByText("Goal")).toHaveTextContent(errorText);
+    const errorText = /form.validation.max_goal/i;
+    expect(
+      rendered.getByText(/ruleImplementations.props.goal/i)
+    ).toHaveTextContent(errorText);
   });
 
-  it("shows label for percentage goal greater than minimum", () => {
+  it("shows label for percentage goal greater than minimum", async () => {
     const props = {
       ruleImplementation: {
         goal: 20,
@@ -87,18 +100,19 @@ describe("<LimitsForm />", () => {
       onChange: jest.fn(),
     };
 
-    const { container, getByText } = render(<LimitsForm {...props} />);
-    expect(container).toMatchSnapshot();
+    const rendered = render(<LimitsForm {...props} />);
+    await waitForLoad(rendered);
+    expect(rendered.container).toMatchSnapshot();
 
-    expect(getByText("Goal")).toHaveTextContent(
-      "Goal must be greater than (or equal to) the threshold (higher goal is better)."
-    );
-    expect(getByText("Threshold")).toHaveTextContent(
-      "Threshold must be lower than (or equal to) the goal"
-    );
+    expect(
+      rendered.getByText(/ruleImplementations.props.goal/i)
+    ).toHaveTextContent(/form.validation.goal_less/i);
+    expect(
+      rendered.getByText(/ruleImplementations.props.minimum/i)
+    ).toHaveTextContent(/form.validation.minimum_greater/i);
   });
 
-  it("shows label for deviation minimum greater than 100", () => {
+  it("shows label for deviation minimum greater than 100", async () => {
     const props = {
       ruleImplementation: {
         goal: "1",
@@ -108,15 +122,16 @@ describe("<LimitsForm />", () => {
       onChange: jest.fn(),
     };
 
-    const { container, getByText } = render(<LimitsForm {...props} />);
-    expect(container).toMatchSnapshot();
+    const rendered = render(<LimitsForm {...props} />);
+    await waitForLoad(rendered);
+    expect(rendered.container).toMatchSnapshot();
 
-    expect(getByText("Threshold")).toHaveTextContent(
-      "Threshold percentage cannot be greater than 100"
-    );
+    expect(
+      rendered.getByText(/ruleImplementations.props.minimum/i)
+    ).toHaveTextContent(/form.validation.max_minimum/i);
   });
 
-  it("shows label for deviation minimum greater than goal", () => {
+  it("shows label for deviation minimum greater than goal", async () => {
     const props = {
       ruleImplementation: {
         goal: "50",
@@ -126,18 +141,19 @@ describe("<LimitsForm />", () => {
       onChange: jest.fn(),
     };
 
-    const { container, getByText } = render(<LimitsForm {...props} />);
-    expect(container).toMatchSnapshot();
+    const rendered = render(<LimitsForm {...props} />);
+    await waitForLoad(rendered);
+    expect(rendered.container).toMatchSnapshot();
 
-    expect(getByText("Goal")).toHaveTextContent(
-      "Goal must be less than (or equal to) the threshold (lower goal is better)"
-    );
-    expect(getByText("Threshold")).toHaveTextContent(
-      "Threshold must greater than (or equal to) the goal"
-    );
+    expect(
+      rendered.getByText(/ruleImplementations.props.goal/i)
+    ).toHaveTextContent(/form.validation.goal.less_eq.minimum/i);
+    expect(
+      rendered.getByText(/ruleImplementations.props.minimum/i)
+    ).toHaveTextContent(/form.validation.minimum.greater_eq.goal/i);
   });
 
-  it("shows label for errors_number minimum greater than goal", () => {
+  it("shows label for errors_number minimum greater than goal", async () => {
     const props = {
       ruleImplementation: {
         goal: "200",
@@ -147,14 +163,15 @@ describe("<LimitsForm />", () => {
       onChange: jest.fn(),
     };
 
-    const { container, getByText } = render(<LimitsForm {...props} />);
-    expect(container).toMatchSnapshot();
+    const rendered = render(<LimitsForm {...props} />);
+    await waitForLoad(rendered);
+    expect(rendered.container).toMatchSnapshot();
 
-    expect(getByText("Goal")).toHaveTextContent(
-      "Goal must be less than (or equal to) the threshold (lower goal is better)"
-    );
-    expect(getByText("Threshold")).toHaveTextContent(
-      "Threshold must greater than (or equal to) the goal"
-    );
+    expect(
+      rendered.getByText(/ruleImplementations.props.goal/i)
+    ).toHaveTextContent(/form.validation.goal.less_eq.minimum/i);
+    expect(
+      rendered.getByText(/ruleImplementations.props.minimum/i)
+    ).toHaveTextContent(/form.validation.minimum.greater_eq.goal/i);
   });
 });