From d7d6081a830c43ca700228b9a616fb403b841004 Mon Sep 17 00:00:00 2001
From: Said Shah <sshah@andculture.com>
Date: Tue, 27 Oct 2020 15:09:05 -0400
Subject: [PATCH 1/2] Added tests for checkbox input

---
 src/atoms/forms/checkbox-input.test.tsx | 60 ++++++++++++++++++++++++-
 src/atoms/forms/checkbox-input.tsx      |  7 ++-
 2 files changed, 62 insertions(+), 5 deletions(-)

diff --git a/src/atoms/forms/checkbox-input.test.tsx b/src/atoms/forms/checkbox-input.test.tsx
index 8323361..411cc86 100644
--- a/src/atoms/forms/checkbox-input.test.tsx
+++ b/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();
+    });
 });
diff --git a/src/atoms/forms/checkbox-input.tsx b/src/atoms/forms/checkbox-input.tsx
index 09d4b59..c96c7ac 100644
--- a/src/atoms/forms/checkbox-input.tsx
+++ b/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}

From 11b74d0b9913fa3c02a48c57f10f3aed461a7d98 Mon Sep 17 00:00:00 2001
From: Said Shah <sshah@andculture.com>
Date: Wed, 28 Oct 2020 09:42:35 -0400
Subject: [PATCH 2/2] Updated variable name

---
 src/atoms/forms/checkbox-input.tsx | 4 ++--
 1 file changed, 2 insertions(+), 2 deletions(-)

diff --git a/src/atoms/forms/checkbox-input.tsx b/src/atoms/forms/checkbox-input.tsx
index c96c7ac..bbc8cc1 100644
--- a/src/atoms/forms/checkbox-input.tsx
+++ b/src/atoms/forms/checkbox-input.tsx
@@ -33,10 +33,10 @@ const CheckboxInput: React.FC<CheckboxInputProperties> = (
     const { checked, disabled, label, onChange } = props;
 
     let className = ELEMENT_CLASS;
-    let isDisabled = disabled ? CheckboxDisabledClass : "";
+    let isDisabledClassName = disabled ? CheckboxDisabledClass : "";
 
     return (
-        <label className={`${className} ${isDisabled}`}>
+        <label className={`${className} ${isDisabledClassName}`}>
             {label}
             <input
                 checked={checked}