@testing-library/user-event - npm Package Compare versions

Comparing version 8.1.1 to 8.1.2

__tests__/react/click.js

@@ -201,2 +201,88 @@ import React from "react";
 
+  it("should not blur when mousedown prevents default", () => {
+    let events = [];
+    const eventsHandler = jest.fn(evt => events.push(evt.type));
+    const commonEvents = {
+      onBlur: eventsHandler,
+      onMouseOver: eventsHandler,
+      onMouseMove: eventsHandler,
+      onMouseDown: eventsHandler,
+      onFocus: eventsHandler,
+      onMouseUp: eventsHandler,
+      onClick: eventsHandler,
+      onChange: eventsHandler
+    };
+
+    const { getByTestId } = render(
+      <React.Fragment>
+        <input data-testid="A" {...commonEvents} />
+        <input
+          data-testid="B"
+          {...commonEvents}
+          onMouseDown={e => {
+            e.preventDefault();
+            eventsHandler(e);
+          }}
+        />
+        <input data-testid="C" {...commonEvents} />
+      </React.Fragment>
+    );
+
+    const a = getByTestId("A");
+    const b = getByTestId("B");
+    const c = getByTestId("C");
+
+    expect(a).not.toHaveFocus();
+    expect(b).not.toHaveFocus();
+    expect(c).not.toHaveFocus();
+
+    userEvent.click(a);
+    expect(a).toHaveFocus();
+    expect(b).not.toHaveFocus();
+    expect(c).not.toHaveFocus();
+
+    expect(events).toEqual([
+      "mouseover",
+      "mousemove",
+      "mousedown",
+      "focus",
+      "mouseup",
+      "click"
+    ]);
+
+    events = [];
+
+    userEvent.click(b);
+    expect(a).toHaveFocus();
+    expect(b).not.toHaveFocus();
+    expect(c).not.toHaveFocus();
+
+    expect(events).toEqual([
+      "mousemove",
+      "mouseover",
+      "mousemove",
+      "mousedown",
+      "mouseup",
+      "click"
+    ]);
+
+    events = [];
+
+    userEvent.click(c);
+    expect(a).not.toHaveFocus();
+    expect(b).not.toHaveFocus();
+    expect(c).toHaveFocus();
+
+    expect(events).toEqual([
+      "mousemove",
+      "mouseover",
+      "mousemove",
+      "mousedown",
+      "blur",
+      "focus",
+      "mouseup",
+      "click"
+    ]);
+  });
+
   it("does not lose focus when click updates focus", () => {
@@ -332,5 +418,5 @@ const FocusComponent = () => {
           "data-testid": "element",
-          onMouseDown: (evt) => {
+          onMouseDown: evt => {
             evt.preventDefault();
-          },
+          }
         })
@@ -337,0 +423,0 @@ );

__tests__/react/dblclick.js

@@ -107,2 +107,97 @@ import React from "react";
   });
+
+  it("should not blur when mousedown prevents default", () => {
+    let events = [];
+    const eventsHandler = jest.fn(evt => events.push(evt.type));
+    const commonEvents = {
+      onBlur: eventsHandler,
+      onMouseOver: eventsHandler,
+      onMouseMove: eventsHandler,
+      onMouseDown: eventsHandler,
+      onFocus: eventsHandler,
+      onMouseUp: eventsHandler,
+      onClick: eventsHandler,
+      onChange: eventsHandler
+    };
+
+    const { getByTestId } = render(
+      <React.Fragment>
+        <input data-testid="A" {...commonEvents} />
+        <input
+          data-testid="B"
+          {...commonEvents}
+          onMouseDown={e => {
+            e.preventDefault();
+            eventsHandler(e);
+          }}
+        />
+        <input data-testid="C" {...commonEvents} />
+      </React.Fragment>
+    );
+
+    const a = getByTestId("A");
+    const b = getByTestId("B");
+    const c = getByTestId("C");
+
+    expect(a).not.toHaveFocus();
+    expect(b).not.toHaveFocus();
+    expect(c).not.toHaveFocus();
+
+    userEvent.dblClick(a);
+    expect(a).toHaveFocus();
+    expect(b).not.toHaveFocus();
+    expect(c).not.toHaveFocus();
+
+    expect(events).toEqual([
+      "mouseover",
+      "mousemove",
+      "mousedown",
+      "focus",
+      "mouseup",
+      "click",
+      "mousedown",
+      "mouseup",
+      "click"
+    ]);
+
+    events = [];
+
+    userEvent.dblClick(b);
+    expect(a).toHaveFocus();
+    expect(b).not.toHaveFocus();
+    expect(c).not.toHaveFocus();
+
+    expect(events).toEqual([
+      "mousemove",
+      "mouseover",
+      "mousemove",
+      "mousedown",
+      "mouseup",
+      "click",
+      "mousedown",
+      "mouseup",
+      "click"
+    ]);
+
+    events = [];
+
+    userEvent.dblClick(c);
+    expect(a).not.toHaveFocus();
+    expect(b).not.toHaveFocus();
+    expect(c).toHaveFocus();
+
+    expect(events).toEqual([
+      "mousemove",
+      "mouseover",
+      "mousemove",
+      "mousedown",
+      "blur",
+      "focus",
+      "mouseup",
+      "click",
+      "mousedown",
+      "mouseup",
+      "click"
+    ]);
+  });
 });

dist/index.js

@@ -61,3 +61,3 @@ "use strict";
 
-function clickElement(element) {
+function clickElement(element, previousElement) {
   _dom.fireEvent.mouseOver(element);
@@ -70,2 +70,3 @@
   if (continueDefaultHandling) {
+    previousElement && previousElement.blur();
     element.focus();
@@ -82,3 +83,3 @@ }
 
-function dblClickElement(element) {
+function dblClickElement(element, previousElement) {
   _dom.fireEvent.mouseOver(element);
@@ -88,5 +89,8 @@
 
-  _dom.fireEvent.mouseDown(element);
+  const continueDefaultHandling = _dom.fireEvent.mouseDown(element);
 
-  element.focus();
+  if (continueDefaultHandling) {
+    previousElement && previousElement.blur();
+    element.focus();
+  }
 
@@ -153,8 +157,2 @@ _dom.fireEvent.mouseUp(element);
 
-function blurFocusedElement(element, focusedElement, wasAnotherElementFocused) {
-  if (wasAnotherElementFocused && element.ownerDocument.activeElement === element) {
-    focusedElement.blur();
-  }
-}
-
 const userEvent = {
@@ -183,6 +181,4 @@ click(element) {
       default:
-        clickElement(element);
+        clickElement(element, wasAnotherElementFocused && focusedElement);
     }
-
-    blurFocusedElement(element, focusedElement, wasAnotherElementFocused);
   },
@@ -203,3 +199,3 @@
         if (element.type === "checkbox") {
-          dblClickCheckbox(element);
+          dblClickCheckbox(element, wasAnotherElementFocused && focusedElement);
           break;
@@ -209,6 +205,4 @@ }
       default:
-        dblClickElement(element);
+        dblClickElement(element, wasAnotherElementFocused && focusedElement);
     }
-
-    blurFocusedElement(element, focusedElement, wasAnotherElementFocused);
   },
@@ -226,3 +220,3 @@
 
-    clickElement(element);
+    clickElement(element, wasAnotherElementFocused && focusedElement);
     const valArray = Array.isArray(values) ? values : [values];
@@ -238,4 +232,2 @@ const selectedOptions = Array.from(element.querySelectorAll("option")).filter(opt => valArray.includes(opt.value));
     }
-
-    blurFocusedElement(element, focusedElement, wasAnotherElementFocused);
   },
@@ -242,0 +234,0 @@

package.json

 {
   "name": "@testing-library/user-event",
-  "version": "8.1.1",
+  "version": "8.1.2",
   "description": "Simulate user events for react-testing-library",
@@ -5,0 +5,0 @@ "keywords": [

README.md

@@ -263,2 +263,5 @@ <div align="center">
   </tr>
+  <tr>
+    <td align="center"><a href="http://thejoemorgan.com"><img src="https://avatars1.githubusercontent.com/u/2388943?v=4" width="100px;" alt=""/><br /><sub><b>Joe Morgan</b></sub></a><br /><a href="https://github.com/testing-library/user-event/commits?author=jsmapr1" title="Code">💻</a></td>
+  </tr>
 </table>
@@ -265,0 +268,0 @@

src/index.js

@@ -44,3 +44,3 @@ import { fireEvent } from "@testing-library/dom";
 
-function clickElement(element) {
+function clickElement(element, previousElement) {
   fireEvent.mouseOver(element);
@@ -50,2 +50,3 @@ fireEvent.mouseMove(element);
   if (continueDefaultHandling) {
+    previousElement && previousElement.blur();
     element.focus();
@@ -60,7 +61,10 @@ }
 
-function dblClickElement(element) {
+function dblClickElement(element, previousElement) {
   fireEvent.mouseOver(element);
   fireEvent.mouseMove(element);
-  fireEvent.mouseDown(element);
-  element.focus();
+  const continueDefaultHandling = fireEvent.mouseDown(element);
+  if (continueDefaultHandling) {
+    previousElement && previousElement.blur();
+    element.focus();
+  }
   fireEvent.mouseUp(element);
@@ -107,11 +111,2 @@ fireEvent.click(element);
 
-function blurFocusedElement(element, focusedElement, wasAnotherElementFocused) {
-  if (
-    wasAnotherElementFocused &&
-    element.ownerDocument.activeElement === element
-  ) {
-    focusedElement.blur();
-  }
-}
-
 const userEvent = {
@@ -138,6 +133,4 @@ click(element) {
       default:
-        clickElement(element);
+        clickElement(element, wasAnotherElementFocused && focusedElement);
     }
-
-    blurFocusedElement(element, focusedElement, wasAnotherElementFocused);
   },
@@ -157,10 +150,8 @@
         if (element.type === "checkbox") {
-          dblClickCheckbox(element);
+          dblClickCheckbox(element, wasAnotherElementFocused && focusedElement);
           break;
         }
       default:
-        dblClickElement(element);
+        dblClickElement(element, wasAnotherElementFocused && focusedElement);
     }
-
-    blurFocusedElement(element, focusedElement, wasAnotherElementFocused);
   },
@@ -177,3 +168,3 @@
 
-    clickElement(element);
+    clickElement(element, wasAnotherElementFocused && focusedElement);
 
@@ -192,4 +183,2 @@ const valArray = Array.isArray(values) ? values : [values];
     }
-
-    blurFocusedElement(element, focusedElement, wasAnotherElementFocused);
   },
@@ -196,0 +185,0 @@

New alerts

License Policy Violation

License

This package is not allowed per your license policy. Review the package's license to ensure compliance.

Found 1 instance in 1 package

Fixed alerts

License Policy Violation

License

This package is not allowed per your license policy. Review the package's license to ensure compliance.

Found 1 instance in 1 package

Improved metrics

Total package byte prevSize

12876307

increased by0.03%

Lines of code

2482

increased by6.25%

Number of lines in readme file

275

increased by1.1%

No dependency changes