Issue #25 Backfill tests for Molecules/PasswordInputField

Add tests for molecules password form field

Author: brandongregoryscott

src/molecules/form-fields/password-form-field.test.tsx

@@ -1,7 +1,11 @@
 import React from "react";
-import { render } from "@testing-library/react";
-import { PasswordFormField } from "./password-form-field";
+import { render, fireEvent } from "@testing-library/react";
+import {
+    PasswordFormField,
+    PasswordFormFieldInvalidClassName,
+} from "./password-form-field";
 import faker from "faker";
+import { InputTypes } from "../../atoms/constants/input-types";
 
 describe("PasswordFormField", () => {
     test("when default props, renders input with label", () => {
@@ -16,4 +20,117 @@ describe("PasswordFormField", () => {
         // Assert
         expect(getByLabelText(expected)).not.toBeNull();
     });
+
+    test("when onChange prop set, calls handler upon change", () => {
+        // Arrange
+        let isChecked = false;
+        const handleChange = () => (isChecked = true);
+        const testLabel = "testLabel";
+
+        // Act
+        const { getByLabelText } = render(
+            <PasswordFormField onChange={handleChange} label={testLabel} />
+        );
+        fireEvent.change(getByLabelText(testLabel), {
+            target: { value: faker.random.word() },
+        });
+
+        // Assert
+        expect(isChecked).toBeTrue();
+    });
+
+    test("when has errorMessage prop, renders with error message", () => {
+        // Arrange
+        const testErrorMessage = faker.random.words();
+        const testLabel = faker.random.words();
+
+        // Act
+        const { getByText } = render(
+            <PasswordFormField
+                errorMessage={testErrorMessage}
+                label={testLabel}
+                onChange={() => {}}
+            />
+        );
+
+        // Assert
+        expect(getByText(testErrorMessage)).not.toBeNil();
+    });
+
+    test("when required prop set, renders with required text", () => {
+        // Arrange
+        const requiredText = "*";
+        const testLabel = faker.random.words();
+
+        // Act
+        const { container } = render(
+            <PasswordFormField
+                label={testLabel}
+                onChange={() => {}}
+                required={true}
+            />
+        );
+        const htmlLabelTag = container.getElementsByTagName("label");
+
+        // Assert
+        expect(htmlLabelTag[0].textContent).toContain(requiredText);
+    });
+
+    test("when show button clicked, renders hide button", () => {
+        // Arrange
+        const testLabel = faker.random.words();
+
+        // Act
+        const { getByText } = render(
+            <PasswordFormField
+                label={testLabel}
+                onChange={() => {}}
+                value={faker.random.word()}
+            />
+        );
+        const button = getByText("Show");
+        fireEvent.click(button);
+
+        // Assert
+        expect(button.textContent).toContain("Hide");
+    });
+
+    test("when disabled prop set, renders with type password", () => {
+        // Arrange
+        const testLabel = faker.random.words();
+
+        // Act
+        const { container, getByText } = render(
+            <PasswordFormField
+                disabled={true}
+                label={testLabel}
+                onChange={() => {}}
+                value={faker.random.word()}
+            />
+        );
+        const htmlInputElement = container.getElementsByTagName("input");
+
+        // Assert
+        expect(htmlInputElement[0].type).toBe(InputTypes.Password);
+    });
+
+    test(`when isValid prop is false, renders with ${PasswordFormFieldInvalidClassName} class name`, () => {
+        // Arrange
+        const testLabel = faker.random.words();
+
+        // Act
+        const { container } = render(
+            <PasswordFormField
+                isValid={false}
+                label={testLabel}
+                onChange={() => {}}
+            />
+        );
+        const result = container.getElementsByClassName(
+            PasswordFormFieldInvalidClassName
+        );
+
+        // Assert
+        expect(result).toHaveLength(1);
+    });
 });

src/molecules/form-fields/password-form-field.tsx

@@ -9,6 +9,7 @@ import { StringUtils } from "andculturecode-javascript-core";
 // -----------------------------------------------------------------------------------------
 
 const COMPONENT_CLASS = "c-form-field";
+export const PasswordFormFieldInvalidClassName = "-invalid";
 
 // #endregion Constants
 
@@ -50,7 +51,7 @@ const PasswordFormField: React.FC<PasswordFormFields> = (
     } = props;
 
     const [isVisible, setIsVisible] = useState<boolean>(false);
-    const cssIsValid = isValid ? "" : "-invalid";
+    const cssIsValid = isValid ? "" : PasswordFormFieldInvalidClassName;
     const disableShowHide = StringUtils.isEmpty(value) || disabled;
     const fieldId = uuid.v4();
     const passwordShowHideLabel = isVisible ? "Hide" : "Show";