@truedat/df 7.5.9 → 7.5.11

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

@@ -1,12 +1,7 @@
-import React from "react";
-import { shallow } from "enzyme";
-import { intl } from "@truedat/test/intl-stub";
+import userEvent from "@testing-library/user-event";
+import { render, waitForLoad } from "@truedat/test/render";
 import { PairListField } from "../PairListField";
 
-// workaround for enzyme issue with React.useContext
-// see https://github.com/airbnb/enzyme/issues/2176#issuecomment-532361526
-jest.spyOn(React, "useContext").mockImplementation(() => intl);
-
 describe("<PairListField />", () => {
   const label = "label";
   const name = "name";
@@ -15,104 +10,119 @@ describe("<PairListField />", () => {
   const onChange = jest.fn();
   const props = { field: { label, name, cardinality, value }, onChange };
 
-  it("matches the latest snapshot", () => {
-    const wrapper = shallow(<PairListField {...props} />);
-    expect(wrapper).toMatchSnapshot();
+  it("matches the latest snapshot", async () => {
+    const rendered = render(<PairListField {...props} />);
+    await waitForLoad(rendered);
+    expect(rendered.container).toMatchSnapshot();
   });
 
-  it("generates correct onChange value format when changing", () => {
-    const data = {
-      id: 0,
-      name: "url_name",
-      value: "data_value"
-    };
-    const wrapper = shallow(<PairListField {...props} />);
-    wrapper.find({ name: "url_name" }).prop("onChange")(null, data);
-    expect(onChange).toBeCalledWith(null, {
+  it("generates correct onChange value format when changing", async () => {
+    const user = userEvent.setup({ delay: null });
+    const rendered = render(<PairListField {...props} />);
+    await waitForLoad(rendered);
+
+    const input = rendered.container.querySelector('input[name="url_name"]');
+
+    await user.type(input, "1");
+    await user.tab();
+
+    expect(onChange).toHaveBeenCalledWith(expect.anything(), {
       name: "name",
-      value: [{ url_name: "data_value", url_value: "Bar" }]
+      value: [{ url_name: "Foo1", url_value: "Bar" }],
     });
   });
 
-  it("generates row when add button is clicked", () => {
-    const event = { preventDefault() {} };
-    const wrapper = shallow(<PairListField {...props} />);
-    wrapper
-      .find("Button")
-      .last()
-      .prop("onClick")(event);
-    expect(onChange).toBeCalledWith(event, {
+  it("generates row when add button is clicked", async () => {
+    const user = userEvent.setup({ delay: null });
+    const rendered = render(<PairListField {...props} />);
+    await waitForLoad(rendered);
+
+    const addButton = rendered.container.querySelector(".add.icon");
+    await user.click(addButton);
+
+    expect(onChange).toHaveBeenCalledWith(expect.anything(), {
       name: "name",
       value: [
         { url_name: "Foo", url_value: "Bar" },
-        { url_name: "", url_value: "" }
-      ]
+        { url_name: "", url_value: "" },
+      ],
     });
   });
 
-  it("modifies n row onChange", () => {
+  it("modifies n row onChange", async () => {
+    const user = userEvent.setup({ delay: null });
     onChange.mockClear();
     const value = [
       { url_name: "Foo", url_value: "Bar" },
-      { url_name: "Baz", url_value: "" }
+      { url_name: "", url_value: "" },
     ];
     const field = { label, name, cardinality, value };
-    const event = { preventDefault() {} };
-    const wrapper = shallow(
+
+    const rendered = render(
       <PairListField
         {...{
           ...props,
-          field
+          field,
         }}
       />
     );
+    await waitForLoad(rendered);
 
-    wrapper
-      .find({ name: "url_name" })
-      .last()
-      .prop("onChange")(event, { name: "url_name", value: "Baz" });
+    const inputs = rendered.container.querySelectorAll(
+      'input[name="url_name"]'
+    );
+    const secondInput = inputs[1];
+    await user.type(secondInput, "1");
+    await user.tab();
 
-    expect(onChange).toBeCalledWith(event, {
+    expect(onChange).toHaveBeenCalledWith(expect.anything(), {
       name: "name",
       value: [
         { url_name: "Foo", url_value: "Bar" },
-        { url_name: "Baz", url_value: "" }
-      ]
+        { url_name: "1", url_value: "" },
+      ],
     });
   });
 
-  it("deletes row when delete button is clicked", () => {
-    const event = { preventDefault() {} };
-    const wrapper = shallow(<PairListField {...props} />);
-    wrapper.find({ icon: "minus" }).prop("onClick")(event);
-    expect(onChange).toBeCalledWith(event, { name: "name", value: [] });
+  it("deletes row when delete button is clicked", async () => {
+    const user = userEvent.setup({ delay: null });
+    const rendered = render(<PairListField {...props} />);
+    await waitForLoad(rendered);
+
+    const deleteButton = rendered.container.querySelector(".minus.icon");
+    await user.click(deleteButton);
+
+    expect(onChange).toHaveBeenCalledWith(expect.anything(), {
+      name: "name",
+      value: [],
+    });
   });
 
-  it("deletes n row when delete button is clicked", () => {
+  it("deletes n row when delete button is clicked", async () => {
+    const user = userEvent.setup({ delay: null });
     onChange.mockClear();
-    const event = { preventDefault() {} };
     const value = [
       { url_name: "Foo", url_value: "Bar" },
-      { url_name: "Baz", url_value: "" }
+      { url_name: "Baz", url_value: "" },
     ];
     const field = { label, name, cardinality, value };
-    const wrapper = shallow(
+
+    const rendered = render(
       <PairListField
         {...{
           ...props,
-          field
+          field,
         }}
       />
     );
+    await waitForLoad(rendered);
+    const deleteButtons = rendered.container.querySelectorAll(".minus.icon");
+    const secondDeleteButton = deleteButtons[1];
+    await user.click(secondDeleteButton);
 
-    wrapper
-      .find({ icon: "minus" })
-      .last()
-      .prop("onClick")(event);
-
-    expect(onChange).toBeCalledWith(event, {
+    expect(onChange).toHaveBeenCalledWith(expect.anything(), {
       name: "name",
-      value: [{ url_name: "Foo", url_value: "Bar" }]
+      value: [{ url_name: "Foo", url_value: "Bar" }],
     });
   });
 });

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

@@ -1,5 +1,4 @@
-import React from "react";
-import { shallowWithIntl } from "@truedat/test/intl-stub";
+import { render } from "@truedat/test/render";
 import { PasswordField } from "../PasswordField";
 
 describe("<PasswordField />", () => {
@@ -11,7 +10,7 @@ describe("<PasswordField />", () => {
   const props = { field: { label, name, cardinality, value }, onChange };
 
   it("matches the latest snapshot", () => {
-    const wrapper = shallowWithIntl(<PasswordField {...props} />);
-    expect(wrapper).toMatchSnapshot();
+    const { container } = render(<PasswordField {...props} />);
+    expect(container).toMatchSnapshot();
   });
 });

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

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

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

@@ -1,69 +1,68 @@
-import _ from "lodash/fp";
-import React from "react";
-import { shallow } from "enzyme";
-import { intl } from "@truedat/test/intl-stub";
+import { render, waitForLoad } from "@truedat/test/render";
 import { StandardDropdown } from "../StandardDropdown";
 
-// workaround for enzyme issue with React.useContext
-// see https://github.com/airbnb/enzyme/issues/2176#issuecomment-532361526
-jest.spyOn(React, "useContext").mockImplementation(() => intl);
-
 describe("<StandardDropdown />", () => {
   const label = "label";
   const name = "name";
   const cardinality = "1";
   const scope = "bg";
   const value = "Foo";
-  const options = _.map((text) => ({ text, value: text }))(["Foo", "Bar"]);
+  const options = [
+    { text: "Foo", value: "Foo" },
+    { text: "Bar", value: "Bar" },
+  ];
   const onChange = jest.fn();
-  const fieldData = {
-    label,
-    name,
-    cardinality,
-    value,
-  };
   const props = {
-    field: fieldData,
+    field: {
+      label,
+      name,
+      cardinality,
+      value,
+    },
     options,
     onChange,
     scope,
   };
 
-  it("matches the latest snapshot", () => {
-    const wrapper = shallow(<StandardDropdown {...props} />);
-    expect(wrapper).toMatchSnapshot();
+  it("matches the latest snapshot", async () => {
+    const rendered = render(<StandardDropdown {...props} />);
+    await waitForLoad(rendered);
+    expect(rendered.container).toMatchSnapshot();
   });
 
-  it("gives proper dropdown props depending on cardinality and value", () => {
-    const wrapper = shallow(<StandardDropdown {...props} />);
-    expect(wrapper.find("FormDropdown").prop("value")).toBe(
-      _.prop("value")(fieldData)
-    );
-    expect(wrapper.find("FormDropdown").prop("multiple")).toBeFalsy();
-    expect(wrapper.find("FormDropdown").prop("options")).toEqual([
-      { key: 0, text: "selector.no.selection", value: null },
-      { key: 1, text: "Foo", value: "Foo" },
-      { key: 2, text: "Bar", value: "Bar" },
-    ]);
+  it("gives proper dropdown props depending on cardinality and value", async () => {
+    const rendered = render(<StandardDropdown {...props} />);
+    await waitForLoad(rendered);
 
-    const multiple = { ...fieldData, cardinality: "*", value: [{ id: 1 }] };
-    wrapper.setProps({ ...props, field: multiple });
+    // Test single selection
+    expect(rendered.getByText("Bar")).toBeInTheDocument();
 
-    expect(wrapper.find("FormDropdown").prop("value")).toEqual([{ id: 1 }]);
-    expect(wrapper.find("FormDropdown").prop("multiple")).toBeTruthy();
-    expect(wrapper.find("FormDropdown").prop("options")).toEqual([
-      { key: 0, text: "Foo", value: "Foo" },
-      { key: 1, text: "Bar", value: "Bar" },
-    ]);
+    // Test multiple selection
+    const multipleProps = {
+      ...props,
+      field: {
+        ...props.field,
+        cardinality: "*",
+        value: [{ id: 1 }],
+      },
+    };
 
-    const withoutValue = { ...fieldData, cardinality: "*", value: null };
-    wrapper.setProps({ ...props, field: withoutValue });
+    const multipleRendered = render(<StandardDropdown {...multipleProps} />);
+    await waitForLoad(multipleRendered);
 
-    expect(wrapper.find("FormDropdown").prop("value")).toEqual([]);
-    expect(wrapper.find("FormDropdown").prop("multiple")).toBeTruthy();
-    expect(wrapper.find("FormDropdown").prop("options")).toEqual([
-      { key: 0, text: "Foo", value: "Foo" },
-      { key: 1, text: "Bar", value: "Bar" },
-    ]);
+    // Test without value
+    const withoutValueProps = {
+      ...props,
+      field: {
+        ...props.field,
+        cardinality: "*",
+        value: null,
+      },
+    };
+
+    const withoutValueRendered = render(
+      <StandardDropdown {...withoutValueProps} />
+    );
+    await waitForLoad(withoutValueRendered);
   });
 });

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

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

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

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

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

@@ -1,5 +1,5 @@
-import React from "react";
-import { shallowWithIntl } from "@truedat/test/intl-stub";
+import userEvent from "@testing-library/user-event";
+import { render, waitForLoad } from "@truedat/test/render";
 import { TableField } from "../TableField";
 
 describe("<TableField />", () => {
@@ -7,53 +7,53 @@ describe("<TableField />", () => {
   const cardinality = "+";
   const value = [
     { field1: "Foo", field2: "Bar" },
-    { field1: "Fee", field2: "Bor" }
+    { field1: "Fee", field2: "Bor" },
   ];
   const values = {
     table_columns: [
       { mandatory: true, name: "field1" },
-      { mandatory: false, name: "field2" }
-    ]
+      { mandatory: false, name: "field2" },
+    ],
   };
-  const onChange = jest.fn();
-  const props = { field: { name, cardinality, value, values }, onChange };
+  const props = { field: { name, cardinality, value, values } };
 
-  it("matches the latest snapshot", () => {
-    const wrapper = shallowWithIntl(<TableField {...props} />);
-    expect(wrapper).toMatchSnapshot();
+  it("matches the latest snapshot", async () => {
+    const rendered = render(<TableField {...props} />);
+    await waitForLoad(rendered);
+    expect(rendered.container).toMatchSnapshot();
   });
 
-  it("generates correct onChange value format when changing", () => {
-    const data = {
-      id: 0,
-      name: "field1",
-      value: "Fii"
-    };
-    const component = shallowWithIntl(<TableField {...props} />);
-    component
-      .find({ name: "field1" })
-      .at(0)
-      .simulate("change", null, data);
-    expect(onChange).toBeCalledWith(null, {
+  it("generates correct onChange value format when changing", async () => {
+    const user = userEvent.setup({ delay: null });
+    const onChange = jest.fn();
+    const rendered = render(<TableField {...props} onChange={onChange} />);
+    await waitForLoad(rendered);
+
+    await user.type(rendered.queryAllByRole("textbox")[0], "1");
+    expect(onChange).toHaveBeenCalledWith(expect.objectContaining({}), {
       name: "name",
       value: [
-        { field1: "Fii", field2: "Bar" },
-        { field1: "Fee", field2: "Bor" }
-      ]
+        { field1: "Foo1", field2: "Bar" },
+        { field1: "Fee", field2: "Bor" },
+      ],
     });
   });
 
-  it("generates row when add buttom is pressed", () => {
-    const event = { preventDefault() {} };
-    const component = shallowWithIntl(<TableField {...props} />);
-    component.find({ name: "add_buttom" }).simulate("click", event);
-    expect(onChange).toBeCalledWith(event, {
+  it("generates row when add buttom is pressed", async () => {
+    const user = userEvent.setup({ delay: null });
+    const onChange = jest.fn();
+    const rendered = render(<TableField {...props} onChange={onChange} />);
+    await waitForLoad(rendered);
+
+    const addButton = rendered.getByTestId("add-button");
+    await user.click(addButton);
+    expect(onChange).toHaveBeenCalledWith(expect.objectContaining({}), {
       name: "name",
       value: [
         { field1: "Foo", field2: "Bar" },
         { field1: "Fee", field2: "Bor" },
-        { field1: "", field2: "" }
-      ]
+        { field1: "", field2: "" },
+      ],
     });
   });
 });

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

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

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

@@ -1,36 +1,65 @@
 // Jest Snapshot v1, https://goo.gl/fbAQLP
 
 exports[`<CheckboxField /> Multiple matches the latest snapshot for multiple 1`] = `
-[
-  <FormCheckbox
-    as={[Function]}
-    checked={false}
-    control={[Function]}
-    key="0"
-    label="Foo"
-    name="name"
-    onChange={[Function]}
-    value="foo"
-  />,
-  <FormCheckbox
-    as={[Function]}
-    checked={false}
-    control={[Function]}
-    key="1"
-    label="Bar"
-    name="name"
-    onChange={[Function]}
-    value="bar"
-  />,
-]
+<div>
+  <div
+    class="field"
+  >
+    <div
+      class="ui checkbox"
+    >
+      <input
+        class="hidden"
+        name="name"
+        readonly=""
+        tabindex="0"
+        type="checkbox"
+        value="foo"
+      />
+      <label>
+        Foo
+      </label>
+    </div>
+  </div>
+  <div
+    class="field"
+  >
+    <div
+      class="ui checkbox"
+    >
+      <input
+        class="hidden"
+        name="name"
+        readonly=""
+        tabindex="0"
+        type="checkbox"
+        value="bar"
+      />
+      <label>
+        Bar
+      </label>
+    </div>
+  </div>
+</div>
 `;
 
 exports[`<CheckboxField /> matches the latest snapshot 1`] = `
-<FormCheckbox
-  as={[Function]}
-  checked={false}
-  control={[Function]}
-  name="name"
-  onChange={[Function]}
-/>
+<div>
+  <div
+    class="field"
+  >
+    <div
+      class="ui fitted checkbox"
+    >
+      <input
+        class="hidden"
+        name="name"
+        readonly=""
+        tabindex="0"
+        type="checkbox"
+      />
+      <label />
+    </div>
+  </div>
+</div>
 `;