tests code refactoring

iusehooks · Jan 7, 2021 · 2f0a9f8 · 2f0a9f8
1 parent 8970a22
commit 2f0a9f8
Show file tree

Hide file tree

Showing 13 changed files with 81 additions and 82 deletions.
diff --git a/__tests__/Collection.spec.js b/__tests__/Collection.spec.js
@@ -1,9 +1,7 @@
 import React from "react";
-import { act } from "react-dom/test-utils";
+import { fireEvent, waitFor, cleanup, act } from "@testing-library/react";
 
-import { render, fireEvent, waitFor, cleanup } from "@testing-library/react";
-
-import { Form, Input, Collection } from "./../src";
+import { Input, Collection } from "./../src";
 
 import { CollectionDynamicCart } from "./helpers/components/CollectionDynamicField";
 import CollectionDynamicAdded from "./helpers/components/CollectionDynamicAdded";
@@ -28,9 +26,7 @@ import CollectionObjectNested, {
 import Reset from "./helpers/components/Reset";
 import Submit from "./helpers/components/Submit";
 import AgeRange from "./helpers/components/AgeRange";
-
-const mountForm = ({ props = {}, children } = {}) =>
-  render(<Form {...props}>{children}</Form>);
+import { mountForm } from "./helpers/utils/mountForm";
 
 const dataTestid = "username";
 const name = "user";

diff --git a/__tests__/CollectionsStrictMode.spec.js b/__tests__/CollectionsStrictMode.spec.js
@@ -1,7 +1,6 @@
 import React from "react";
-import { render, cleanup, fireEvent } from "@testing-library/react";
+import { cleanup, fireEvent } from "@testing-library/react";
 
-import Form from "./../src";
 import {
   CollectionDynamicField,
   CollectionNestedDynamicField,
@@ -13,13 +12,7 @@ import {
 import { CollectionObjectNestedRadios } from "./helpers/components/CollectionObjectNested";
 
 import Reset from "./helpers/components/Reset";
-
-const mountForm = ({ props = {}, children } = {}) =>
-  render(
-    <React.StrictMode>
-      <Form {...props}>{children}</Form>
-    </React.StrictMode>
-  );
+import { mountForm } from "./helpers/utils/mountForm";
 
 const onInit = jest.fn(state => state);
 const onChange = jest.fn(state => state);

diff --git a/__tests__/Form.spec.js b/__tests__/Form.spec.js
@@ -1,8 +1,6 @@
 import React from "react";
 import { render, cleanup, fireEvent, waitFor } from "@testing-library/react";
 
-import Form, { Input } from "./../src";
-
 import { SimpleFormTestSumbission } from "./helpers/components/SimpleFormTestSumbission";
 import { CollectionDynamicCart } from "./helpers/components/CollectionDynamicField";
 import SimpleForm from "./helpers/components/SimpleForm";
@@ -12,9 +10,9 @@ import {
   ComplexFormInitValueAsProps,
   initialState as initialStateComplexForm
 } from "./helpers/components/ComplexForm";
+import { mountForm } from "./helpers/utils/mountForm";
 
-const mountForm = ({ props = {}, children } = {}) =>
-  render(<Form {...props}>{children}</Form>);
+import { Input } from "./../src";
 
 const dataTestid = "email";
 const typeInput = "text";

diff --git a/__tests__/Input.spec.js b/__tests__/Input.spec.js
@@ -7,17 +7,13 @@ import {
   act
 } from "@testing-library/react";
 import userEvent from "@testing-library/user-event";
-
-import { Form, Input } from "./../src";
-
+import { Input } from "./../src";
 import InputAsync from "./helpers/components/InputAsync";
 import InputSyncValidation from "./helpers/components/InputSyncValidation";
 import Submit from "./helpers/components/Submit";
 import Reset from "./helpers/components/Reset";
 import { SimpleFormDynamicField } from "./helpers/components/SimpleForm";
-
-const mountForm = ({ props = {}, children } = {}) =>
-  render(<Form {...props}>{children}</Form>);
+import { mountForm } from "./helpers/utils/mountForm";
 
 const onInit = jest.fn();
 const onChange = jest.fn();
@@ -431,8 +427,10 @@ describe("Component => Input", () => {
     const reset = getByTestId("reset");
     const asyncinput = getByTestId("asyncinput");
 
-    asyncinput.focus();
-    asyncinput.blur();
+    act(() => {
+      asyncinput.focus();
+      asyncinput.blur();
+    });
 
     const asyncStart = await waitFor(() => getByTestId("asyncStart"));
     expect(asyncStart).toBeDefined();
@@ -442,8 +440,11 @@ describe("Component => Input", () => {
     expect(asyncError.textContent).toBe("Error");
 
     fireEvent.change(asyncinput, { target: { value: "1234" } });
-    asyncinput.focus();
-    asyncinput.blur();
+
+    act(() => {
+      asyncinput.focus();
+      asyncinput.blur();
+    });
 
     expect(asyncinput.value).toBe("1234");
 

diff --git a/__tests__/Select.spec.js b/__tests__/Select.spec.js
@@ -1,15 +1,12 @@
 import React from "react";
-import { act } from "react-dom/test-utils";
-import { render, fireEvent, cleanup } from "@testing-library/react";
+import { fireEvent, cleanup, act } from "@testing-library/react";
 import userEvent from "@testing-library/user-event";
 
 import Reset from "./helpers/components/Reset";
 import SelectSyncValidation from "./helpers/components/SelectSyncValidation";
+import { mountForm } from "./helpers/utils/mountForm";
 
-import Form, { Select } from "./../src";
-
-const mountForm = ({ props = {}, children } = {}) =>
-  render(<Form {...props}>{children}</Form>);
+import { Select } from "./../src";
 
 const dataTestid = "select";
 const name = "select";

diff --git a/__tests__/TextArea.spec.js b/__tests__/TextArea.spec.js
@@ -1,10 +1,7 @@
 import React from "react";
-import { render, fireEvent, cleanup } from "@testing-library/react";
-
-import Form, { TextArea } from "./../src";
-
-const mountForm = ({ props = {}, children } = {}) =>
-  render(<Form {...props}>{children}</Form>);
+import { fireEvent, cleanup } from "@testing-library/react";
+import { mountForm } from "./helpers/utils/mountForm";
+import { TextArea } from "./../src";
 
 const dataTestid = "TextArea";
 const name = "TextArea";

diff --git a/__tests__/helpers/components/CustomField.jsx b/__tests__/helpers/components/CustomField.jsx
@@ -0,0 +1,12 @@
+import React from "react";
+import { useField, withIndex } from "./../../../src";
+
+export const CustomField = withIndex(({ name, value, ...restAttr }) => {
+  const props = useField({ type: "custom", name, value });
+  const onChange = () => props.onChange({ target: { value: "5" } });
+  return (
+    <button type="button" onClick={onChange} {...restAttr}>
+      Change Value
+    </button>
+  );
+});
diff --git a/__tests__/helpers/components/InputCustom.jsx b/__tests__/helpers/components/InputCustom.jsx
@@ -0,0 +1,9 @@
+import React from "react";
+import { useField, withIndex } from "./../../../src";
+
+export const InputCustom = withIndex(
+  ({ type, name, value, index, ...restAttr }) => {
+    const props = useField({ type, name, value, index });
+    return <input {...restAttr} {...props}></input>;
+  }
+);
diff --git a/__tests__/helpers/components/InputCustomNoAutoIndex.jsx b/__tests__/helpers/components/InputCustomNoAutoIndex.jsx
@@ -0,0 +1,13 @@
+import React from "react";
+import { useField } from "./../../../src";
+
+export const InputCustomNoAutoIndex = ({
+  type,
+  name,
+  value,
+  index,
+  ...restAttr
+}) => {
+  const props = useField({ type, name, value, index });
+  return <input {...restAttr} {...props}></input>;
+};
diff --git a/__tests__/helpers/utils/mountForm.js b/__tests__/helpers/utils/mountForm.js
@@ -0,0 +1,10 @@
+import React from "react";
+import { render } from "@testing-library/react";
+import { Form } from "./../../../src";
+
+export const mountForm = ({ props = {}, children } = {}) =>
+  render(
+    <React.StrictMode>
+      <Form {...props}>{children}</Form>
+    </React.StrictMode>
+  );
diff --git a/__tests__/hooks/useCollection.spec.js b/__tests__/hooks/useCollection.spec.js
@@ -1,11 +1,9 @@
 import React from "react";
-import { render, fireEvent, cleanup } from "@testing-library/react";
-import Form, { Collection } from "./../../src";
+import { fireEvent, cleanup } from "@testing-library/react";
+import { Collection } from "./../../src";
 
 import CollectionWithHooks from "./../helpers/components/CollectionWithHooks";
-
-const mountForm = ({ props = {}, children } = {}) =>
-  render(<Form {...props}>{children}</Form>);
+import { mountForm } from "./../helpers/utils/mountForm";
 
 const onInit = jest.fn();
 const onChange = jest.fn();

diff --git a/__tests__/hooks/useField.spec.js b/__tests__/hooks/useField.spec.js
@@ -1,29 +1,10 @@
 import React from "react";
-import { render, fireEvent, cleanup, act } from "@testing-library/react";
-import { Form, Collection, useField, withIndex } from "./../../src";
-
-const InputCustom = withIndex(({ type, name, value, index, ...restAttr }) => {
-  const props = useField({ type, name, value, index });
-  return <input {...restAttr} {...props}></input>;
-});
-
-const CustomField = withIndex(({ name, value, ...restAttr }) => {
-  const props = useField({ type: "custom", name, value });
-  const onChange = () => props.onChange({ target: { value: "5" } });
-  return (
-    <button type="button" onClick={onChange} {...restAttr}>
-      Change Value
-    </button>
-  );
-});
-
-const InputCustomNoAutoIndex = ({ type, name, value, index, ...restAttr }) => {
-  const props = useField({ type, name, value, index });
-  return <input {...restAttr} {...props}></input>;
-};
-
-const mountForm = ({ props = {}, children } = {}) =>
-  render(<Form {...props}>{children}</Form>);
+import { fireEvent, cleanup, act } from "@testing-library/react";
+import { Collection } from "./../../src";
+import { mountForm } from "./../helpers/utils/mountForm";
+import { InputCustom } from "./../helpers/components/InputCustom";
+import { CustomField } from "./../helpers/components/CustomField";
+import { InputCustomNoAutoIndex } from "./../helpers/components/InputCustomNoAutoIndex";
 
 const onInit = jest.fn();
 const onChange = jest.fn();

diff --git a/__tests__/hooks/useSelector.spec.js b/__tests__/hooks/useSelector.spec.js
@@ -1,16 +1,10 @@
 import React from "react";
-import { render, fireEvent, cleanup, act } from "@testing-library/react";
+import { fireEvent, cleanup, act } from "@testing-library/react";
 import { CmpWithSelectorToggle } from "./../helpers/components/CmpWithSelectorToggle";
-import { Form, Input, withIndex, Collection, useField } from "./../../src";
+import { Input, Collection } from "./../../src";
 import Reset from "./../helpers/components/Reset";
-
-const InputCustom = withIndex(({ type, name, value, index, ...restAttr }) => {
-  const props = useField({ type, name, value, index });
-  return <input {...restAttr} {...props}></input>;
-});
-
-const mountForm = ({ props = {}, children } = {}) =>
-  render(<Form {...props}>{children}</Form>);
+import { mountForm } from "./../helpers/utils/mountForm";
+import { InputCustom } from "./../helpers/components/InputCustom";
 
 const onReset = jest.fn();
 const onChange = jest.fn();