Updated tests according to PR comments

Author: Said Shah

src/atoms/buttons/button.tsx

@@ -3,6 +3,7 @@ import { ButtonStyles } from "../constants/button-styles";
 import { ButtonTypes } from "../constants/button-types";
 import React, { forwardRef } from "react";
 import { StringUtils } from "andculturecode-javascript-core";
+import { AccessibilityLabels } from "../constants/accessibility-labels";
 
 // -----------------------------------------------------------------------------------------
 // #region Interfaces
@@ -84,7 +85,9 @@ const Button: React.RefForwardingComponent<
             {children}
             {accessibleText != null && (
                 // if
-                <span className="sr-only">{accessibleText}</span>
+                <span className={AccessibilityLabels.ScreenReadersOnlyClass}>
+                    {accessibleText}
+                </span>
             )}
         </button>
     );

src/atoms/constants/accessibility-labels.ts

@@ -0,0 +1,3 @@
+export enum AccessibilityLabels {
+    ScreenReadersOnlyClass = "sr-only",
+}

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

@@ -1,11 +1,8 @@
 import React from "react";
 import { render, fireEvent } from "@testing-library/react";
-import {
-    InputFormField,
-    InvalidInputFormValueClass,
-    ShowLabelForScreenReadersOnlyClass,
-} from "./input-form-field";
+import { InputFormField, InputFormFieldInvalidClass } from "./input-form-field";
 import faker from "faker";
+import { AccessibilityLabels } from "../../atoms/constants/accessibility-labels";
 
 describe("InputFormField", () => {
     test("when default props, renders input with label", () => {
@@ -23,22 +20,21 @@ describe("InputFormField", () => {
 
     test("when errorsMessages prop set, renders with error messages", () => {
         // Arrange
+        const errorMessages = [faker.random.words(), faker.random.words()];
         const label = faker.random.words();
-        const firstErrorMessage = faker.random.words();
-        const secondErrorMessage = faker.random.words();
 
         // Act
         const { getByText } = render(
             <InputFormField
-                errorMessages={[firstErrorMessage, secondErrorMessage]}
+                errorMessages={errorMessages}
                 label={label}
                 onChange={() => {}}
             />
         );
 
         // Assert
-        expect(getByText(firstErrorMessage)).not.toBeNil();
-        expect(getByText(secondErrorMessage)).not.toBeNil();
+        expect(getByText(errorMessages[0])).not.toBeNil();
+        expect(getByText(errorMessages[1])).not.toBeNil();
     });
 
     test("when errorsMessage prop set, renders with error message", () => {
@@ -59,7 +55,7 @@ describe("InputFormField", () => {
         expect(getByText(testErrorMessage)).not.toBeNil();
     });
 
-    test(`when isValid prop set to false, renders with ${InvalidInputFormValueClass} class name`, () => {
+    test(`when isValid prop set to false, renders with ${InputFormFieldInvalidClass} class name`, () => {
         // Arrange
         const label = faker.random.words();
 
@@ -68,14 +64,14 @@ describe("InputFormField", () => {
             <InputFormField isValid={false} label={label} onChange={() => {}} />
         );
         const result = container.getElementsByClassName(
-            InvalidInputFormValueClass
+            InputFormFieldInvalidClass
         );
 
         // Assert
         expect(result).toHaveLength(1);
     });
 
-    test(`when isValid prop set to true, renders without ${InvalidInputFormValueClass} class name`, () => {
+    test(`when isValid prop set to true, renders without ${InputFormFieldInvalidClass} class name`, () => {
         // Arrange
         const label = faker.random.words();
 
@@ -84,7 +80,7 @@ describe("InputFormField", () => {
             <InputFormField isValid={true} label={label} onChange={() => {}} />
         );
         const result = container.getElementsByClassName(
-            InvalidInputFormValueClass
+            InputFormFieldInvalidClass
         );
 
         // Assert
@@ -106,7 +102,7 @@ describe("InputFormField", () => {
         expect(htmlLabelTag[0].textContent).toContain(requiredText);
     });
 
-    test(`when showLabelForScreenReadersOnly prop set, renders with ${ShowLabelForScreenReadersOnlyClass} class name`, () => {
+    test(`when showLabelForScreenReadersOnly prop set, renders with ${AccessibilityLabels.ScreenReadersOnlyClass} class name`, () => {
         // Arrange
         const label = faker.random.words();
 
@@ -122,7 +118,7 @@ describe("InputFormField", () => {
 
         // Assert
         expect(htmlLabelTag[0].classList).toContain(
-            ShowLabelForScreenReadersOnlyClass
+            AccessibilityLabels.ScreenReadersOnlyClass
         );
     });
 

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

@@ -1,5 +1,6 @@
 import React, { forwardRef, Ref, RefObject } from "react";
 import uuid from "uuid";
+import { AccessibilityLabels } from "../../atoms/constants/accessibility-labels";
 import { CollectionUtils, StringUtils } from "andculturecode-javascript-core";
 import { InputCharacterCount } from "../../atoms/forms/input-character-count";
 import { InputTypes } from "../../atoms/constants/input-types";
@@ -10,8 +11,7 @@ import { InputProperties } from "../../atoms/interfaces/input-properties";
 // -----------------------------------------------------------------------------------------
 
 const COMPONENT_CLASS = "c-form-field";
-export const InvalidInputFormValueClass = "-invalid";
-export const ShowLabelForScreenReadersOnlyClass = "sr-only";
+export const InputFormFieldInvalidClass = "-invalid";
 
 // #endregion Constants
 
@@ -66,14 +66,15 @@ const InputFormField: React.RefForwardingComponent<
         value,
     } = props;
 
-    const cssIsValid = isValid ? "" : InvalidInputFormValueClass;
+    const cssIsValid = isValid ? "" : InputFormFieldInvalidClass;
     const fieldId = props.fieldId ?? uuid.v4();
 
     return (
         <div className={`${COMPONENT_CLASS} ${cssIsValid}`}>
             <label htmlFor={fieldId}>
                 {showLabelForScreenReadersOnly ? (
-                    <span className={ShowLabelForScreenReadersOnlyClass}>
+                    <span
+                        className={AccessibilityLabels.ScreenReadersOnlyClass}>
                         {label}
                     </span>
                 ) : (