@truedat/df 7.5.7 → 7.5.10

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

@@ -1,6 +1,5 @@
-import React from "react";
-import { shallow } from "enzyme";
-import { TemplateFormActions } from "../TemplateFormActions";
+import { render, waitForLoad } from "@truedat/test/render";
+import TemplateFormActions from "../TemplateFormActions";
 
 describe("<TemplateFormActions />", () => {
   const onSave = jest.fn();
@@ -11,6 +10,7 @@ describe("<TemplateFormActions />", () => {
   const templateSaving = false;
   const templateDeleting = false;
   const isInvalid = false;
+
   const props = {
     template,
     templateSaving,
@@ -19,25 +19,29 @@ describe("<TemplateFormActions />", () => {
     isInvalid,
   };
 
-  it("matches the latest snapshot", () => {
-    const wrapper = shallow(<TemplateFormActions {...props} />);
-    expect(wrapper).toMatchSnapshot();
+  it("matches the latest snapshot", async () => {
+    const rendered = render(<TemplateFormActions {...props} />);
+    await waitForLoad(rendered);
+    expect(rendered.container).toMatchSnapshot();
   });
 
-  it("matches the latest snapshot (saving)", () => {
-    const wrapper = shallow(<TemplateFormActions {...props} templateSaving />);
-    expect(wrapper).toMatchSnapshot();
+  it("matches the latest snapshot (saving)", async () => {
+    const rendered = render(<TemplateFormActions {...props} templateSaving />);
+    await waitForLoad(rendered);
+    expect(rendered.container).toMatchSnapshot();
   });
 
-  it("matches the latest snapshot (deleting)", () => {
-    const wrapper = shallow(
+  it("matches the latest snapshot (deleting)", async () => {
+    const rendered = render(
       <TemplateFormActions {...props} templateDeleting />
     );
-    expect(wrapper).toMatchSnapshot();
+    await waitForLoad(rendered);
+    expect(rendered.container).toMatchSnapshot();
   });
 
-  it("matches the latest snapshot (invalid)", () => {
-    const wrapper = shallow(<TemplateFormActions {...props} isInvalid />);
-    expect(wrapper).toMatchSnapshot();
+  it("matches the latest snapshot (invalid)", async () => {
+    const rendered = render(<TemplateFormActions {...props} isInvalid />);
+    await waitForLoad(rendered);
+    expect(rendered.container).toMatchSnapshot();
   });
 });

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

@@ -1,14 +1,9 @@
-import React from "react";
-import { shallow } from "enzyme";
-import { intl } from "@truedat/test/intl-stub";
-import { ValuesField } from "../ValuesField";
-
-// workaround for enzyme issue with React.useContext
-// see https://github.com/airbnb/enzyme/issues/2176#issuecomment-532361526
-jest.spyOn(React, "useContext").mockImplementation(() => intl);
+import userEvent from "@testing-library/user-event";
+import { render, waitForLoad } from "@truedat/test/render";
+import ValuesField from "../ValuesField";
 
 describe("<ValuesField /> noPrefix", () => {
-  it("matches the latest snapshot for null values", () => {
+  it("matches the latest snapshot for null values", async () => {
     const values = null;
     const name = "name.values";
     const onChange = jest.fn();
@@ -19,11 +14,12 @@ describe("<ValuesField /> noPrefix", () => {
       onSelectionChange,
       onChange,
     };
-    const wrapper = shallow(<ValuesField {...props} />);
-    expect(wrapper).toMatchSnapshot();
+    const rendered = render(<ValuesField {...props} />);
+    await waitForLoad(rendered);
+    expect(rendered.container).toMatchSnapshot();
   });
 
-  it("test values dropdown", () => {
+  it("test values dropdown", async () => {
     const values = null;
     const name = "name.values";
     const onSelectionChange = jest.fn();
@@ -42,14 +38,22 @@ describe("<ValuesField /> noPrefix", () => {
         { id: "template.field.values.switch", value: "switch" },
       ],
     };
-    const wrapper = shallow(<ValuesField {...props} />);
-    wrapper.find("FormDropdown").simulate("change", null, { value: "fixed" });
-    expect(onSelectionChange).toBeCalledWith(null, { value: "fixed" });
+    const rendered = render(<ValuesField {...props} />);
+    await waitForLoad(rendered);
+
+    const user = userEvent.setup({ delay: null });
+    await user.click(
+      await rendered.findByRole("option", {
+        name: "template.field.values.switch",
+      })
+    );
+
+    expect(onSelectionChange).toHaveBeenCalled();
   });
 });
 
 describe("<ValuesField /> fixed", () => {
-  it("matches the latest snapshot for null values", () => {
+  it("matches the latest snapshot for null values", async () => {
     const values = { fixed: ["Foo", "Bar"] };
     const name = "name.values";
     const onSelectionChange = jest.fn();
@@ -59,11 +63,12 @@ describe("<ValuesField /> fixed", () => {
       onChange: jest.fn(),
       onSelectionChange,
     };
-    const wrapper = shallow(<ValuesField {...props} />);
-    expect(wrapper).toMatchSnapshot();
+    const rendered = render(<ValuesField {...props} />);
+    await waitForLoad(rendered);
+    expect(rendered.container).toMatchSnapshot();
   });
 
-  it("test values dropdown changes to given value", () => {
+  it("test values dropdown changes to given value", async () => {
     const values = { fixed: ["Foo", "Bar"] };
     const onSelectionChange = jest.fn();
     const props = {
@@ -80,20 +85,21 @@ describe("<ValuesField /> fixed", () => {
         { id: "template.field.values.switch", value: "switch" },
       ],
     };
-    const wrapper = shallow(<ValuesField {...props} />);
+    const rendered = render(<ValuesField {...props} />);
+    await waitForLoad(rendered);
 
-    wrapper
-      .find("FormDropdown")
-      .at(0)
-      .simulate("change", null, { value: "fixed_tuple" });
+    const user = userEvent.setup({ delay: null });
+    const dropdown = rendered.container.querySelector(".dropdown");
+    await user.click(dropdown);
+    await user.click(await rendered.findByText(/fixed_tuple/i));
 
-    expect(onSelectionChange).toBeCalledWith(null, { value: "fixed_tuple" });
+    expect(onSelectionChange).toHaveBeenCalled();
   });
 
-  it("renders subscribable checkbox", () => {
+  it("renders subscribable checkbox", async () => {
     const values = { fixed: ["Foo", "Bar"] };
     const onChange = jest.fn();
-    const subscribableField = "foo";
+    const subscribableField = "subscribableField";
     const props = {
       field: { values, subscribable: false },
       onChange,
@@ -108,24 +114,35 @@ describe("<ValuesField /> fixed", () => {
         { id: "template.field.values.switch", value: "switch" },
       ],
     };
-    const wrapper = shallow(<ValuesField {...props} />);
-    expect(wrapper.find({ name: subscribableField })).toBeDefined();
-    wrapper.find({ name: subscribableField }).simulate("change", null, {
-      name: subscribableField,
-      checked: true,
-    });
-    expect(onChange).toBeCalledWith(null, {
+    const rendered = render(<ValuesField {...props} />);
+    await waitForLoad(rendered);
+
+    const user = userEvent.setup({ delay: null });
+    const checkbox = rendered.container.querySelector(
+      `[name="${subscribableField}"]`
+    );
+    expect(checkbox).toBeInTheDocument();
+    await user.click(checkbox);
+
+    expect(onChange).toHaveBeenCalledWith(null, {
       name: subscribableField,
       value: true,
     });
 
-    wrapper.setProps({ ...props, keyType: "fixed_tuple" });
-    expect(wrapper.find({ name: subscribableField })).toBeDefined();
-    wrapper.find({ name: subscribableField }).simulate("change", null, {
-      name: subscribableField,
-      checked: true,
+    // Test with fixed_tuple keyType
+    const renderedWithFixedTuple = render({
+      ...props,
+      keyType: "fixed_tuple",
     });
-    expect(onChange).toBeCalledWith(null, {
+    await waitForLoad(renderedWithFixedTuple);
+
+    const checkboxFixedTuple = renderedWithFixedTuple.getByText(
+      "template.field.subscribable"
+    );
+    expect(checkboxFixedTuple).toBeInTheDocument();
+    await user.click(checkboxFixedTuple);
+
+    expect(onChange).toHaveBeenCalledWith(null, {
       name: subscribableField,
       value: true,
     });
@@ -133,7 +150,7 @@ describe("<ValuesField /> fixed", () => {
 });
 
 describe("<ValuesField /> fixed_tuple", () => {
-  it("matches the latest snapshot for null values", () => {
+  it("matches the latest snapshot for null values", async () => {
     const values = { fixed_tuple: [{ value: "Foo", text: "Bar" }] };
     const name = "name.values";
     const onChange = jest.fn();
@@ -145,13 +162,14 @@ describe("<ValuesField /> fixed_tuple", () => {
       onSelectionChange,
       keyType: "fixed_tuple",
     };
-    const wrapper = shallow(<ValuesField {...props} />);
-    expect(wrapper).toMatchSnapshot();
+    const rendered = render(<ValuesField {...props} />);
+    await waitForLoad(rendered);
+    expect(rendered.container).toMatchSnapshot();
   });
 });
 
 describe("<ValuesField /> switch", () => {
-  it("matches the latest snapshot for null values", () => {
+  it("matches the latest snapshot for null values", async () => {
     const values = {
       switch: {
         on: "test",
@@ -170,13 +188,14 @@ describe("<ValuesField /> switch", () => {
       onChange: jest.fn(),
       onSelectionChange,
     };
-    const wrapper = shallow(<ValuesField {...props} />);
-    expect(wrapper).toMatchSnapshot();
+    const rendered = render(<ValuesField {...props} />);
+    await waitForLoad(rendered);
+    expect(rendered.container).toMatchSnapshot();
   });
 });
 
 describe("<ValuesField /> role_users", () => {
-  it("matches the latest snapshot for not null values", () => {
+  it("matches the latest snapshot for not null values", async () => {
     const values = { role_users: "test_role" };
     const name = "name.values";
     const onSelectionChange = jest.fn();
@@ -186,11 +205,12 @@ describe("<ValuesField /> role_users", () => {
       onChange: jest.fn(),
       onSelectionChange,
     };
-    const wrapper = shallow(<ValuesField {...props} />);
-    expect(wrapper).toMatchSnapshot();
+    const rendered = render(<ValuesField {...props} />);
+    await waitForLoad(rendered);
+    expect(rendered.container).toMatchSnapshot();
   });
 
-  it("test role input", () => {
+  it("test role input", async () => {
     const values = { processed_users: ["user1"], role_users: "test_role" };
     const name = "name.values";
     const onSelectionChange = jest.fn();
@@ -203,23 +223,24 @@ describe("<ValuesField /> role_users", () => {
       widget: "dropdown",
       fieldType: "user",
       keyType: "role_users",
+      fieldNamePrefix: "foo",
     };
-    const wrapper = shallow(<ValuesField {...props} />);
-    const input = wrapper
-      .find("ValuesSelector")
-      .first()
-      .dive()
-      .find("FormInput");
-    input.simulate("change", null, { value: "another_role" });
-    expect(onChange).toBeCalledWith(null, {
+    const rendered = render(<ValuesField {...props} />);
+    await waitForLoad(rendered);
+
+    const user = userEvent.setup({ delay: null });
+
+    await user.type(rendered.getByRole("textbox"), "1");
+
+    expect(onChange).toHaveBeenCalledWith(null, {
       name: "name.values",
-      value: { role_users: "another_role" },
+      value: { role_users: "test_role1" },
     });
   });
 });
 
 describe("<ValuesField /> table_columns", () => {
-  it("matches the latest snapshot", () => {
+  it("matches the latest snapshot", async () => {
     const values = {
       table_columns: [
         { mandatory: true, name: "field1" },
@@ -230,7 +251,8 @@ describe("<ValuesField /> table_columns", () => {
       field: { values },
       onChange: jest.fn(),
     };
-    const wrapper = shallow(<ValuesField {...props} />);
-    expect(wrapper).toMatchSnapshot();
+    const rendered = render(<ValuesField {...props} />);
+    await waitForLoad(rendered);
+    expect(rendered.container).toMatchSnapshot();
   });
 });

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

@@ -1,6 +1,7 @@
-import React from "react";
-import { shallowWithIntl } from "@truedat/test/intl-stub";
-import { ValuesListForm } from "../ValuesListForm";
+import userEvent from "@testing-library/user-event";
+import { within } from "@testing-library/react";
+import { render, waitForLoad } from "@truedat/test/render";
+import ValuesListForm from "../ValuesListForm";
 
 describe("<ValuesListForm /> fixed", () => {
   const values = ["Foo", "Bar"];
@@ -9,189 +10,152 @@ describe("<ValuesListForm /> fixed", () => {
   const props = {
     values,
     type,
-    onChange
+    onChange,
   };
-  it("matches the latest snapshot for fixed", () => {
-    const wrapper = shallowWithIntl(<ValuesListForm {...props} />);
-    expect(wrapper).toMatchSnapshot();
+  it("matches the latest snapshot for fixed", async () => {
+    const rendered = render(<ValuesListForm {...props} />);
+    await waitForLoad(rendered);
+    expect(rendered.container).toMatchSnapshot();
   });
 
-  it("test list simple actions", () => {
-    const wrapper = shallowWithIntl(<ValuesListForm {...props} />);
+  it("test list simple actions", async () => {
+    const rendered = render(<ValuesListForm {...props} />);
+    await waitForLoad(rendered);
+
+    const user = userEvent.setup({ delay: null });
+    const upButton =
+      rendered.container.querySelectorAll(".chevron.circle.up")[1];
+    await user.click(upButton);
+    expect(onChange).toHaveBeenCalledWith(["Bar", "Foo"]);
+
+    const downButton = rendered.container.querySelectorAll(
+      ".chevron.circle.down"
+    )[0];
+    await user.click(downButton);
+    expect(onChange).toHaveBeenCalledWith(["Foo", "Bar"]);
+
+    const removeButton = rendered.container.querySelectorAll(
+      ".remove.circle.icon"
+    )[0];
+    await user.click(removeButton);
+    expect(onChange).toHaveBeenCalledWith(["Bar"]);
+  });
 
-    const fooItemList = wrapper.find("ListItem").at(0);
-    fooItemList.find({ name: "chevron circle up" }).simulate("click");
-    expect(onChange).toBeCalledWith(["Foo", "Bar"]);
+  it("test input for fixed", async () => {
+    const customProps = { ...props, onChange: jest.fn() };
+    const rendered = render(<ValuesListForm {...customProps} />);
+    await waitForLoad(rendered);
 
-    fooItemList.find({ name: "chevron circle down" }).simulate("click");
-    expect(onChange).toBeCalledWith(["Bar", "Foo"]);
+    const user = userEvent.setup({ delay: null });
+    const input = rendered.container.querySelector("input[name='fixed_value']");
+    await user.type(input, "Test");
 
-    const barItemList = wrapper.find("ListItem").at(0);
-    barItemList.find({ name: "remove circle" }).simulate("click");
-    expect(onChange).toBeCalledWith(["Foo"]);
-  });
+    // Verify it changes the component value
+    expect(input.value).toBe("Test");
+
+    // Simulate Enter pressed
+    await user.type(input, "{enter}");
+
+    // Verify value is added and input is cleaned
+    expect(customProps.onChange).toHaveBeenCalledWith(["Bar", "Test"]);
 
-  it("test input for fixed", () => {
-    const wrapper = shallowWithIntl(<ValuesListForm {...props} />);
-
-    //Write "Test" to input
-    wrapper.find("FormInput").simulate("change", null, {
-      name: "fixed_value",
-      value: "Test"
-    });
-    //Verify it changes de component value
-    expect(wrapper.find("FormInput").props().value).toBe("Test");
-    //Simulate Enter pressed
-    wrapper.find("FormInput").simulate("keyPress", { key: "Enter" });
-
-    //Verify value in added and input is cleaned
-    expect(onChange).toBeCalledWith(["Foo", "Test"]);
-    expect(wrapper.find("FormInput").props().value).toBe("");
-
-    //Write "Test" again
-    wrapper.find("FormInput").simulate("change", null, {
-      name: "fixed_value",
-      value: "Foo"
-    });
-    expect(wrapper.find("FormInput").props().error).toBe(true);
+    // Type existing value to test error state
+    await user.type(input, "Bar");
+    const errorInput = rendered.container.querySelector(".error input");
+    expect(errorInput).toBeInTheDocument();
   });
 });
 
 describe("<ValuesListForm /> fixed_tuple", () => {
   const values = [
     { value: "foo", text: "Foo" },
-    { value: "bar", text: "Bar" }
+    { value: "bar", text: "Bar" },
   ];
   const type = "fixed_tuple";
   const onChange = jest.fn();
   const props = {
     values,
     type,
-    onChange
+    onChange,
   };
-  it("matches the latest snapshot for fixed_tuple", () => {
-    const wrapper = shallowWithIntl(<ValuesListForm {...props} />);
-    expect(wrapper).toMatchSnapshot();
+  it("matches the latest snapshot for fixed_tuple", async () => {
+    const rendered = render(<ValuesListForm {...props} />);
+    await waitForLoad(rendered);
+    expect(rendered.container).toMatchSnapshot();
   });
 
-  it("test input for fixed_tuple", () => {
-    const wrapper = shallowWithIntl(<ValuesListForm {...props} />);
-
-    //Write "Test" to input
-    wrapper
-      .find("FormInput")
-      .at(0)
-      .simulate("change", null, {
-        name: "tuple_value",
-        value: "test"
-      });
-    wrapper
-      .find("FormInput")
-      .at(1)
-      .simulate("change", null, {
-        name: "tuple_text",
-        value: "TestText"
-      });
-    //Verify it changes de component value
-    expect(
-      wrapper
-        .find("FormInput")
-        .at(0)
-        .props().value
-    ).toBe("test");
-    expect(
-      wrapper
-        .find("FormInput")
-        .at(1)
-        .props().value
-    ).toBe("TestText");
-    //Simulate Enter pressed
-    wrapper
-      .find("FormInput")
-      .at(1)
-      .simulate("keyPress", { key: "Enter" });
-
-    //Verify value in added and input is cleaned
-    expect(onChange).toBeCalledWith([
+  it("test input for fixed_tuple", async () => {
+    const rendered = render(<ValuesListForm {...props} />);
+    await waitForLoad(rendered);
+
+    const user = userEvent.setup({ delay: null });
+    // Write "Test" to inputs
+    const valueInput = rendered.container.querySelector(
+      "input[name='tuple_value']"
+    );
+    const textInput = rendered.container.querySelector(
+      "input[name='tuple_text']"
+    );
+
+    await user.type(valueInput, "test");
+    await user.type(textInput, "TestText");
+
+    // Verify it changes the component value
+    expect(valueInput.value).toBe("test");
+    expect(textInput.value).toBe("TestText");
+
+    // Simulate Enter pressed
+    await user.type(textInput, "{enter}");
+
+    // Verify value is added and inputs are cleaned
+    expect(onChange).toHaveBeenCalledWith([
       { text: "Foo", value: "foo" },
       { text: "Bar", value: "bar" },
-      { text: "TestText", value: "test" }
+      { text: "TestText", value: "test" },
     ]);
-    expect(
-      wrapper
-        .find("FormInput")
-        .at(0)
-        .props().value
-    ).toBe("");
-    expect(
-      wrapper
-        .find("FormInput")
-        .at(1)
-        .props().value
-    ).toBe("");
-
-    //Write "Test" again
-    wrapper
-      .find("FormInput")
-      .at(0)
-      .simulate("change", null, {
-        name: "tuple_value",
-        value: "foo"
-      });
-    expect(
-      wrapper
-        .find("FormInput")
-        .at(0)
-        .props().error
-    ).toBe(true);
+
+    // Type existing value to test error state
+    await user.type(valueInput, "foo");
+    const errorInput = rendered.container.querySelector(".error input");
+    expect(errorInput).toBeInTheDocument();
   });
 });
 
 describe("<ValuesListForm /> table_columns", () => {
   const values = [
     { mandatory: true, name: "field1" },
-    { mandatory: false, name: "field2" }
+    { mandatory: false, name: "field2" },
   ];
   const type = "table_columns";
   const onChange = jest.fn();
   const props = {
     values,
     type,
-    onChange
+    onChange,
   };
-  it("matches the latest snapshot for table_columns", () => {
-    const wrapper = shallowWithIntl(<ValuesListForm {...props} />);
-    expect(wrapper).toMatchSnapshot();
+  it("matches the latest snapshot for table_columns", async () => {
+    const rendered = render(<ValuesListForm {...props} />);
+    await waitForLoad(rendered);
+    expect(rendered.container).toMatchSnapshot();
   });
 
-  it("test form for table_columns", () => {
-    const wrapper = shallowWithIntl(<ValuesListForm {...props} />);
-    expect(
-      wrapper
-        .find("ListItem")
-        .at(0)
-        .find("ListContent")
-        .props().children[0]
-    ).toBe("field1");
-    expect(
-      wrapper
-        .find("ListItem")
-        .at(1)
-        .find("ListContent")
-        .props().children[0]
-    ).toBe("field2");
-
-    wrapper.find("FormInput").simulate("change", null, {
-      name: "column_name",
-      value: "este si"
-    });
-    expect(wrapper.find("FormInput").props().value).toBe("este si");
-
-    wrapper.find("FormInput").simulate("keyPress", { key: "Enter" });
-    expect(onChange).toBeCalledWith([
+  it("test form for table_columns", async () => {
+    const rendered = render(<ValuesListForm {...props} />);
+    await waitForLoad(rendered);
+
+    expect(rendered.getByText(/field1/i)).toBeInTheDocument();
+    expect(rendered.getByText(/field2/i)).toBeInTheDocument();
+
+    const user = userEvent.setup({ delay: null });
+    const input = rendered.container.querySelector("input[name='column_name']");
+    await user.type(input, "este si");
+    expect(input.value).toBe("este si");
+
+    await user.type(input, "{enter}");
+    expect(onChange).toHaveBeenCalledWith([
       { mandatory: true, name: "field1" },
       { mandatory: false, name: "field2" },
-      { mandatory: false, name: "este si" }
+      { mandatory: false, name: "este si" },
     ]);
   });
 });