@truedat/df 7.5.7 → 7.5.10

package/src/templates/components/templateForm/TemplateFormActions.js

@@ -1,7 +1,6 @@
-import React from "react";
 import PropTypes from "prop-types";
 import { connect } from "react-redux";
-import { useHistory } from "react-router-dom";
+import { useNavigate } from "react-router";
 import { Button, Container } from "semantic-ui-react";
 import { TEMPLATES } from "@truedat/core/routes";
 import { FormattedMessage } from "react-intl";
@@ -12,8 +11,8 @@ export const TemplateFormActions = ({
   onSave,
   isInvalid,
 }) => {
-  const history = useHistory();
-  const onCancel = () => history.push(TEMPLATES);
+  const navigate = useNavigate();
+  const onCancel = () => navigate(TEMPLATES);
   return (
     <Container textAlign="right">
       <Button

package/src/templates/components/templateForm/ValuesField.js

@@ -1,5 +1,5 @@
 import _ from "lodash/fp";
-import React, { useEffect } from "react";
+import { useEffect } from "react";
 import PropTypes from "prop-types";
 import { Form, Segment } from "semantic-ui-react";
 import { useIntl } from "react-intl";
@@ -84,7 +84,6 @@ export const ValuesField = ({
                 }
               />
             </Form.Field>
-
             {hasAiSuggestion ? (
               <Form.Field>
                 <Form.Checkbox
@@ -100,7 +99,6 @@ export const ValuesField = ({
                 />
               </Form.Field>
             ) : null}
-
             {_.includes(scope)(searchableEnabledScopes) ? (
               <Form.Field>
                 <Form.Checkbox

package/src/templates/components/templateForm/ValuesListForm.js

@@ -1,5 +1,5 @@
 import _ from "lodash/fp";
-import React from "react";
+import { Component } from "react";
 import PropTypes from "prop-types";
 import { FormattedMessage } from "react-intl";
 import { Form, Icon, Label, List, Popup } from "semantic-ui-react";
@@ -14,7 +14,7 @@ const initialState = {
   domain: "",
   column_mandatory: false,
 };
-export class ValuesListForm extends React.Component {
+export class ValuesListForm extends Component {
   state = initialState;
 
   handleSubmit = ({ key }) => {
@@ -107,7 +107,7 @@ export class ValuesListForm extends React.Component {
     } else {
       return (
         <List.Content>
-          {value.value} / {value.text}
+          {value.value}/ {value.text}
         </List.Content>
       );
     }

package/src/templates/components/templateForm/ValuesSelector.js

@@ -1,5 +1,4 @@
 import _ from "lodash/fp";
-import React from "react";
 import PropTypes from "prop-types";
 import { FormattedMessage } from "react-intl";
 import { Form, Label } from "semantic-ui-react";

package/src/templates/components/templateForm/__tests__/ActiveGroupForm.spec.js

@@ -1,19 +1,13 @@
-import React from "react";
-import { shallow } from "enzyme";
-import { intl } from "@truedat/test/intl-stub";
+import { render, waitForLoad } from "@truedat/test/render";
 import { ActiveGroupForm } from "../ActiveGroupForm";
 
-// workaround for enzyme issue with React.useContext
-// see https://github.com/airbnb/enzyme/issues/2176#issuecomment-532361526
-jest.spyOn(React, "useContext").mockImplementation(() => intl);
-
 describe("<ActiveGroupForm />", () => {
-  it("matches the latest snapshot", () => {
+  it("matches the latest snapshot", async () => {
     const content = [
       {
         name: "Group name",
-        fields: [{ name: "field_name" }]
-      }
+        fields: [{ name: "field_name" }],
+      },
     ];
     const activeGroup = 0;
     const setActiveGroup = jest.fn();
@@ -23,9 +17,10 @@ describe("<ActiveGroupForm />", () => {
       content,
       activeGroup,
       setActiveGroup,
-      onChange
+      onChange,
     };
-    const wrapper = shallow(<ActiveGroupForm {...props} />);
-    expect(wrapper).toMatchSnapshot();
+    const rendered = render(<ActiveGroupForm {...props} />);
+    await waitForLoad(rendered);
+    expect(rendered.container).toMatchSnapshot();
   });
 });

package/src/templates/components/templateForm/__tests__/DefaultValue.spec.js

@@ -1,5 +1,5 @@
-import React from "react";
-import { shallow } from "enzyme";
+import userEvent from "@testing-library/user-event";
+import { render, waitForLoad } from "@truedat/test/render";
 import { DefaultValue } from "../DefaultValue";
 
 describe("<DefaultValue />", () => {
@@ -11,19 +11,20 @@ describe("<DefaultValue />", () => {
   const defaultField = "name.default";
   const props = {
     defaultField,
-    field: { values, cardinality: "*" },
+    field: { values, cardinality: "*", default: { value: "x" } },
     fieldType,
     formatMessage,
     onChange,
     type,
   };
 
-  it("matches the latest snapshot for null values", () => {
-    const wrapper = shallow(<DefaultValue {...props} />);
-    expect(wrapper).toMatchSnapshot();
+  it("matches the latest snapshot for null values", async () => {
+    const rendered = render(<DefaultValue {...props} />);
+    await waitForLoad(rendered);
+    expect(rendered.container).toMatchSnapshot();
   });
 
-  it("renders date input when type is null and fieldType is date", () => {
+  it("renders date input when type is null and fieldType is date", async () => {
     const props = {
       defaultField,
       field: { [type]: "2020-05-19", cardinality: "+" },
@@ -32,13 +33,15 @@ describe("<DefaultValue />", () => {
       onChange,
       type: null,
     };
-    const wrapper = shallow(<DefaultValue {...props} />);
-    expect(wrapper.find("DateField").length).toBe(1);
-    expect(wrapper.find("FormInput").length).toBe(0);
-    expect(wrapper.find("FormDropdown").length).toBe(0);
+    const rendered = render(<DefaultValue {...props} />);
+    await waitForLoad(rendered);
+    expect(rendered.getByPlaceholderText(/date/i)).toBeInTheDocument();
+    expect(
+      rendered.container.querySelector(".dropdown")
+    ).not.toBeInTheDocument();
   });
 
-  it("renders date time input when type is null and fieldType is date time", () => {
+  it("renders date time input when type is null and fieldType is date time", async () => {
     const props = {
       defaultField,
       field: { [type]: "2020-05-19 23:00", cardinality: "+" },
@@ -47,13 +50,15 @@ describe("<DefaultValue />", () => {
       onChange,
       type: null,
     };
-    const wrapper = shallow(<DefaultValue {...props} />);
-    expect(wrapper.find("DateTimeField").length).toBe(1);
-    expect(wrapper.find("FormInput").length).toBe(0);
-    expect(wrapper.find("FormDropdown").length).toBe(0);
+    const rendered = render(<DefaultValue {...props} />);
+    await waitForLoad(rendered);
+    expect(rendered.getByPlaceholderText(/date time/i)).toBeInTheDocument();
+    expect(
+      rendered.container.querySelector(".dropdown")
+    ).not.toBeInTheDocument();
   });
 
-  it("renders number input when type is null and fieldType is number", () => {
+  it("renders number input when type is null and fieldType is number", async () => {
     const props = {
       defaultField,
       field: { [type]: 2, cardinality: "+" },
@@ -62,13 +67,20 @@ describe("<DefaultValue />", () => {
       onChange,
       type: null,
     };
-    const wrapper = shallow(<DefaultValue {...props} />);
-    expect(wrapper.find("NumberField").length).toBe(1);
-    expect(wrapper.find("FormInput").length).toBe(0);
-    expect(wrapper.find("FormDropdown").length).toBe(0);
+    const rendered = render(<DefaultValue {...props} />);
+    await waitForLoad(rendered);
+    expect(
+      rendered.container.querySelector("input[type='number']")
+    ).toBeInTheDocument();
+    expect(
+      rendered.container.querySelector("input[type='text']")
+    ).not.toBeInTheDocument();
+    expect(
+      rendered.container.querySelector(".dropdown")
+    ).not.toBeInTheDocument();
   });
 
-  it("renders number input when type is null and fieldType is float", () => {
+  it("renders number input when type is null and fieldType is float", async () => {
     const props = {
       defaultField,
       field: { [type]: 2.4, cardinality: "+" },
@@ -77,28 +89,43 @@ describe("<DefaultValue />", () => {
       onChange,
       type: null,
     };
-    const wrapper = shallow(<DefaultValue {...props} />);
-    expect(wrapper.find("NumberField").length).toBe(1);
-    expect(wrapper.find("FormInput").length).toBe(0);
-    expect(wrapper.find("FormDropdown").length).toBe(0);
+    const rendered = render(<DefaultValue {...props} />);
+    await waitForLoad(rendered);
+    expect(
+      rendered.container.querySelector("input[type='number']")
+    ).toBeInTheDocument();
+    expect(
+      rendered.container.querySelector("input[type='text']")
+    ).not.toBeInTheDocument();
+    expect(
+      rendered.container.querySelector(".dropdown")
+    ).not.toBeInTheDocument();
   });
 
-  it("renders form input when type is null and fieldType different from url, date, datetime and number", () => {
-    const wrapper = shallow(<DefaultValue {...props} type={null} />);
-    expect(wrapper.find("FormInput").length).toBe(1);
-    expect(wrapper.find("FormDropdown").length).toBe(0);
+  it("renders form input when type is null and fieldType different from url, date, datetime and number", async () => {
+    const rendered = render(<DefaultValue {...props} type={null} />);
+    await waitForLoad(rendered);
+    expect(
+      rendered.container.querySelector("input[type='text']")
+    ).toBeInTheDocument();
+    expect(
+      rendered.container.querySelector(".dropdown")
+    ).not.toBeInTheDocument();
   });
 
-  it("renders form dropdown when type is fixed", () => {
-    const wrapper = shallow(<DefaultValue {...props} />);
-    expect(wrapper.find("FormInput").length).toBe(0);
-    expect(wrapper.find("FormDropdown").length).toBe(1);
+  it("renders form dropdown when type is fixed", async () => {
+    const rendered = render(<DefaultValue {...props} />);
+    await waitForLoad(rendered);
+    expect(
+      rendered.container.querySelector("input[type='text']")
+    ).not.toBeInTheDocument();
+    expect(rendered.container.querySelector(".dropdown")).toBeInTheDocument();
   });
 
-  it("renders form dropdown when type is fixed, widget is dropdown, fieldType is string and cardinality ? or 1", () => {
-    const cardinalityes = ["?", "1"];
+  it("renders form dropdown when type is fixed, widget is dropdown, fieldType is string and cardinality ? or 1", async () => {
+    const cardinalities = ["?", "1"];
 
-    cardinalityes.forEach((cardinality) => {
+    for (const cardinality of cardinalities) {
       const props = {
         defaultField,
         field: { cardinality: cardinality, widget: "dropdown" },
@@ -108,18 +135,25 @@ describe("<DefaultValue />", () => {
         type: "fixed",
       };
 
-      const wrapper = shallow(<DefaultValue {...props} />);
-      expect(wrapper.find("DateTimeField").length).toBe(0);
-      expect(wrapper.find("FormInput").length).toBe(0);
-      expect(wrapper.find("FormDropdown").length).toBe(1);
-      expect(wrapper.find("FormDropdown").prop("multiple")).toBe(undefined);
-    });
+      const rendered = render(<DefaultValue {...props} />);
+      await waitForLoad(rendered);
+      expect(
+        rendered.container.querySelector("input[type='datetime-local']")
+      ).not.toBeInTheDocument();
+      expect(
+        rendered.container.querySelector("input[type='text']")
+      ).not.toBeInTheDocument();
+      expect(rendered.container.querySelector(".dropdown")).toBeInTheDocument();
+      expect(
+        rendered.container.querySelector(".dropdown.multiple")
+      ).not.toBeInTheDocument();
+    }
   });
 
-  it("renders form dropdown multiple when widget is dropdown, fieldType is string and cardinality * or +", () => {
-    const cardinalityes = ["*", "+"];
+  it("renders form dropdown multiple when widget is dropdown, fieldType is string and cardinality * or +", async () => {
+    const cardinalities = ["*", "+"];
 
-    cardinalityes.forEach((cardinality) => {
+    for (const cardinality of cardinalities) {
       const props = {
         defaultField,
         field: { cardinality: cardinality, widget: "dropdown" },
@@ -129,18 +163,25 @@ describe("<DefaultValue />", () => {
         type: null,
       };
 
-      const wrapper = shallow(<DefaultValue {...props} />);
-      expect(wrapper.find("DateTimeField").length).toBe(0);
-      expect(wrapper.find("FormInput").length).toBe(0);
-      expect(wrapper.find("FormDropdown").length).toBe(1);
-      expect(wrapper.find("FormDropdown").prop("multiple")).toBe(true);
-    });
+      const rendered = render(<DefaultValue {...props} />);
+      await waitForLoad(rendered);
+      expect(
+        rendered.container.querySelector("input[type='datetime-local']")
+      ).not.toBeInTheDocument();
+      expect(
+        rendered.container.querySelector("input[type='text']")
+      ).not.toBeInTheDocument();
+      expect(rendered.container.querySelector(".dropdown")).toBeInTheDocument();
+      expect(
+        rendered.container.querySelector(".dropdown.multiple")
+      ).toBeInTheDocument();
+    }
   });
 
-  it("renders form dropdown when widget is checkbox, fieldType is string and cardinality ? or 1", () => {
-    const cardinalityes = ["?", "1"];
+  it("renders form dropdown when widget is checkbox, fieldType is string and cardinality ? or 1", async () => {
+    const cardinalities = ["?", "1"];
 
-    cardinalityes.forEach((cardinality) => {
+    for (const cardinality of cardinalities) {
       const props = {
         defaultField,
         field: { cardinality: cardinality, widget: "checkbox" },
@@ -150,18 +191,25 @@ describe("<DefaultValue />", () => {
         type: "fixed",
       };
 
-      const wrapper = shallow(<DefaultValue {...props} />);
-      expect(wrapper.find("DateTimeField").length).toBe(0);
-      expect(wrapper.find("FormInput").length).toBe(0);
-      expect(wrapper.find("FormDropdown").length).toBe(1);
-      expect(wrapper.find("FormDropdown").prop("multiple")).toBe(undefined);
-    });
+      const rendered = render(<DefaultValue {...props} />);
+      await waitForLoad(rendered);
+      expect(
+        rendered.container.querySelector("input[type='datetime-local']")
+      ).not.toBeInTheDocument();
+      expect(
+        rendered.container.querySelector("input[type='text']")
+      ).not.toBeInTheDocument();
+      expect(rendered.container.querySelector(".dropdown")).toBeInTheDocument();
+      expect(
+        rendered.container.querySelector(".dropdown.multiple")
+      ).not.toBeInTheDocument();
+    }
   });
 
-  it("renders form dropdown multiple when widget is checkbox, fieldType is string and cardinality * or +", () => {
-    const cardinalityes = ["*", "+"];
+  it("renders form dropdown multiple when widget is checkbox, fieldType is string and cardinality * or +", async () => {
+    const cardinalities = ["*", "+"];
 
-    cardinalityes.forEach((cardinality) => {
+    for (const cardinality of cardinalities) {
       const props = {
         defaultField,
         field: { cardinality: cardinality, widget: "checkbox" },
@@ -171,22 +219,31 @@ describe("<DefaultValue />", () => {
         type: null,
       };
 
-      const wrapper = shallow(<DefaultValue {...props} />);
-      expect(wrapper.find("DateTimeField").length).toBe(0);
-      expect(wrapper.find("FormInput").length).toBe(0);
-      expect(wrapper.find("FormDropdown").length).toBe(1);
-      expect(wrapper.find("FormDropdown").prop("multiple")).toBe(true);
-      expect(wrapper.find("FormDropdown").prop("search")).toBe(undefined);
-      expect(wrapper.find("FormDropdown").prop("allowAdditions")).toBe(
-        undefined
-      );
-    });
+      const rendered = render(<DefaultValue {...props} />);
+      await waitForLoad(rendered);
+      expect(
+        rendered.container.querySelector("input[type='datetime-local']")
+      ).not.toBeInTheDocument();
+      expect(
+        rendered.container.querySelector("input[type='text']")
+      ).not.toBeInTheDocument();
+      expect(rendered.container.querySelector(".dropdown")).toBeInTheDocument();
+      expect(
+        rendered.container.querySelector(".dropdown.multiple")
+      ).toBeInTheDocument();
+      expect(
+        rendered.container.querySelector(".dropdown.search")
+      ).not.toBeInTheDocument();
+      expect(
+        rendered.container.querySelector(".dropdown.allowAdditions")
+      ).not.toBeInTheDocument();
+    }
   });
 
-  it("renders form input when fieldType is string and cardinality ? or 1", () => {
-    const cardinalityes = ["?", "1"];
+  it("renders form input when fieldType is string and cardinality ? or 1", async () => {
+    const cardinalities = ["?", "1"];
 
-    cardinalityes.forEach((cardinality) => {
+    for (const cardinality of cardinalities) {
       const props = {
         defaultField,
         field: { cardinality: cardinality, widget: "string" },
@@ -196,17 +253,24 @@ describe("<DefaultValue />", () => {
         type: null,
       };
 
-      const wrapper = shallow(<DefaultValue {...props} />);
-      expect(wrapper.find("DateTimeField").length).toBe(0);
-      expect(wrapper.find("FormInput").length).toBe(1);
-      expect(wrapper.find("FormDropdown").length).toBe(0);
-    });
+      const rendered = render(<DefaultValue {...props} />);
+      await waitForLoad(rendered);
+      expect(
+        rendered.container.querySelector("input[type='datetime-local']")
+      ).not.toBeInTheDocument();
+      expect(
+        rendered.container.querySelector("input[type='text']")
+      ).toBeInTheDocument();
+      expect(
+        rendered.container.querySelector(".dropdown")
+      ).not.toBeInTheDocument();
+    }
   });
 
-  it("renders form input when widget is string, fieldType is string and cardinality ? or 1", () => {
-    const cardinalityes = ["?", "1"];
+  it("renders form input when widget is string, fieldType is string and cardinality ? or 1", async () => {
+    const cardinalities = ["?", "1"];
 
-    cardinalityes.forEach((cardinality) => {
+    for (const cardinality of cardinalities) {
       const props = {
         defaultField,
         field: { cardinality: cardinality, widget: "string" },
@@ -216,17 +280,24 @@ describe("<DefaultValue />", () => {
         type: null,
       };
 
-      const wrapper = shallow(<DefaultValue {...props} />);
-      expect(wrapper.find("DateTimeField").length).toBe(0);
-      expect(wrapper.find("FormInput").length).toBe(1);
-      expect(wrapper.find("FormDropdown").length).toBe(0);
-    });
+      const rendered = render(<DefaultValue {...props} />);
+      await waitForLoad(rendered);
+      expect(
+        rendered.container.querySelector("input[type='datetime-local']")
+      ).not.toBeInTheDocument();
+      expect(
+        rendered.container.querySelector("input[type='text']")
+      ).toBeInTheDocument();
+      expect(
+        rendered.container.querySelector(".dropdown")
+      ).not.toBeInTheDocument();
+    }
   });
 
-  it("renders form dropdown multiple and allow additions when widget is string, fieldType is string and cardinality * or +", () => {
-    const cardinalityes = ["*", "+"];
+  it("renders form dropdown multiple and allow additions when widget is string, fieldType is string and cardinality * or +", async () => {
+    const cardinalities = ["*", "+"];
 
-    cardinalityes.forEach((cardinality) => {
+    for (const cardinality of cardinalities) {
       const props = {
         defaultField,
         field: { cardinality: cardinality, widget: "string" },
@@ -236,35 +307,49 @@ describe("<DefaultValue />", () => {
         type: null,
       };
 
-      const wrapper = shallow(<DefaultValue {...props} />);
-      expect(wrapper.find("DateTimeField").length).toBe(0);
-      expect(wrapper.find("FormInput").length).toBe(0);
-      expect(wrapper.find("FormDropdown").length).toBe(1);
-      expect(wrapper.find("FormDropdown").prop("multiple")).toBe(true);
-      expect(wrapper.find("FormDropdown").prop("search")).toBe(true);
-      expect(wrapper.find("FormDropdown").prop("allowAdditions")).toBe(true);
-    });
+      const rendered = render(<DefaultValue {...props} />);
+      await waitForLoad(rendered);
+      expect(
+        rendered.container.querySelector("input[type='datetime-local']")
+      ).not.toBeInTheDocument();
+      expect(rendered.container.querySelector(".dropdown")).toBeInTheDocument();
+      expect(
+        rendered.container.querySelector(".dropdown.multiple")
+      ).toBeInTheDocument();
+      expect(
+        rendered.container.querySelector(".dropdown.search")
+      ).toBeInTheDocument();
+    }
   });
 
-  it("calls dropdown change", () => {
-    const wrapper = shallow(<DefaultValue {...props} />);
-    const input = wrapper.find("FormDropdown");
-    input.simulate("change", null, { value: 3 });
-    expect(onChange).toBeCalledWith(null, {
+  it("calls dropdown change", async () => {
+    const rendered = render(<DefaultValue {...props} />);
+    await waitForLoad(rendered);
+
+    const user = userEvent.setup({ delay: null });
+    const dropdown = rendered.container.querySelector(".dropdown");
+    await user.click(dropdown);
+    await user.click(rendered.getByText(/1/i));
+
+    expect(onChange).toHaveBeenCalledWith(null, {
       name: defaultField,
-      value: { value: [3], origin: "default" },
+      value: { value: [1], origin: "default" },
     });
   });
 
-  it("calls input change", () => {
-    const wrapper = shallow(
+  it("calls input change", async () => {
+    const rendered = render(
       <DefaultValue {...props} type={null} field={{ cardinality: "1" }} />
     );
-    const input = wrapper.find("FormInput");
-    input.simulate("change", null, { value: 3 });
-    expect(onChange).toBeCalledWith(null, {
+    await waitForLoad(rendered);
+
+    const user = userEvent.setup({ delay: null });
+    const input = rendered.container.querySelector("input");
+    await user.type(input, "3");
+
+    expect(onChange).toHaveBeenCalledWith(null, {
       name: defaultField,
-      value: { value: 3, origin: "default" },
+      value: { value: "3", origin: "default" },
     });
   });
 });

package/src/templates/components/templateForm/__tests__/DependentDomain.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/templates/components/templateForm/__tests__/DependentFormField.spec.js

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