From d1f67348a38e5795855c695e58d419fe24f6726b Mon Sep 17 00:00:00 2001
From: Gpx <polvara@gmail.com>
Date: Sun, 23 Sep 2018 00:18:00 +0200
Subject: [PATCH 1/2] =?UTF-8?q?fix:=20=F0=9F=90=9B=20click=20on=20label=20?=
 =?UTF-8?q?works=20on=20textarea?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 __tests__/events.js | 266 +++++++++++++++++++++++---------------------
 src/index.js        |  74 ++++++------
 2 files changed, 176 insertions(+), 164 deletions(-)

diff --git a/__tests__/events.js b/__tests__/events.js
index 9ed1687c..80711d55 100644
--- a/__tests__/events.js
+++ b/__tests__/events.js
@@ -1,54 +1,57 @@
-import React from "react";
-import { render, cleanup } from "react-testing-library";
-import "jest-dom/extend-expect";
-import userEvent from "../src";
-
-afterEach(cleanup);
-
-describe("fireEvent.click", () => {
-  it("should fire the correct events for <input>", () => {
-    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(
-      <input
-        data-testid="input"
-        onMouseOver={onMouseOver}
-        onMouseMove={onMouseMove}
-        onMouseDown={onMouseDown}
-        onFocus={onFocus}
-        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("input"));
-
-    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();
+import React from 'react'
+import { render, cleanup } from 'react-testing-library'
+import 'jest-dom/extend-expect'
+import userEvent from '../src'
+
+afterEach(cleanup)
+
+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 { getByTestId } = render(
+        React.createElement(type, {
+          'data-testid': 'element',
+          onMouseOver: onMouseOver,
+          onMouseMove: onMouseMove,
+          onMouseDown: onMouseDown,
+          onFocus: onFocus,
+          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('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()
     const { getByTestId } = render(
       <div
         data-testid="div"
@@ -59,84 +62,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");
-
-    expect(a).not.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();
-  });
-
-  it("gives focus 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" />
-      </React.Fragment>
-    );
-    userEvent.click(getByTestId("label"));
-    expect(getByTestId("input")).toHaveFocus();
-  });
-
-  it("gives focus when clicking a <label> without htmlFor", () => {
-    const { getByTestId } = render(
-      <React.Fragment>
-        <label data-testid="label">
-          Label
-          <input data-testid="input" />
-        </label>
-      </React.Fragment>
-    );
-    userEvent.click(getByTestId("label"));
-    expect(getByTestId("input")).toHaveFocus();
-  });
-
-  it("gives focus when clicking on an element contained within a <label>", () => {
-    const { getByText, getByTestId } = render(
-      <React.Fragment>
-        <label htmlFor="input" data-testid="label">
-          <span>Label</span>
-        </label>
-        <input id="input" data-testid="input" />
-      </React.Fragment>
-    );
-    userEvent.click(getByText("Label"));
-    //expect(getByTestId('input')).toHaveFocus()
-  });
-});
+    )
+
+    const a = getByTestId('A')
+    const b = getByTestId('B')
+
+    expect(a).not.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()
+  })
+
+  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.Fragment>
+      )
+      userEvent.click(getByTestId('label'))
+      expect(getByTestId('input')).toHaveFocus()
+    }
+  )
+
+  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' })}
+          </label>
+        </React.Fragment>
+      )
+      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>',
+    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.Fragment>
+      )
+      userEvent.click(getByText('Label'))
+      expect(getByTestId('input')).toHaveFocus()
+    }
+  )
+})
diff --git a/src/index.js b/src/index.js
index 9b60fd19..4e9d3add 100644
--- a/src/index.js
+++ b/src/index.js
@@ -1,61 +1,61 @@
-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");
-    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 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);
+    if (element.tagName === 'LABEL') {
+      clickLabel(element)
     } else {
-      clickElement(element);
+      clickElement(element)
     }
 
-    wasAnotherElementFocused && focusedElement.blur();
-  }
-};
+    wasAnotherElementFocused && focusedElement.blur()
+  },
+}
 
-export default userEvent;
+export default userEvent

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 2/2] =?UTF-8?q?fix:=20=F0=9F=90=9B=20click=20handles=20che?=
 =?UTF-8?q?ckboxes?=
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;