unit testing checkboxes

theopensystemslab · Apr 1, 2020 · c3eb901 · c3eb901
1 parent 864f52a
commit c3eb901
Show file tree

Hide file tree

Showing 5 changed files with 225 additions and 19 deletions.
diff --git a/src/components/Checkboxes.tsx b/src/components/Checkboxes.tsx
@@ -39,7 +39,7 @@ const Checkboxes: React.FC<ICheckboxes> = ({
   const formik = useFormik({
     initialValues: {
       [name]: "",
-      selectedOptions: ["redwood"]
+      selectedOptions: []
     },
     onSubmit: values => {
       if (required && values.selectedOptions.length === 0) {

diff --git a/src/components/__tests__/Breadcrumbs.tsx b/src/components/__tests__/Breadcrumbs.tsx
@@ -5,22 +5,22 @@ import Breadcrumbs from "../Breadcrumbs";
 
 afterEach(cleanup);
 
-it("renders items correctly", async () => {
-  const list = [
-    "Property location",
-    "About the works",
-    "Application",
-    "Declaration",
-    "Pay fee"
-  ];
-  const active = 2;
-  const { getByText } = await render(
-    <Breadcrumbs active={active} list={list} />
-  );
-  expect(getByText("Property location")).toBeInTheDocument();
-});
+describe("Breadcrumbs Component", () => {
+  it("should render items correctly", () => {
+    const list = [
+      "Property location",
+      "About the works",
+      "Application",
+      "Declaration",
+      "Pay fee"
+    ];
+    const active = 2;
+    const { getByText } = render(<Breadcrumbs active={active} list={list} />);
+    expect(getByText(/Property location/i)).toBeInTheDocument();
+  });
 
-it("renders snapshot", () => {
-  const { asFragment } = render(<Breadcrumbs />);
-  expect(asFragment()).toMatchSnapshot();
+  it("render snapshot", () => {
+    const { asFragment } = render(<Breadcrumbs />);
+    expect(asFragment()).toMatchSnapshot();
+  });
 });
diff --git a/src/components/__tests__/Checkboxes.tsx b/src/components/__tests__/Checkboxes.tsx
@@ -0,0 +1,38 @@
+import { cleanup, fireEvent, render, wait } from "@testing-library/react";
+import * as React from "react";
+
+import Checkboxes from "../Checkboxes";
+
+afterEach(cleanup);
+
+/* TO DO 
+  1 - Add test for the success scenario when form submits and there is a success message
+  2- Add test for the fail scenario when the form doesn't submit and thee is an error message
+*/
+
+describe("Checkboxes Component", () => {
+  it("should render items correctly", async () => {
+    const title = "test title";
+    const name = "test name";
+    const options = {};
+    const { findByText } = render(
+      <Checkboxes title={title} options={options} name={name} />
+    );
+    expect(await findByText(/test title/i)).toBeInTheDocument();
+  });
+
+  it("should render snapshot", () => {
+    const title = "test title";
+    const name = "test name";
+    const options = {
+      oak: "option 1",
+      plane: "option 2",
+      redwood: "option 3",
+      other: "option 4"
+    };
+    const { asFragment } = render(
+      <Checkboxes title={title} options={options} name={name} />
+    );
+    expect(asFragment()).toMatchSnapshot();
+  });
+});
diff --git a/src/components/__tests__/__snapshots__/Breadcrumbs.tsx.snap b/src/components/__tests__/__snapshots__/Breadcrumbs.tsx.snap
@@ -1,6 +1,6 @@
 // Jest Snapshot v1, https://goo.gl/fbAQLP
 
-exports[`renders snapshot 1`] = `
+exports[`Breadcrumbs Component render snapshot 1`] = `
 <DocumentFragment>
   <div
     class="MuiBox-root MuiBox-root-76"

diff --git a/src/components/__tests__/__snapshots__/Checkboxes.tsx.snap b/src/components/__tests__/__snapshots__/Checkboxes.tsx.snap
@@ -0,0 +1,168 @@
+// Jest Snapshot v1, https://goo.gl/fbAQLP
+
+exports[`Checkboxes Component should render snapshot 1`] = `
+<DocumentFragment>
+  <div
+    class="MuiBox-root MuiBox-root-96"
+  >
+    <form>
+      <h5
+        class="MuiTypography-root MuiTypography-h5 MuiTypography-gutterBottom"
+      >
+        test title
+      </h5>
+      <fieldset
+        class="MuiFormControl-root"
+      >
+        <legend
+          class="MuiFormLabel-root makeStyles-formControlLabelRoot-93"
+        >
+          <div
+            class="MuiBox-root MuiBox-root-139"
+          >
+            Select all that apply
+          </div>
+        </legend>
+        <div
+          class="MuiBox-root MuiBox-root-140"
+        >
+          <div
+            class="MuiFormGroup-root"
+          >
+            <label
+              class="MuiFormControlLabel-root makeStyles-formControlLabelRoot-93"
+            >
+              <span
+                aria-disabled="false"
+                class="MuiButtonBase-root MuiIconButton-root PrivateSwitchBase-root-158 MuiCheckbox-root makeStyles-checkBoxRoot-149 MuiCheckbox-colorSecondary MuiIconButton-colorSecondary"
+              >
+                <span
+                  class="MuiIconButton-label"
+                >
+                  <input
+                    class="PrivateSwitchBase-input-161"
+                    data-indeterminate="false"
+                    name="oak"
+                    type="checkbox"
+                    value="oak"
+                  />
+                  <span
+                    class="makeStyles-icon-150"
+                    font-size="default"
+                  />
+                </span>
+              </span>
+              <span
+                class="MuiTypography-root MuiFormControlLabel-label makeStyles-formControlLabel-94 MuiTypography-body1"
+              >
+                option 1
+              </span>
+            </label>
+            <label
+              class="MuiFormControlLabel-root makeStyles-formControlLabelRoot-93"
+            >
+              <span
+                aria-disabled="false"
+                class="MuiButtonBase-root MuiIconButton-root PrivateSwitchBase-root-158 MuiCheckbox-root makeStyles-checkBoxRoot-149 MuiCheckbox-colorSecondary MuiIconButton-colorSecondary"
+              >
+                <span
+                  class="MuiIconButton-label"
+                >
+                  <input
+                    class="PrivateSwitchBase-input-161"
+                    data-indeterminate="false"
+                    name="plane"
+                    type="checkbox"
+                    value="plane"
+                  />
+                  <span
+                    class="makeStyles-icon-150"
+                    font-size="default"
+                  />
+                </span>
+              </span>
+              <span
+                class="MuiTypography-root MuiFormControlLabel-label makeStyles-formControlLabel-94 MuiTypography-body1"
+              >
+                option 2
+              </span>
+            </label>
+            <label
+              class="MuiFormControlLabel-root makeStyles-formControlLabelRoot-93"
+            >
+              <span
+                aria-disabled="false"
+                class="MuiButtonBase-root MuiIconButton-root PrivateSwitchBase-root-158 MuiCheckbox-root makeStyles-checkBoxRoot-149 MuiCheckbox-colorSecondary MuiIconButton-colorSecondary"
+              >
+                <span
+                  class="MuiIconButton-label"
+                >
+                  <input
+                    class="PrivateSwitchBase-input-161"
+                    data-indeterminate="false"
+                    name="redwood"
+                    type="checkbox"
+                    value="redwood"
+                  />
+                  <span
+                    class="makeStyles-icon-150"
+                    font-size="default"
+                  />
+                </span>
+              </span>
+              <span
+                class="MuiTypography-root MuiFormControlLabel-label makeStyles-formControlLabel-94 MuiTypography-body1"
+              >
+                option 3
+              </span>
+            </label>
+            <label
+              class="MuiFormControlLabel-root makeStyles-formControlLabelRoot-93"
+            >
+              <span
+                aria-disabled="false"
+                class="MuiButtonBase-root MuiIconButton-root PrivateSwitchBase-root-158 MuiCheckbox-root makeStyles-checkBoxRoot-149 MuiCheckbox-colorSecondary MuiIconButton-colorSecondary"
+              >
+                <span
+                  class="MuiIconButton-label"
+                >
+                  <input
+                    class="PrivateSwitchBase-input-161"
+                    data-indeterminate="false"
+                    name="other"
+                    type="checkbox"
+                    value="other"
+                  />
+                  <span
+                    class="makeStyles-icon-150"
+                    font-size="default"
+                  />
+                </span>
+              </span>
+              <span
+                class="MuiTypography-root MuiFormControlLabel-label makeStyles-formControlLabel-94 MuiTypography-body1"
+              >
+                option 4
+              </span>
+            </label>
+          </div>
+        </div>
+        <button
+          class="MuiButtonBase-root MuiButton-root MuiButton-contained MuiButton-containedPrimary"
+          tabindex="0"
+          type="submit"
+        >
+          <span
+            class="MuiButton-label"
+          >
+            Save and Continue
+          </span>
+          <span
+            class="MuiTouchRipple-root"
+          />
+        </button>
+      </fieldset>
+    </form>
+  </div>
+</DocumentFragment>
+`;