setup: update text letter count

Author: ShMcK

src/tests/components/MessageForm.test.js

@@ -1,7 +1,7 @@
 import React from "react";
 import { render, fireEvent } from "@testing-library/react";
 import { MessageForm } from "../../components/MessageForm";
-import { USER } from "../../config";
+import { USER, MAX_MESSAGE_TEXT_LENGTH } from "../../config";
 
 describe("MessageForm", () => {
   test("initiates text as empty", () => {
@@ -17,4 +17,21 @@ describe("MessageForm", () => {
     fireEvent.change(input, { target: { value: text } });
     expect(input.value).toBe(text);
   });
+
+  test("initiates text count as 0", () => {
+    const utils = render(<MessageForm user={USER} />);
+    const textCount = utils.getByTitle("text-count");
+    expect(textCount.textContent.trim()).toBe(`0 / ${MAX_MESSAGE_TEXT_LENGTH}`);
+  });
+
+  test("updates text count with user typing", () => {
+    const text = "55555";
+    const utils = render(<MessageForm user={USER} />);
+    const input = utils.getByLabelText("message-form");
+    fireEvent.change(input, { target: { value: text } });
+    const textCount = utils.getByTitle("text-count");
+    expect(textCount.textContent.trim()).toBe(
+      `${text.length} / ${MAX_MESSAGE_TEXT_LENGTH}`
+    );
+  });
 });