From c01c764bc80cadbd0b4601df64e0341f7b4a2e95 Mon Sep 17 00:00:00 2001
From: Said Shah <sshah@andculture.com>
Date: Tue, 27 Oct 2020 12:55:08 -0400
Subject: [PATCH 1/3] Added tests for checkbox button

---
 src/atoms/forms/checkbox-button.test.tsx | 83 +++++++++++++++++++++++-
 src/atoms/forms/checkbox-button.tsx      |  8 ++-
 2 files changed, 89 insertions(+), 2 deletions(-)

diff --git a/src/atoms/forms/checkbox-button.test.tsx b/src/atoms/forms/checkbox-button.test.tsx
index b34b372..483489d 100644
--- a/src/atoms/forms/checkbox-button.test.tsx
+++ b/src/atoms/forms/checkbox-button.test.tsx
@@ -1,5 +1,86 @@
 import React from "react";
+import faker from "faker";
+import { CheckboxButton, CheckboxButtonCheckedClass } from "./checkbox-button";
+import { render, fireEvent, wait } from "@testing-library/react";
 
 describe("CheckboxButton", () => {
-    test.skip("TODO - https://github.com/AndcultureCode/AndcultureCode.JavaScript.React.Components/issues/5", () => {});
+    test("when default props, renders children", () => {
+        // Arrange
+        const expected = faker.random.words();
+
+        // Act
+        const { getByText } = render(
+            <CheckboxButton
+                label={expected}
+                checked={false}
+                onChange={() => {}}
+            />
+        );
+
+        // Assert
+        expect(getByText(expected)).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(
+            <CheckboxButton
+                onChange={handleChange}
+                label={label}
+                checked={isChecked}
+            />
+        );
+
+        fireEvent.click(getByLabelText(label));
+
+        // Assert
+        expect(isChecked).toBeTrue();
+    });
+
+    test(`when isChecked prop is true, renders with ${CheckboxButtonCheckedClass} class name`, () => {
+        // Arrange
+        const expected = faker.random.words();
+
+        // Act
+        const { container } = render(
+            <CheckboxButton
+                label={expected}
+                checked={true}
+                onChange={() => {}}
+            />
+        );
+        const result = container.querySelector(
+            "." + CheckboxButtonCheckedClass
+        );
+
+        // Assert
+        expect(result).not.toBeNil();
+    });
+
+    test("when cssClassName provided, assigned class property", () => {
+        // Arrange
+        const testClassName = faker.random.word().replace(/ /, "");
+        const expected = faker.random.words();
+
+        // Act
+        const { container } = render(
+            <CheckboxButton
+                label={expected}
+                checked={true}
+                onChange={() => {}}
+                cssClassName={testClassName}
+            />
+        );
+        const result = container.querySelector("." + testClassName);
+
+        // Assert
+        expect(result).not.toBeNil();
+    });
 });
diff --git a/src/atoms/forms/checkbox-button.tsx b/src/atoms/forms/checkbox-button.tsx
index 3061ec8..8a8003e 100644
--- a/src/atoms/forms/checkbox-button.tsx
+++ b/src/atoms/forms/checkbox-button.tsx
@@ -3,6 +3,12 @@ import React from "react";
 import { Icon } from "../icons/icon";
 import { Icons } from "../constants/icons";
 
+// -----------------------------------------------------------------------------------------
+// #region Constants
+// -----------------------------------------------------------------------------------------
+
+export const CheckboxButtonCheckedClass = "-checked";
+
 // -----------------------------------------------------------------------------------------
 // #region Interfaces
 // -----------------------------------------------------------------------------------------
@@ -41,7 +47,7 @@ const CheckboxButton: React.FC<CheckboxButtonProperties> = (
         props.onChange(e, props.identifier);
     };
 
-    const checkedClassName = checked ? " -checked" : "";
+    const checkedClassName = checked ? CheckboxButtonCheckedClass : "";
 
     return (
         <label

From 24399d01adf47d66d554c3e84e044a3c01fa6984 Mon Sep 17 00:00:00 2001
From: Said Shah <sshah@andculture.com>
Date: Tue, 27 Oct 2020 15:12:51 -0400
Subject: [PATCH 2/3] Updated text for css class name test

---
 src/atoms/forms/checkbox-button.test.tsx | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/src/atoms/forms/checkbox-button.test.tsx b/src/atoms/forms/checkbox-button.test.tsx
index 483489d..4cd8cb9 100644
--- a/src/atoms/forms/checkbox-button.test.tsx
+++ b/src/atoms/forms/checkbox-button.test.tsx
@@ -66,8 +66,8 @@ describe("CheckboxButton", () => {
 
     test("when cssClassName provided, assigned class property", () => {
         // Arrange
-        const testClassName = faker.random.word().replace(/ /, "");
         const expected = faker.random.words();
+        const testClassName = "testClassName";
 
         // Act
         const { container } = render(

From a0e2ecddae251401e8f37ea1b489f64fed283d5b Mon Sep 17 00:00:00 2001
From: Said Shah <sshah@andculture.com>
Date: Wed, 28 Oct 2020 09:44:52 -0400
Subject: [PATCH 3/3] Added missing endregion

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

diff --git a/src/atoms/forms/checkbox-button.tsx b/src/atoms/forms/checkbox-button.tsx
index 8a8003e..28ae2e6 100644
--- a/src/atoms/forms/checkbox-button.tsx
+++ b/src/atoms/forms/checkbox-button.tsx
@@ -9,6 +9,8 @@ import { Icons } from "../constants/icons";
 
 export const CheckboxButtonCheckedClass = "-checked";
 
+// #endregion Constants
+
 // -----------------------------------------------------------------------------------------
 // #region Interfaces
 // -----------------------------------------------------------------------------------------