setup: useText hook refactor

ShMcK · ShMcK · commit 71deafa34fb0 · 2019-12-24T09:58:38.000-08:00
diff --git a/src/components/MessageForm/index.js b/src/components/MessageForm/index.js
@@ -6,6 +6,15 @@ import { Card } from "../Card";
 import { MAX_MESSAGE_TEXT_LENGTH } from "../../config";
 import "./styles.css";
 
+export const useText = initialText => {
+  // TODO: extract useState logic out of MessageForm
+
+  return {
+    text,
+    handleChange
+  };
+};
+
 export const MessageForm = ({ user }) => {
   const [text, setText] = React.useState("");
 
diff --git a/src/tests/components/MessageForm.test.js b/src/tests/components/MessageForm.test.js
@@ -1,6 +1,7 @@
 import React from "react";
 import { render, fireEvent } from "@testing-library/react";
-import { MessageForm } from "../../components/MessageForm";
+import { renderHook, act } from "@testing-library/react-hooks";
+import { MessageForm, useText } from "../../components/MessageForm";
 import { USER, MAX_MESSAGE_TEXT_LENGTH } from "../../config";
 
 describe("MessageForm", () => {
@@ -50,3 +51,30 @@ describe("MessageForm", () => {
     expect(button.disabled).toBe(false);
   });
 });
+
+describe("useText", () => {
+  test("useText hook should initiate text to empty string", () => {
+    const { result } = renderHook(useText);
+    expect(result.current.text).toBe("");
+  });
+
+  test("useText hook should return a handleChange function", () => {
+    const { result } = renderHook(useText);
+    expect(result.current.handleChange).toBeDefined();
+  });
+
+  test("useText hook allow updates of text", () => {
+    const { result } = renderHook(useText);
+
+    act(() => {
+      const event = {
+        preventDefault() {},
+        target: {
+          value: "10 letters"
+        }
+      };
+      result.current.handleChange(event);
+    });
+    expect(result.current.text).toBe("10 letters");
+  });
+});
