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

Comparing version 8.0.7 to 8.1.0

__tests__/react/type.js

@@ -138,2 +138,53 @@ import React from "react";
   );
+
+  it.each(["input", "textarea"])(
+    "should type text in <%s> up to maxLength if provided",
+    type => {
+      const onChange = jest.fn();
+      const onKeyDown = jest.fn();
+      const onKeyPress = jest.fn();
+      const onKeyUp = jest.fn();
+      const maxLength = 10;
+
+      const { getByTestId } = render(
+        React.createElement(type, {
+          "data-testid": "input",
+          onChange,
+          onKeyDown,
+          onKeyPress,
+          onKeyUp,
+          maxLength
+        })
+      );
+
+      const text = "superlongtext";
+      const slicedText = text.slice(0, maxLength);
+
+      const inputEl = getByTestId("input");
+
+      userEvent.type(inputEl, text);
+
+      expect(inputEl).toHaveProperty("value", slicedText);
+      expect(onChange).toHaveBeenCalledTimes(slicedText.length);
+      expect(onKeyPress).toHaveBeenCalledTimes(text.length);
+      expect(onKeyDown).toHaveBeenCalledTimes(text.length);
+      expect(onKeyUp).toHaveBeenCalledTimes(text.length);
+
+      inputEl.value = "";
+      onChange.mockClear();
+      onKeyPress.mockClear();
+      onKeyDown.mockClear();
+      onKeyUp.mockClear();
+
+      userEvent.type(inputEl, text, {
+        allAtOnce: true
+      });
+
+      expect(inputEl).toHaveProperty("value", slicedText);
+      expect(onChange).toHaveBeenCalledTimes(1);
+      expect(onKeyPress).not.toHaveBeenCalled();
+      expect(onKeyDown).not.toHaveBeenCalled();
+      expect(onKeyUp).not.toHaveBeenCalled();
+    }
+  );
 });

__tests__/vue/type.js

@@ -148,2 +148,46 @@ import { cleanup, render, wait, fireEvent } from "@testing-library/vue";
   );
+
+  it.each(["input", "textarea"])(
+    "should type text in <%s> up to maxLength if provided",
+    type => {
+      const input = jest.fn();
+      const keydown = jest.fn();
+      const keypress = jest.fn();
+      const keyup = jest.fn();
+      const maxLength = 10;
+
+      const { getByTestId } = renderComponent(
+        type,
+        { input, keydown, keypress, keyup },
+        { maxLength }
+      );
+
+      const text = "superlongtext";
+      const slicedText = text.slice(0, maxLength);
+
+      const inputEl = getByTestId("input");
+
+      userEvent.type(inputEl, text);
+      expect(inputEl).toHaveProperty("value", slicedText);
+      expect(keydown).toHaveBeenCalledTimes(text.length);
+      expect(keypress).toHaveBeenCalledTimes(text.length);
+      expect(keyup).toHaveBeenCalledTimes(text.length);
+
+      inputEl.value = "";
+      input.mockClear();
+      keydown.mockClear();
+      keypress.mockClear();
+      keyup.mockClear();
+
+      userEvent.type(inputEl, text, {
+        allAtOnce: true
+      });
+
+      expect(inputEl).toHaveProperty("value", slicedText);
+      expect(input).toHaveBeenCalledTimes(1);
+      expect(keydown).not.toHaveBeenCalled();
+      expect(keypress).not.toHaveBeenCalled();
+      expect(keyup).not.toHaveBeenCalled();
+    }
+  );
 });

dist/index.js

@@ -220,3 +220,3 @@ "use strict";
     const valArray = Array.isArray(values) ? values : [values];
-    const selectedOptions = Array.from(element.querySelectorAll('option')).filter(opt => valArray.includes(opt.value));
+    const selectedOptions = Array.from(element.querySelectorAll("option")).filter(opt => valArray.includes(opt.value));
 
@@ -241,2 +241,3 @@ if (selectedOptions.length > 0) {
     const opts = Object.assign(defaultOpts, userOpts);
+    const computedText = text.slice(0, element.maxLength || text.length);
 
@@ -248,3 +249,3 @@ if (opts.allAtOnce) {
         target: {
-          value: text
+          value: computedText
         }
@@ -275,3 +276,5 @@ });
 
-          if (pressEvent) {
+          const isTextPastThreshold = (actuallyTyped + key).length > computedText.length;
+
+          if (pressEvent && !isTextPastThreshold) {
             actuallyTyped += key;
@@ -278,0 +281,0 @@ if (!element.readOnly) _dom.fireEvent.input(element, {

package.json

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

README.md

@@ -260,2 +260,4 @@ <div align="center">
     <td align="center"><a href="http://jordy.app"><img src="https://avatars3.githubusercontent.com/u/12712484?v=4" width="100px;" alt=""/><br /><sub><b>jordyvandomselaar</b></sub></a><br /><a href="https://github.com/testing-library/user-event/commits?author=jordyvandomselaar" title="Code">💻</a> <a href="https://github.com/testing-library/user-event/commits?author=jordyvandomselaar" title="Tests">⚠️</a></td>
+    <td align="center"><a href="https://lyamkin.com"><img src="https://avatars2.githubusercontent.com/u/3854930?v=4" width="100px;" alt=""/><br /><sub><b>Ilya Lyamkin</b></sub></a><br /><a href="https://github.com/testing-library/user-event/commits?author=ilyamkin" title="Code">💻</a> <a href="https://github.com/testing-library/user-event/commits?author=ilyamkin" title="Tests">⚠️</a></td>
+    <td align="center"><a href="http://todofullstack.com"><img src="https://avatars2.githubusercontent.com/u/4474353?v=4" width="100px;" alt=""/><br /><sub><b>Kenneth Luján Rosas</b></sub></a><br /><a href="https://github.com/testing-library/user-event/commits?author=klujanrosas" title="Code">💻</a> <a href="https://github.com/testing-library/user-event/commits?author=klujanrosas" title="Tests">⚠️</a></td>
   </tr>
@@ -262,0 +264,0 @@ </table>

src/index.js

 import { fireEvent } from "@testing-library/dom";
 
 function wait(time) {
-  return new Promise(function (resolve) {
+  return new Promise(function(resolve) {
     setTimeout(() => resolve(), time);
@@ -174,5 +174,5 @@ });
     const valArray = Array.isArray(values) ? values : [values];
-    const selectedOptions = Array.from(element.querySelectorAll('option')).filter(
-      opt => valArray.includes(opt.value)
-    );
+    const selectedOptions = Array.from(
+      element.querySelectorAll("option")
+    ).filter(opt => valArray.includes(opt.value));
 
@@ -197,5 +197,8 @@ if (selectedOptions.length > 0) {
     const opts = Object.assign(defaultOpts, userOpts);
+
+    const computedText = text.slice(0, element.maxLength || text.length);
+
     if (opts.allAtOnce) {
       if (element.readOnly) return;
-      fireEvent.input(element, { target: { value: text } });
+      fireEvent.input(element, { target: { value: computedText } });
     } else {
@@ -215,2 +218,3 @@ let actuallyTyped = "";
         });
+
         if (downEvent) {
@@ -222,3 +226,7 @@ const pressEvent = fireEvent.keyPress(element, {
           });
-          if (pressEvent) {
+
+          const isTextPastThreshold =
+            (actuallyTyped + key).length > computedText.length;
+
+          if (pressEvent && !isTextPastThreshold) {
             actuallyTyped += key;
@@ -251,5 +259,7 @@ if (!element.readOnly)
 
-    let list = Array.prototype.filter.call(focusableElements, function (item) {
-      return item.getAttribute("tabindex") !== "-1"&& !item.disabled;
-    }).map((el, idx) => ({ el, idx }))
+    let list = Array.prototype.filter
+      .call(focusableElements, function(item) {
+        return item.getAttribute("tabindex") !== "-1" && !item.disabled;
+      })
+      .map((el, idx) => ({ el, idx }))
       .sort((a, b) => {
@@ -262,3 +272,3 @@ const tabIndexA = a.el.getAttribute("tabindex");
         return diff !== 0 ? diff : a.idx - b.idx;
-      })
+      });
 
@@ -270,3 +280,3 @@ const index = list.findIndex(({ el }) => el === document.activeElement);
 
-    const { el: next } = (list[nextIndex] || list[defaultIndex]);
+    const { el: next } = list[nextIndex] || list[defaultIndex];
 
@@ -273,0 +283,0 @@ if (next.getAttribute("tabindex") === null) {

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

12871967

increased by0.03%

Lines of code

2336

increased by3.78%

Number of lines in readme file

272

increased by0.74%

No dependency changes