From c00e8653d0b077cf3bb7a18888fdc02110b3bed4 Mon Sep 17 00:00:00 2001
From: Gpx <polvara@gmail.com>
Date: Sun, 23 Sep 2018 00:30:01 +0200
Subject: [PATCH] =?UTF-8?q?fix:=20=F0=9F=90=9B=20click=20handles=20checkbo?=
 =?UTF-8?q?xes?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 __tests__/events.js | 234 ++++++++++++++++++++++++++------------------
 src/index.js        |  92 ++++++++++-------
 2 files changed, 192 insertions(+), 134 deletions(-)

diff --git a/__tests__/events.js b/__tests__/events.js
index 80711d55..1b9c01fc 100644
--- a/__tests__/events.js
+++ b/__tests__/events.js
@@ -1,57 +1,99 @@
-import React from 'react'
-import { render, cleanup } from 'react-testing-library'
-import 'jest-dom/extend-expect'
-import userEvent from '../src'
+import React from "react";
+import { render, cleanup } from "react-testing-library";
+import "jest-dom/extend-expect";
+import userEvent from "../src";
 
-afterEach(cleanup)
+afterEach(cleanup);
 
-describe('fireEvent.click', () => {
-  it.each(['input', 'textarea'])(
-    'should fire the correct events for <%s>',
+describe("fireEvent.click", () => {
+  it.each(["input", "textarea"])(
+    "should fire the correct events for <%s>",
     type => {
-      const onMouseOver = jest.fn()
-      const onMouseMove = jest.fn()
-      const onMouseDown = jest.fn()
-      const onFocus = jest.fn()
-      const onMouseUp = jest.fn()
-      const onClick = jest.fn()
+      const onMouseOver = jest.fn();
+      const onMouseMove = jest.fn();
+      const onMouseDown = jest.fn();
+      const onFocus = jest.fn();
+      const onMouseUp = jest.fn();
+      const onClick = jest.fn();
       const { getByTestId } = render(
         React.createElement(type, {
-          'data-testid': 'element',
+          "data-testid": "element",
           onMouseOver: onMouseOver,
           onMouseMove: onMouseMove,
           onMouseDown: onMouseDown,
           onFocus: onFocus,
           onMouseUp: onMouseUp,
-          onClick: onClick,
+          onClick: onClick
         })
-      )
-
-      expect(onMouseOver).not.toHaveBeenCalled()
-      expect(onMouseMove).not.toHaveBeenCalled()
-      expect(onMouseDown).not.toHaveBeenCalled()
-      expect(onFocus).not.toHaveBeenCalled()
-      expect(onMouseUp).not.toHaveBeenCalled()
-      expect(onClick).not.toHaveBeenCalled()
-
-      userEvent.click(getByTestId('element'))
-
-      expect(onMouseOver).toHaveBeenCalledTimes(1)
-      expect(onMouseMove).toHaveBeenCalledTimes(1)
-      expect(onMouseDown).toHaveBeenCalledTimes(1)
-      expect(onFocus).toHaveBeenCalledTimes(1)
-      expect(onMouseUp).toHaveBeenCalledTimes(1)
-      expect(onClick).toHaveBeenCalledTimes(1)
+      );
+
+      expect(onMouseOver).not.toHaveBeenCalled();
+      expect(onMouseMove).not.toHaveBeenCalled();
+      expect(onMouseDown).not.toHaveBeenCalled();
+      expect(onFocus).not.toHaveBeenCalled();
+      expect(onMouseUp).not.toHaveBeenCalled();
+      expect(onClick).not.toHaveBeenCalled();
+
+      userEvent.click(getByTestId("element"));
+
+      expect(onMouseOver).toHaveBeenCalledTimes(1);
+      expect(onMouseMove).toHaveBeenCalledTimes(1);
+      expect(onMouseDown).toHaveBeenCalledTimes(1);
+      expect(onFocus).toHaveBeenCalledTimes(1);
+      expect(onMouseUp).toHaveBeenCalledTimes(1);
+      expect(onClick).toHaveBeenCalledTimes(1);
     }
-  )
-
-  it('should fire the correct events for <div>', () => {
-    const onMouseOver = jest.fn()
-    const onMouseMove = jest.fn()
-    const onMouseDown = jest.fn()
-    const onFocus = jest.fn()
-    const onMouseUp = jest.fn()
-    const onClick = jest.fn()
+  );
+
+  it('should fire the correct events for <input type="checkbox">', () => {
+    const onMouseOver = jest.fn();
+    const onMouseMove = jest.fn();
+    const onMouseDown = jest.fn();
+    const onFocus = jest.fn();
+    const onMouseUp = jest.fn();
+    const onClick = jest.fn();
+    const onChange = jest.fn();
+    const { getByTestId } = render(
+      <input
+        data-testid="element"
+        type="checkbox"
+        onMouseOver={onMouseOver}
+        onMouseMove={onMouseMove}
+        onMouseDown={onMouseDown}
+        onFocus={onFocus}
+        onMouseUp={onMouseUp}
+        onClick={onClick}
+        onChange={onChange}
+      />
+    );
+
+    expect(onMouseOver).not.toHaveBeenCalled();
+    expect(onMouseMove).not.toHaveBeenCalled();
+    expect(onMouseDown).not.toHaveBeenCalled();
+    expect(onFocus).not.toHaveBeenCalled();
+    expect(onMouseUp).not.toHaveBeenCalled();
+    expect(onClick).not.toHaveBeenCalled();
+    expect(onChange).not.toHaveBeenCalled();
+
+    userEvent.click(getByTestId("element"));
+
+    expect(onMouseOver).toHaveBeenCalledTimes(1);
+    expect(onMouseMove).toHaveBeenCalledTimes(1);
+    expect(onMouseDown).toHaveBeenCalledTimes(1);
+    expect(onFocus).not.toHaveBeenCalledTimes(1);
+    expect(onMouseUp).toHaveBeenCalledTimes(1);
+    expect(onClick).toHaveBeenCalledTimes(1);
+    expect(onChange).toHaveBeenCalledTimes(1);
+    expect(getByTestId("element")).toHaveProperty("checked", true);
+  });
+
+  it("should fire the correct events for <div>", () => {
+    const onMouseOver = jest.fn();
+    const onMouseMove = jest.fn();
+    const onMouseDown = jest.fn();
+    const onFocus = jest.fn();
+    const onMouseUp = jest.fn();
+    const onClick = jest.fn();
     const { getByTestId } = render(
       <div
         data-testid="div"
@@ -62,93 +104,93 @@ describe('fireEvent.click', () => {
         onMouseUp={onMouseUp}
         onClick={onClick}
       />
-    )
-
-    expect(onMouseOver).not.toHaveBeenCalled()
-    expect(onMouseMove).not.toHaveBeenCalled()
-    expect(onMouseDown).not.toHaveBeenCalled()
-    expect(onFocus).not.toHaveBeenCalled()
-    expect(onMouseUp).not.toHaveBeenCalled()
-    expect(onClick).not.toHaveBeenCalled()
-
-    userEvent.click(getByTestId('div'))
-
-    expect(onMouseOver).toHaveBeenCalledTimes(1)
-    expect(onMouseMove).toHaveBeenCalledTimes(1)
-    expect(onMouseDown).toHaveBeenCalledTimes(1)
-    expect(onFocus).not.toHaveBeenCalled()
-    expect(onMouseUp).toHaveBeenCalledTimes(1)
-    expect(onClick).toHaveBeenCalledTimes(1)
-  })
-
-  it('toggles the focus', () => {
+    );
+
+    expect(onMouseOver).not.toHaveBeenCalled();
+    expect(onMouseMove).not.toHaveBeenCalled();
+    expect(onMouseDown).not.toHaveBeenCalled();
+    expect(onFocus).not.toHaveBeenCalled();
+    expect(onMouseUp).not.toHaveBeenCalled();
+    expect(onClick).not.toHaveBeenCalled();
+
+    userEvent.click(getByTestId("div"));
+
+    expect(onMouseOver).toHaveBeenCalledTimes(1);
+    expect(onMouseMove).toHaveBeenCalledTimes(1);
+    expect(onMouseDown).toHaveBeenCalledTimes(1);
+    expect(onFocus).not.toHaveBeenCalled();
+    expect(onMouseUp).toHaveBeenCalledTimes(1);
+    expect(onClick).toHaveBeenCalledTimes(1);
+  });
+
+  it("toggles the focus", () => {
     const { getByTestId } = render(
       <React.Fragment>
         <input data-testid="A" />
         <input data-testid="B" />
       </React.Fragment>
-    )
+    );
 
-    const a = getByTestId('A')
-    const b = getByTestId('B')
+    const a = getByTestId("A");
+    const b = getByTestId("B");
 
-    expect(a).not.toHaveFocus()
-    expect(b).not.toHaveFocus()
+    expect(a).not.toHaveFocus();
+    expect(b).not.toHaveFocus();
 
-    userEvent.click(a)
-    expect(a).toHaveFocus()
-    expect(b).not.toHaveFocus()
+    userEvent.click(a);
+    expect(a).toHaveFocus();
+    expect(b).not.toHaveFocus();
 
-    userEvent.click(b)
-    expect(a).not.toHaveFocus()
-    expect(a).not.toHaveFocus()
-  })
+    userEvent.click(b);
+    expect(a).not.toHaveFocus();
+    expect(a).not.toHaveFocus();
+  });
 
-  it.each(['input', 'textarea'])(
-    'gives focus to <%s> when clicking a <label> with htmlFor',
+  it.each(["input", "textarea"])(
+    "gives focus to <%s> when clicking a <label> with htmlFor",
     type => {
       const { getByTestId } = render(
         <React.Fragment>
           <label htmlFor="input" data-testid="label">
             Label
           </label>
-          {React.createElement(type, { id: 'input', 'data-testid': 'input' })}
+          {React.createElement(type, { id: "input", "data-testid": "input" })}
         </React.Fragment>
-      )
-      userEvent.click(getByTestId('label'))
-      expect(getByTestId('input')).toHaveFocus()
+      );
+      userEvent.click(getByTestId("label"));
+      expect(getByTestId("input")).toHaveFocus();
     }
-  )
+  );
 
-  it.each(['input', 'textarea'])(
-    'gives focus to <%s> when clicking a <label> without htmlFor',
+  it.each(["input", "textarea"])(
+    "gives focus to <%s> when clicking a <label> without htmlFor",
     type => {
       const { getByTestId } = render(
         <React.Fragment>
           <label data-testid="label">
             Label
-            {React.createElement(type, { 'data-testid': 'input' })}
+            {React.createElement(type, { "data-testid": "input" })}
           </label>
         </React.Fragment>
-      )
-      userEvent.click(getByTestId('label'))
-      expect(getByTestId('input')).toHaveFocus()
+      );
+      userEvent.click(getByTestId("label"));
+      expect(getByTestId("input")).toHaveFocus();
     }
-  )
+  );
 
-  it.each(['input', 'textarea'])(
-    'gives focus to <%s> when clicking on an element contained within a <label>',
+  it.each(["input", "textarea"])(
+    "gives focus to <%s> when clicking on an element contained within a <label>",
     type => {
       const { getByText, getByTestId } = render(
         <React.Fragment>
           <label htmlFor="input" data-testid="label">
             <span>Label</span>
           </label>
-          {React.createElement(type, { id: 'input', 'data-testid': 'input' })}
+          {React.createElement(type, { id: "input", "data-testid": "input" })}
         </React.Fragment>
-      )
-      userEvent.click(getByText('Label'))
-      expect(getByTestId('input')).toHaveFocus()
+      );
+      userEvent.click(getByText("Label"));
+      expect(getByTestId("input")).toHaveFocus();
     }
-  )
-})
+  );
+});
diff --git a/src/index.js b/src/index.js
index 4e9d3add..dfb06e63 100644
--- a/src/index.js
+++ b/src/index.js
@@ -1,61 +1,77 @@
-import { fireEvent } from 'dom-testing-library'
+import { fireEvent } from "dom-testing-library";
 
 function findTagInParents(element, tagName) {
-  if (element.parentNode == null) return undefined
-  if (element.parentNode.tagName === tagName) return element.parentNode
-  return findTagInParents(element.parentNode, tagName)
+  if (element.parentNode == null) return undefined;
+  if (element.parentNode.tagName === tagName) return element.parentNode;
+  return findTagInParents(element.parentNode, tagName);
 }
 
 function clickLabel(label) {
-  fireEvent.mouseOver(label)
-  fireEvent.mouseMove(label)
-  fireEvent.mouseDown(label)
-  fireEvent.mouseUp(label)
-  fireEvent.click(label)
+  fireEvent.mouseOver(label);
+  fireEvent.mouseMove(label);
+  fireEvent.mouseDown(label);
+  fireEvent.mouseUp(label);
+  fireEvent.click(label);
 
   if (label.htmlFor) {
-    const input = document.getElementById(label.htmlFor)
-    input.focus()
-    fireEvent.click(label)
+    const input = document.getElementById(label.htmlFor);
+    input.focus();
+    fireEvent.click(label);
   } else {
-    const input = label.querySelector('input,textarea')
-    input.focus()
-    label.focus()
-    fireEvent.click(input)
-    fireEvent.click(label)
+    const input = label.querySelector("input,textarea");
+    input.focus();
+    label.focus();
+    fireEvent.click(input);
+    fireEvent.click(label);
   }
 }
 
+function clickCheckbox(checkbox) {
+  fireEvent.mouseOver(checkbox);
+  fireEvent.mouseMove(checkbox);
+  fireEvent.mouseDown(checkbox);
+  fireEvent.mouseUp(checkbox);
+  fireEvent.click(checkbox);
+  fireEvent.change(checkbox);
+}
+
 function clickElement(element) {
-  fireEvent.mouseOver(element)
-  fireEvent.mouseMove(element)
-  fireEvent.mouseDown(element)
-  element.focus()
-  fireEvent.mouseUp(element)
-  fireEvent.click(element)
-
-  const labelAncestor = findTagInParents(element, 'LABEL')
-  labelAncestor && clickLabel(labelAncestor)
+  fireEvent.mouseOver(element);
+  fireEvent.mouseMove(element);
+  fireEvent.mouseDown(element);
+  element.focus();
+  fireEvent.mouseUp(element);
+  fireEvent.click(element);
+
+  const labelAncestor = findTagInParents(element, "LABEL");
+  labelAncestor && clickLabel(labelAncestor);
 }
 
 const userEvent = {
   click(element) {
-    const focusedElement = document.activeElement
+    const focusedElement = document.activeElement;
     const wasAnotherElementFocused =
-      focusedElement !== document.body && focusedElement !== element
+      focusedElement !== document.body && focusedElement !== element;
     if (wasAnotherElementFocused) {
-      fireEvent.mouseMove(focusedElement)
-      fireEvent.mouseLeave(focusedElement)
+      fireEvent.mouseMove(focusedElement);
+      fireEvent.mouseLeave(focusedElement);
     }
 
-    if (element.tagName === 'LABEL') {
-      clickLabel(element)
-    } else {
-      clickElement(element)
+    switch (element.tagName) {
+      case "LABEL":
+        clickLabel(element);
+        break;
+      case "INPUT":
+        if (element.type === "checkbox") {
+          clickCheckbox(element);
+          break;
+        }
+      default:
+        clickElement(element);
     }
 
-    wasAnotherElementFocused && focusedElement.blur()
-  },
-}
+    wasAnotherElementFocused && focusedElement.blur();
+  }
+};
 
-export default userEvent
+export default userEvent;