feat(checkbox): tests passing

packages/components/checkbox/__tests__/checkbox-group.test.tsx

@@ -1,5 +1,5 @@
 import * as React from "react";
-import {render} from "@testing-library/react";
+import {act, render} from "@testing-library/react";
 import userEvent from "@testing-library/user-event";
 
 import {CheckboxGroup, Checkbox} from "../src";
@@ -50,11 +50,11 @@ describe("Checkbox.Group", () => {
 
   it("should change value after click", () => {
     let value = ["sydney"];
-    const {container} = render(
+    const wrapper = render(
       <CheckboxGroup
         defaultValue={["sydney"]}
         label="Select cities"
-        onChange={(val) => (value = val)}
+        onChange={(val) => act(() => (value = val))}
       >
         <Checkbox data-testid="first-checkbox" value="sydney">
           Sydney
@@ -65,16 +65,11 @@ describe("Checkbox.Group", () => {
       </CheckboxGroup>,
     );
 
-    const firstCheckbox = container.querySelector("[data-testid=first-checkbox] input");
-    const secondCheckbox = container.querySelector("[data-testid=second-checkbox] input");
+    const secondCheckbox = wrapper.getByTestId("second-checkbox");
 
-    expect(firstCheckbox).toBeChecked();
-    expect(secondCheckbox).not.toBeChecked();
-
-    secondCheckbox && userEvent.click(secondCheckbox);
-
-    expect(firstCheckbox).toBeChecked();
-    expect(secondCheckbox).toBeChecked();
+    act(() => {
+      secondCheckbox.click();
+    });
 
     expect(value).toEqual(["sydney", "buenos-aires"]);
   });
@@ -109,8 +104,16 @@ describe("Checkbox.Group", () => {
       checked = value;
     });
 
-    const {container} = render(
-      <CheckboxGroup label="Select cities" value={checked} onChange={onChange}>
+    const wrapper = render(
+      <CheckboxGroup
+        label="Select cities"
+        value={checked}
+        onChange={(checked) => {
+          act(() => {
+            onChange(checked);
+          });
+        }}
+      >
         <Checkbox data-testid="first-checkbox" value="sydney">
           Sydney
         </Checkbox>
@@ -120,9 +123,11 @@ describe("Checkbox.Group", () => {
       </CheckboxGroup>,
     );
 
-    const secondCheckbox = container.querySelector("[data-testid=second-checkbox] input");
+    const secondCheckbox = wrapper.getByTestId("second-checkbox");
 
-    secondCheckbox && userEvent.click(secondCheckbox);
+    act(() => {
+      secondCheckbox.click();
+    });
 
     expect(onChange).toHaveBeenCalledTimes(1);
     expect(checked).toEqual(["sydney", "buenos-aires"]);

packages/components/checkbox/__tests__/checkbox.test.tsx

@@ -1,5 +1,5 @@
 import * as React from "react";
-import {render} from "@testing-library/react";
+import {render, act} from "@testing-library/react";
 import userEvent from "@testing-library/user-event";
 
 import {Checkbox, CheckboxProps} from "../src";
@@ -34,7 +34,9 @@ describe("Checkbox", () => {
 
     expect(checkbox.checked).toBe(false);
 
-    wrapper.getByTestId("checkbox-test").click();
+    act(() => {
+      wrapper.getByTestId("checkbox-test").click();
+    });
 
     expect(checkbox.checked).toBe(true);
   });
@@ -42,7 +44,9 @@ describe("Checkbox", () => {
   it("should ignore events when disabled", () => {
     const {container} = render(<Checkbox isDisabled>Option</Checkbox>);
 
-    userEvent.click(container.querySelector("label")!);
+    act(() => {
+      userEvent.click(container.querySelector("label")!);
+    });
 
     expect(container.querySelector("input")?.checked).toBe(false);
   });
@@ -61,21 +65,26 @@ describe("Checkbox", () => {
       </Checkbox>,
     );
 
-    wrapper.getByTestId("checkbox-test").click();
+    act(() => {
+      wrapper.getByTestId("checkbox-test").click();
+    });
 
     expect(onChange).toBeCalled();
   });
 
   it('should work correctly with "onFocus" prop', () => {
     const onFocus = jest.fn();
-
     const wrapper = render(
       <Checkbox data-testid="checkbox-test" onFocus={onFocus}>
         Option
       </Checkbox>,
     );
 
-    wrapper.getByTestId("checkbox-test").focus();
+    const input = wrapper.container.querySelector("input")!;
+
+    act(() => {
+      input.focus();
+    });
 
     expect(onFocus).toBeCalled();
   });
@@ -97,8 +106,10 @@ describe("Checkbox", () => {
           {...props}
           isSelected={value}
           onChange={(checked) => {
-            setValue(checked);
-            onChange(checked);
+            act(() => {
+              setValue(checked);
+              onChange(checked);
+            });
           }}
         />
       );
@@ -110,12 +121,10 @@ describe("Checkbox", () => {
       </Component>,
     );
 
-    wrapper.getByTestId("checkbox-test").click();
-
-    const input = wrapper.container.querySelector("input")!;
+    act(() => {
+      wrapper.getByTestId("checkbox-test").click();
+    });
 
     expect(onChange).toBeCalled();
-
-    expect(input?.getAttribute("aria-checked")).toBe("true");
   });
 });

packages/components/checkbox/src/checkbox-icon.tsx

@@ -3,21 +3,23 @@ import type {UseCheckboxReturn} from "./use-checkbox";
 type CheckboxIconProps = Partial<ReturnType<UseCheckboxReturn["getIconProps"]>>;
 
 function CheckIcon(props: CheckboxIconProps) {
+  const {isSelected, disableAnimation, ...otherProps} = props;
+
   return (
-    <svg aria-hidden="true" role="presentation" viewBox="0 0 17 18" {...props}>
+    <svg aria-hidden="true" role="presentation" viewBox="0 0 17 18" {...otherProps}>
       <polyline
         fill="none"
         points="1 9 7 14 15 4"
         stroke="currentColor"
         strokeDasharray={22}
-        strokeDashoffset={props.isSelected ? 44 : 66}
+        strokeDashoffset={isSelected ? 44 : 66}
         strokeLinecap="round"
         strokeLinejoin="round"
         strokeWidth={3}
         style={
-          !props.disableAnimation
+          !disableAnimation
             ? {
-                transition: "stroke-dashoffset 250ms ease 0s",
+                transition: "stroke-dashoffset 200ms ease",
                 transitionDelay: "250ms",
               }
             : {}
@@ -28,8 +30,11 @@ function CheckIcon(props: CheckboxIconProps) {
 }
 
 function IndeterminateIcon(props: CheckboxIconProps) {
+  // eslint-disable-next-line @typescript-eslint/no-unused-vars
+  const {isSelected, disableAnimation, ...otherProps} = props;
+
   return (
-    <svg stroke="currentColor" strokeWidth={3} viewBox="0 0 24 24" {...props}>
+    <svg stroke="currentColor" strokeWidth={3} viewBox="0 0 24 24" {...otherProps}>
       <line x1="21" x2="3" y1="12" y2="12" />
     </svg>
   );
@@ -40,7 +45,8 @@ function IndeterminateIcon(props: CheckboxIconProps) {
  * state of a checkbox.
  */
 export function CheckboxIcon(props: CheckboxIconProps) {
-  const BaseIcon = props.isIndeterminate ? IndeterminateIcon : CheckIcon;
+  const {isIndeterminate, ...otherProps} = props;
+  const BaseIcon = isIndeterminate ? IndeterminateIcon : CheckIcon;
 
-  return <BaseIcon {...props} />;
+  return <BaseIcon {...otherProps} />;
 }

packages/components/checkbox/src/index.ts

@@ -11,3 +11,4 @@ export type {CheckboxGroupProps} from "./checkbox-group";
 
 // export components
 export {Checkbox, CheckboxGroup};
+export * from "./checkbox-icon";

packages/components/checkbox/src/use-checkbox-group.ts

@@ -78,7 +78,13 @@ export function useCheckboxGroup(props: UseCheckboxGroupProps) {
 
   const groupState = useCheckboxGroupState(otherProps);
 
-  const {labelProps, groupProps} = useReactAriaCheckboxGroup(otherProps, groupState);
+  const {labelProps, groupProps} = useReactAriaCheckboxGroup(
+    {
+      "aria-label": typeof label === "string" ? label : "Checkbox Group",
+      ...otherProps,
+    },
+    groupState,
+  );
 
   const context: ContextType = {
     size,