Added tests for checkbox input

Author: Said Shah

src/atoms/forms/checkbox-input.test.tsx

@@ -1,5 +1,63 @@
+import { CheckboxInput, CheckboxDisabledClass } from "./checkbox-input";
+import faker from "faker";
 import React from "react";
+import { render, fireEvent, wait } from "@testing-library/react";
 
 describe("CheckboxInput", () => {
-    test.skip("TODO - https://github.com/AndcultureCode/AndcultureCode.JavaScript.React.Components/issues/6", () => {});
+    test("when default props, renders checkbox", () => {
+        // Arrange
+        const expected = faker.random.words();
+
+        // Act
+        const { getByText } = render(
+            <CheckboxInput
+                onChange={() => {}}
+                label={expected}
+                checked={false}
+            />
+        );
+
+        // Assert
+        expect(getByText(expected)).not.toBeNil();
+    });
+
+    test(`when disabled prop set to true, renders with ${CheckboxDisabledClass} class`, () => {
+        // Arrange
+        const expected = faker.random.words();
+
+        // Act
+        const { container } = render(
+            <CheckboxInput
+                onChange={() => {}}
+                label={expected}
+                checked={false}
+                disabled={true}
+            />
+        );
+        const result = container.querySelector("." + CheckboxDisabledClass);
+
+        // Assert
+        expect(result).not.toBeNil();
+    });
+
+    test("when onChange set, calls handler upon change", async () => {
+        // Arrange
+        let isChecked = false;
+        const handleChange = () => (isChecked = true);
+        const label = faker.random.word();
+
+        // Act
+        const { getByLabelText } = render(
+            <CheckboxInput
+                onChange={handleChange}
+                label={label}
+                checked={isChecked}
+            />
+        );
+
+        fireEvent.click(getByLabelText(label));
+
+        // Assert
+        expect(isChecked).toBeTrue();
+    });
 });

src/atoms/forms/checkbox-input.tsx

@@ -6,6 +6,7 @@ import React from "react";
 // -----------------------------------------------------------------------------------------
 
 const ELEMENT_CLASS = "e-checkbox";
+export const CheckboxDisabledClass = "-disabled";
 
 // #endregion Constants
 
@@ -32,12 +33,10 @@ const CheckboxInput: React.FC<CheckboxInputProperties> = (
     const { checked, disabled, label, onChange } = props;
 
     let className = ELEMENT_CLASS;
-    if (disabled) {
-        className += " -disabled";
-    }
+    let isDisabled = disabled ? CheckboxDisabledClass : "";
 
     return (
-        <label className={className}>
+        <label className={`${className} ${isDisabled}`}>
             {label}
             <input
                 checked={checked}