Issue #9 Backfill tests for Atoms/TextInput and Atoms/TextInputIcon

Add tests for atoms text input and text input icon

Author: brandongregoryscott

src/atoms/forms/text-input-icon.test.tsx

@@ -1,5 +1,27 @@
 import React from "react";
+import { TextInputIcon } from "./text-input-icon";
+import faker from "faker";
+import { render, fireEvent } from "@testing-library/react";
+import uuid from "uuid";
+import { Icons } from "../constants/icons";
 
 describe("TextInputIcon", () => {
-    test.skip("TODO - https://github.com/AndcultureCode/AndcultureCode.JavaScript.React.Components/issues/9", () => {});
+    test("when default props, renders icon with input", () => {
+        // Arrange
+        const dataTestId = "dataTestId";
+        const icon = Icons.Checkmark;
+
+        // Act
+        const { getByTestId } = render(
+            <TextInputIcon
+                icon={icon}
+                id={uuid()}
+                onChange={() => {}}
+                testId={dataTestId}
+            />
+        );
+
+        // Assert
+        expect(getByTestId(dataTestId)).not.toBeNil();
+    });
 });

src/atoms/forms/text-input.test.tsx

@@ -1,5 +1,64 @@
 import React from "react";
+import { TextInput } from "./text-input";
+import faker from "faker";
+import { render, fireEvent } from "@testing-library/react";
+import uuid from "uuid";
 
 describe("TextInput", () => {
-    test.skip("TODO - https://github.com/AndcultureCode/AndcultureCode.JavaScript.React.Components/issues/9", () => {});
+    test("when default props, renders input", () => {
+        // Arrange
+        const dataTestId = "dataTestId";
+
+        // Act
+        const { getByTestId } = render(
+            <TextInput testId={dataTestId} onChange={() => {}} id={uuid()} />
+        );
+
+        // Assert
+        expect(getByTestId(dataTestId)).not.toBeNil();
+    });
+
+    test("when onChange set, calls handler upon change", () => {
+        // Arrange
+        let isChecked = false;
+        const dataTestId = "dataTestId";
+        const handleChange = () => (isChecked = true);
+
+        // Act
+        const { getByTestId } = render(
+            <TextInput
+                testId={dataTestId}
+                onChange={handleChange}
+                id={uuid()}
+            />
+        );
+
+        fireEvent.change(getByTestId(dataTestId), {
+            target: { value: faker.random.word() },
+        });
+
+        // Assert
+        expect(isChecked).toBeTrue();
+    });
+
+    test("when maxLength prop set, renders with given value", () => {
+        // Arrange
+        const dataTestId = "dataTestId";
+        const maximumLength = 999;
+
+        // Act
+        const { getByTestId } = render(
+            <TextInput
+                id={uuid()}
+                maxLength={maximumLength}
+                onChange={() => {}}
+                testId={dataTestId}
+            />
+        );
+
+        // Assert
+        expect(getByTestId(dataTestId).getAttribute("maxLength")).toBe(
+            maximumLength.toString()
+        );
+    });
 });

src/atoms/forms/text-input.tsx

@@ -40,7 +40,7 @@ const TextInput: React.FC<TextInputProps> = (props: TextInputProps) => {
     return (
         <input
             aria-labelledby={ariaLabelledBy}
-            data-test-id={testId}
+            data-testid={testId}
             disabled={disabled}
             id={id}
             placeholder={placeholder}