From cc2a4220a964fe128c020bdea058316081092a87 Mon Sep 17 00:00:00 2001
From: Mikkel Laursen <mlaursen03@gmail.com>
Date: Fri, 2 Jul 2021 23:06:16 -0600
Subject: [PATCH] test(form): Added tests for useIndeterminateChecked

---
 .../src/__tests__/useIndeterminateChecked.tsx | 288 ++++++++++++++++++
 packages/form/src/useIndeterminateChecked.ts  | 128 +++++---
 2 files changed, 376 insertions(+), 40 deletions(-)
 create mode 100644 packages/form/src/__tests__/useIndeterminateChecked.tsx

diff --git a/packages/form/src/__tests__/useIndeterminateChecked.tsx b/packages/form/src/__tests__/useIndeterminateChecked.tsx
new file mode 100644
index 0000000000..da9e8bd610
--- /dev/null
+++ b/packages/form/src/__tests__/useIndeterminateChecked.tsx
@@ -0,0 +1,288 @@
+import React from "react";
+import { fireEvent, render } from "@testing-library/react";
+
+import { useIndeterminateChecked } from "../useIndeterminateChecked";
+import { Checkbox } from "../toggle";
+import { MenuItemCheckbox } from "../menu/MenuItemCheckbox";
+
+const values = ["a", "b", "c", "d"] as const;
+const LABELS = {
+  a: "Label 1",
+  b: "Label 2",
+  c: "Label 3",
+  d: "Label 4",
+} as const;
+
+describe("useIndeterminateChecked", () => {
+  it("should work with normal checkboxes", () => {
+    function Test() {
+      const { rootProps, getProps } = useIndeterminateChecked(values);
+      return (
+        <>
+          <Checkbox id="checkbox-1" label="Toggle All" {...rootProps} />
+          {values.map((value, i) => (
+            <Checkbox
+              id={`valued-checkbox-${i + 1}`}
+              {...getProps(value)}
+              key={value}
+              label={LABELS[value]}
+            />
+          ))}
+        </>
+      );
+    }
+    const { getByRole } = render(<Test />);
+
+    const root = getByRole("checkbox", {
+      name: "Toggle All",
+    }) as HTMLInputElement;
+    const checkbox1 = getByRole("checkbox", {
+      name: "Label 1",
+    }) as HTMLInputElement;
+    const checkbox2 = getByRole("checkbox", {
+      name: "Label 2",
+    }) as HTMLInputElement;
+    const checkbox3 = getByRole("checkbox", {
+      name: "Label 3",
+    }) as HTMLInputElement;
+    const checkbox4 = getByRole("checkbox", {
+      name: "Label 4",
+    }) as HTMLInputElement;
+
+    expect(root.checked).toBe(false);
+    expect(checkbox1.checked).toBe(false);
+    expect(checkbox2.checked).toBe(false);
+    expect(checkbox3.checked).toBe(false);
+    expect(checkbox4.checked).toBe(false);
+
+    fireEvent.click(root);
+    expect(root.checked).toBe(true);
+    expect(checkbox1.checked).toBe(true);
+    expect(checkbox2.checked).toBe(true);
+    expect(checkbox3.checked).toBe(true);
+    expect(checkbox4.checked).toBe(true);
+
+    fireEvent.click(checkbox1);
+    expect(root.checked).toBe(true);
+    expect(checkbox1.checked).toBe(false);
+    expect(checkbox2.checked).toBe(true);
+    expect(checkbox3.checked).toBe(true);
+    expect(checkbox4.checked).toBe(true);
+
+    fireEvent.click(root);
+    expect(root.checked).toBe(true);
+    expect(checkbox1.checked).toBe(true);
+    expect(checkbox2.checked).toBe(true);
+    expect(checkbox3.checked).toBe(true);
+    expect(checkbox4.checked).toBe(true);
+
+    fireEvent.click(root);
+    expect(root.checked).toBe(false);
+    expect(checkbox1.checked).toBe(false);
+    expect(checkbox2.checked).toBe(false);
+    expect(checkbox3.checked).toBe(false);
+    expect(checkbox4.checked).toBe(false);
+
+    fireEvent.click(checkbox2);
+    expect(root.checked).toBe(true);
+    expect(checkbox1.checked).toBe(false);
+    expect(checkbox2.checked).toBe(true);
+    expect(checkbox3.checked).toBe(false);
+    expect(checkbox4.checked).toBe(false);
+  });
+
+  it("should work for MenuItemCheckbox", () => {
+    function Test() {
+      const { rootProps, getProps } = useIndeterminateChecked(values, {
+        menu: true,
+      });
+      return (
+        <>
+          <MenuItemCheckbox id="checkbox-1" {...rootProps}>
+            Toggle All
+          </MenuItemCheckbox>
+          {values.map((value, i) => (
+            <MenuItemCheckbox
+              id={`valued-checkbox-${i + 1}`}
+              {...getProps(value)}
+              key={value}
+            >
+              {LABELS[value]}
+            </MenuItemCheckbox>
+          ))}
+        </>
+      );
+    }
+
+    const { getByRole } = render(<Test />);
+
+    const root = getByRole("menuitemcheckbox", {
+      name: "Toggle All",
+    }) as HTMLInputElement;
+    const checkbox1 = getByRole("menuitemcheckbox", {
+      name: "Label 1",
+    }) as HTMLInputElement;
+    const checkbox2 = getByRole("menuitemcheckbox", {
+      name: "Label 2",
+    }) as HTMLInputElement;
+    const checkbox3 = getByRole("menuitemcheckbox", {
+      name: "Label 3",
+    }) as HTMLInputElement;
+    const checkbox4 = getByRole("menuitemcheckbox", {
+      name: "Label 4",
+    }) as HTMLInputElement;
+
+    expect(root).toHaveAttribute("aria-checked", "false");
+    expect(checkbox1).toHaveAttribute("aria-checked", "false");
+    expect(checkbox2).toHaveAttribute("aria-checked", "false");
+    expect(checkbox3).toHaveAttribute("aria-checked", "false");
+    expect(checkbox4).toHaveAttribute("aria-checked", "false");
+
+    fireEvent.click(root);
+    expect(root).toHaveAttribute("aria-checked", "true");
+    expect(checkbox1).toHaveAttribute("aria-checked", "true");
+    expect(checkbox2).toHaveAttribute("aria-checked", "true");
+    expect(checkbox3).toHaveAttribute("aria-checked", "true");
+    expect(checkbox4).toHaveAttribute("aria-checked", "true");
+
+    fireEvent.click(checkbox1);
+    expect(root).toHaveAttribute("aria-checked", "true");
+    expect(checkbox1).toHaveAttribute("aria-checked", "false");
+    expect(checkbox2).toHaveAttribute("aria-checked", "true");
+    expect(checkbox3).toHaveAttribute("aria-checked", "true");
+    expect(checkbox4).toHaveAttribute("aria-checked", "true");
+
+    fireEvent.click(root);
+    expect(root).toHaveAttribute("aria-checked", "true");
+    expect(checkbox1).toHaveAttribute("aria-checked", "true");
+    expect(checkbox2).toHaveAttribute("aria-checked", "true");
+    expect(checkbox3).toHaveAttribute("aria-checked", "true");
+    expect(checkbox4).toHaveAttribute("aria-checked", "true");
+
+    fireEvent.click(root);
+    expect(root).toHaveAttribute("aria-checked", "false");
+    expect(checkbox1).toHaveAttribute("aria-checked", "false");
+    expect(checkbox2).toHaveAttribute("aria-checked", "false");
+    expect(checkbox3).toHaveAttribute("aria-checked", "false");
+    expect(checkbox4).toHaveAttribute("aria-checked", "false");
+
+    fireEvent.click(checkbox2);
+    expect(root).toHaveAttribute("aria-checked", "true");
+    expect(checkbox1).toHaveAttribute("aria-checked", "false");
+    expect(checkbox2).toHaveAttribute("aria-checked", "true");
+    expect(checkbox3).toHaveAttribute("aria-checked", "false");
+    expect(checkbox4).toHaveAttribute("aria-checked", "false");
+  });
+
+  it("should allow for default values or another onChange handler", () => {
+    const onChange = jest.fn();
+    const defaultCheckedValues = ["b"] as const;
+    function Test() {
+      const { rootProps, getProps } = useIndeterminateChecked(
+        values,
+        defaultCheckedValues,
+        onChange
+      );
+      return (
+        <>
+          <Checkbox id="checkbox-1" label="Toggle All" {...rootProps} />
+          {values.map((value, i) => (
+            <Checkbox
+              id={`valued-checkbox-${i + 1}`}
+              {...getProps(value)}
+              key={value}
+              label={LABELS[value]}
+            />
+          ))}
+        </>
+      );
+    }
+    const { getByRole } = render(<Test />);
+    const root = getByRole("checkbox", {
+      name: "Toggle All",
+    }) as HTMLInputElement;
+    const checkbox1 = getByRole("checkbox", {
+      name: "Label 1",
+    }) as HTMLInputElement;
+    const checkbox2 = getByRole("checkbox", {
+      name: "Label 2",
+    }) as HTMLInputElement;
+    const checkbox3 = getByRole("checkbox", {
+      name: "Label 3",
+    }) as HTMLInputElement;
+    const checkbox4 = getByRole("checkbox", {
+      name: "Label 4",
+    }) as HTMLInputElement;
+
+    expect(root.checked).toBe(true);
+    expect(checkbox1.checked).toBe(false);
+    expect(checkbox2.checked).toBe(true);
+    expect(checkbox3.checked).toBe(false);
+    expect(checkbox4.checked).toBe(false);
+
+    fireEvent.click(checkbox1);
+    expect(onChange).toBeCalledWith(["b", "a"]);
+
+    expect(root.checked).toBe(true);
+    expect(checkbox1.checked).toBe(true);
+    expect(checkbox2.checked).toBe(true);
+    expect(checkbox3.checked).toBe(false);
+    expect(checkbox4.checked).toBe(false);
+  });
+
+  it("should allow for default values or another onChange handler with an options object", () => {
+    const onChange = jest.fn();
+    const defaultCheckedValues = ["b"] as const;
+    function Test() {
+      const { rootProps, getProps } = useIndeterminateChecked(values, {
+        onChange,
+        defaultCheckedValues,
+      });
+
+      return (
+        <>
+          <Checkbox id="checkbox-1" label="Toggle All" {...rootProps} />
+          {values.map((value, i) => (
+            <Checkbox
+              id={`valued-checkbox-${i + 1}`}
+              {...getProps(value)}
+              key={value}
+              label={LABELS[value]}
+            />
+          ))}
+        </>
+      );
+    }
+    const { getByRole } = render(<Test />);
+    const root = getByRole("checkbox", {
+      name: "Toggle All",
+    }) as HTMLInputElement;
+    const checkbox1 = getByRole("checkbox", {
+      name: "Label 1",
+    }) as HTMLInputElement;
+    const checkbox2 = getByRole("checkbox", {
+      name: "Label 2",
+    }) as HTMLInputElement;
+    const checkbox3 = getByRole("checkbox", {
+      name: "Label 3",
+    }) as HTMLInputElement;
+    const checkbox4 = getByRole("checkbox", {
+      name: "Label 4",
+    }) as HTMLInputElement;
+
+    expect(root.checked).toBe(true);
+    expect(checkbox1.checked).toBe(false);
+    expect(checkbox2.checked).toBe(true);
+    expect(checkbox3.checked).toBe(false);
+    expect(checkbox4.checked).toBe(false);
+
+    fireEvent.click(checkbox1);
+    expect(onChange).toBeCalledWith(["b", "a"]);
+
+    expect(root.checked).toBe(true);
+    expect(checkbox1.checked).toBe(true);
+    expect(checkbox2.checked).toBe(true);
+    expect(checkbox3.checked).toBe(false);
+    expect(checkbox4.checked).toBe(false);
+  });
+});
diff --git a/packages/form/src/useIndeterminateChecked.ts b/packages/form/src/useIndeterminateChecked.ts
index a23c59e580..877bb6c8b0 100644
--- a/packages/form/src/useIndeterminateChecked.ts
+++ b/packages/form/src/useIndeterminateChecked.ts
@@ -59,6 +59,34 @@ export interface BaseProvidedIndeterminateCheckboxProps {
   indeterminate: boolean;
 }
 
+/**
+ * @remarks \@since 2.8.5
+ * @internal
+ */
+export interface ProvidedIndeterminateCheckboxProps
+  extends BaseProvidedIndeterminateCheckboxProps {
+  onChange(): void;
+}
+
+/**
+ * @remarks \@since 2.8.5
+ * @internal
+ */
+export interface ProvidedIndeterminateMenuItemCheckboxProps
+  extends BaseProvidedIndeterminateCheckboxProps {
+  onCheckedChange(): void;
+}
+
+/**
+ * @remarks \@since 2.8.5
+ * @internal
+ */
+interface ProvidedCombinedIndeterminateProps
+  extends BaseProvidedIndeterminateCheckboxProps {
+  onChange?(): void;
+  onCheckedChange?(): void;
+}
+
 /**
  * @remarks \@since 2.8.5
  * @typeParam V - The values allowed for the list of checkboxes.
@@ -77,6 +105,38 @@ export interface BaseProvidedIndeterminateControlledCheckboxProps<
   checked: boolean;
 }
 
+/**
+ * @remarks \@since 2.8.5
+ * @typeParam V - The values allowed for the list of checkboxes.
+ * @internal
+ */
+export interface ProvidedIndeterminateControlledCheckboxProps<V extends string>
+  extends BaseProvidedIndeterminateControlledCheckboxProps<V> {
+  onChange(): void;
+}
+
+/**
+ * @remarks \@since 2.8.5
+ * @typeParam V - The values allowed for the list of checkboxes.
+ * @internal
+ */
+export interface ProvidedIndeterminateControlledMenuItemCheckboxProps<
+  V extends string
+> extends BaseProvidedIndeterminateControlledCheckboxProps<V> {
+  onCheckedChange(): void;
+}
+
+/**
+ * @remarks \@since 2.8.5
+ * @typeParam V - The values allowed for the list of checkboxes.
+ * @internal
+ */
+interface ProvidedCombinedIndeterminateControlledProps<V extends string>
+  extends BaseProvidedIndeterminateControlledCheckboxProps<V> {
+  onChange?(): void;
+  onCheckedChange?(): void;
+}
+
 /**
  * @remarks \@since 2.8.5
  * @typeParam V - The values allowed for the list of checkboxes.
@@ -101,10 +161,8 @@ export interface BaseIndeterminateCheckedHookReturnValue<V extends string> {
  */
 interface OnChangeReturnValue<V extends string>
   extends BaseIndeterminateCheckedHookReturnValue<V> {
-  rootProps: BaseProvidedIndeterminateCheckboxProps & { onChange(): void };
-  getProps(
-    value: V
-  ): BaseProvidedIndeterminateControlledCheckboxProps<V> & { onChange(): void };
+  rootProps: ProvidedIndeterminateCheckboxProps;
+  getProps(value: V): ProvidedIndeterminateControlledCheckboxProps<V>;
 }
 
 /**
@@ -114,12 +172,8 @@ interface OnChangeReturnValue<V extends string>
  */
 interface OnCheckedChangeReturnValue<V extends string>
   extends BaseIndeterminateCheckedHookReturnValue<V> {
-  rootProps: BaseProvidedIndeterminateCheckboxProps & {
-    onCheckedChange(): void;
-  };
-  getProps(value: V): BaseProvidedIndeterminateControlledCheckboxProps<V> & {
-    onCheckedChange(): void;
-  };
+  rootProps: ProvidedIndeterminateMenuItemCheckboxProps;
+  getProps(value: V): ProvidedIndeterminateControlledMenuItemCheckboxProps<V>;
 }
 
 /**
@@ -129,14 +183,8 @@ interface OnCheckedChangeReturnValue<V extends string>
  */
 interface CombinedReturnValue<V extends string>
   extends BaseIndeterminateCheckedHookReturnValue<V> {
-  rootProps: BaseProvidedIndeterminateCheckboxProps & {
-    onChange?(): void;
-    onCheckedChange?(): void;
-  };
-  getProps(value: V): BaseProvidedIndeterminateControlledCheckboxProps<V> & {
-    onChange?(): void;
-    onCheckedChange?(): void;
-  };
+  rootProps: ProvidedCombinedIndeterminateProps;
+  getProps(value: V): ProvidedCombinedIndeterminateControlledProps<V>;
 }
 
 /**
@@ -297,22 +345,24 @@ export function useIndeterminateChecked<V extends string>(
     setCheckedValues(values);
   };
 
-  const onChange = (): void => {
-    updateCheckedValues(
-      checkedValues.length === 0 || indeterminate ? values : []
-    );
+  const rootProps: ProvidedCombinedIndeterminateProps = {
+    "aria-checked": indeterminate ? "mixed" : undefined,
+    checked,
+    indeterminate,
+    [menu ? "onCheckedChange" : "onChange"]: () => {
+      updateCheckedValues(
+        checkedValues.length === 0 || indeterminate ? values : []
+      );
+    },
   };
 
-  return {
-    rootProps: {
-      "aria-checked": indeterminate ? "mixed" : undefined,
-      checked,
-      indeterminate,
-      onChange: menu ? undefined : onChange,
-      onCheckedChange: menu ? onChange : undefined,
-    },
-    getProps: (value) => {
-      const onChange = (): void => {
+  const getProps = (
+    value: V
+  ): ProvidedCombinedIndeterminateControlledProps<V> => {
+    return {
+      value,
+      checked: checkedValues.includes(value),
+      [menu ? "onCheckedChange" : "onChange"]: () => {
         const i = checkedValues.indexOf(value);
         const nextChecked = checkedValues.slice();
         if (i === -1) {
@@ -322,15 +372,13 @@ export function useIndeterminateChecked<V extends string>(
         }
 
         updateCheckedValues(nextChecked);
-      };
+      },
+    };
+  };
 
-      return {
-        value,
-        checked: checkedValues.includes(value),
-        onChange: menu ? undefined : onChange,
-        onCheckedChange: menu ? onChange : undefined,
-      };
-    },
+  return {
+    rootProps,
+    getProps,
     checkedValues,
     setCheckedValues,
   };