@truedat/df 7.5.7 → 7.5.10

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

@@ -1,11 +1,11 @@
-import React from "react";
-import { shallow } from "enzyme";
-import { ValuesSelector } from "../ValuesSelector";
+import userEvent from "@testing-library/user-event";
+import { render, waitForLoad } from "@truedat/test/render";
+import ValuesSelector from "../ValuesSelector";
 
 describe("<ValuesSelector />", () => {
   const formatMessage = jest.fn();
   const type = "fixed";
-  const values = { [type]: null };
+  const values = [];
   const name = "name.values";
   const defaultField = "name.default";
   const defaultValue = "foo";
@@ -20,49 +20,49 @@ describe("<ValuesSelector />", () => {
     values,
   };
 
-  it("matches the latest snapshot for null values", () => {
-    const wrapper = shallow(<ValuesSelector {...props} />);
-    expect(wrapper).toMatchSnapshot();
+  it("matches the latest snapshot for null values", async () => {
+    const rendered = render(<ValuesSelector {...props} />);
+    await waitForLoad(rendered);
+    expect(rendered.container).toMatchSnapshot();
   });
 
-  it("renders ValuesListForm when type in fixed, fixed_tuple, table_columns", () => {
-    const wrapper = shallow(<ValuesSelector {...props} />);
-    expect(wrapper.find("injectIntl(ValuesListForm)").length).toBe(1);
-    expect(wrapper.find("injectIntl(SwitchListForm)").length).toBe(0);
-    expect(wrapper.find("FormInput").length).toBe(0);
+  it("renders SwitchListForm when type is switch", async () => {
+    const rendered = render(
+      <ValuesSelector {...props} values={{}} defaultValue={{}} type="switch" />
+    );
+    await waitForLoad(rendered);
+    expect(rendered.container).toMatchSnapshot();
   });
 
-  it("renders SwitchListForm when type is switch", () => {
-    const wrapper = shallow(<ValuesSelector {...props} type="switch" />);
-    expect(wrapper.find("injectIntl(ValuesListForm)").length).toBe(0);
-    expect(wrapper.find("injectIntl(SwitchListForm)").length).toBe(1);
-    expect(wrapper.find("FormInput").length).toBe(0);
+  it("renders FormInput when type is role_users", async () => {
+    const rendered = render(<ValuesSelector {...props} type="role_users" />);
+    await waitForLoad(rendered);
+    expect(rendered.container).toMatchSnapshot();
   });
 
-  it("renders FormInput when type is switch", () => {
-    const wrapper = shallow(<ValuesSelector {...props} type="role_users" />);
-    expect(wrapper.find("injectIntl(ValuesListForm)").length).toBe(0);
-    expect(wrapper.find("injectIntl(SwitchListForm)").length).toBe(0);
-    expect(wrapper.find("FormInput").length).toBe(1);
-  });
-
-  it("changes value on onChange", () => {
-    const wrapper = shallow(<ValuesSelector {...props} type="role_users" />);
-    const input = wrapper.find("FormInput");
-    input.simulate("change", null, { value: "some_role" });
-    expect(onChange).toBeCalledWith(null, {
+  it("changes value on onChange with role_users", async () => {
+    const user = userEvent.setup({ delay: null });
+    const rendered = render(
+      <ValuesSelector {...props} values="role" type="role_users" />
+    );
+    await waitForLoad(rendered);
+    await user.type(rendered.getByRole("textbox"), "1");
+    expect(onChange).toHaveBeenCalledWith(null, {
       name,
-      value: { role_users: "some_role" },
+      value: { role_users: "role1" },
     });
   });
 
-  it("changes value on onChange with role_groups", () => {
-    const wrapper = shallow(<ValuesSelector {...props} type="role_groups" />);
-    const input = wrapper.find("FormInput");
-    input.simulate("change", null, { value: "some_role" });
-    expect(onChange).toBeCalledWith(null, {
+  it("changes value on onChange with role_groups", async () => {
+    const user = userEvent.setup({ delay: null });
+    const rendered = render(
+      <ValuesSelector {...props} values="role" type="role_groups" />
+    );
+    await waitForLoad(rendered);
+    await user.type(rendered.getByRole("textbox"), "1");
+    expect(onChange).toHaveBeenCalledWith(null, {
       name,
-      value: { role_groups: "some_role" },
+      value: { role_groups: "role1" },
     });
   });
 });