@truedat/df 7.5.9 → 7.5.11

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

@@ -1,15 +1,9 @@
-import React from "react";
-import { shallow } from "enzyme";
-import { render } from "@truedat/test/render";
-import { intl } from "@truedat/test/intl-stub";
+import userEvent from "@testing-library/user-event";
+import { render, waitForLoad } from "@truedat/test/render";
 import { FieldForm } from "../FieldForm";
 
-// workaround for enzyme issue with React.useContext
-// see https://github.com/airbnb/enzyme/issues/2176#issuecomment-532361526
-jest.spyOn(React, "useContext").mockImplementation(() => intl);
-
 describe("<FieldForm />", () => {
-  it("matches the latest snapshot", () => {
+  it("matches the latest snapshot", async () => {
     const onDelete = jest.fn();
     const onMove = jest.fn();
     const onChange = jest.fn();
@@ -26,11 +20,12 @@ describe("<FieldForm />", () => {
     const fieldIndex = 0;
     const fieldCount = 1;
     const props = { field, fieldIndex, fieldCount, onDelete, onMove, onChange };
-    const { container } = render(<FieldForm {...props} />);
-    expect(container).toMatchSnapshot();
+    const rendered = render(<FieldForm {...props} />);
+    await waitForLoad(rendered);
+    expect(rendered.container).toMatchSnapshot();
   });
 
-  it("renders a FormInput disabled if editMode and disabled field are true", () => {
+  it("renders a FormInput disabled if editMode and disabled field are true", async () => {
     const onDelete = jest.fn();
     const onMove = jest.fn();
     const onChange = jest.fn();
@@ -57,11 +52,14 @@ describe("<FieldForm />", () => {
       onChange,
       editMode,
     };
-    const wrapper = shallow(<FieldForm {...props} />);
-    expect(wrapper.find("FormInput").at(1).prop("disabled")).toBe(true);
+    const rendered = render(<FieldForm {...props} />);
+    await waitForLoad(rendered);
+    expect(
+      rendered.container.querySelector("input[name='undefined.fields[0].name']")
+    ).toHaveAttribute("disabled");
   });
 
-  it("renders ValuesField and manages onChange", () => {
+  it("renders ValuesField and manages onChange", async () => {
     const onDelete = jest.fn();
     const onMove = jest.fn();
     const onChange = jest.fn();
@@ -85,25 +83,30 @@ describe("<FieldForm />", () => {
       onMove,
       onChange,
     };
-    const wrapper = shallow(<FieldForm {...props} />);
-    expect(wrapper).toMatchSnapshot();
-    const dropdown = wrapper
-      .find("ValuesField")
-      .first()
-      .dive()
-      .find("FormDropdown");
-    dropdown.simulate("change", null, { value: "fixed_tuple" });
-    expect(onChange).toBeCalledWith(null, {
-      name: "Group.fields[0].subscribable",
-      value: false,
-    });
-    expect(onChange).toBeCalledWith(null, {
+    const rendered = render(<FieldForm {...props} />);
+    await waitForLoad(rendered);
+    expect(rendered.container).toMatchSnapshot();
+
+    const user = userEvent.setup({ delay: null });
+    const fixedTupleOption = rendered.getByText(
+      "template.field.values.fixed_tuple"
+    );
+    await user.click(fixedTupleOption);
+
+    expect(onChange).toHaveBeenCalledWith(
+      expect.anything(),
+      expect.objectContaining({
+        name: "Group.fields[0].subscribable",
+        value: false,
+      })
+    );
+    expect(onChange).toHaveBeenCalledWith(null, {
       name: "Group.fields[0].values",
       value: { fixed_tuple: null },
     });
   });
 
-  it("manages handleWidgetChange", () => {
+  it("manages handleWidgetChange", async () => {
     const onDelete = jest.fn();
     const onMove = jest.fn();
     const onChange = jest.fn();
@@ -127,26 +130,34 @@ describe("<FieldForm />", () => {
       onMove,
       onChange,
     };
-    const wrapper = shallow(<FieldForm {...props} />);
-    const widgetDropdown = wrapper.find({ name: "Group.fields[0].widget" });
+    const rendered = render(<FieldForm {...props} />);
+    await waitForLoad(rendered);
 
-    widgetDropdown.simulate("change", null, { value: "string" });
-    expect(onChange).toBeCalledWith(null, {
+    const user = userEvent.setup({ delay: null });
+    const stringOption = rendered.getByText("Text Input");
+    await user.click(stringOption);
+
+    expect(onChange).toHaveBeenCalledWith(null, {
       name: "Group.fields[0].values",
       value: null,
     });
-    expect(onChange).toBeCalledWith(null, {
+    expect(onChange).toHaveBeenCalledWith(expect.anything(), {
       name: "Group.fields[0].default",
       value: { value: "", origin: "default" },
     });
-    expect(onChange).toBeCalledWith(null, {
+    expect(onChange).toHaveBeenCalledWith(expect.anything(), {
       name: "Group.fields[0].subscribable",
       value: false,
     });
-    expect(onChange).toBeCalledWith(null, { value: "string" });
+    expect(onChange).toHaveBeenCalledWith(
+      expect.anything(),
+      expect.objectContaining({
+        value: "string",
+      })
+    );
   });
 
-  it("manages handleTypeChange", () => {
+  it("manages handleTypeChange", async () => {
     const onDelete = jest.fn();
     const onMove = jest.fn();
     const onChange = jest.fn();
@@ -170,26 +181,43 @@ describe("<FieldForm />", () => {
       onMove,
       onChange,
     };
-    const wrapper = shallow(<FieldForm {...props} />);
-    const typeDropdown = wrapper.find({ name: "Group.fields[0].type" });
+    const rendered = render(<FieldForm {...props} />);
+    await waitForLoad(rendered);
 
-    typeDropdown.simulate("change", null, { value: "string" });
-    expect(onChange).toBeCalledWith(null, {
-      name: "Group.fields[0].values",
-      value: { fixed: null },
-    });
-    expect(onChange).toBeCalledWith(null, {
-      name: "Group.fields[0].default",
-      value: { value: "", origin: "default" },
-    });
-    expect(onChange).toBeCalledWith(null, {
-      name: "Group.fields[0].subscribable",
-      value: false,
-    });
-    expect(onChange).toBeCalledWith(null, { value: "string" });
+    const user = userEvent.setup({ delay: null });
+    const stringOption = rendered.getByText("template.field.type.string");
+    await user.click(stringOption);
+
+    expect(onChange).toHaveBeenCalledWith(
+      null,
+      expect.objectContaining({
+        name: "Group.fields[0].values",
+        value: { fixed: null },
+      })
+    );
+    expect(onChange).toHaveBeenCalledWith(
+      expect.anything(),
+      expect.objectContaining({
+        name: "Group.fields[0].default",
+        value: { value: "", origin: "default" },
+      })
+    );
+    expect(onChange).toHaveBeenCalledWith(
+      expect.anything(),
+      expect.objectContaining({
+        name: "Group.fields[0].subscribable",
+        value: false,
+      })
+    );
+    expect(onChange).toHaveBeenCalledWith(
+      expect.anything(),
+      expect.objectContaining({
+        value: "string",
+      })
+    );
   });
 
-  it("renders MandatoryConditional", () => {
+  it("renders MandatoryConditional", async () => {
     const allFields = [
       {
         name: "foo",
@@ -239,13 +267,15 @@ describe("<FieldForm />", () => {
       onMove,
       onChange,
     };
-    const wrapper = shallow(<FieldForm {...props} />);
-    expect(wrapper).toMatchSnapshot();
-    const MandatoryConditional = wrapper.find("MandatoryConditional").first();
-    expect(MandatoryConditional).toBeTruthy();
+    const rendered = render(<FieldForm {...props} />);
+    await waitForLoad(rendered);
+    expect(rendered.container).toMatchSnapshot();
+    expect(
+      rendered.getByText(/template.field.mandatory.depends.to_be/i)
+    ).toBeInTheDocument();
   });
 
-  it("manages handleCardinalityChange", () => {
+  it("manages handleCardinalityChange", async () => {
     const allFields = [
       {
         name: "foo",
@@ -280,6 +310,7 @@ describe("<FieldForm />", () => {
     const field = {
       name: "name",
       label: "Name",
+      widget: "dropdown",
       mandatory: { on: "bar", to_be: ["3"] },
       cardinality: "?",
     };
@@ -295,20 +326,23 @@ describe("<FieldForm />", () => {
       onMove,
       onChange,
     };
-    const wrapper = shallow(<FieldForm {...props} />);
-    expect(wrapper).toMatchSnapshot();
-    const CardinalityDropdown = wrapper.find({
-      name: "Group.fields[0].cardinality",
-    });
-    CardinalityDropdown.simulate("change", null, {
-      name: "Group.fields[0].cardinality",
-      value: "1",
-    });
-    expect(onChange.mock.calls[0][1]).toEqual({
-      name: "Group.fields[0].cardinality",
-      value: "1",
+    const rendered = render(<FieldForm {...props} />);
+    await waitForLoad(rendered);
+
+    const user = userEvent.setup({ delay: null });
+    const oneOption = rendered.getByRole("option", {
+      name: "template.field.cardinality.1",
     });
-    expect(onChange.mock.calls[1][1]).toEqual({
+    await user.click(oneOption);
+
+    expect(onChange).toHaveBeenCalledWith(
+      expect.anything(),
+      expect.objectContaining({
+        name: "Group.fields[0].cardinality",
+        value: "1",
+      })
+    );
+    expect(onChange).toHaveBeenCalledWith(expect.anything(), {
       name: "Group.fields[0].mandatory",
       value: null,
     });

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

@@ -1,18 +1,12 @@
-import React from "react";
-import { shallow } from "enzyme";
-import { intl } from "@truedat/test/intl-stub";
+import { render, waitForLoad } from "@truedat/test/render";
 import { GroupsList } from "../GroupsList";
 
-// workaround for enzyme issue with React.useContext
-// see https://github.com/airbnb/enzyme/issues/2176#issuecomment-532361526
-jest.spyOn(React, "useContext").mockImplementation(() => intl);
-
 describe("<GroupsList />", () => {
-  it("matches the latest snapshot", () => {
+  it("matches the latest snapshot", async () => {
     const groups = [
       { name: "group1", fields: [] },
       { name: "group2", fields: [] },
-      { name: "group3", fields: [] }
+      { name: "group3", fields: [] },
     ];
     const activeGroup = 1;
     const onAddGroup = jest.fn();
@@ -21,9 +15,10 @@ describe("<GroupsList />", () => {
       groups,
       activeGroup,
       onAddGroup,
-      onSelectGroup
+      onSelectGroup,
     };
-    const wrapper = shallow(<GroupsList {...props} />);
-    expect(wrapper).toMatchSnapshot();
+    const rendered = render(<GroupsList {...props} />);
+    await waitForLoad(rendered);
+    expect(rendered.container).toMatchSnapshot();
   });
 });

package/src/templates/components/templateForm/__tests__/MandatoryConditional.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__/SwitchListForm.spec.js

@@ -1,9 +1,9 @@
-import React from "react";
-import { shallowWithIntl } from "@truedat/test/intl-stub";
-import { SwitchListForm } from "../SwitchListForm";
+import userEvent from "@testing-library/user-event";
+import { render, waitForLoad } from "@truedat/test/render";
+import SwitchListForm from "../SwitchListForm";
 
 describe("<SwitchListForm />", () => {
-  it("matches the latest snapshot for null values", () => {
+  it("matches the latest snapshot for null values", async () => {
     const values = {
       on: "test",
       values: {
@@ -17,11 +17,13 @@ describe("<SwitchListForm />", () => {
       onChange,
     };
 
-    const wrapper = shallowWithIntl(<SwitchListForm {...props} />);
-    expect(wrapper).toMatchSnapshot();
+    const rendered = render(<SwitchListForm {...props} />);
+    await waitForLoad(rendered);
+    expect(rendered.container).toMatchSnapshot();
   });
 
-  it("test change field on", () => {
+  it("test change field on", async () => {
+    const user = userEvent.setup({ delay: null });
     const values = {
       on: "test",
       values: {
@@ -34,14 +36,18 @@ describe("<SwitchListForm />", () => {
       values,
       onChange,
     };
-    const wrapper = shallowWithIntl(<SwitchListForm {...props} />);
+    const rendered = render(<SwitchListForm {...props} />);
+    await waitForLoad(rendered);
 
-    const input = wrapper.find("FormInput").at(0);
-    input.simulate("change", null, { value: "Test" });
-    expect(onChange).toBeCalledWith({ ...values, on: "Test" });
+    const input = rendered.getByPlaceholderText(
+      /template.field.values.switch_field/i
+    );
+    await user.type(input, "1");
+    expect(onChange).toHaveBeenCalledWith({ ...values, on: "test1" });
   });
 
-  it("test remove value", () => {
+  it("test remove value", async () => {
+    const user = userEvent.setup({ delay: null });
     const values = {
       on: "test",
       values: {
@@ -54,18 +60,21 @@ describe("<SwitchListForm />", () => {
       values,
       onChange,
     };
-    const wrapper = shallowWithIntl(<SwitchListForm {...props} />);
-    const deleteButton = wrapper
-      .find("SwitchSegment")
-      .at(0)
-      .dive()
-      .find("Icon")
-      .at(0);
-    deleteButton.simulate("click");
-    expect(onChange).toBeCalledWith({ ...values, values: { b: ["3", "4"] } });
+    const rendered = render(<SwitchListForm {...props} />);
+    await waitForLoad(rendered);
+
+    const deleteButton = rendered.container.querySelectorAll(
+      ".remove.circle.link.icon"
+    )[0];
+    await user.click(deleteButton);
+    expect(onChange).toHaveBeenCalledWith({
+      ...values,
+      values: { b: ["3", "4"] },
+    });
   });
 
-  it("test change list value", () => {
+  it("test change list value", async () => {
+    const user = userEvent.setup({ delay: null });
     const values = {
       on: "test",
       values: {
@@ -78,21 +87,26 @@ describe("<SwitchListForm />", () => {
       values,
       onChange,
     };
-    const wrapper = shallowWithIntl(<SwitchListForm {...props} />);
-    const SwitchSegment = wrapper.find("SwitchSegment").at(0).dive();
-    SwitchSegment.findWhere((n) => n.prop("type"))
-      .at(0)
-      .prop("onChange")(["5"]);
-    expect(onChange).toBeCalledWith({
+    const rendered = render(<SwitchListForm {...props} />);
+    await waitForLoad(rendered);
+
+    const valueInput = rendered.getAllByPlaceholderText(
+      /template.field.values.add_value/i
+    )[0];
+    await user.clear(valueInput);
+    await user.type(valueInput, "5{enter}");
+
+    expect(onChange).toHaveBeenCalledWith({
       ...values,
       values: {
-        a: ["5"],
+        a: ["1", "2", "5"],
         b: ["3", "4"],
       },
     });
   });
 
-  it("test add new value", () => {
+  it("test add new value", async () => {
+    const user = userEvent.setup({ delay: null });
     const values = {
       on: "test",
       values: {
@@ -105,16 +119,16 @@ describe("<SwitchListForm />", () => {
       values,
       onChange,
     };
-    const wrapper = shallowWithIntl(<SwitchListForm {...props} />);
-
-    const input = wrapper.find("FormInput").at(1);
-    input.simulate("change", null, { value: "Test" });
+    const rendered = render(<SwitchListForm {...props} />);
+    await waitForLoad(rendered);
 
-    const input2 = wrapper.find("FormInput").at(1);
-    expect(input2.props().value).toBe("Test");
-    input2.simulate("keyPress", { key: "Enter" });
+    const newValueInput = rendered.container.querySelector(
+      "input[placeholder='template.field.values.add_switch_value']"
+    );
+    await user.type(newValueInput, "Test");
+    await user.keyboard("{Enter}");
 
-    expect(onChange).toBeCalledWith({
+    expect(onChange).toHaveBeenCalledWith({
       ...values,
       values: {
         Test: [],
@@ -124,7 +138,8 @@ describe("<SwitchListForm />", () => {
     });
   });
 
-  it("test input error", () => {
+  it("test input error", async () => {
+    const user = userEvent.setup({ delay: null });
     const values = {
       on: "test",
       values: {
@@ -137,21 +152,27 @@ describe("<SwitchListForm />", () => {
       values,
       onChange,
     };
-    const wrapper = shallowWithIntl(<SwitchListForm {...props} />);
+    const rendered = render(<SwitchListForm {...props} />);
+    await waitForLoad(rendered);
 
-    const input = wrapper.find("FormInput").at(1);
-    input.simulate("change", null, { value: "a" });
+    const newValueInput = rendered.getByPlaceholderText(
+      /template.field.values.add_switch_value/i
+    );
+    await user.type(newValueInput, "a");
 
-    const input2 = wrapper.find("FormInput").at(1);
-    expect(input2.props().value).toBe("a");
-    expect(input2.props().error).toBe(true);
-    input2.simulate("keyPress", { key: "Enter" });
+    const field = newValueInput.parentElement.parentElement;
+    // Check for error state
+    expect(field.classList.contains("error")).toBe(true);
 
+    // Try to submit with error
+    await user.keyboard("{Enter}");
     expect(onChange).not.toHaveBeenCalled();
 
-    input2.simulate("change", null, { value: "aa" });
-    const input3 = wrapper.find("FormInput").at(1);
-    expect(input3.props().value).toBe("aa");
-    expect(input3.props().error).toBe(false);
+    // Fix the error
+    await user.clear(newValueInput);
+    await user.type(newValueInput, "aa");
+
+    // Check error is gone
+    expect(field.classList.contains("error")).toBe(false);
   });
 });

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

@@ -1,7 +1,5 @@
-import React from "react";
-import { waitFor } from "@testing-library/react";
 import userEvent from "@testing-library/user-event";
-import { render } from "@truedat/test/render";
+import { render, waitForLoad } from "@truedat/test/render";
 import { SwitchSegment } from "../SwitchSegment";
 
 describe("<SwitchSegment />", () => {
@@ -23,79 +21,56 @@ describe("<SwitchSegment />", () => {
     value,
     title,
   };
-  const renderOpts = {
-    messages: {
-      en: {
-        "template.field.values.default.omit": "omit",
-        "template.field.values.default": "default",
-        "template.field.values.add_value": "add",
-        "template.field.values.add_value.label": "List value",
-        "template.field.values.add_text": "add text",
-        "template.field.values.add_format": "add format",
-        "template.field.values.add_file_config": "file config",
-        "template.widget.copy.char.separator.format": "separator",
-        "template.widget.copy.without.fixed.column": "column",
-        "template.widget.copy.fixed.column": "fixed column",
-      },
-    },
-  };
 
-  it("matches the latest snapshot", () => {
-    const { container } = render(<SwitchSegment {...props} />, renderOpts);
-    expect(container).toMatchSnapshot();
+  it("matches the latest snapshot", async () => {
+    const rendered = render(<SwitchSegment {...props} />);
+    await waitForLoad(rendered);
+    expect(rendered.container).toMatchSnapshot();
   });
 
   it("handles onDefaultValueChange addition", async () => {
-    const { findByText, container } = render(
-      <SwitchSegment {...props} />,
-      renderOpts
-    );
-    await waitFor(() => {
-      expect(findByText(/foo/)).toBeTruthy();
-    });
+    const rendered = render(<SwitchSegment {...props} />);
+    await waitForLoad(rendered);
 
-    await waitFor(() => {
-      expect(findByText(/bar/)).toBeTruthy();
-    });
+    expect(rendered.getByText(/foo/i)).toBeInTheDocument();
+    expect(rendered.getByText(/bar/i)).toBeInTheDocument();
+    expect(rendered.getByText(/baz/i)).toBeInTheDocument();
 
-    await waitFor(() => {
-      expect(findByText(/baz/)).toBeTruthy();
-    });
-
-    await waitFor(() => {
-      userEvent.click(
-        container.querySelectorAll('[class="circle outline link icon"]')[0]
-      );
-      expect(onDefaultValueChange).toHaveBeenCalledWith({ 1: "foo" });
-    });
+    const user = userEvent.setup({ delay: null });
+    await user.click(
+      rendered.container.querySelectorAll(
+        '[class="circle outline link icon"]'
+      )[0]
+    );
+    expect(onDefaultValueChange).toHaveBeenCalledWith({ 1: "foo" });
 
-    await waitFor(() => {
-      userEvent.click(
-        container.querySelectorAll('[class="circle outline link icon"]')[1]
-      );
-      expect(onDefaultValueChange).toHaveBeenCalledWith({ 1: "bar" });
-    });
+    await user.click(
+      rendered.container.querySelectorAll(
+        '[class="circle outline link icon"]'
+      )[1]
+    );
+    expect(onDefaultValueChange).toHaveBeenCalledWith({ 1: "bar" });
 
-    await waitFor(() => {
-      userEvent.click(
-        container.querySelectorAll('[class="circle outline link icon"]')[2]
-      );
-      expect(onDefaultValueChange).toHaveBeenCalledWith({ 1: "baz" });
-    });
+    await user.click(
+      rendered.container.querySelectorAll(
+        '[class="circle outline link icon"]'
+      )[2]
+    );
+    expect(onDefaultValueChange).toHaveBeenCalledWith({ 1: "baz" });
   });
 
   it("handles onDefaultValueChange removal", async () => {
     onDefaultValueChange.mockClear();
     const updatedProps = { ...props, defaultValue: { 1: "foo" } };
-    const { container } = render(
-      <SwitchSegment {...updatedProps} />,
-      renderOpts
+    const rendered = render(<SwitchSegment {...updatedProps} />);
+    await waitForLoad(rendered);
+
+    const user = userEvent.setup({ delay: null });
+    await user.click(
+      rendered.container.querySelector(
+        '[class="check circle outline link icon"]'
+      )
     );
-    await waitFor(() => {
-      userEvent.click(
-        container.querySelector('[class="check circle outline link icon"]')
-      );
-    });
     expect(onDefaultValueChange).toHaveBeenCalledWith({});
   });
 });

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

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