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

Comparing version 4.2.3 to 4.2.4

__tests__/react/type.js

 import React from "react";
-import { cleanup, render, wait } from "@testing-library/react";
+import { cleanup, render, wait, fireEvent } from "@testing-library/react";
 import "@testing-library/jest-dom/extend-expect";
@@ -38,9 +38,11 @@ import userEvent from "../../src";
 
-  it("should delayed the typing when opts.dealy is not 0", async () => {
+  it("should delay the typing when opts.delay is not 0", async () => {
     jest.useFakeTimers();
     const onChange = jest.fn();
+    const onInput = jest.fn();
     const { getByTestId } = render(
       React.createElement("input", {
         "data-testid": "input",
-        onChange: onChange
+        onInput,
+        onChange
       })
@@ -50,6 +52,7 @@ );
     const delay = 10;
+    // Attach a native change listener because React cannot listen for text input change events
     userEvent.type(getByTestId("input"), text, {
       delay
     });
-    expect(onChange).not.toHaveBeenCalled();
+    expect(onInput).not.toHaveBeenCalled();
     expect(getByTestId("input")).not.toHaveProperty("value", text);
@@ -59,3 +62,4 @@
       jest.advanceTimersByTime(delay);
-      await wait(() => expect(onChange).toHaveBeenCalledTimes(i + 1));
+      await wait(() => expect(onInput).toHaveBeenCalledTimes(i + 1));
+      expect(onChange).toHaveBeenCalledTimes(i + 1);
       expect(getByTestId("input")).toHaveProperty(
@@ -66,2 +70,7 @@ "value",
     }
+    // Blurring the input "commits" the value, React's onChange should not fire
+    fireEvent.blur(getByTestId("input"));
+    await wait(() => expect(onChange).toHaveBeenCalledTimes(text.length), {
+      timeout: 300
+    });
   });
@@ -68,0 +77,0 @@

dist/index.js

@@ -135,6 +135,12 @@ "use strict";
 
+function fireChangeEvent(event) {
+  _dom.fireEvent.change(event.target);
+
+  event.target.removeEventListener("blur", fireChangeEvent);
+}
+
 const userEvent = {
   click(element) {
-    const focusedElement = document.activeElement;
-    const wasAnotherElementFocused = focusedElement !== document.body && focusedElement !== element;
+    const focusedElement = element.ownerDocument.activeElement;
+    const wasAnotherElementFocused = focusedElement !== element.ownerDocument.body && focusedElement !== element;
 
@@ -222,3 +228,3 @@ if (wasAnotherElementFocused) {
     if (opts.allAtOnce) {
-      _dom.fireEvent.change(element, {
+      _dom.fireEvent.input(element, {
         target: {
@@ -229,3 +235,2 @@ value: text
     } else {
-      const typedCharacters = text.split("");
       let actuallyTyped = "";
@@ -250,4 +255,3 @@
             keyCode,
-            charCode: keyCode,
-            keyCode: keyCode
+            charCode: keyCode
           });
@@ -258,3 +262,3 @@
 
-            _dom.fireEvent.change(element, {
+            _dom.fireEvent.input(element, {
               target: {
@@ -276,2 +280,4 @@ value: actuallyTyped
     }
+
+    element.addEventListener("blur", fireChangeEvent);
   }
@@ -278,0 +284,0 @@

package.json

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

src/index.js

@@ -93,7 +93,13 @@ import { fireEvent } from "@testing-library/dom";
 
+function fireChangeEvent(event) {
+  fireEvent.change(event.target);
+  event.target.removeEventListener("blur", fireChangeEvent);
+}
+
 const userEvent = {
   click(element) {
-    const focusedElement = document.activeElement;
+    const focusedElement = element.ownerDocument.activeElement;
     const wasAnotherElementFocused =
-      focusedElement !== document.body && focusedElement !== element;
+      focusedElement !== element.ownerDocument.body &&
+      focusedElement !== element;
     if (wasAnotherElementFocused) {
@@ -176,6 +182,4 @@ fireEvent.mouseMove(focusedElement);
     if (opts.allAtOnce) {
-      fireEvent.change(element, { target: { value: text } });
+      fireEvent.input(element, { target: { value: text } });
     } else {
-      const typedCharacters = text.split("");
-
       let actuallyTyped = "";
@@ -198,8 +202,7 @@ for (let index = 0; index < text.length; index++) {
             keyCode,
-            charCode: keyCode,
-            keyCode: keyCode
+            charCode: keyCode
           });
           if (pressEvent) {
             actuallyTyped += key;
-            fireEvent.change(element, {
+            fireEvent.input(element, {
               target: {
@@ -221,2 +224,3 @@ value: actuallyTyped
     }
+    element.addEventListener("blur", fireChangeEvent);
   }
@@ -223,0 +227,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

12813240

increased by0.01%

Lines of code

1357

increased by1.19%

No dependency changes