Merge pull request #107 from Dhalton/disabled-radio-button-click

fix: 🐛 don't fire events when clicking disabled radio button

Author: Gpx

__tests__/click.js

@@ -92,6 +92,62 @@ describe("userEvent.click", () => {
     expect(getByTestId("element")).toHaveProperty("checked", false);
   });
 
+  it('should fire the correct events for <input type="radio">', () => {
+    const events = [];
+    const eventsHandler = jest.fn(evt => events.push(evt.type));
+    const { getByTestId } = render(
+      <input
+        data-testid="element"
+        type="radio"
+        onMouseOver={eventsHandler}
+        onMouseMove={eventsHandler}
+        onMouseDown={eventsHandler}
+        onFocus={eventsHandler}
+        onMouseUp={eventsHandler}
+        onClick={eventsHandler}
+        onChange={eventsHandler}
+      />
+    );
+
+    userEvent.click(getByTestId("element"));
+
+    expect(events).toEqual([
+      "mouseover",
+      "mousemove",
+      "mousedown",
+      "mouseup",
+      "click",
+      "change"
+    ]);
+
+    expect(getByTestId("element")).toHaveProperty("checked", true);
+  });
+
+  it('should fire the correct events for <input type="radio" disabled>', () => {
+    const events = [];
+    const eventsHandler = jest.fn(evt => events.push(evt.type));
+    const { getByTestId } = render(
+      <input
+        data-testid="element"
+        type="radio"
+        onMouseOver={eventsHandler}
+        onMouseMove={eventsHandler}
+        onMouseDown={eventsHandler}
+        onFocus={eventsHandler}
+        onMouseUp={eventsHandler}
+        onClick={eventsHandler}
+        onChange={eventsHandler}
+        disabled
+      />
+    );
+
+    userEvent.click(getByTestId("element"));
+
+    expect(events).toEqual([]);
+
+    expect(getByTestId("element")).toHaveProperty("checked", false);
+  });
+
   it("should fire the correct events for <div>", () => {
     const events = [];
     const eventsHandler = jest.fn(evt => events.push(evt.type));

src/index.js

@@ -30,15 +30,15 @@ function clickLabel(label) {
   }
 }
 
-function clickCheckbox(checkbox) {
-  if (checkbox.disabled) return;
+function clickBooleanElement(element) {
+  if (element.disabled) return;
 
-  fireEvent.mouseOver(checkbox);
-  fireEvent.mouseMove(checkbox);
-  fireEvent.mouseDown(checkbox);
-  fireEvent.mouseUp(checkbox);
-  fireEvent.click(checkbox);
-  fireEvent.change(checkbox);
+  fireEvent.mouseOver(element);
+  fireEvent.mouseMove(element);
+  fireEvent.mouseDown(element);
+  fireEvent.mouseUp(element);
+  fireEvent.click(element);
+  fireEvent.change(element);
 }
 
 function clickElement(element) {
@@ -97,8 +97,8 @@ const userEvent = {
         clickLabel(element);
         break;
       case "INPUT":
-        if (element.type === "checkbox") {
-          clickCheckbox(element);
+        if (element.type === "checkbox" || element.type === "radio") {
+          clickBooleanElement(element);
           break;
         }
       default: