Added tests for input form field

Author: Said Shah

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

@@ -1,6 +1,10 @@
 import React from "react";
 import { render } from "@testing-library/react";
-import { InputFormField } from "./input-form-field";
+import {
+    InputFormField,
+    InvalidInputFormValueClass,
+    ShowLabelForScreenReadersOnlyClass,
+} from "./input-form-field";
 import faker from "faker";
 
 describe("InputFormField", () => {
@@ -16,4 +20,121 @@ describe("InputFormField", () => {
         // Assert
         expect(getByLabelText(expected)).not.toBeNull();
     });
+
+    test("when errorsMessages prop set, renders with error messages", () => {
+        // Arrange
+        const expected = faker.random.words();
+        const firstErrorMessage = faker.random.words();
+        const secondErrorMessage = faker.random.words();
+
+        // Act
+        const { getByText } = render(
+            <InputFormField
+                label={expected}
+                onChange={() => {}}
+                errorMessages={[firstErrorMessage, secondErrorMessage]}
+            />
+        );
+
+        // Assert
+        expect(getByText(firstErrorMessage)).not.toBeNil();
+        expect(getByText(secondErrorMessage)).not.toBeNil();
+    });
+
+    test("when errorsMessage prop set, renders with error message", () => {
+        // Arrange
+        const expected = faker.random.words();
+        const testErrorMessage = faker.random.words();
+
+        // Act
+        const { getByText } = render(
+            <InputFormField
+                label={expected}
+                onChange={() => {}}
+                errorMessage={testErrorMessage}
+            />
+        );
+
+        // Assert
+        expect(getByText(testErrorMessage)).not.toBeNil();
+    });
+
+    test(`when isValid prop set to false, renders with ${InvalidInputFormValueClass} class name`, () => {
+        // Arrange
+        const expected = faker.random.words();
+
+        // Act
+        const { container } = render(
+            <InputFormField
+                label={expected}
+                onChange={() => {}}
+                isValid={false}
+            />
+        );
+        const result = container.getElementsByClassName(
+            InvalidInputFormValueClass
+        );
+
+        // Assert
+        expect(result).toHaveLength(1);
+    });
+
+    test(`when isValid prop set to true, renders without ${InvalidInputFormValueClass} class name`, () => {
+        // Arrange
+        const expected = faker.random.words();
+
+        // Act
+        const { container } = render(
+            <InputFormField
+                label={expected}
+                onChange={() => {}}
+                isValid={true}
+            />
+        );
+        const result = container.getElementsByClassName(
+            InvalidInputFormValueClass
+        );
+
+        // Assert
+        expect(result).toHaveLength(0);
+    });
+
+    test("when required prop set, renders with required text", () => {
+        // Arrange
+        const expected = faker.random.words();
+        const requiredText = "*";
+
+        // Act
+        const { container } = render(
+            <InputFormField
+                label={expected}
+                onChange={() => {}}
+                required={true}
+            />
+        );
+        const htmlLabelTag = container.getElementsByTagName("label");
+
+        // Assert
+        expect(htmlLabelTag[0].textContent).toContain(requiredText);
+    });
+
+    test(`when showLabelForScreenReadersOnly prop set, renders with ${ShowLabelForScreenReadersOnlyClass} class name`, () => {
+        // Arrange
+        const expected = faker.random.words();
+
+        // Act
+        const { container } = render(
+            <InputFormField
+                label={expected}
+                onChange={() => {}}
+                showLabelForScreenReadersOnly={true}
+            />
+        );
+        const htmlLabelTag = container.getElementsByTagName("span");
+
+        // Assert
+        expect(htmlLabelTag[0].classList).toContain(
+            ShowLabelForScreenReadersOnlyClass
+        );
+    });
 });

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

@@ -10,6 +10,8 @@ import { InputProperties } from "../../atoms/interfaces/input-properties";
 // -----------------------------------------------------------------------------------------
 
 const COMPONENT_CLASS = "c-form-field";
+export const InvalidInputFormValueClass = "-invalid";
+export const ShowLabelForScreenReadersOnlyClass = "sr-only";
 
 // #endregion Constants
 
@@ -64,14 +66,16 @@ const InputFormField: React.RefForwardingComponent<
         value,
     } = props;
 
-    const cssIsValid = isValid ? "" : "-invalid";
+    const cssIsValid = isValid ? "" : InvalidInputFormValueClass;
     const fieldId = props.fieldId ?? uuid.v4();
 
     return (
         <div className={`${COMPONENT_CLASS} ${cssIsValid}`}>
             <label htmlFor={fieldId}>
                 {showLabelForScreenReadersOnly ? (
-                    <span className="sr-only">{label}</span>
+                    <span className={ShowLabelForScreenReadersOnlyClass}>
+                        {label}
+                    </span>
                 ) : (
                     <React.Fragment>{label}</React.Fragment>
                 )}
@@ -82,7 +86,7 @@ const InputFormField: React.RefForwardingComponent<
                 )}
             </label>
             <input
-                data-test-id={inputTestId}
+                data-testid={inputTestId}
                 disabled={disabled}
                 id={fieldId}
                 placeholder={placeholder}