Merge branch 'main' of github.com:AndcultureCode/AndcultureCode.JavaScript.React.Components into main

Author: Said Shah

src/atoms/forms/input-character-count.test.tsx

@@ -1,5 +1,45 @@
 import React from "react";
+import faker from "faker";
+import { InputCharacterCount } from "./input-character-count";
+import { render } from "@testing-library/react";
 
 describe("InputCharacterCount", () => {
-    test.skip("TODO - https://github.com/AndcultureCode/AndcultureCode.JavaScript.React.Components/issues/12", () => {});
+    test("when default props, renders character count", () => {
+        // Arrange
+        const maxCharCount = faker.random.number(100);
+        const charCount = faker.random.number(maxCharCount);
+        const dataTestId = "dataTestId";
+
+        // Act
+        const { getByTestId } = render(
+            <InputCharacterCount
+                currentLength={charCount}
+                maxLength={maxCharCount}
+                testId={dataTestId}
+            />
+        );
+
+        // Assert
+        expect(getByTestId(dataTestId)).not.toBeNil();
+    });
+
+    test("when maxLength and currentLength props set, renders with values", () => {
+        // Arrange
+        const maxCharCount = faker.random.number(100);
+        const charCount = faker.random.number(maxCharCount);
+        const dataTestId = "dataTestId";
+
+        // Act
+        const { getByTestId } = render(
+            <InputCharacterCount
+                currentLength={charCount}
+                maxLength={maxCharCount}
+                testId={dataTestId}
+            />
+        );
+
+        // Assert
+        expect(getByTestId(dataTestId).textContent).toContain(maxCharCount);
+        expect(getByTestId(dataTestId).textContent).toContain(charCount);
+    });
 });

src/atoms/forms/input-character-count.tsx

@@ -7,6 +7,11 @@ import React from "react";
 export interface InputCharacterCountProps {
     currentLength: number;
     maxLength: number;
+
+    /**
+     * Unique identifier used select the underlying <input> for functional/e2e testing
+     */
+    testId?: string;
 }
 
 // #endregion Interfaces
@@ -19,7 +24,9 @@ const InputCharacterCount: React.FC<InputCharacterCountProps> = (
     props: InputCharacterCountProps
 ) => {
     return (
-        <div className="c-form-field__bottom__character-count">
+        <div
+            className="c-form-field__bottom__character-count"
+            data-testid={props.testId}>
             {props.currentLength}/{props.maxLength}
         </div>
     );