react-select-event - npm Package Compare versions

Comparing version 2.1.0 to 2.1.1

lib/index.d.ts

@@ -7,9 +7,11 @@ /** Simulate user events on react-select dropdowns */
  */
-export declare const select: (input: HTMLElement, optionOrOptions: string | string[]) => Promise<void>;
+export declare const select: (input: HTMLElement, optionOrOptions: string | RegExp | (string | RegExp)[]) => Promise<void>;
 /**
  * Utility for creating and selecting a value in a Creatable `react-select` dropdown.
+ * @async
  * @param input The input field (eg. `getByLabelText('The label')`)
  * @param option The display name for the option to type and select
+ * @param createOptionText Custom label for the "create new ..." option in the menu (string or regexp)
  */
-export declare const create: (input: HTMLElement, option: string) => Promise<void>;
+export declare const create: (input: HTMLElement, option: string, createOptionText?: string | RegExp) => Promise<void>;
 /**
@@ -26,4 +28,4 @@ * Utility for clearing the first value of a `react-select` dropdown.
 declare const _default: {
-    select: (input: HTMLElement, optionOrOptions: string | string[]) => Promise<void>;
-    create: (input: HTMLElement, option: string) => Promise<void>;
+    select: (input: HTMLElement, optionOrOptions: string | RegExp | (string | RegExp)[]) => Promise<void>;
+    create: (input: HTMLElement, option: string, createOptionText?: string | RegExp) => Promise<void>;
     clearFirst: (input: HTMLElement) => void;
@@ -30,0 +32,0 @@ clearAll: (input: HTMLElement) => void;

lib/react-select-event.cjs.js

@@ -43,5 +43,9 @@ 'use strict';
   for (const option of options) {
-    focus(input);
-    await dom.findByText(container, option);
-    dom.fireEvent.click(dom.getByText(container, option));
+    focus(input); // only consider accessible elements
+
+    const optionElement = await dom.findByText(container, option, {
+      // @ts-ignore invalid rtl types :'(
+      ignore: ":not([tabindex])"
+    });
+    dom.fireEvent.click(optionElement);
   }
@@ -51,15 +55,17 @@ };
  * Utility for creating and selecting a value in a Creatable `react-select` dropdown.
+ * @async
  * @param input The input field (eg. `getByLabelText('The label')`)
  * @param option The display name for the option to type and select
+ * @param createOptionText Custom label for the "create new ..." option in the menu (string or regexp)
  */
 
-const create = async (input, option) => {
+const create = async (input, option, createOptionText = /^Create "/) => {
   focus(input);
-  type(input, option); // hit Enter to add the item
-
-  dom.fireEvent.keyDown(input, {
-    key: "Enter",
-    keyCode: 13,
-    code: 13
+  type(input, option);
+  dom.fireEvent.change(input, {
+    target: {
+      value: option
+    }
   });
+  await select(input, createOptionText);
   await dom.findByText(getReactSelectContainerFromInput(input), option);
@@ -66,0 +72,0 @@ };

lib/react-select-event.es.js

@@ -1,2 +0,2 @@
-import { findByText, fireEvent, getByText } from '@testing-library/dom';
+import { findByText, fireEvent } from '@testing-library/dom';
 
@@ -39,5 +39,9 @@ /** Simulate user events on react-select dropdowns */
   for (const option of options) {
-    focus(input);
-    await findByText(container, option);
-    fireEvent.click(getByText(container, option));
+    focus(input); // only consider accessible elements
+
+    const optionElement = await findByText(container, option, {
+      // @ts-ignore invalid rtl types :'(
+      ignore: ":not([tabindex])"
+    });
+    fireEvent.click(optionElement);
   }
@@ -47,15 +51,17 @@ };
  * Utility for creating and selecting a value in a Creatable `react-select` dropdown.
+ * @async
  * @param input The input field (eg. `getByLabelText('The label')`)
  * @param option The display name for the option to type and select
+ * @param createOptionText Custom label for the "create new ..." option in the menu (string or regexp)
  */
 
-const create = async (input, option) => {
+const create = async (input, option, createOptionText = /^Create "/) => {
   focus(input);
-  type(input, option); // hit Enter to add the item
-
-  fireEvent.keyDown(input, {
-    key: "Enter",
-    keyCode: 13,
-    code: 13
+  type(input, option);
+  fireEvent.change(input, {
+    target: {
+      value: option
+    }
   });
+  await select(input, createOptionText);
   await findByText(getReactSelectContainerFromInput(input), option);
@@ -62,0 +68,0 @@ };

package.json

 {
   "name": "react-select-event",
-  "version": "2.1.0",
+  "version": "2.1.1",
   "description": "Simulate react-select events for react-testing-library",
@@ -5,0 +5,0 @@ "main": "lib/react-select-event.cjs.js",

README.md

@@ -41,3 +41,3 @@ <div align="center">
 
-### `select(input: HTMLElement, optionOrOptions: string | Array<string>): Promise<void>`
+### `select(input: HTMLElement, optionOrOptions: string | RegExp | Array<string | RegExp>): Promise<void>`
 
@@ -89,3 +89,3 @@ Select one or more values in a react-select dropdown.
 
-### `create(input: HTMLElement, option: string): void`
+### `create(input: HTMLElement, option: string, createOptionText: string | RegExp = /^Create "/): Promise<void>`
 
@@ -106,2 +106,4 @@ Creates and selects a new item. Only applicable to `react-select` [`Creatable`](https://react-select.com/creatable) elements.
 
+`create` take a third, optional parameter, only necessary when [creating elements with a custom label text, using the `formatCreateLabel` prop](https://react-select.com/props#creatable-props).
+
 ### `clearFirst(input: HTMLElement): void`
@@ -108,0 +110,0 @@

src/index.ts

 /** Simulate user events on react-select dropdowns */
 
-import { fireEvent, findByText, getByText } from "@testing-library/dom";
+import { fireEvent, findByText } from "@testing-library/dom";
 
@@ -33,3 +33,3 @@ // find the react-select container from its input field 🤷
   input: HTMLElement,
-  optionOrOptions: string | Array<string>
+  optionOrOptions: string | RegExp | Array<string | RegExp>
 ) => {
@@ -44,4 +44,9 @@ const options = Array.isArray(optionOrOptions)
     focus(input);
-    await findByText(container, option);
-    fireEvent.click(getByText(container, option));
+
+    // only consider accessible elements
+    const optionElement = await findByText(container, option, {
+      // @ts-ignore invalid rtl types :'(
+      ignore: ":not([tabindex])"
+    });
+    fireEvent.click(optionElement);
   }
@@ -52,14 +57,18 @@ };
  * Utility for creating and selecting a value in a Creatable `react-select` dropdown.
+ * @async
  * @param input The input field (eg. `getByLabelText('The label')`)
  * @param option The display name for the option to type and select
+ * @param createOptionText Custom label for the "create new ..." option in the menu (string or regexp)
  */
-export const create = async (input: HTMLElement, option: string) => {
+export const create = async (
+  input: HTMLElement,
+  option: string,
+  createOptionText: string | RegExp = /^Create "/
+) => {
   focus(input);
   type(input, option);
-  // hit Enter to add the item
-  fireEvent.keyDown(input, {
-    key: "Enter",
-    keyCode: 13,
-    code: 13
-  });
+
+  fireEvent.change(input, { target: { value: option } });
+  await select(input, createOptionText);
+
   await findByText(getReactSelectContainerFromInput(input), option);
@@ -66,0 +75,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

28476

increased by14.44%

Lines of code

527

increased by17.37%

Number of lines in readme file

159

increased by1.27%

No dependency changes