react-select-event - npm Package Compare versions

Comparing version 4.1.4 to 4.2.0

lib/index.d.ts

@@ -23,2 +23,3 @@ /** Simulate user events on react-select dropdowns */
 interface CreateConfig extends Config {
+    autoSelect?: boolean;
     createOptionText?: string | RegExp;
@@ -34,5 +35,6 @@ }
  *                         Useful when rending the dropdown to a portal using react-select's `menuPortalTarget`
+ * @param {boolean} config.autoSelect Whether to automatically select the newly created option or not
  * @param {String|RegExp} config.createOptionText Custom label for the "create new ..." option in the menu (string or regexp)
  */
-export declare const create: (input: HTMLElement, option: string, config?: CreateConfig) => Promise<void>;
+export declare const create: (input: HTMLElement, option: string, { autoSelect, ...config }?: CreateConfig) => Promise<void>;
 /**
@@ -50,3 +52,3 @@ * Utility for clearing the first value of a `react-select` dropdown.
     select: (input: HTMLElement, optionOrOptions: string | RegExp | (string | RegExp)[], config?: Config) => Promise<void>;
-    create: (input: HTMLElement, option: string, config?: CreateConfig) => Promise<void>;
+    create: (input: HTMLElement, option: string, { autoSelect, ...config }?: CreateConfig) => Promise<void>;
     clearFirst: (input: HTMLElement) => Promise<void>;
@@ -53,0 +55,0 @@ clearAll: (input: HTMLElement) => Promise<void>;

lib/react-select-event.cjs.js

@@ -40,3 +40,3 @@ 'use strict';
 
-  await dom.wait();
+  await dom.waitFor(() => {});
   input.blur();
@@ -80,5 +80,9 @@ };
  *                         Useful when rending the dropdown to a portal using react-select's `menuPortalTarget`
+ * @param {boolean} config.autoSelect Whether to automatically select the newly created option or not
  * @param {String|RegExp} config.createOptionText Custom label for the "create new ..." option in the menu (string or regexp)
  */
-const create = async (input, option, config = {}) => {
+const create = async (input, option, {
+  autoSelect = true,
+  ...config
+} = {}) => {
   const createOptionText = config.createOptionText || /^Create "/;
@@ -92,4 +96,7 @@ openMenu(input);
   });
-  await select(input, createOptionText, config);
-  await dom.findByText(getReactSelectContainerFromInput(input), option);
+
+  if (autoSelect) {
+    await select(input, createOptionText, config);
+    await dom.findByText(getReactSelectContainerFromInput(input), option);
+  }
 };
@@ -96,0 +103,0 @@ /**

lib/react-select-event.es.js

@@ -1,2 +0,2 @@
-import { fireEvent, findAllByText, findByText, wait } from '@testing-library/dom';
+import { fireEvent, findAllByText, findByText, waitFor } from '@testing-library/dom';
 
@@ -36,3 +36,3 @@ /** Simulate user events on react-select dropdowns */
 
-  await wait();
+  await waitFor(() => {});
   input.blur();
@@ -76,5 +76,9 @@ };
  *                         Useful when rending the dropdown to a portal using react-select's `menuPortalTarget`
+ * @param {boolean} config.autoSelect Whether to automatically select the newly created option or not
  * @param {String|RegExp} config.createOptionText Custom label for the "create new ..." option in the menu (string or regexp)
  */
-const create = async (input, option, config = {}) => {
+const create = async (input, option, {
+  autoSelect = true,
+  ...config
+} = {}) => {
   const createOptionText = config.createOptionText || /^Create "/;
@@ -88,4 +92,7 @@ openMenu(input);
   });
-  await select(input, createOptionText, config);
-  await findByText(getReactSelectContainerFromInput(input), option);
+
+  if (autoSelect) {
+    await select(input, createOptionText, config);
+    await findByText(getReactSelectContainerFromInput(input), option);
+  }
 };
@@ -92,0 +99,0 @@ /**

package.json

 {
   "name": "react-select-event",
-  "version": "4.1.4",
+  "version": "4.2.0",
   "description": "Simulate react-select events for react-testing-library",
@@ -49,8 +49,8 @@ "main": "lib/react-select-event.cjs.js",
     "@testing-library/jest-dom": "^5.0.1",
-    "@testing-library/react": "^9.1.3",
-    "@types/jest": "^25.1.0",
+    "@testing-library/react": "^10.0.1",
+    "@types/jest": "^26.0.0",
     "@types/react": "^16.8.19",
     "@types/react-select": "^3.0.8",
-    "jest": "^25.1.0",
-    "prettier": "^1.17.1",
+    "jest": "^26.0.0",
+    "prettier": "^2.0.2",
     "react": "^16.9.0",
@@ -60,8 +60,8 @@ "react-dom": "^16.9.0",
     "rimraf": "^3.0.0",
-    "rollup": "^1.27.10",
+    "rollup": "^2.0.3",
     "rollup-plugin-babel": "^4.3.2",
     "rollup-plugin-node-resolve": "^5.0.0",
-    "test-all-versions": "^4.1.0",
+    "test-all-versions": "^5.0.0",
     "typescript": "^3.4.5"
   }
 }

README.md

@@ -47,3 +47,3 @@ <div align="center">
 const { getByRole, getByLabelText } = render(
-  <form>
+  <form role="form">
     <label htmlFor="food">Food</label>
@@ -60,3 +60,3 @@ <Select options={OPTIONS} name="food" inputId="food" isMulti />
 expect(getByRole("form")).toHaveFormValues({
-  food: ["strawberry", "mango", "chocolate"]
+  food: ["strawberry", "mango", "chocolate"],
 });
@@ -69,3 +69,3 @@ ```
 const { getByRole, getByLabelText } = render(
-  <form>
+  <form role="form">
     <label htmlFor="food">Food</label>
@@ -87,3 +87,3 @@ <Async
 expect(getByRole("form")).toHaveFormValues({
-  food: ["chocolate"]
+  food: ["chocolate"],
 });
@@ -98,3 +98,3 @@ ```
 const { getByRole, getByLabelText } = render(
-  <form>
+  <form role="form">
     <label htmlFor="food">Food</label>
@@ -111,3 +111,3 @@ <Select
 await selectEvent.select(getByLabelText("Food"), ["Strawberry", "Mango"], {
-  container: document.body
+  container: document.body,
 });
@@ -123,3 +123,3 @@ expect(getByRole("form")).toHaveFormValues({ food: ["strawberry", "mango"] });
 const { getByRole, getByLabelText } = render(
-  <form>
+  <form role="form">
     <label htmlFor="food">Food</label>
@@ -137,2 +137,3 @@ <Creatable options={OPTIONS} name="food" inputId="food" />
 - `config.createOptionText` can be used when [creating elements with a custom label text, using the `formatCreateLabel` prop](https://react-select.com/props#creatable-props).
+- `config.autoSelect` is used to automatically select the newly created option, it defaults to `true`.
 - `config.container` can be used when the `react-select` dropdown is rendered in a portal using `menuPortalTarget`.
@@ -146,3 +147,3 @@
 const { getByRole, getByLabelText } = render(
-  <form>
+  <form role="form">
     <label htmlFor="food">Food</label>
@@ -169,3 +170,3 @@ <Creatable
 const { getByRole, getByLabelText } = render(
-  <form>
+  <form role="form">
     <label htmlFor="food">Food</label>
@@ -182,3 +183,3 @@ <Creatable
 expect(getByRole("form")).toHaveFormValues({
-  food: ["chocolate", "vanilla", "strawberry"]
+  food: ["chocolate", "vanilla", "strawberry"],
 });
@@ -195,3 +196,3 @@ await selectEvent.clearAll(getByLabelText("Food"));
 const { getByLabelText, queryByText } = render(
-  <form>
+  <form role="form">
     <label htmlFor="food">Food</label>
@@ -198,0 +199,0 @@ <Select options={[{ label: "Pizza", value: 1 }]} />

src/index.ts

 /** Simulate user events on react-select dropdowns */
 
 import {
+  findAllByText,
+  findByText,
   fireEvent,
-  findByText,
-  findAllByText,
-  wait
+  waitFor,
 } from "@testing-library/dom";
@@ -25,3 +25,3 @@
     keyCode: 40,
-    code: 40
+    code: 40,
   });
@@ -40,3 +40,3 @@ };
   // react-select will prevent the menu from opening, and asynchronously focus the select field...
-  await wait();
+  await waitFor(() => {});
   input.blur();
@@ -77,3 +77,3 @@ };
       // @ts-ignore invalid rtl types :'(
-      ignore: "[aria-live] *,[style*='visibility: hidden']"
+      ignore: "[aria-live] *,[style*='visibility: hidden']",
     });
@@ -90,2 +90,3 @@
 interface CreateConfig extends Config {
+  autoSelect?: boolean;
   createOptionText?: string | RegExp;
@@ -101,2 +102,3 @@ }
  *                         Useful when rending the dropdown to a portal using react-select's `menuPortalTarget`
+ * @param {boolean} config.autoSelect Whether to automatically select the newly created option or not
  * @param {String|RegExp} config.createOptionText Custom label for the "create new ..." option in the menu (string or regexp)
@@ -107,3 +109,3 @@ */
   option: string,
-  config: CreateConfig = {}
+  { autoSelect = true, ...config }: CreateConfig = {}
 ) => {
@@ -115,5 +117,7 @@ const createOptionText = config.createOptionText || /^Create "/;
   fireEvent.change(input, { target: { value: option } });
-  await select(input, createOptionText, config);
 
-  await findByText(getReactSelectContainerFromInput(input), option);
+  if (autoSelect) {
+    await select(input, createOptionText, config);
+    await findByText(getReactSelectContainerFromInput(input), option);
+  }
 };
@@ -120,0 +124,0 @@

No alert changes

Improved metrics

Total package byte prevSize

42781

increased by4.35%

Lines of code

784

increased by4.67%

Number of lines in readme file

198

increased by0.51%

No dependency changes