diff --git a/src/atoms/forms/input-character-count.test.tsx b/src/atoms/forms/input-character-count.test.tsx index f7683b1..e68b4e8 100644 --- a/src/atoms/forms/input-character-count.test.tsx +++ b/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( + + ); + + // 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( + + ); + + // Assert + expect(getByTestId(dataTestId).textContent).toContain(maxCharCount); + expect(getByTestId(dataTestId).textContent).toContain(charCount); + }); }); diff --git a/src/atoms/forms/input-character-count.tsx b/src/atoms/forms/input-character-count.tsx index 975c580..bbfdbf3 100644 --- a/src/atoms/forms/input-character-count.tsx +++ b/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 for functional/e2e testing + */ + testId?: string; } // #endregion Interfaces @@ -19,7 +24,9 @@ const InputCharacterCount: React.FC = ( props: InputCharacterCountProps ) => { return ( -
+
{props.currentLength}/{props.maxLength}
);