test(form): added tests for controlled Switches

Closes #1175
mlaursen · Jun 10, 2021 · 8c65df6 · 8c65df6
1 parent bffae6f
commit 8c65df6
Show file tree

Hide file tree

Showing 2 changed files with 26 additions and 4 deletions.
diff --git a/packages/form/src/toggle/SwitchTrack.tsx b/packages/form/src/toggle/SwitchTrack.tsx
@@ -53,7 +53,6 @@ export const SwitchTrack = forwardRef<HTMLInputElement, SwitchTrackProps>(
     {
       id,
       disabled = false,
-      checked = false,
       className,
       ballStyle,
       ballClassName,
@@ -63,6 +62,7 @@ export const SwitchTrack = forwardRef<HTMLInputElement, SwitchTrackProps>(
     },
     ref
   ) {
+    const { checked = false } = props;
     return (
       <span
         {...containerProps}
@@ -76,7 +76,6 @@ export const SwitchTrack = forwardRef<HTMLInputElement, SwitchTrackProps>(
               ref={ref}
               type="checkbox"
               className={cn(styles("input"))}
-              checked={checked}
               disabled={disabled}
             />
             <label

diff --git a/packages/form/src/toggle/__tests__/Switch.tsx b/packages/form/src/toggle/__tests__/Switch.tsx
@@ -1,5 +1,5 @@
-import React from "react";
-import { render } from "@testing-library/react";
+import React, { useState } from "react";
+import { fireEvent, render } from "@testing-library/react";
 
 import { Switch } from "../Switch";
 
@@ -60,4 +60,27 @@ describe("Switch", () => {
 
     expect(container).toMatchSnapshot();
   });
+
+  it("should work as a controlled component", () => {
+    function Test() {
+      const [checked, setChecked] = useState(false);
+
+      return (
+        <Switch
+          id="switch"
+          label="Label"
+          checked={checked}
+          onChange={(event) => setChecked(event.currentTarget.checked)}
+        />
+      );
+    }
+
+    const { getByRole } = render(<Test />);
+
+    const checkbox = getByRole("checkbox", { name: "Label" });
+    expect(checkbox).not.toBeChecked();
+
+    fireEvent.click(checkbox);
+    expect(checkbox).toBeChecked();
+  });
 });