react-select-event - npm Package Compare versions

Comparing version 5.0.0 to 5.1.0

lib/react-select-event.cjs.js

@@ -7,2 +7,24 @@ 'use strict';
 
+/**
+ * A simple compatibility method for react's "act".
+ * If a recent version of @testing-library/react is already installed,
+ * we just use their implementation - it's complete and has useful warnings.
+ * Otherwise, we just default to a noop.
+ *
+ * We need this because react-select-event doesn't actually pin a
+ * dependency version for @testing-library/react!
+ */
+let act;
+
+try {
+  act = require("@testing-library/react").act;
+} catch (_) {
+  // istanbul ignore next
+  act = callback => {
+    callback();
+  };
+}
+
+var act$1 = act;
+
 /** Simulate user events on react-select dropdowns */
@@ -38,7 +60,9 @@
 const clear = async (input, clearButton) => {
-  dom.fireEvent.mouseDown(clearButton);
-  dom.fireEvent.click(clearButton); // react-select will prevent the menu from opening, and asynchronously focus the select field...
+  await act$1(async () => {
+    dom.fireEvent.mouseDown(clearButton);
+    dom.fireEvent.click(clearButton); // react-select will prevent the menu from opening, and asynchronously focus the select field...
 
-  await dom.waitFor(() => {});
-  input.blur();
+    await dom.waitFor(() => {});
+    input.blur();
+  });
 };
@@ -56,17 +80,19 @@
   const options = Array.isArray(optionOrOptions) ? optionOrOptions : [optionOrOptions];
-  const container = config.container || getReactSelectContainerFromInput(input); // Select the items we care about
+  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
 
-  for (const option of options) {
-    openMenu(input); // only consider visible, interactive elements
+      const matchingElements = await dom.findAllByText(container, option, {
+        // @ts-ignore invalid rtl types :'(
+        ignore: "[aria-live] *,[style*='visibility: hidden']"
+      }); // When the target option is already selected, the react-select display text
+      // will also match the selector. In this case, the actual dropdown element is
+      // positionned last in the DOM tree.
 
-    const matchingElements = await dom.findAllByText(container, option, {
-      // @ts-ignore invalid rtl types :'(
-      ignore: "[aria-live] *,[style*='visibility: hidden']"
-    }); // When the target option is already selected, the react-select display text
-    // will also match the selector. In this case, the actual dropdown element is
-    // positionned last in the DOM tree.
-
-    const optionElement = matchingElements[matchingElements.length - 1];
-    dom.fireEvent.click(optionElement);
-  }
+      const optionElement = matchingElements[matchingElements.length - 1];
+      dom.fireEvent.click(optionElement);
+    }
+  });
 };
@@ -73,0 +99,0 @@

lib/react-select-event.es.js

 import { fireEvent, findAllByText, findByText, waitFor } from '@testing-library/dom';
 
+/**
+ * A simple compatibility method for react's "act".
+ * If a recent version of @testing-library/react is already installed,
+ * we just use their implementation - it's complete and has useful warnings.
+ * Otherwise, we just default to a noop.
+ *
+ * We need this because react-select-event doesn't actually pin a
+ * dependency version for @testing-library/react!
+ */
+let act;
+
+try {
+  act = require("@testing-library/react").act;
+} catch (_) {
+  // istanbul ignore next
+  act = callback => {
+    callback();
+  };
+}
+
+var act$1 = act;
+
 /** Simulate user events on react-select dropdowns */
@@ -33,7 +55,9 @@
 const clear = async (input, clearButton) => {
-  fireEvent.mouseDown(clearButton);
-  fireEvent.click(clearButton); // react-select will prevent the menu from opening, and asynchronously focus the select field...
+  await act$1(async () => {
+    fireEvent.mouseDown(clearButton);
+    fireEvent.click(clearButton); // react-select will prevent the menu from opening, and asynchronously focus the select field...
 
-  await waitFor(() => {});
-  input.blur();
+    await waitFor(() => {});
+    input.blur();
+  });
 };
@@ -51,17 +75,19 @@
   const options = Array.isArray(optionOrOptions) ? optionOrOptions : [optionOrOptions];
-  const container = config.container || getReactSelectContainerFromInput(input); // Select the items we care about
+  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
 
-  for (const option of options) {
-    openMenu(input); // only consider visible, interactive elements
+      const matchingElements = await findAllByText(container, option, {
+        // @ts-ignore invalid rtl types :'(
+        ignore: "[aria-live] *,[style*='visibility: hidden']"
+      }); // When the target option is already selected, the react-select display text
+      // will also match the selector. In this case, the actual dropdown element is
+      // positionned last in the DOM tree.
 
-    const matchingElements = await findAllByText(container, option, {
-      // @ts-ignore invalid rtl types :'(
-      ignore: "[aria-live] *,[style*='visibility: hidden']"
-    }); // When the target option is already selected, the react-select display text
-    // will also match the selector. In this case, the actual dropdown element is
-    // positionned last in the DOM tree.
-
-    const optionElement = matchingElements[matchingElements.length - 1];
-    fireEvent.click(optionElement);
-  }
+      const optionElement = matchingElements[matchingElements.length - 1];
+      fireEvent.click(optionElement);
+    }
+  });
 };
@@ -68,0 +94,0 @@

package.json

 {
   "name": "react-select-event",
-  "version": "5.0.0",
+  "version": "5.1.0",
   "description": "Simulate react-select events for react-testing-library",
@@ -39,3 +39,3 @@ "main": "lib/react-select-event.cjs.js",
   "dependencies": {
-    "@testing-library/dom": ">=5"
+    "@testing-library/dom": ">=7"
   },
@@ -50,3 +50,3 @@ "devDependencies": {
     "@testing-library/jest-dom": "^5.0.1",
-    "@testing-library/react": "^10.0.1",
+    "@testing-library/react": "^11.0.2",
     "@types/jest": "^26.0.0",
@@ -65,4 +65,4 @@ "@types/react": "^16.8.19",
     "test-all-versions": "^5.0.0",
-    "typescript": "^3.4.5"
+    "typescript": "^4.0.2"
   }
 }

README.md

@@ -185,10 +185,10 @@ <div align="center">
 const { getByLabelText, queryByText } = render(
-  <form role="form">
+  <form>
     <label htmlFor="food">Food</label>
-    <Select options={[{ label: "Pizza", value: 1 }]} />
+    <Select options={[{ label: "Pizza", value: 1 }]} inputId="food" />
   </form>
 );
 expect(queryByText("Pizza")).toBeNull();
-await selectEvent.openMenu(getByLabelText("Food"));
-expect(queryByText("Pizza")).toBeInTheDocument();
+selectEvent.openMenu(getByLabelText("Food"));
+expect(getByText("Pizza")).toBeInTheDocument();
 ```
@@ -195,0 +195,0 @@

src/index.ts

@@ -9,2 +9,3 @@ /** Simulate user events on react-select dropdowns */
 } from "@testing-library/dom";
+import act from "./act-compat";
 
@@ -37,7 +38,9 @@ // find the react-select container from its input field 🤷
 const clear = async (input: HTMLElement, clearButton: Element) => {
-  fireEvent.mouseDown(clearButton);
-  fireEvent.click(clearButton);
-  // react-select will prevent the menu from opening, and asynchronously focus the select field...
-  await waitFor(() => {});
-  input.blur();
+  await act(async () => {
+    fireEvent.mouseDown(clearButton);
+    fireEvent.click(clearButton);
+    // react-select will prevent the menu from opening, and asynchronously focus the select field...
+    await waitFor(() => {});
+    input.blur();
+  });
 };
@@ -70,18 +73,20 @@
 
-  // Select the items we care about
-  for (const option of options) {
-    openMenu(input);
+  await act(async () => {
+    // Select the items we care about
+    for (const option of options) {
+      openMenu(input);
 
-    // only consider visible, interactive elements
-    const matchingElements = await findAllByText(container, option, {
-      // @ts-ignore invalid rtl types :'(
-      ignore: "[aria-live] *,[style*='visibility: hidden']",
-    });
+      // only consider visible, interactive elements
+      const matchingElements = await findAllByText(container, option, {
+        // @ts-ignore invalid rtl types :'(
+        ignore: "[aria-live] *,[style*='visibility: hidden']",
+      });
 
-    // When the target option is already selected, the react-select display text
-    // will also match the selector. In this case, the actual dropdown element is
-    // positionned last in the DOM tree.
-    const optionElement = matchingElements[matchingElements.length - 1];
-    fireEvent.click(optionElement);
-  }
+      // When the target option is already selected, the react-select display text
+      // will also match the selector. In this case, the actual dropdown element is
+      // positionned last in the DOM tree.
+      const optionElement = matchingElements[matchingElements.length - 1];
+      fireEvent.click(optionElement);
+    }
+  });
 };
@@ -88,0 +93,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

45193

increased by6.52%

Number of package files

10

increased by25%

Lines of code

861

increased by11.53%

Dependency changes

• Updated@testing-library/dom@>=7