From d24595b78fdbae17160abdfc235199c0f407574a Mon Sep 17 00:00:00 2001
From: Said Shah <sshah@andculture.com>
Date: Wed, 28 Oct 2020 14:10:09 -0400
Subject: [PATCH] Added and updated tests for text area

---
 src/atoms/forms/text-area.test.tsx | 36 +++++++++++++++++++++++++++++-
 src/atoms/forms/text-area.tsx      |  2 +-
 2 files changed, 36 insertions(+), 2 deletions(-)

diff --git a/src/atoms/forms/text-area.test.tsx b/src/atoms/forms/text-area.test.tsx
index 389ba77..cd63cf6 100644
--- a/src/atoms/forms/text-area.test.tsx
+++ b/src/atoms/forms/text-area.test.tsx
@@ -1,5 +1,39 @@
 import React from "react";
+import { TextArea } from "./text-area";
+import uuid from "uuid";
+import { render, fireEvent } from "@testing-library/react";
+import faker from "faker";
 
 describe("TextArea", () => {
-    test.skip("TODO - https://github.com/AndcultureCode/AndcultureCode.JavaScript.React.Components/issues/10", () => {});
+    test("when default props, renders text area", () => {
+        // Arrange
+        const expected = faker.random.word();
+
+        // Act
+        const { getByTestId } = render(
+            <TextArea id={uuid()} onChange={() => {}} testId={expected} />
+        );
+
+        // Assert
+        expect(getByTestId(expected)).not.toBeNil();
+    });
+
+    test("when onChange set, calls handler upon change", () => {
+        // Arrange
+        let isChecked = false;
+        const handleChange = () => (isChecked = true);
+        const expected = faker.random.word();
+
+        // Act
+        const { getByTestId } = render(
+            <TextArea id={expected} onChange={handleChange} testId={expected} />
+        );
+
+        fireEvent.change(getByTestId(expected), {
+            target: { value: faker.random.word() },
+        });
+
+        // Assert
+        expect(isChecked).toBeTrue();
+    });
 });
diff --git a/src/atoms/forms/text-area.tsx b/src/atoms/forms/text-area.tsx
index ad58fe2..2868f92 100644
--- a/src/atoms/forms/text-area.tsx
+++ b/src/atoms/forms/text-area.tsx
@@ -41,7 +41,7 @@ const TextArea: React.FC<TextAreaProps> = (props: TextAreaProps) => {
 
     return (
         <textarea
-            data-test-id={testId}
+            data-testid={testId}
             disabled={disabled}
             id={id}
             maxLength={maxLength}