react-select-event - npm Package Compare versions

Comparing version 5.1.0 to 5.2.0

lib/index.d.ts

@@ -11,3 +11,3 @@ /** Simulate user events on react-select dropdowns */
      */
-    container?: HTMLElement;
+    container?: HTMLElement | (() => HTMLElement);
 }
@@ -19,6 +19,7 @@ /**
  * @param {Object} config Optional config options
- * @param {HTMLElement} config.container A container for the react-select and its dropdown (defaults to the react-select container)
- *                         Useful when rending the dropdown to a portal using react-select's `menuPortalTarget`
+ * @param {HTMLElement | (() => HTMLElement)} config.container A container for the react-select and its dropdown (defaults to the react-select container)
+ *            Useful when rending the dropdown to a portal using react-select's `menuPortalTarget`.
+ *            Can be specified as a function if it needs to be lazily evaluated.
  */
-export declare const select: (input: HTMLElement, optionOrOptions: string | RegExp | (string | RegExp)[], config?: Config) => Promise<void>;
+export declare const select: (input: HTMLElement, optionOrOptions: string | RegExp | Array<string | RegExp>, config?: Config) => Promise<void>;
 interface CreateConfig extends Config {
@@ -51,3 +52,3 @@ createOptionText?: string | RegExp;
 declare const selectEvent: {
-    select: (input: HTMLElement, optionOrOptions: string | RegExp | (string | RegExp)[], config?: Config) => Promise<void>;
+    select: (input: HTMLElement, optionOrOptions: string | RegExp | Array<string | RegExp>, config?: Config) => Promise<void>;
     create: (input: HTMLElement, option: string, { waitForElement, ...config }?: CreateConfig) => Promise<void>;
@@ -54,0 +55,0 @@ clearFirst: (input: HTMLElement) => Promise<void>;

lib/react-select-event.cjs.js

@@ -73,13 +73,26 @@ 'use strict';
  * @param {Object} config Optional config options
- * @param {HTMLElement} config.container A container for the react-select and its dropdown (defaults to the react-select container)
- *                         Useful when rending the dropdown to a portal using react-select's `menuPortalTarget`
+ * @param {HTMLElement | (() => HTMLElement)} config.container A container for the react-select and its dropdown (defaults to the react-select container)
+ *            Useful when rending the dropdown to a portal using react-select's `menuPortalTarget`.
+ *            Can be specified as a function if it needs to be lazily evaluated.
  */
 const select = async (input, optionOrOptions, config = {}) => {
   const options = Array.isArray(optionOrOptions) ? optionOrOptions : [optionOrOptions];
-  const container = config.container || getReactSelectContainerFromInput(input);
   await act$1(async () => {
     // Select the items we care about
     for (const option of options) {
-      openMenu(input); // only consider visible, interactive elements
+      openMenu(input);
+      let container;
 
+      if (typeof config.container === "function") {
+        // when specified as a function, the container needs to be lazily evaluated, so
+        // we have to wait for it to be visible:
+        await dom.waitFor(config.container);
+        container = config.container();
+      } else if (config.container) {
+        container = config.container;
+      } else {
+        container = getReactSelectContainerFromInput(input);
+      } // only consider visible, interactive elements
+
+
       const matchingElements = await dom.findAllByText(container, option, {
@@ -86,0 +99,0 @@ // @ts-ignore invalid rtl types :'(

lib/react-select-event.es.js

@@ -1,2 +0,2 @@
-import { fireEvent, findAllByText, findByText, waitFor } from '@testing-library/dom';
+import { fireEvent, waitFor, findAllByText, findByText } from '@testing-library/dom';
 
@@ -69,13 +69,26 @@ /**
  * @param {Object} config Optional config options
- * @param {HTMLElement} config.container A container for the react-select and its dropdown (defaults to the react-select container)
- *                         Useful when rending the dropdown to a portal using react-select's `menuPortalTarget`
+ * @param {HTMLElement | (() => HTMLElement)} config.container A container for the react-select and its dropdown (defaults to the react-select container)
+ *            Useful when rending the dropdown to a portal using react-select's `menuPortalTarget`.
+ *            Can be specified as a function if it needs to be lazily evaluated.
  */
 const select = async (input, optionOrOptions, config = {}) => {
   const options = Array.isArray(optionOrOptions) ? optionOrOptions : [optionOrOptions];
-  const container = config.container || getReactSelectContainerFromInput(input);
   await act$1(async () => {
     // Select the items we care about
     for (const option of options) {
-      openMenu(input); // only consider visible, interactive elements
+      openMenu(input);
+      let container;
 
+      if (typeof config.container === "function") {
+        // when specified as a function, the container needs to be lazily evaluated, so
+        // we have to wait for it to be visible:
+        await waitFor(config.container);
+        container = config.container();
+      } else if (config.container) {
+        container = config.container;
+      } else {
+        container = getReactSelectContainerFromInput(input);
+      } // only consider visible, interactive elements
+
+
       const matchingElements = await findAllByText(container, option, {
@@ -82,0 +95,0 @@ // @ts-ignore invalid rtl types :'(

package.json

 {
   "name": "react-select-event",
-  "version": "5.1.0",
+  "version": "5.2.0",
   "description": "Simulate react-select events for react-testing-library",
@@ -51,4 +51,4 @@ "main": "lib/react-select-event.cjs.js",
     "@types/jest": "^26.0.0",
-    "@types/react": "^16.8.19",
-    "@types/react-select": "^3.0.8",
+    "@types/react": "^17.0.0",
+    "@types/react-select": "^4.0.13",
     "jest": "^26.0.0",
@@ -58,3 +58,3 @@ "prettier": "^2.0.2",
     "react-dom": "^16.9.0",
-    "react-select": "^3.0.8",
+    "react-select": "^4.0.2",
     "rimraf": "^3.0.0",
@@ -61,0 +61,0 @@ "rollup": "^2.0.3",

README.md

@@ -111,2 +111,23 @@ <div align="center">
 
+The container can also be passed in as a function if it needs to be lazily evaluated:
+
+```jsx
+const { getByRole, getByLabelText } = render(
+  <form role="form">
+    <label htmlFor="food">Food</label>
+    <Select
+      options={OPTIONS}
+      name="food"
+      inputId="food"
+      isMulti
+      menuPortalTarget={document.body}
+    />
+  </form>
+);
+await selectEvent.select(getByLabelText("Food"), ["Strawberry", "Mango"], {
+  container: () => document.body.querySelector("[class$=-menu]"),
+});
+expect(getByRole("form")).toHaveFormValues({ food: ["strawberry", "mango"] });
+```
+
 ### `create(input: HTMLElement, option: string, config?: object): Promise<void> }`
@@ -113,0 +134,0 @@

src/index.ts

@@ -50,3 +50,3 @@ /** Simulate user events on react-select dropdowns */
    */
-  container?: HTMLElement;
+  container?: HTMLElement | (() => HTMLElement);
 }
@@ -59,4 +59,5 @@
  * @param {Object} config Optional config options
- * @param {HTMLElement} config.container A container for the react-select and its dropdown (defaults to the react-select container)
- *                         Useful when rending the dropdown to a portal using react-select's `menuPortalTarget`
+ * @param {HTMLElement | (() => HTMLElement)} config.container A container for the react-select and its dropdown (defaults to the react-select container)
+ *            Useful when rending the dropdown to a portal using react-select's `menuPortalTarget`.
+ *            Can be specified as a function if it needs to be lazily evaluated.
  */
@@ -71,3 +72,2 @@ export const select = async (
     : [optionOrOptions];
-  const container = config.container || getReactSelectContainerFromInput(input);
 
@@ -79,2 +79,13 @@ await act(async () => {
 
+      let container;
+      if (typeof config.container === "function") {
+        // when specified as a function, the container needs to be lazily evaluated, so
+        // we have to wait for it to be visible:
+        await waitFor(config.container);
+        container = config.container();
+      } else if (config.container) {
+        container = config.container;
+      } else {
+        container = getReactSelectContainerFromInput(input);
+      }
       // only consider visible, interactive elements
@@ -81,0 +92,0 @@ const matchingElements = await findAllByText(container, option, {

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

47986

increased by6.18%

Lines of code

911

increased by5.81%

Number of lines in readme file

219

increased by10.61%

No dependency changes