Added tests for progress bar

Author: Said Shah

src/atoms/progress-bar/progress-bar.test.tsx

@@ -1,5 +1,104 @@
 import React from "react";
+import faker from "faker";
+import {
+    ProgressBar,
+    ProgressBarStyles,
+    ProgressBarErrorClass,
+} from "./progress-bar";
+import { render, getByTestId } from "@testing-library/react";
 
 describe("ProgressBar", () => {
-    test.skip("TODO - https://github.com/AndcultureCode/AndcultureCode.JavaScript.React.Components/issues/13", () => {});
+    test("when default props, renders progress bar", () => {
+        // Arrange
+        const expected = "dataTestId";
+
+        // Act
+        const { getByTestId } = render(
+            <ProgressBar value={faker.random.number(100)} testId={expected} />
+        );
+
+        // Assert
+        expect(getByTestId(expected)).not.toBeNil();
+    });
+
+    test("when cssClassName set, renders with class name", () => {
+        // Arrange
+        const testCssClassName = "testCssClassName";
+
+        // Act
+        const { container } = render(
+            <ProgressBar
+                value={faker.random.number(100)}
+                cssClassName={testCssClassName}
+            />
+        );
+        const result = container.getElementsByClassName(testCssClassName);
+
+        // Assert
+        expect(result).toHaveLength(1);
+    });
+
+    test.each`
+        style
+        ${ProgressBarStyles.Thick}
+        ${ProgressBarStyles.Thin}
+    `("when style prop set, renders with $style", ({ style }) => {
+        // Arrange
+        const expected = faker.random.number(100);
+
+        // Act
+        const { container } = render(
+            <ProgressBar value={expected} style={style} />
+        );
+        const result = container.getElementsByClassName(style);
+
+        // Assert
+        expect(result).toHaveLength(1);
+    });
+
+    test(`when isErrored prop set, renders with ${ProgressBarErrorClass} class name`, () => {
+        // Arrange
+        const expected = faker.random.number(100);
+
+        // Act
+        const { container } = render(
+            <ProgressBar value={expected} isErrored={true} />
+        );
+        const result = container.getElementsByClassName(ProgressBarErrorClass);
+
+        // Assert
+        expect(result).toHaveLength(1);
+    });
+
+    test(`when value prop set > 100, renders with value 100`, () => {
+        // Arrange
+        const incorrectValue = 110;
+        const maximumValue = 100;
+        const dataTestId = "dataTestId";
+
+        // Act
+        const { getByTestId } = render(
+            <ProgressBar value={incorrectValue} testId={dataTestId} />
+        );
+
+        // Assert
+        expect(getByTestId(dataTestId).innerHTML).toContain(maximumValue);
+        expect(getByTestId(dataTestId).innerHTML).not.toContain(incorrectValue);
+    });
+
+    test(`when value prop set < 0, renders with value 0`, () => {
+        // Arrange
+        const incorrectValue = -10;
+        const minimumValue = 0;
+        const dataTestId = "dataTestId";
+
+        // Act
+        const { getByTestId } = render(
+            <ProgressBar value={incorrectValue} testId={dataTestId} />
+        );
+
+        // Assert
+        expect(getByTestId(dataTestId).innerHTML).toContain(minimumValue);
+        expect(getByTestId(dataTestId).innerHTML).not.toContain(incorrectValue);
+    });
 });

src/atoms/progress-bar/progress-bar.tsx

@@ -1,6 +1,14 @@
 import React from "react";
 import { StringUtils } from "andculturecode-javascript-core";
 
+// -------------------------------------------------------------------------------------------------
+// #region Constants
+// -------------------------------------------------------------------------------------------------
+
+export const ProgressBarErrorClass = "-error";
+
+// #endregion Constants
+
 // -------------------------------------------------------------------------------------------------
 // #region Enums
 // -------------------------------------------------------------------------------------------------
@@ -21,6 +29,11 @@ interface ProgressBarProps {
     isErrored?: boolean;
     style?: ProgressBarStyles;
     value: number;
+
+    /**
+     * Unique identifier used to select the underlying <div> for functional/e2e testing
+     */
+    testId?: string;
 }
 
 // #endregion Interfaces
@@ -42,7 +55,7 @@ const ProgressBar: React.FC<ProgressBarProps> = (props: ProgressBarProps) => {
     }
 
     if (props.isErrored) {
-        classNames.push("-error");
+        classNames.push(ProgressBarErrorClass);
     }
 
     // value must be an integer 0 < value < 100
@@ -57,7 +70,7 @@ const ProgressBar: React.FC<ProgressBarProps> = (props: ProgressBarProps) => {
     }
 
     return (
-        <div className={classNames.join(" ")}>
+        <div className={classNames.join(" ")} data-testid={props.testId}>
             <div className={`${CSS_CLASS_NAME}__bar -w-${value}`} />
         </div>
     );