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

Comparing version 4.0.0 to 4.1.0

dist/index.js

@@ -125,2 +125,18 @@ "use strict";
 
+function selectOption(option) {
+  _dom.fireEvent.mouseOver(option);
+
+  _dom.fireEvent.mouseMove(option);
+
+  _dom.fireEvent.mouseDown(option);
+
+  _dom.fireEvent.focus(option);
+
+  _dom.fireEvent.mouseUp(option);
+
+  _dom.fireEvent.click(option);
+
+  option.selected = true;
+}
+
 const userEvent = {
@@ -179,2 +195,27 @@ click(element) {
 
+  selectOptions(element, values) {
+    const focusedElement = document.activeElement;
+    const wasAnotherElementFocused = focusedElement !== document.body && focusedElement !== element;
+
+    if (wasAnotherElementFocused) {
+      _dom.fireEvent.mouseMove(focusedElement);
+
+      _dom.fireEvent.mouseLeave(focusedElement);
+    }
+
+    clickElement(element);
+    const valArray = Array.isArray(values) ? values : [values];
+    const selectedOptions = Array.from(element.children).filter(opt => opt.tagName === "OPTION" && valArray.includes(opt.value));
+
+    if (selectedOptions.length > 0) {
+      if (element.multiple) {
+        selectedOptions.forEach(option => selectOption(option));
+      } else {
+        selectOption(selectedOptions[0]);
+      }
+    }
+
+    wasAnotherElementFocused && focusedElement.blur();
+  },
+
   async type(element, text, userOpts = {}) {
@@ -181,0 +222,0 @@ const defaultOpts = {

package.json

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

README.md

@@ -23,3 +23,3 @@ <div align="center">
 [![Test Coverage](https://api.codeclimate.com/v1/badges/75f1ff4397e994c6004e/test_coverage)](https://codeclimate.com/github/testing-library/user-event/test_coverage)
-[![All Contributors](https://img.shields.io/badge/all_contributors-4-orange.svg?style=flat-square)](#contributors)
+[![All Contributors](https://img.shields.io/badge/all_contributors-5-orange.svg?style=flat-square)](#contributors)
 
@@ -137,2 +137,36 @@ ## The problem
 
+### `selectOptions(element, values)`
+
+Selects the specified option(s) of a `<select>` or a `<select multiple>`
+element.
+
+```jsx
+import React from "react";
+import { render } from "@testing-library/react";
+import userEvent from "@testing-library/user-event";
+
+const { getByTestId } = render(
+  <select multiple data-testid="select-multiple">
+    <option data-testid="val1" value="1">
+      1
+    </option>
+    <option data-testid="val2" value="2">
+      2
+    </option>
+    <option data-testid="val3" value="3">
+      3
+    </option>
+  </select>
+);
+
+userEvent.selectOptions(getByTestId("select-multiple"), ["1", "3"]);
+
+expect(getByTestId("val1").selected).toBe(true);
+expect(getByTestId("val2").selected).toBe(false);
+expect(getByTestId("val3").selected).toBe(true);
+```
+
+The `values` parameter can be either an array of values or a singular scalar
+value.
+
 ## Contributors
@@ -145,3 +179,3 @@
 <!-- prettier-ignore -->
-<table><tr><td align="center"><a href="https://twitter.com/Gpx"><img src="https://avatars0.githubusercontent.com/u/767959?v=4" width="100px;" alt="Giorgio Polvara"/><br /><sub><b>Giorgio Polvara</b></sub></a><br /><a href="https://github.com/testing-library/user-event/issues?q=author%3AGpx" title="Bug reports">🐛</a> <a href="https://github.com/testing-library/user-event/commits?author=Gpx" title="Code">💻</a> <a href="https://github.com/testing-library/user-event/commits?author=Gpx" title="Documentation">📖</a> <a href="#ideas-Gpx" title="Ideas, Planning, & Feedback">🤔</a> <a href="#infra-Gpx" title="Infrastructure (Hosting, Build-Tools, etc)">🚇</a> <a href="#review-Gpx" title="Reviewed Pull Requests">👀</a> <a href="https://github.com/testing-library/user-event/commits?author=Gpx" title="Tests">⚠️</a></td><td align="center"><a href="https://github.com/weyert"><img src="https://avatars3.githubusercontent.com/u/7049?v=4" width="100px;" alt="Weyert de Boer"/><br /><sub><b>Weyert de Boer</b></sub></a><br /><a href="https://github.com/testing-library/user-event/commits?author=weyert" title="Code">💻</a> <a href="https://github.com/testing-library/user-event/commits?author=weyert" title="Tests">⚠️</a></td><td align="center"><a href="https://github.com/twhitbeck"><img src="https://avatars2.githubusercontent.com/u/762471?v=4" width="100px;" alt="Tim Whitbeck"/><br /><sub><b>Tim Whitbeck</b></sub></a><br /><a href="https://github.com/testing-library/user-event/issues?q=author%3Atwhitbeck" title="Bug reports">🐛</a> <a href="https://github.com/testing-library/user-event/commits?author=twhitbeck" title="Code">💻</a></td><td align="center"><a href="https://michaeldeboey.be"><img src="https://avatars3.githubusercontent.com/u/6643991?v=4" width="100px;" alt="Michaël De Boey"/><br /><sub><b>Michaël De Boey</b></sub></a><br /><a href="https://github.com/testing-library/user-event/commits?author=MichaelDeBoey" title="Documentation">📖</a></td></tr></table>
+<table><tr><td align="center"><a href="https://twitter.com/Gpx"><img src="https://avatars0.githubusercontent.com/u/767959?v=4" width="100px;" alt="Giorgio Polvara"/><br /><sub><b>Giorgio Polvara</b></sub></a><br /><a href="https://github.com/testing-library/user-event/issues?q=author%3AGpx" title="Bug reports">🐛</a> <a href="https://github.com/testing-library/user-event/commits?author=Gpx" title="Code">💻</a> <a href="https://github.com/testing-library/user-event/commits?author=Gpx" title="Documentation">📖</a> <a href="#ideas-Gpx" title="Ideas, Planning, & Feedback">🤔</a> <a href="#infra-Gpx" title="Infrastructure (Hosting, Build-Tools, etc)">🚇</a> <a href="#review-Gpx" title="Reviewed Pull Requests">👀</a> <a href="https://github.com/testing-library/user-event/commits?author=Gpx" title="Tests">⚠️</a></td><td align="center"><a href="https://github.com/weyert"><img src="https://avatars3.githubusercontent.com/u/7049?v=4" width="100px;" alt="Weyert de Boer"/><br /><sub><b>Weyert de Boer</b></sub></a><br /><a href="https://github.com/testing-library/user-event/commits?author=weyert" title="Code">💻</a> <a href="https://github.com/testing-library/user-event/commits?author=weyert" title="Tests">⚠️</a></td><td align="center"><a href="https://github.com/twhitbeck"><img src="https://avatars2.githubusercontent.com/u/762471?v=4" width="100px;" alt="Tim Whitbeck"/><br /><sub><b>Tim Whitbeck</b></sub></a><br /><a href="https://github.com/testing-library/user-event/issues?q=author%3Atwhitbeck" title="Bug reports">🐛</a> <a href="https://github.com/testing-library/user-event/commits?author=twhitbeck" title="Code">💻</a></td><td align="center"><a href="https://michaeldeboey.be"><img src="https://avatars3.githubusercontent.com/u/6643991?v=4" width="100px;" alt="Michaël De Boey"/><br /><sub><b>Michaël De Boey</b></sub></a><br /><a href="https://github.com/testing-library/user-event/commits?author=MichaelDeBoey" title="Documentation">📖</a></td><td align="center"><a href="https://github.com/michaellasky"><img src="https://avatars2.githubusercontent.com/u/6646599?v=4" width="100px;" alt="Michael Lasky"/><br /><sub><b>Michael Lasky</b></sub></a><br /><a href="https://github.com/testing-library/user-event/commits?author=michaellasky" title="Code">💻</a> <a href="https://github.com/testing-library/user-event/commits?author=michaellasky" title="Documentation">📖</a> <a href="#ideas-michaellasky" title="Ideas, Planning, & Feedback">🤔</a></td></tr></table>
 
@@ -148,0 +182,0 @@ <!-- ALL-CONTRIBUTORS-LIST:END -->

src/index.js

@@ -85,2 +85,13 @@ import { fireEvent } from "@testing-library/dom";
 
+function selectOption(option) {
+  fireEvent.mouseOver(option);
+  fireEvent.mouseMove(option);
+  fireEvent.mouseDown(option);
+  fireEvent.focus(option);
+  fireEvent.mouseUp(option);
+  fireEvent.click(option);
+
+  option.selected = true;
+}
+
 const userEvent = {
@@ -134,2 +145,29 @@ click(element) {
 
+  selectOptions(element, values) {
+    const focusedElement = document.activeElement;
+    const wasAnotherElementFocused =
+      focusedElement !== document.body && focusedElement !== element;
+    if (wasAnotherElementFocused) {
+      fireEvent.mouseMove(focusedElement);
+      fireEvent.mouseLeave(focusedElement);
+    }
+
+    clickElement(element);
+
+    const valArray = Array.isArray(values) ? values : [values];
+    const selectedOptions = Array.from(element.children).filter(
+      opt => opt.tagName === "OPTION" && valArray.includes(opt.value)
+    );
+
+    if (selectedOptions.length > 0) {
+      if (element.multiple) {
+        selectedOptions.forEach(option => selectOption(option));
+      } else {
+        selectOption(selectedOptions[0]);
+      }
+    }
+
+    wasAnotherElementFocused && focusedElement.blur();
+  },
+
   async type(element, text, userOpts = {}) {
@@ -136,0 +174,0 @@ const defaultOpts = {

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

12798640

increased by0.07%

Number of package files

17

increased by6.25%

Lines of code

984

increased by27.63%

Number of lines in readme file

184

increased by22.67%

No dependency changes