Merge pull request #22 from Gpx/dblclick

Dblclick
testing-library · Sep 30, 2018 · ec8a369 · ec8a369
2 parents 728deae + d7a01a7
commit ec8a369
Show file tree

Hide file tree

Showing 4 changed files with 230 additions and 81 deletions.
diff --git a/README.md b/README.md
@@ -73,6 +73,28 @@ userEvent.click(getByText("Check"));
 expect(getByTestId("checkbox")).toHaveAttribute("checked", true);
 ```
 
+### `dblClick(element)`
+
+Clicks `element` twice, depending on what `element` is it can have different
+side effects.
+
+```jsx
+import React from "react";
+import { render } from "react-testing-library";
+import userEvent from "user-event";
+
+test("double click", () => {
+  const onChange = jest.fn();
+  const { getByTestId } = render(
+    <input type="checkbox" id="checkbox" onChange={onChange} />
+  );
+  const checkbox = getByTestId("checkbox");
+  userEvent.dblClick(checkbox);
+  expect(onChange).toHaveBeenCalledTimes(2);
+  expect(checkbox).toHaveProperty("checked", false);
+});
+```
+
 ### `type(element, text, [options])`
 
 Writes `text` inside an `<input>` or a `<textarea>`. `options` accepts one

diff --git a/__tests__/click.js b/__tests__/click.js
@@ -5,122 +5,91 @@ import userEvent from "../src";
 
 afterEach(cleanup);
 
-describe("fireEvent.click", () => {
+describe("userEvent.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 events = [];
+      const eventsHandler = jest.fn(evt => events.push(evt.type));
       const { getByTestId } = render(
         React.createElement(type, {
           "data-testid": "element",
-          onMouseOver: onMouseOver,
-          onMouseMove: onMouseMove,
-          onMouseDown: onMouseDown,
-          onFocus: onFocus,
-          onMouseUp: onMouseUp,
-          onClick: onClick
+          onMouseOver: eventsHandler,
+          onMouseMove: eventsHandler,
+          onMouseDown: eventsHandler,
+          onFocus: eventsHandler,
+          onMouseUp: eventsHandler,
+          onClick: eventsHandler
         })
       );
 
-      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(events).toEqual([
+        "mouseover",
+        "mousemove",
+        "mousedown",
+        "focus",
+        "mouseup",
+        "click"
+      ]);
     }
   );
 
   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 events = [];
+    const eventsHandler = jest.fn(evt => events.push(evt.type));
     const { getByTestId } = render(
       <input
         data-testid="element"
         type="checkbox"
-        onMouseOver={onMouseOver}
-        onMouseMove={onMouseMove}
-        onMouseDown={onMouseDown}
-        onFocus={onFocus}
-        onMouseUp={onMouseUp}
-        onClick={onClick}
-        onChange={onChange}
+        onMouseOver={eventsHandler}
+        onMouseMove={eventsHandler}
+        onMouseDown={eventsHandler}
+        onFocus={eventsHandler}
+        onMouseUp={eventsHandler}
+        onClick={eventsHandler}
+        onChange={eventsHandler}
       />
     );
 
-    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(events).toEqual([
+      "mouseover",
+      "mousemove",
+      "mousedown",
+      "mouseup",
+      "click",
+      "change"
+    ]);
+
     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 events = [];
+    const eventsHandler = jest.fn(evt => events.push(evt.type));
     const { getByTestId } = render(
       <div
         data-testid="div"
-        onMouseOver={onMouseOver}
-        onMouseMove={onMouseMove}
-        onMouseDown={onMouseDown}
-        onFocus={onFocus}
-        onMouseUp={onMouseUp}
-        onClick={onClick}
+        onMouseOver={eventsHandler}
+        onMouseMove={eventsHandler}
+        onMouseDown={eventsHandler}
+        onFocus={eventsHandler}
+        onMouseUp={eventsHandler}
+        onClick={eventsHandler}
       />
     );
 
-    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);
+    expect(events).toEqual([
+      "mouseover",
+      "mousemove",
+      "mousedown",
+      "mouseup",
+      "click"
+    ]);
   });
 
   it("toggles the focus", () => {

diff --git a/__tests__/dblclick.js b/__tests__/dblclick.js
@@ -0,0 +1,106 @@
+import React from "react";
+import { render, cleanup } from "react-testing-library";
+import "jest-dom/extend-expect";
+import userEvent from "../src";
+
+afterEach(cleanup);
+
+describe("userEvent.dblClick", () => {
+  it.each(["input", "textarea"])(
+    "should fire the correct events for <%s>",
+    type => {
+      const events = [];
+      const eventsHandler = jest.fn(evt => events.push(evt.type));
+      const { getByTestId } = render(
+        React.createElement(type, {
+          "data-testid": "element",
+          onMouseOver: eventsHandler,
+          onMouseMove: eventsHandler,
+          onMouseDown: eventsHandler,
+          onFocus: eventsHandler,
+          onMouseUp: eventsHandler,
+          onClick: eventsHandler,
+          onDoubleClick: eventsHandler
+        })
+      );
+
+      userEvent.dblClick(getByTestId("element"));
+
+      expect(events).toEqual([
+        "mouseover",
+        "mousemove",
+        "mousedown",
+        "focus",
+        "mouseup",
+        "click",
+        "mousedown",
+        "mouseup",
+        "click",
+        "dblclick"
+      ]);
+    }
+  );
+
+  it('should fire the correct events for <input type="checkbox">', () => {
+    const events = [];
+    const eventsHandler = jest.fn(evt => events.push(evt.type));
+    const { getByTestId } = render(
+      <input
+        data-testid="element"
+        type="checkbox"
+        onMouseOver={eventsHandler}
+        onMouseMove={eventsHandler}
+        onMouseDown={eventsHandler}
+        onFocus={eventsHandler}
+        onMouseUp={eventsHandler}
+        onClick={eventsHandler}
+        onChange={eventsHandler}
+      />
+    );
+
+    userEvent.dblClick(getByTestId("element"));
+
+    expect(events).toEqual([
+      "mouseover",
+      "mousemove",
+      "mousedown",
+      "mouseup",
+      "click",
+      "change",
+      "mousedown",
+      "mouseup",
+      "click",
+      "change"
+    ]);
+
+    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));
+    const { getByTestId } = render(
+      <div
+        data-testid="div"
+        onMouseOver={eventsHandler}
+        onMouseMove={eventsHandler}
+        onMouseDown={eventsHandler}
+        onFocus={eventsHandler}
+        onMouseUp={eventsHandler}
+        onClick={eventsHandler}
+      />
+    );
+
+    userEvent.dblClick(getByTestId("div"));
+    expect(events).toEqual([
+      "mouseover",
+      "mousemove",
+      "mousedown",
+      "mouseup",
+      "click",
+      "mousedown",
+      "mouseup",
+      "click"
+    ]);
+  });
+});
diff --git a/src/index.js b/src/index.js
@@ -45,6 +45,35 @@ function clickElement(element) {
   labelAncestor && clickLabel(labelAncestor);
 }
 
+function dblClickElement(element) {
+  fireEvent.mouseOver(element);
+  fireEvent.mouseMove(element);
+  fireEvent.mouseDown(element);
+  element.focus();
+  fireEvent.mouseUp(element);
+  fireEvent.click(element);
+  fireEvent.mouseDown(element);
+  fireEvent.mouseUp(element);
+  fireEvent.click(element);
+  fireEvent.dblClick(element);
+
+  const labelAncestor = findTagInParents(element, "LABEL");
+  labelAncestor && clickLabel(labelAncestor);
+}
+
+function dblClickCheckbox(checkbox) {
+  fireEvent.mouseOver(checkbox);
+  fireEvent.mouseMove(checkbox);
+  fireEvent.mouseDown(checkbox);
+  fireEvent.mouseUp(checkbox);
+  fireEvent.click(checkbox);
+  fireEvent.change(checkbox);
+  fireEvent.mouseDown(checkbox);
+  fireEvent.mouseUp(checkbox);
+  fireEvent.click(checkbox);
+  fireEvent.change(checkbox);
+}
+
 const userEvent = {
   click(element) {
     const focusedElement = document.activeElement;
@@ -70,6 +99,29 @@ const userEvent = {
 
     wasAnotherElementFocused && focusedElement.blur();
   },
+
+  dblClick(element) {
+    const focusedElement = document.activeElement;
+    const wasAnotherElementFocused =
+      focusedElement !== document.body && focusedElement !== element;
+    if (wasAnotherElementFocused) {
+      fireEvent.mouseMove(focusedElement);
+      fireEvent.mouseLeave(focusedElement);
+    }
+
+    switch (element.tagName) {
+      case "INPUT":
+        if (element.type === "checkbox") {
+          dblClickCheckbox(element);
+          break;
+        }
+      default:
+        dblClickElement(element);
+    }
+
+    wasAnotherElementFocused && focusedElement.blur();
+  },
+
   type(element, text, userOpts = {}) {
     const defaultOpts = { allAtOnce: false };
     const opts = Object.assign(defaultOpts, userOpts);