@truedat/df 7.5.9 → 7.5.10

package/src/components/widgets/EnrichedTextField.js

@@ -1,4 +1,3 @@
-import React from "react";
 import PropTypes from "prop-types";
 import { RichTextEditor } from "@truedat/core/components";
 

package/src/components/widgets/HierarchyDropdown.js

@@ -1,5 +1,5 @@
 import _ from "lodash/fp";
-import React, { useState, useEffect } from "react";
+import { useState, useEffect } from "react";
 import PropTypes from "prop-types";
 import { Form } from "semantic-ui-react";
 import { HierarchySelector } from "@truedat/core/components";

package/src/components/widgets/HierarchyPreview.js

@@ -1,5 +1,4 @@
 import _ from "lodash/fp";
-import React from "react";
 import PropTypes from "prop-types";
 import { Label, Popup, PopupContent, List, ListItem } from "semantic-ui-react";
 

package/src/components/widgets/IdentifierField.js

@@ -1,4 +1,3 @@
-import React from "react";
 import PropTypes from "prop-types";
 import { useIntl } from "react-intl";
 

package/src/components/widgets/ImageField.js

@@ -1,4 +1,4 @@
-import React, { useState } from "react";
+import { useState } from "react";
 import PropTypes from "prop-types";
 import { Button, Message, Icon } from "semantic-ui-react";
 import { useIntl } from "react-intl";

package/src/components/widgets/ImagePreview.js

@@ -1,4 +1,3 @@
-import React from "react";
 import { Image, Modal } from "semantic-ui-react";
 
 export const ImagePreview = ({ value }) =>

package/src/components/widgets/NumberField.js

@@ -1,19 +1,18 @@
 import _ from "lodash/fp";
 import PropTypes from "prop-types";
-import React from "react";
 import { Form } from "semantic-ui-react";
 
-const targetValue = e => {
+const targetValue = (e) => {
   const target = _.path("target.value")(e);
   return _.isNil(target) || target === "" ? target : parseFloat(target);
 };
 
-const floatTargetValue = e => {
+const floatTargetValue = (e) => {
   const target = _.path("target.value")(e);
   return _.isNil(target) || target === "" ? target : parseFloat(target);
 };
 
-const handleKeyDown = event => {
+const handleKeyDown = (event) => {
   if (event.key === "." || event.key === ",") {
     event.preventDefault();
   }
@@ -27,7 +26,7 @@ export const NumberField = ({ field: { name, value, type }, onChange }) => {
       step="any"
       value={_.isNil(value) || _.isUndefined(value) ? "" : value}
       name={name}
-      onChange={e => onChange(e, { name: name, value: floatTargetValue(e) })}
+      onChange={(e) => onChange(e, { name: name, value: floatTargetValue(e) })}
     />
   ) : (
     <Form.Input
@@ -36,14 +35,14 @@ export const NumberField = ({ field: { name, value, type }, onChange }) => {
       onKeyDown={handleKeyDown}
       value={_.isNil(value) || _.isUndefined(value) ? "" : value}
       name={name}
-      onChange={e => onChange(e, { name: name, value: targetValue(e) })}
+      onChange={(e) => onChange(e, { name: name, value: targetValue(e) })}
     />
   );
 };
 
 NumberField.propTypes = {
   field: PropTypes.object,
-  onChange: PropTypes.func
+  onChange: PropTypes.func,
 };
 
 export default NumberField;

package/src/components/widgets/PairListField.js

@@ -1,5 +1,4 @@
 import { castArray, defaultTo, flow } from "lodash/fp";
-import React from "react";
 import PropTypes from "prop-types";
 import { Form, Button } from "semantic-ui-react";
 import { dropAt, replaceAt } from "@truedat/core/services/arrays";
@@ -10,7 +9,7 @@ export const PairListField = ({ field: { name, value }, onChange }) => {
 
   const values = flow(defaultTo([]), castArray)(value);
 
-  const handleAdd = e => {
+  const handleAdd = (e) => {
     e && e.preventDefault();
     onChange(e, { name, value: [...values, { url_name: "", url_value: "" }] });
   };
@@ -34,7 +33,7 @@ export const PairListField = ({ field: { name, value }, onChange }) => {
             name="url_name"
             onChange={(e, data) => handleChange(e, data, i)}
             placeholder={formatMessage({
-              id: "fields.pairlist.url.name.placeholder"
+              id: "fields.pairlist.url.name.placeholder",
             })}
             value={url_name}
           />
@@ -42,11 +41,11 @@ export const PairListField = ({ field: { name, value }, onChange }) => {
             name="url_value"
             onChange={(e, data) => handleChange(e, data, i)}
             placeholder={formatMessage({
-              id: "fields.pairlist.url.value.placeholder"
+              id: "fields.pairlist.url.value.placeholder",
             })}
             value={url_value}
           />
-          <Button compact icon="minus" onClick={e => handleRemove(e, i)} />
+          <Button compact icon="minus" onClick={(e) => handleRemove(e, i)} />
         </Form.Group>
       ))}
       <Button
@@ -60,7 +59,7 @@ export const PairListField = ({ field: { name, value }, onChange }) => {
 
 PairListField.propTypes = {
   field: PropTypes.object,
-  onChange: PropTypes.func
+  onChange: PropTypes.func,
 };
 
 export default PairListField;

package/src/components/widgets/PasswordField.js

@@ -1,4 +1,3 @@
-import React from "react";
 import PropTypes from "prop-types";
 import { Form } from "semantic-ui-react";
 
@@ -13,7 +12,7 @@ export const PasswordField = ({ field: { name, value }, onChange }) => (
 
 PasswordField.propTypes = {
   field: PropTypes.object,
-  onChange: PropTypes.func
+  onChange: PropTypes.func,
 };
 
 export default PasswordField;

package/src/components/widgets/RadioField.js

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

package/src/components/widgets/StandardDropdown.js

@@ -1,5 +1,4 @@
 import _ from "lodash/fp";
-import React from "react";
 import PropTypes from "prop-types";
 import { useIntl } from "react-intl";
 import { connect } from "react-redux";

package/src/components/widgets/StringField.js

@@ -1,4 +1,3 @@
-import React from "react";
 import PropTypes from "prop-types";
 import { Form } from "semantic-ui-react";
 import { useIntl } from "react-intl";

package/src/components/widgets/SystemPreview.js

@@ -1,9 +1,8 @@
 import _ from "lodash/fp";
-import React from "react";
 import PropTypes from "prop-types";
 import { linkTo } from "@truedat/core/routes";
 import { Label } from "semantic-ui-react";
-import { Link } from "react-router-dom";
+import { Link } from "react-router";
 
 export const SystemPreview = ({ value }) => {
   const systems = _.isArray(value) ? value : [value];
@@ -21,7 +20,7 @@ export const SystemPreview = ({ value }) => {
 };
 
 SystemPreview.propTypes = {
-  value: PropTypes.oneOfType([PropTypes.object, PropTypes.array])
+  value: PropTypes.oneOfType([PropTypes.object, PropTypes.array]),
 };
 
 export default SystemPreview;

package/src/components/widgets/TableField.js

@@ -1,5 +1,4 @@
 import _ from "lodash/fp";
-import React from "react";
 import PropTypes from "prop-types";
 import { Button, Icon, Table, Input } from "semantic-ui-react";
 
@@ -55,13 +54,13 @@ export const TableField = ({
         <Table.Row>
           {table_columns.map((v, i) => (
             <Table.HeaderCell key={i}>
-              {v.name} {v.mandatory && <span className="is_required">*</span>}
+              {v.name}
+              {v.mandatory && <span className="is_required">*</span>}
             </Table.HeaderCell>
           ))}
-          <Table.HeaderCell> </Table.HeaderCell>
+          <Table.HeaderCell />
         </Table.Row>
       </Table.Header>
-
       <Table.Body>
         {value &&
           value.map((row, i) => (
@@ -100,9 +99,10 @@ export const TableField = ({
           <Table.HeaderCell colSpan={`${table_columns.length + 1}`}>
             <Button
               compact
+              data-testid="add-button"
               floated="right"
               icon={{ name: "add", color: "green" }}
-              name="add_buttom"
+              name="add_button"
               onClick={handleAddRow}
               size="small"
             />

package/src/components/widgets/TextField.js

@@ -1,4 +1,3 @@
-import React from "react";
 import PropTypes from "prop-types";
 import { Form } from "semantic-ui-react";
 
@@ -8,7 +7,7 @@ export const TextField = ({ field: { name, value }, onChange }) => (
 
 TextField.propTypes = {
   field: PropTypes.object,
-  onChange: PropTypes.func
+  onChange: PropTypes.func,
 };
 
 export default TextField;

package/src/components/widgets/__tests__/CheckboxField.spec.js

@@ -1,6 +1,5 @@
-import React from "react";
-import { shallow } from "enzyme";
-import { Form } from "semantic-ui-react";
+import userEvent from "@testing-library/user-event";
+import { render, waitForLoad } from "@truedat/test/render";
 import { CheckboxField } from "../CheckboxField";
 
 describe("<CheckboxField />", () => {
@@ -10,18 +9,26 @@ describe("<CheckboxField />", () => {
   const onChange = jest.fn();
   const props = { field: { label, name, value }, onChange };
 
-  it("matches the latest snapshot", () => {
-    const wrapper = shallow(<CheckboxField {...props} />);
-    expect(wrapper).toMatchSnapshot();
+  it("matches the latest snapshot", async () => {
+    const rendered = render(<CheckboxField {...props} />);
+    await waitForLoad(rendered);
+    expect(rendered.container).toMatchSnapshot();
   });
 
-  it("call onChange function", () => {
-    const component = shallow(<CheckboxField {...props} />);
-    component.simulate("change", null, { checked: true });
-    expect(onChange).toBeCalledWith(null, { checked: true, value: "Si" });
+  it("call onChange function", async () => {
+    const user = userEvent.setup({ delay: null });
+    onChange.mockClear();
+    const rendered = render(<CheckboxField {...props} />);
+    await waitForLoad(rendered);
 
-    component.simulate("change", null, { checked: false });
-    expect(onChange).toBeCalledWith(null, { checked: false, value: "No" });
+    await user.click(rendered.getByRole("checkbox"));
+    expect(onChange).toHaveBeenCalledWith(
+      expect.anything(),
+      expect.objectContaining({
+        checked: true,
+        value: "Si",
+      })
+    );
   });
 });
 
@@ -37,19 +44,22 @@ describe("<CheckboxField /> Multiple", () => {
   const onChange = jest.fn();
   const props = { field, onChange };
 
-  it("matches the latest snapshot for multiple", () => {
-    const wrapper = shallow(<CheckboxField {...props} />);
-    expect(wrapper).toMatchSnapshot();
+  it("matches the latest snapshot for multiple", async () => {
+    const rendered = render(<CheckboxField {...props} />);
+    await waitForLoad(rendered);
+    expect(rendered.container).toMatchSnapshot();
   });
 
-  it("call onChange function for multiple", () => {
-    const wrapper = shallow(<CheckboxField {...props} />);
-    const checkBox = wrapper.find(Form.Checkbox).first().dive();
+  it("call onChange function for multiple", async () => {
+    const user = userEvent.setup({ delay: null });
+    onChange.mockClear();
+    const rendered = render(<CheckboxField {...props} />);
+    await waitForLoad(rendered);
 
-    checkBox.simulate("change", null, { checked: true, value: "foo" });
-    expect(onChange).toBeCalledWith(null, { value: ["foo"] });
-
-    checkBox.simulate("change", null, { checked: false, value: "foo" });
-    expect(onChange).toBeCalledWith(null, { value: [] });
+    await user.click(rendered.getAllByRole("checkbox")[0]);
+    expect(onChange).toHaveBeenCalledWith(
+      expect.anything(),
+      expect.objectContaining({ value: ["foo"] })
+    );
   });
 });

package/src/components/widgets/__tests__/ColorPickerField.spec.js

@@ -1,5 +1,4 @@
-import React from "react";
-import { shallow } from "enzyme";
+import { render, waitForLoad } from "@truedat/test/render";
 import { ColorPickerField } from "../ColorPickerField";
 
 describe("<ColorPickerField />", () => {
@@ -10,15 +9,9 @@ describe("<ColorPickerField />", () => {
   const onChange = jest.fn();
   const props = { field: { label, name, cardinality, value }, onChange };
 
-  it("matches the latest snapshot", () => {
-    const wrapper = shallow(<ColorPickerField {...props} />);
-    expect(wrapper).toMatchSnapshot();
-  });
-
-  it("call onChange function", () => {
-    const color = { hex: "hex_value" };
-    const component = shallow(<ColorPickerField {...props} />);
-    component.find({ name: "color_picker" }).simulate("changeComplete", color);
-    expect(onChange).toBeCalledWith(null, { name: "name", value: "hex_value" });
+  it("matches the latest snapshot", async () => {
+    const rendered = render(<ColorPickerField {...props} />);
+    await waitForLoad(rendered);
+    expect(rendered.container).toMatchSnapshot();
   });
 });

package/src/components/widgets/__tests__/DateField.spec.js

@@ -1,5 +1,4 @@
-import React from "react";
-import { shallow } from "enzyme";
+import { render, waitForLoad } from "@truedat/test/render";
 import { DateField } from "../DateField";
 
 describe("<DateField />", () => {
@@ -10,8 +9,9 @@ describe("<DateField />", () => {
   const onChange = jest.fn();
   const props = { field: { label, name, cardinality, value }, onChange };
 
-  it("matches the latest snapshot", () => {
-    const wrapper = shallow(<DateField {...props} />);
-    expect(wrapper).toMatchSnapshot();
+  it("matches the latest snapshot", async () => {
+    const rendered = render(<DateField {...props} />);
+    await waitForLoad(rendered);
+    expect(rendered.container).toMatchSnapshot();
   });
 });

package/src/components/widgets/__tests__/DateTimeField.spec.js

@@ -1,5 +1,4 @@
-import React from "react";
-import { shallow } from "enzyme";
+import { render, waitForLoad } from "@truedat/test/render";
 import { DateTimeField } from "../DateTimeField";
 
 describe("<DateTimeField />", () => {
@@ -10,8 +9,9 @@ describe("<DateTimeField />", () => {
   const onChange = jest.fn();
   const props = { field: { label, name, cardinality, value }, onChange };
 
-  it("matches the latest snapshot", () => {
-    const wrapper = shallow(<DateTimeField {...props} />);
-    expect(wrapper).toMatchSnapshot();
+  it("matches the latest snapshot", async () => {
+    const rendered = render(<DateTimeField {...props} />);
+    await waitForLoad(rendered);
+    expect(rendered.container).toMatchSnapshot();
   });
 });

package/src/components/widgets/__tests__/DomainPreview.spec.js

@@ -1,26 +1,24 @@
-import React from "react";
-import { shallow } from "enzyme";
+import { render, waitForLoad } from "@truedat/test/render";
 import { DomainPreview } from "../DomainPreview";
 
-// workaround for enzyme issue with React.useContext
-// see https://github.com/airbnb/enzyme/issues/2176#issuecomment-532361526
-
 describe("<DomainPreview />", () => {
-  const props = { domains: [{ id: 1, external_id: "external_id" }] };
+  const props = { domains: [{ id: "1", external_id: "external_id" }] };
 
-  it("matches the latest snapshot when value is object", () => {
-    const wrapper = shallow(<DomainPreview {...props} />);
-    expect(wrapper).toMatchSnapshot();
+  it("matches the latest snapshot when value is object", async () => {
+    const rendered = render(<DomainPreview {...props} />);
+    await waitForLoad(rendered);
+    expect(rendered.container).toMatchSnapshot();
   });
 
-  it("matches the latest snapshot when value is array", () => {
+  it("matches the latest snapshot when value is array", async () => {
     const props = {
       domains: [
-        { id: 1, external_id: "external_id", name: "name" },
-        { id: 2, external_id: "external_id1", name: "name1" },
+        { id: "1", external_id: "external_id", name: "name" },
+        { id: "2", external_id: "external_id1", name: "name1" },
       ],
     };
-    const wrapper = shallow(<DomainPreview {...props} />);
-    expect(wrapper).toMatchSnapshot();
+    const rendered = render(<DomainPreview {...props} />);
+    await waitForLoad(rendered);
+    expect(rendered.container).toMatchSnapshot();
   });
 });

package/src/components/widgets/__tests__/DropdownDataLoader.spec.js

@@ -1,5 +1,4 @@
-import React from "react";
-import { shallow } from "enzyme";
+import { render, waitForLoad } from "@truedat/test/render";
 import { DropdownDataLoader } from "../DropdownDataLoader";
 
 describe("<DropdownDataLoader />", () => {
@@ -8,8 +7,9 @@ describe("<DropdownDataLoader />", () => {
     type: "system",
   };
 
-  it("matches the latest snapshot when type system", () => {
-    const wrapper = shallow(<DropdownDataLoader {...props} />);
-    expect(wrapper).toMatchSnapshot();
+  it("matches the latest snapshot when type system", async () => {
+    const rendered = render(<DropdownDataLoader {...props} />);
+    await waitForLoad(rendered);
+    expect(rendered.container).toMatchSnapshot();
   });
 });

package/src/components/widgets/__tests__/DropdownField.spec.js

@@ -1,14 +1,8 @@
 import _ from "lodash/fp";
-import React from "react";
-import { render } from "@truedat/test/render";
-import { DOMAINS_QUERY } from "@truedat/core/api/queries";
-import defaultMessages from "@truedat/test/messages";
-import { waitFor } from "@testing-library/react";
+import { render, waitForLoad } from "@truedat/test/render";
+import { domainsMock } from "@truedat/test/mocks";
 import { DropdownField } from "../DropdownField";
 
-// workaround for enzyme issue with React.useContext
-// see https://github.com/airbnb/enzyme/issues/2176#issuecomment-532361526
-
 describe("<DropdownField />", () => {
   const label = "label";
   const name = "name";
@@ -31,44 +25,39 @@ describe("<DropdownField />", () => {
     loading: false,
   };
 
-  const domains = [{ id: "2", name: "Truedat", parentId: "", actions: [] }];
-  const domainsMock = {
-    request: { query: DOMAINS_QUERY, variables: {} },
-    result: { data: { domains: domains } },
+  const variables = {
+    action: "manageConcept",
+    domainActions: undefined,
+    ids: undefined,
   };
 
-  const messages = {
-    en: { ...defaultMessages.en },
-  };
   const renderOpts = {
-    mocks: [domainsMock],
-    messages,
-    fallback: "lazy",
+    mocks: [domainsMock(variables)],
   };
 
   it("matches the latest snapshot", async () => {
-    const { container, queryByText } = render(<DropdownField {...props} />);
-    await waitFor(() => expect(queryByText(/lazy/i)).not.toBeInTheDocument());
-    expect(container).toMatchSnapshot();
+    const rendered = render(<DropdownField {...props} />, renderOpts);
+    await waitForLoad(rendered);
+    expect(rendered.container).toMatchSnapshot();
   });
 
   it("matches the latest snapshot when type domain", async () => {
     const field = { ...fieldData, type: "domain" };
-    const { container, queryByText } = render(
-      <DropdownField {...{ ...props, field }} />
+    const rendered = render(
+      <DropdownField {...{ ...props, field }} />,
+      renderOpts
     );
-    await waitFor(() => expect(queryByText(/lazy/i)).not.toBeInTheDocument());
-    expect(container).toMatchSnapshot();
+    await waitForLoad(rendered);
+    expect(rendered.container).toMatchSnapshot();
   });
 
   it("renders loader when type system", async () => {
     const field = { ...fieldData, type: "system" };
-    const { container, queryByText } = render(
+    const rendered = render(
       <DropdownField {...{ ...props, field }} />,
       renderOpts
     );
-
-    await waitFor(() => expect(queryByText(/lazy/i)).not.toBeInTheDocument());
-    expect(container).toMatchSnapshot();
+    await waitForLoad(rendered);
+    expect(rendered.container).toMatchSnapshot();
   });
 });

package/src/components/widgets/__tests__/DynamicField.spec.js

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

package/src/components/widgets/__tests__/HierarchyDropdown.spec.js

@@ -1,4 +1,3 @@
-import React from "react";
 import { render } from "@truedat/test/render";
 import HierarchyDropdown from "../HierarchyDropdown";
 
@@ -8,7 +7,7 @@ describe("<HierarchyDropdown />", () => {
       name: "foo",
       cardinality: "*",
       value: "",
-      values: { hierarchy: { id: 50, min_depth: null } },
+      values: { hierarchy: { id: "50", min_depth: null } },
     },
     onChange: jest.fn(),
   };
@@ -23,7 +22,7 @@ describe("<HierarchyDropdown />", () => {
         name: "foo",
         cardinality: "*",
         value: "",
-        values: { hierarchy: { id: 50, min_depth: 0 } },
+        values: { hierarchy: { id: "50", min_depth: 0 } },
       },
       onChange: jest.fn(),
     };
@@ -39,7 +38,7 @@ describe("<HierarchyDropdown />", () => {
         name: "foo",
         cardinality: "*",
         value: "",
-        values: { hierarchy: { id: 50, min_depth: 2 } },
+        values: { hierarchy: { id: "50", min_depth: 2 } },
       },
       onChange: jest.fn(),
     };
@@ -55,7 +54,7 @@ describe("<HierarchyDropdown />", () => {
         name: "foo",
         cardinality: "*",
         value: "",
-        values: { hierarchy: { id: 50 } },
+        values: { hierarchy: { id: "50" } },
       },
       onChange: jest.fn(),
     };

package/src/components/widgets/__tests__/HierarchyPreview.spec.js

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

package/src/components/widgets/__tests__/ImageField.spec.js

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

package/src/components/widgets/__tests__/NumberField.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 { NumberField } from "../NumberField";
 
 describe("<NumberField />", () => {
@@ -11,8 +11,26 @@ describe("<NumberField />", () => {
   const onChange = jest.fn();
   const props = { field: { label, name, type, cardinality, value }, onChange };
 
-  it("matches the latest snapshot", () => {
-    const wrapper = shallow(<NumberField {...props} />);
-    expect(wrapper).toMatchSnapshot();
+  it("matches the latest snapshot", async () => {
+    const rendered = render(<NumberField {...props} />);
+    await waitForLoad(rendered);
+    expect(rendered.container).toMatchSnapshot();
+  });
+
+  it("call onChange function", async () => {
+    const rendered = render(<NumberField {...props} />);
+    await waitForLoad(rendered);
+
+    // Find the number input and simulate a change
+    const numberInput = rendered.container.querySelector(
+      'input[type="number"]'
+    );
+    userEvent.clear(numberInput);
+    userEvent.type(numberInput, "42");
+
+    // Trigger blur to ensure the change is applied
+    userEvent.tab();
+
+    expect(onChange).toHaveBeenCalled();
   });
 });