Merge pull request #17 from Gpx/checkbox-bug

fix: 🐛 click() handles checkboxes correctly

Author: Gpx

__tests__/click.js

@@ -193,4 +193,32 @@ describe("fireEvent.click", () => {
       expect(getByTestId("input")).toHaveFocus();
     }
   );
+
+  it('checks <input type="checkbox"> when clicking a <label> with htmlFor', () => {
+    const { getByTestId } = render(
+      <React.Fragment>
+        <label htmlFor="input" data-testid="label">
+          Label
+        </label>
+        <input id="input" data-testid="input" type="checkbox" />
+      </React.Fragment>
+    );
+    expect(getByTestId("input")).toHaveProperty("checked", false);
+    userEvent.click(getByTestId("label"));
+    expect(getByTestId("input")).toHaveProperty("checked", true);
+  });
+
+  it('checks <input type="checkbox"> when clicking a <label> without htmlFor', () => {
+    const { getByTestId } = render(
+      <React.Fragment>
+        <label data-testid="label">
+          Label
+          <input id="input" data-testid="input" type="checkbox" />
+        </label>
+      </React.Fragment>
+    );
+    expect(getByTestId("input")).toHaveProperty("checked", false);
+    userEvent.click(getByTestId("label"));
+    expect(getByTestId("input")).toHaveProperty("checked", true);
+  });
 });

package.json

@@ -2,7 +2,12 @@
   "name": "user-event",
   "version": "0.0.0-development",
   "description": "Simulate user events for react-testing-library",
-  "keywords": ["react-testing-library", "dom-testing-library", "react", "testing"],
+  "keywords": [
+    "react-testing-library",
+    "dom-testing-library",
+    "react",
+    "testing"
+  ],
   "main": "dist/index.js",
   "scripts": {
     "test": "jest",

src/index.js

@@ -11,7 +11,6 @@ function clickLabel(label) {
   fireEvent.mouseMove(label);
   fireEvent.mouseDown(label);
   fireEvent.mouseUp(label);
-  fireEvent.click(label);
 
   if (label.htmlFor) {
     const input = document.getElementById(label.htmlFor);
@@ -21,7 +20,6 @@ function clickLabel(label) {
     const input = label.querySelector("input,textarea");
     input.focus();
     label.focus();
-    fireEvent.click(input);
     fireEvent.click(label);
   }
 }