├── .babelrc
├── .github
    ├── dependabot.yml
    └── workflows
    │   └── ci.yml
├── .gitignore
├── .npmignore
├── .npmrc
├── .tav.yml
├── LICENSE.txt
├── README.md
├── jest.config.js
├── other
    └── cricket.png
├── package.json
├── rollup.config.js
├── src
    ├── __tests__
    │   └── select-event.test.tsx
    ├── act-compat.ts
    └── index.ts
├── tsconfig.build.json
└── tsconfig.json


/.babelrc:
--------------------------------------------------------------------------------
 1 | {
 2 |   "plugins": ["@babel/plugin-proposal-class-properties"],
 3 |   "presets": ["@babel/preset-react", "@babel/preset-typescript"],
 4 |   "env": {
 5 |     "test": {
 6 |       "presets": ["@babel/preset-env", "@babel/preset-typescript"],
 7 |       "plugins": ["@babel/plugin-transform-runtime"]
 8 |     }
 9 |   }
10 | }
11 | 


--------------------------------------------------------------------------------
/.github/dependabot.yml:
--------------------------------------------------------------------------------
 1 | version: 2
 2 | updates:
 3 | - package-ecosystem: npm
 4 |   directory: "/"
 5 |   schedule:
 6 |     interval: daily
 7 |   open-pull-requests-limit: 10
 8 |   ignore:
 9 |   - dependency-name: "@types/react-select"
10 |     versions:
11 |     - 4.0.11
12 |     - 4.0.12
13 |     - 4.0.7
14 | 


--------------------------------------------------------------------------------
/.github/workflows/ci.yml:
--------------------------------------------------------------------------------
 1 | name: CI
 2 | on:
 3 |   push:
 4 |     branches:
 5 |       - '+([0-9])?(.{+([0-9]),x}).x'
 6 |       - 'main'
 7 |       - 'master'
 8 |       - 'ci'
 9 |       - 'test'
10 |       - 'next'
11 |       - 'next-major'
12 |       - 'beta'
13 |       - 'alpha'
14 |       - '!all-contributors/**'
15 |   pull_request: {}
16 | jobs:
17 |   build:
18 |     runs-on: ubuntu-latest
19 |     strategy:
20 |       matrix:
21 |         node: ['14', '16']
22 |     name: Build & test (Node ${{ matrix.node }})
23 |     steps:
24 |       - uses: actions/checkout@v2
25 |       - name: Setup node
26 |         uses: actions/setup-node@v2
27 |         with:
28 |           node-version: ${{ matrix.node }}
29 | 
30 |       # Install & build & test:
31 |       - run: npm install
32 |       - run: npm run type:check
33 |       - run: npm run prettier:check
34 |       - run: npm run test:all-versions
35 |       - run: npm run build
36 |       - run: npm pack
37 | 
38 |   coverage:
39 |     needs: build
40 |     runs-on: ubuntu-latest
41 |     steps:
42 |       - uses: actions/checkout@v2
43 |       - name: Setup node
44 |         uses: actions/setup-node@v2
45 |         with:
46 |           node-version: 16
47 |       - run: npm install
48 |       - run: npm install -g codecov
49 |       - run: npm test -- --coverage # enforce 100% coverage when testing against the latest react-select
50 |       - run: codecov
51 | 


--------------------------------------------------------------------------------
/.gitignore:
--------------------------------------------------------------------------------
1 | node_modules
2 | coverage
3 | lib
4 | 


--------------------------------------------------------------------------------
/.npmignore:
--------------------------------------------------------------------------------
 1 | .babelrc
 2 | .git
 3 | .gitignore
 4 | .npmignore
 5 | .npmrc
 6 | .prettierrc
 7 | .tav.yml
 8 | *.tgz
 9 | coverage
10 | jest.config.js
11 | node_modules
12 | other
13 | rollup.config.js
14 | tsconfig.build.json
15 | tsconfig.json
16 | 


--------------------------------------------------------------------------------
/.npmrc:
--------------------------------------------------------------------------------
1 | package-lock=false
2 | 


--------------------------------------------------------------------------------
/.tav.yml:
--------------------------------------------------------------------------------
 1 | react-select:
 2 |   - versions: ^2.1 || ^3.0.2
 3 |     commands: npm test
 4 |     # we can't test agains 2.0.0 because of https://github.com/JedWatson/react-select/pull/2903
 5 |     peerDependencies:
 6 |       - react@16
 7 |       - react-dom@16
 8 |   - versions: ^4 || ^5
 9 |     commands: npm test
10 | 


--------------------------------------------------------------------------------
/LICENSE.txt:
--------------------------------------------------------------------------------
 1 | Copyright 2019 Romain Bertrand
 2 | 
 3 | Permission is hereby granted, free of charge, to any person obtaining a copy
 4 | of this software and associated documentation files (the "Software"), to deal
 5 | in the Software without restriction, including without limitation the rights
 6 | to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
 7 | copies of the Software, and to permit persons to whom the Software is
 8 | furnished to do so, subject to the following conditions:
 9 | 
10 | The above copyright notice and this permission notice shall be included in all
11 | copies or substantial portions of the Software.
12 | 
13 | THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
14 | IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
15 | FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
16 | AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
17 | LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
18 | OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
19 | SOFTWARE.
20 | 


--------------------------------------------------------------------------------
/README.md:
--------------------------------------------------------------------------------
  1 | <div align="center">
  2 |   <h1>react-select-event</h1>
  3 |   <a href="https://www.joypixels.com/emoji/1f997">
  4 |     <img height="80" width="80" alt="cricket" src="https://raw.githubusercontent.com/romgain/react-select-event/master/other/cricket.png" />
  5 |   </a>
  6 | 
  7 |   <p>Simulate user events on <a href="https://github.com/JedWatson/react-select">react-select</a> elements, for use with <a href="https://github.com/testing-library/react-testing-library">react-testing-library</a>.</p>
  8 | 
  9 |   <br />
 10 | </div>
 11 | 
 12 | <hr />
 13 | 
 14 | [![npm version](https://badge.fury.io/js/react-select-event.svg)](https://badge.fury.io/js/react-select-event)
 15 | [![Build Status](https://github.com/romgain/react-select-event/actions/workflows/ci.yml/badge.svg)](https://github.com/romgain/react-select-event/actions)
 16 | [![Coverage report](https://codecov.io/gh/romgain/react-select-event/branch/master/graph/badge.svg)](https://codecov.io/gh/romgain/react-select-event)
 17 | [![code style: prettier](https://img.shields.io/badge/code_style-prettier-ff69b4.svg)](https://github.com/prettier/prettier)
 18 | 
 19 | ## Install
 20 | 
 21 | ```bash
 22 | npm install --save-dev react-select-event
 23 | ```
 24 | 
 25 | Import `react-select-event` in your unit tests:
 26 | 
 27 | ```js
 28 | import selectEvent from "react-select-event";
 29 | // or
 30 | const selectEvent = require("react-select-event");
 31 | ```
 32 | 
 33 | ### Supported versions of `react-select`
 34 | 
 35 | This library is tested against all versions of `react-select` starting from `2.1.0`.
 36 | 
 37 | ## API
 38 | 
 39 | Every helper exported by `react-select-event` takes a handle on the `react-select` input field as its first argument. For instance, this can be: `getByLabelText("Your label name")`.
 40 | 
 41 | ### `select(input: HTMLElement, optionOrOptions: Matcher | Array<Matcher>, config?: object): Promise<void>`
 42 | 
 43 | The `optionOrOptions` parameter can be any valid dom-testing-library [TextMatch](https://testing-library.com/docs/queries/about#textmatch) object (eg. string, regex, function, number).
 44 | 
 45 | Select one or more values in a react-select dropdown.
 46 | 
 47 | ```jsx
 48 | const { getByRole, getByLabelText } = render(
 49 |   <form role="form">
 50 |     <label htmlFor="food">Food</label>
 51 |     <Select options={OPTIONS} name="food" inputId="food" isMulti />
 52 |   </form>
 53 | );
 54 | expect(getByRole("form")).toHaveFormValues({ food: "" });
 55 | 
 56 | await selectEvent.select(getByLabelText("Food"), ["Strawberry", "Mango"]);
 57 | expect(getByRole("form")).toHaveFormValues({ food: ["strawberry", "mango"] });
 58 | 
 59 | await selectEvent.select(getByLabelText("Food"), "Chocolate");
 60 | expect(getByRole("form")).toHaveFormValues({
 61 |   food: ["strawberry", "mango", "chocolate"],
 62 | });
 63 | ```
 64 | 
 65 | This also works for [async selects](https://react-select.com/async):
 66 | 
 67 | ```jsx
 68 | const { getByRole, getByLabelText } = render(
 69 |   <form role="form">
 70 |     <label htmlFor="food">Food</label>
 71 |     <Async
 72 |       options={[]}
 73 |       loadOptions={fetchTheOptions}
 74 |       name="food"
 75 |       inputId="food"
 76 |       isMulti
 77 |     />
 78 |   </form>
 79 | );
 80 | expect(getByRole("form")).toHaveFormValues({ food: "" });
 81 | 
 82 | // start typing to trigger the `loadOptions`
 83 | fireEvent.change(getByLabelText("Food"), { target: { value: "Choc" } });
 84 | await selectEvent.select(getByLabelText("Food"), "Chocolate");
 85 | expect(getByRole("form")).toHaveFormValues({
 86 |   food: ["chocolate"],
 87 | });
 88 | ```
 89 | 
 90 | `select` also accepts an optional `config` parameter.
 91 | `config.container` can be used to specify a custom container to use when the `react-select` dropdown is rendered
 92 | in a portal using `menuPortalTarget`:
 93 | 
 94 | ```jsx
 95 | const { getByRole, getByLabelText } = render(
 96 |   <form role="form">
 97 |     <label htmlFor="food">Food</label>
 98 |     <Select
 99 |       options={OPTIONS}
100 |       name="food"
101 |       inputId="food"
102 |       isMulti
103 |       menuPortalTarget={document.body}
104 |     />
105 |   </form>
106 | );
107 | await selectEvent.select(getByLabelText("Food"), ["Strawberry", "Mango"], {
108 |   container: document.body,
109 | });
110 | expect(getByRole("form")).toHaveFormValues({ food: ["strawberry", "mango"] });
111 | ```
112 | 
113 | The container can also be passed in as a function if it needs to be lazily evaluated:
114 | 
115 | ```jsx
116 | const { getByRole, getByLabelText } = render(
117 |   <form role="form">
118 |     <label htmlFor="food">Food</label>
119 |     <Select
120 |       options={OPTIONS}
121 |       name="food"
122 |       inputId="food"
123 |       isMulti
124 |       menuPortalTarget={document.body}
125 |     />
126 |   </form>
127 | );
128 | await selectEvent.select(getByLabelText("Food"), ["Strawberry", "Mango"], {
129 |   container: () => document.body.querySelector("[class$=-menu]"),
130 | });
131 | expect(getByRole("form")).toHaveFormValues({ food: ["strawberry", "mango"] });
132 | ```
133 | 
134 | ### `create(input: HTMLElement, option: string, config?: object): Promise<void> }`
135 | 
136 | Creates and selects a new item. Only applicable to `react-select` [`Creatable`](https://react-select.com/creatable) elements.
137 | 
138 | ```jsx
139 | const { getByRole, getByLabelText } = render(
140 |   <form role="form">
141 |     <label htmlFor="food">Food</label>
142 |     <Creatable options={OPTIONS} name="food" inputId="food" />
143 |   </form>
144 | );
145 | expect(getByRole("form")).toHaveFormValues({ food: "" });
146 | await selectEvent.create(getByLabelText("Food"), "papaya");
147 | expect(getByRole("form")).toHaveFormValues({ food: "papaya" });
148 | ```
149 | 
150 | `create` take an optional `config` parameter:
151 | 
152 | - `config.createOptionText` can be used when [creating elements with a custom label text, using the `formatCreateLabel` prop](https://react-select.com/props#creatable-props).
153 | - `config.container` can be used when the `react-select` dropdown is rendered in a portal using `menuPortalTarget`.
154 | - `config.waitForElement` Whether `create` should wait for new option to be populated in the select container. Defaults to `true`.
155 | 
156 | ### `clearFirst(input: HTMLElement): Promise<void>`
157 | 
158 | Clears the first value in the dropdown.
159 | 
160 | ```jsx
161 | const { getByRole, getByLabelText } = render(
162 |   <form role="form">
163 |     <label htmlFor="food">Food</label>
164 |     <Creatable
165 |       defaultValue={OPTIONS[0]}
166 |       options={OPTIONS}
167 |       name="food"
168 |       inputId="food"
169 |       isMulti
170 |     />
171 |   </form>
172 | );
173 | expect(getByRole("form")).toHaveFormValues({ food: "chocolate" });
174 | await selectEvent.clearFirst(getByLabelText("Food"));
175 | expect(getByRole("form")).toHaveFormValues({ food: "" });
176 | ```
177 | 
178 | ### `clearAll(input: HTMLElement): Promise<void>`
179 | 
180 | Clears all values in the dropdown.
181 | 
182 | ```jsx
183 | const { getByRole, getByLabelText } = render(
184 |   <form role="form">
185 |     <label htmlFor="food">Food</label>
186 |     <Creatable
187 |       defaultValue={[OPTIONS[0], OPTIONS[1], OPTIONS[2]]}
188 |       options={OPTIONS}
189 |       name="food"
190 |       inputId="food"
191 |       isMulti
192 |     />
193 |   </form>
194 | );
195 | expect(getByRole("form")).toHaveFormValues({
196 |   food: ["chocolate", "vanilla", "strawberry"],
197 | });
198 | await selectEvent.clearAll(getByLabelText("Food"));
199 | expect(getByRole("form")).toHaveFormValues({ food: "" });
200 | ```
201 | 
202 | ### `openMenu(input: HTMLElement): void`
203 | 
204 | Opens the select dropdown menu by focusing the input and simulating a down arrow keypress.
205 | 
206 | ```jsx
207 | const { getByLabelText, queryByText } = render(
208 |   <form>
209 |     <label htmlFor="food">Food</label>
210 |     <Select options={[{ label: "Pizza", value: 1 }]} inputId="food" />
211 |   </form>
212 | );
213 | expect(queryByText("Pizza")).toBeNull();
214 | selectEvent.openMenu(getByLabelText("Food"));
215 | expect(getByText("Pizza")).toBeInTheDocument();
216 | ```
217 | 
218 | ## Credits
219 | 
220 | All the credit goes to [Daniel](https://stackoverflow.com/users/164268/daniel) and his StackOverflow answer: [https://stackoverflow.com/a/56085734](https://stackoverflow.com/a/56085734).
221 | 


--------------------------------------------------------------------------------
/jest.config.js:
--------------------------------------------------------------------------------
 1 | module.exports = {
 2 |   testEnvironment: "jsdom",
 3 |   coverageThreshold: {
 4 |     global: {
 5 |       branches: 100,
 6 |       functions: 100,
 7 |       lines: 100,
 8 |       statements: 100
 9 |     }
10 |   }
11 | };
12 | 


--------------------------------------------------------------------------------
/other/cricket.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/romgain/react-select-event/8619e8b3da349eadfa7321ea4aa2b7eee7209f9f/other/cricket.png


--------------------------------------------------------------------------------
/package.json:
--------------------------------------------------------------------------------
 1 | {
 2 |   "name": "react-select-event",
 3 |   "version": "5.5.1",
 4 |   "description": "Simulate react-select events for react-testing-library",
 5 |   "main": "lib/react-select-event.cjs.js",
 6 |   "module": "lib/react-select-event.es.js",
 7 |   "types": "lib/index.d.ts",
 8 |   "scripts": {
 9 |     "clean": "rimraf lib",
10 |     "build": "npm run clean && npm run build:lib && npm run build:types",
11 |     "build:lib": "rollup -c",
12 |     "build:types": "tsc -p tsconfig.build.json",
13 |     "prettier:check": "prettier --list-different \"src/**/*.{ts,tsx,js,md}\" \"**/*.md\"",
14 |     "prettier:apply": "prettier --write \"src/**/*.{ts,tsx,js}\" \"**/*.md\"",
15 |     "type:check": "tsc --noEmit",
16 |     "prepublishOnly": "npm run build",
17 |     "test": "jest",
18 |     "test:all-versions": "tav"
19 |   },
20 |   "repository": {
21 |     "type": "git",
22 |     "url": "git+https://github.com/romgain/react-select-event.git"
23 |   },
24 |   "keywords": [
25 |     "react-testing-library",
26 |     "dom-testing-library",
27 |     "react-select",
28 |     "testing",
29 |     "javascript",
30 |     "unit-testing"
31 |   ],
32 |   "author": "Romain Bertrand",
33 |   "license": "MIT",
34 |   "bugs": {
35 |     "url": "https://github.com/romgain/react-select-event/issues"
36 |   },
37 |   "homepage": "https://github.com/romgain/react-select-event#readme",
38 |   "dependencies": {
39 |     "@testing-library/dom": ">=7"
40 |   },
41 |   "devDependencies": {
42 |     "@babel/core": "^7.4.5",
43 |     "@babel/plugin-proposal-class-properties": "^7.4.4",
44 |     "@babel/plugin-transform-runtime": "^7.4.4",
45 |     "@babel/preset-env": "^7.4.4",
46 |     "@babel/preset-react": "^7.0.0",
47 |     "@babel/preset-typescript": "^7.3.3",
48 |     "@testing-library/jest-dom": "^5.0.1",
49 |     "@testing-library/react": "^12.1.5",
50 |     "@types/jest": "^29.1.2",
51 |     "@types/react": "^17.0.47",
52 |     "@types/react-select": "^5.0.1",
53 |     "jest": "^27.0.4",
54 |     "prettier": "^2.0.2",
55 |     "react": "^17.0.2",
56 |     "react-dom": "^17.0.2",
57 |     "react-select": "^5.0.0",
58 |     "rimraf": "^3.0.0",
59 |     "rollup": "^2.0.3",
60 |     "rollup-plugin-babel": "^4.3.2",
61 |     "rollup-plugin-node-resolve": "^5.0.0",
62 |     "test-all-versions": "^5.0.0",
63 |     "typescript": "^4.0.2"
64 |   }
65 | }
66 | 


--------------------------------------------------------------------------------
/rollup.config.js:
--------------------------------------------------------------------------------
 1 | import resolve from "rollup-plugin-node-resolve";
 2 | import babel from "rollup-plugin-babel";
 3 | import pkg from "./package.json";
 4 | 
 5 | export default [
 6 |   {
 7 |     input: "src/index.ts",
 8 |     external: ["@testing-library/dom"],
 9 |     plugins: [
10 |       resolve({ extensions: [".js", ".ts"] }),
11 |       babel({ extensions: [".js", ".ts"] })
12 |     ],
13 |     output: [
14 |       { file: pkg.main, format: "cjs", exports: "named" },
15 |       { file: pkg.module, format: "es" }
16 |     ]
17 |   }
18 | ];
19 | 


--------------------------------------------------------------------------------
/src/__tests__/select-event.test.tsx:
--------------------------------------------------------------------------------
  1 | import "@testing-library/jest-dom/extend-expect";
  2 | 
  3 | import { fireEvent, render } from "@testing-library/react";
  4 | 
  5 | import React from "react";
  6 | import Select from "react-select";
  7 | import selectEvent from "..";
  8 | 
  9 | let Async: any;
 10 | let Creatable: any;
 11 | let AsyncCreatable: any;
 12 | let IS_V2 = false;
 13 | try {
 14 |   // v3
 15 |   Async = require("react-select/async").default;
 16 |   Creatable = require("react-select/creatable").default;
 17 |   AsyncCreatable = require("react-select/async-creatable").default;
 18 | } catch (_) {
 19 |   // v2
 20 |   Async = require("react-select/lib/Async").default;
 21 |   Creatable = require("react-select/lib/Creatable").default;
 22 |   AsyncCreatable = require("react-select/lib/AsyncCreatable").default;
 23 |   IS_V2 = true;
 24 | }
 25 | 
 26 | const skip_on_v2 = IS_V2 ? xit : it;
 27 | 
 28 | type Callback = (options: Options) => void;
 29 | interface Option {
 30 |   label: string;
 31 |   value: string;
 32 | }
 33 | type Options = Array<Option>;
 34 | 
 35 | const OPTIONS: Options = [
 36 |   { label: "Chocolate", value: "chocolate" },
 37 |   { label: "Vanilla", value: "vanilla" },
 38 |   { label: "Strawberry", value: "strawberry" },
 39 |   { label: "Mango", value: "mango" },
 40 | ];
 41 | const defaultProps = { options: OPTIONS, name: "food", inputId: "food" };
 42 | 
 43 | const matchText = (text: string | RegExp) => (content: string) =>
 44 |   Boolean(content === text || content.match(text));
 45 | 
 46 | const renderForm = (select: React.ReactNode) => {
 47 |   const result = render(
 48 |     <form role="form">
 49 |       <label htmlFor="food">Food</label>
 50 |       {select}
 51 |     </form>
 52 |   );
 53 |   const form = result.getByRole("form");
 54 |   const input = result.getByLabelText("Food");
 55 |   return { ...result, form, input };
 56 | };
 57 | 
 58 | describe("The openMenu event helper", () => {
 59 |   it("opens the menu", () => {
 60 |     const { getByLabelText, queryByText } = renderForm(
 61 |       <Select {...defaultProps} />
 62 |     );
 63 |     // option is not yet visible
 64 |     expect(queryByText("Chocolate")).toBeNull();
 65 |     selectEvent.openMenu(getByLabelText("Food"));
 66 |     // option can now be seen because menu is open
 67 |     expect(queryByText("Chocolate")).toBeInTheDocument();
 68 |   });
 69 | 
 70 |   it("does not prevent selecting options", async () => {
 71 |     const { form, input, getByText } = renderForm(<Select {...defaultProps} />);
 72 |     selectEvent.openMenu(input);
 73 |     expect(getByText("Chocolate")).toBeInTheDocument();
 74 |     expect(getByText("Vanilla")).toBeInTheDocument();
 75 |     expect(getByText("Strawberry")).toBeInTheDocument();
 76 |     expect(getByText("Mango")).toBeInTheDocument();
 77 |     await selectEvent.select(input, "Strawberry");
 78 |     expect(form).toHaveFormValues({ food: "strawberry" });
 79 |   });
 80 | });
 81 | 
 82 | describe("The select event helpers", () => {
 83 |   it("selects an option in a single-option input", async () => {
 84 |     const { form, input } = renderForm(<Select {...defaultProps} />);
 85 |     expect(form).toHaveFormValues({ food: "" });
 86 |     await selectEvent.select(input, "Chocolate");
 87 |     expect(form).toHaveFormValues({ food: "chocolate" });
 88 |   });
 89 | 
 90 |   it("re-selects an option in a single-option input", async () => {
 91 |     const { form, input } = renderForm(<Select {...defaultProps} />);
 92 |     expect(form).toHaveFormValues({ food: "" });
 93 |     await selectEvent.select(input, "Chocolate");
 94 |     await selectEvent.select(input, "Chocolate");
 95 |     await selectEvent.select(input, "Chocolate");
 96 |     expect(form).toHaveFormValues({ food: "chocolate" });
 97 |   });
 98 | 
 99 |   it("selects several options in a multi-options input", async () => {
100 |     const { form, input } = renderForm(<Select {...defaultProps} isMulti />);
101 |     expect(form).toHaveFormValues({ food: "" });
102 | 
103 |     await selectEvent.select(input, "Chocolate");
104 |     expect(form).toHaveFormValues({ food: "chocolate" });
105 | 
106 |     await selectEvent.select(input, "Vanilla");
107 |     expect(form).toHaveFormValues({ food: ["chocolate", "vanilla"] });
108 |   });
109 | 
110 |   it("selects several options at the same time", async () => {
111 |     const { form, input } = renderForm(<Select {...defaultProps} isMulti />);
112 |     expect(form).toHaveFormValues({ food: "" });
113 |     await selectEvent.select(input, ["Strawberry", "Mango"]);
114 |     expect(form).toHaveFormValues({ food: ["strawberry", "mango"] });
115 |   });
116 | 
117 |   it("selects several duplicated options", async () => {
118 |     const { form, input } = renderForm(<Select {...defaultProps} isMulti />);
119 |     expect(form).toHaveFormValues({ food: "" });
120 |     await selectEvent.select(input, ["Strawberry", "Mango", "Strawberry"]);
121 |     expect(form).toHaveFormValues({ food: ["strawberry", "mango"] });
122 |     await selectEvent.select(input, ["Mango"]);
123 |     expect(form).toHaveFormValues({ food: ["strawberry", "mango"] });
124 |   });
125 | 
126 |   it("selects an option in a custom dropdown", async () => {
127 |     const { form, input } = renderForm(
128 |       <Select
129 |         {...defaultProps}
130 |         formatOptionLabel={({ label }) => <div>This is a {label}</div>}
131 |       />
132 |     );
133 |     expect(form).toHaveFormValues({ food: "" });
134 |     await selectEvent.select(input, /Chocolate/);
135 |     expect(form).toHaveFormValues({ food: "chocolate" });
136 |   });
137 | 
138 |   it("selects an option with a matcher function", async () => {
139 |     const { form, input } = renderForm(<Select {...defaultProps} />);
140 |     expect(form).toHaveFormValues({ food: "" });
141 |     await selectEvent.select(input, matchText(/Chocolate/));
142 |     expect(form).toHaveFormValues({ food: "chocolate" });
143 |   });
144 | 
145 |   it("selects several options with a matcher function", async () => {
146 |     const { form, input } = renderForm(<Select {...defaultProps} isMulti />);
147 |     expect(form).toHaveFormValues({ food: "" });
148 |     await selectEvent.select(input, ["Strawberry", /Mango/].map(matchText));
149 |     expect(form).toHaveFormValues({ food: ["strawberry", "mango"] });
150 |   });
151 | 
152 |   it("selects an option with a number", async () => {
153 |     const { form, input } = renderForm(
154 |       <Select
155 |         {...defaultProps}
156 |         formatOptionLabel={(option) => option.label.length}
157 |       />
158 |     );
159 |     expect(form).toHaveFormValues({ food: "" });
160 |     await selectEvent.select(input, 5);
161 |     expect(form).toHaveFormValues({ food: "mango" });
162 |   });
163 | 
164 |   it("selects several options with a number", async () => {
165 |     const { form, input } = renderForm(
166 |       <Select
167 |         {...defaultProps}
168 |         formatOptionLabel={(option) => option.label.length}
169 |         isMulti
170 |       />
171 |     );
172 |     expect(form).toHaveFormValues({ food: "" });
173 |     await selectEvent.select(input, [7, 5]);
174 |     expect(form).toHaveFormValues({ food: ["vanilla", "mango"] });
175 |   });
176 | 
177 |   it("types in and adds a new option", async () => {
178 |     const { form, input } = renderForm(<Creatable {...defaultProps} />);
179 |     expect(form).toHaveFormValues({ food: "" });
180 |     await selectEvent.create(input, "papaya");
181 |     expect(form).toHaveFormValues({ food: "papaya" });
182 |   });
183 | 
184 |   it("types in and adds a new option but does not wait for it", async () => {
185 |     const { form, input } = renderForm(<Creatable {...defaultProps} />);
186 |     expect(form).toHaveFormValues({ food: "" });
187 |     await selectEvent.create(input, "papaya", { waitForElement: false });
188 |     expect(form).toHaveFormValues({ food: "papaya" });
189 |   });
190 | 
191 |   it("types in and adds a new option with custom create label when searching by fixed string", async () => {
192 |     const { form, input } = renderForm(
193 |       <Creatable {...defaultProps} formatCreateLabel={() => "Add new option"} />
194 |     );
195 |     expect(form).toHaveFormValues({ food: "" });
196 | 
197 |     await selectEvent.create(input, "papaya", {
198 |       createOptionText: "Add new option",
199 |     });
200 | 
201 |     expect(form).toHaveFormValues({ food: "papaya" });
202 |   });
203 | 
204 |   it("types in and adds a new option with custom create label when searching by dynamic string", async () => {
205 |     const { form, input } = renderForm(
206 |       <Creatable
207 |         {...defaultProps}
208 |         formatCreateLabel={(inputValue: string) => inputValue}
209 |       />
210 |     );
211 |     expect(form).toHaveFormValues({ food: "" });
212 | 
213 |     await selectEvent.create(input, "papaya", { createOptionText: "papaya" });
214 | 
215 |     expect(form).toHaveFormValues({ food: "papaya" });
216 |   });
217 | 
218 |   it("types in and adds a new option with custom create label when searching by regexp", async () => {
219 |     const { form, input } = renderForm(
220 |       <Creatable
221 |         {...defaultProps}
222 |         formatCreateLabel={(inputValue: string) =>
223 |           `Generate new option "${inputValue}"`
224 |         }
225 |       />
226 |     );
227 |     expect(form).toHaveFormValues({ food: "" });
228 | 
229 |     await selectEvent.create(input, "papaya", { createOptionText: /Generate/ });
230 | 
231 |     expect(form).toHaveFormValues({ food: "papaya" });
232 |   });
233 | 
234 |   it("types in and adds several options", async () => {
235 |     const { form, input } = renderForm(<Creatable {...defaultProps} isMulti />);
236 |     expect(form).toHaveFormValues({ food: "" });
237 |     await selectEvent.create(input, "papaya");
238 |     await selectEvent.create(input, "peanut butter");
239 |     expect(form).toHaveFormValues({ food: ["papaya", "peanut butter"] });
240 |   });
241 | 
242 |   it("selects an option in an async input", async () => {
243 |     const loadOptions = (_: string, callback: Callback) =>
244 |       setTimeout(() => callback(OPTIONS), 100);
245 |     const { form, input } = renderForm(
246 |       <Async {...defaultProps} loadOptions={loadOptions} options={[]} />
247 |     );
248 |     expect(form).toHaveFormValues({ food: "" });
249 | 
250 |     // start typing to trigger the `loadOptions`
251 |     fireEvent.change(input, { target: { value: "Choc" } });
252 |     await selectEvent.select(input, "Chocolate");
253 |     expect(form).toHaveFormValues({ food: "chocolate" });
254 |   });
255 | 
256 |   it("clears the first item in a single-select dropdown", async () => {
257 |     const { form, input } = renderForm(
258 |       <Creatable {...defaultProps} isMulti defaultValue={OPTIONS[0]} />
259 |     );
260 |     expect(form).toHaveFormValues({ food: "chocolate" });
261 |     await selectEvent.clearFirst(input);
262 |     expect(form).toHaveFormValues({ food: "" });
263 |   });
264 | 
265 |   it("clears the first item in a multi-select dropdown", async () => {
266 |     const { form, input } = renderForm(
267 |       <Creatable
268 |         {...defaultProps}
269 |         isMulti
270 |         defaultValue={[OPTIONS[0], OPTIONS[1], OPTIONS[2]]}
271 |       />
272 |     );
273 |     expect(form).toHaveFormValues({
274 |       food: ["chocolate", "vanilla", "strawberry"],
275 |     });
276 | 
277 |     await selectEvent.clearFirst(input);
278 |     expect(form).toHaveFormValues({ food: ["vanilla", "strawberry"] });
279 | 
280 |     await selectEvent.clearFirst(input);
281 |     expect(form).toHaveFormValues({ food: "strawberry" });
282 |   });
283 | 
284 |   it("clears the first item in a non-createable dropdown", async () => {
285 |     const { form, input } = renderForm(
286 |       <Select {...defaultProps} defaultValue={OPTIONS[0]} isClearable />
287 |     );
288 |     expect(form).toHaveFormValues({ food: "chocolate" });
289 |     await selectEvent.clearFirst(input);
290 |     expect(form).toHaveFormValues({ food: "" });
291 |   });
292 | 
293 |   it("clears, then re-selects an item", async () => {
294 |     const { form, input } = renderForm(
295 |       <Select {...defaultProps} defaultValue={OPTIONS[0]} isClearable />
296 |     );
297 |     expect(form).toHaveFormValues({ food: "chocolate" });
298 |     await selectEvent.clearFirst(input);
299 |     expect(form).toHaveFormValues({ food: "" });
300 |     await selectEvent.select(input, "Chocolate");
301 |     expect(form).toHaveFormValues({ food: "chocolate" });
302 |   });
303 | 
304 |   it("clears all items in a single-select dropdown", async () => {
305 |     const { form, input } = renderForm(
306 |       <Creatable {...defaultProps} isMulti defaultValue={OPTIONS[0]} />
307 |     );
308 |     expect(form).toHaveFormValues({ food: "chocolate" });
309 |     await selectEvent.clearAll(input);
310 |     expect(form).toHaveFormValues({ food: "" });
311 |   });
312 | 
313 |   it("clears all items in a multi-select dropdown", async () => {
314 |     const { form, input } = renderForm(
315 |       <Creatable
316 |         {...defaultProps}
317 |         isMulti
318 |         defaultValue={[OPTIONS[0], OPTIONS[1], OPTIONS[2]]}
319 |       />
320 |     );
321 |     expect(form).toHaveFormValues({
322 |       food: ["chocolate", "vanilla", "strawberry"],
323 |     });
324 | 
325 |     await selectEvent.clearAll(input);
326 |     expect(form).toHaveFormValues({ food: "" });
327 |   });
328 | 
329 |   it("clears all items, then selects a new one", async () => {
330 |     const { form, input } = renderForm(
331 |       <Creatable
332 |         {...defaultProps}
333 |         isMulti
334 |         defaultValue={[OPTIONS[0], OPTIONS[1], OPTIONS[2]]}
335 |       />
336 |     );
337 |     expect(form).toHaveFormValues({
338 |       food: ["chocolate", "vanilla", "strawberry"],
339 |     });
340 | 
341 |     await selectEvent.clearAll(input);
342 |     expect(form).toHaveFormValues({ food: "" });
343 |     await selectEvent.select(input, "Vanilla");
344 |     expect(form).toHaveFormValues({ food: "vanilla" });
345 |   });
346 | 
347 |   describe("when asynchronously generating the list of options", () => {
348 |     // from https://github.com/JedWatson/react-select/blob/v3.0.0/docs/examples/CreatableAdvanced.js
349 |     // mixed with Async Creatable Example from https://react-select.com/creatable
350 |     type State = { options: Options; value: Option | void; isLoading: boolean };
351 | 
352 |     const filterOptions = (options: Options, inputValue: string) => {
353 |       return options.filter((i) =>
354 |         i.label.toLowerCase().includes(inputValue.toLowerCase())
355 |       );
356 |     };
357 | 
358 |     class CreatableAdvanced extends React.Component<{}, State> {
359 |       state = { isLoading: false, options: OPTIONS, value: undefined };
360 | 
361 |       handlePromiseOptions = (inputValue: string) =>
362 |         new Promise((resolve) => {
363 |           setTimeout(() => {
364 |             resolve(filterOptions(this.state.options, inputValue));
365 |           }, 5);
366 |         });
367 | 
368 |       handleChange = (newValue: Option) => this.setState({ value: newValue });
369 | 
370 |       handleCreate = (inputValue: string) => {
371 |         this.setState({ isLoading: true });
372 |         setTimeout(() => {
373 |           const { options } = this.state;
374 |           const newOption = { label: inputValue, value: inputValue };
375 |           this.setState({
376 |             isLoading: false,
377 |             options: [...options, newOption],
378 |             value: newOption,
379 |           });
380 |         }, 5);
381 |       };
382 | 
383 |       render() {
384 |         const { isLoading, value } = this.state;
385 |         return (
386 |           <AsyncCreatable
387 |             {...this.props}
388 |             isClearable
389 |             isDisabled={isLoading}
390 |             isLoading={isLoading}
391 |             onChange={this.handleChange}
392 |             onCreateOption={this.handleCreate}
393 |             loadOptions={this.handlePromiseOptions}
394 |             value={value}
395 |           />
396 |         );
397 |       }
398 |     }
399 | 
400 |     it("types in and adds a new option when having similar options", async () => {
401 |       const { form, input } = renderForm(
402 |         <CreatableAdvanced {...defaultProps} />
403 |       );
404 | 
405 |       await selectEvent.create(input, "Choco");
406 |       expect(form).toHaveFormValues({ food: "Choco" });
407 |     });
408 | 
409 |     it("types in and adds a new option when not having similar options", async () => {
410 |       const { form, input, findByDisplayValue } = renderForm(
411 |         <CreatableAdvanced {...defaultProps} />
412 |       );
413 | 
414 |       await selectEvent.create(input, "papaya");
415 |       await findByDisplayValue("papaya");
416 | 
417 |       expect(form).toHaveFormValues({ food: "papaya" });
418 |     });
419 |   });
420 | 
421 |   describe("when rendering the dropdown in a portal", () => {
422 |     it("selects an option", async () => {
423 |       const { form, input } = renderForm(
424 |         <Select {...defaultProps} menuPortalTarget={document.body} />
425 |       );
426 |       expect(form).toHaveFormValues({ food: "" });
427 |       await selectEvent.select(input, "Chocolate", {
428 |         container: document.body,
429 |       });
430 |       expect(form).toHaveFormValues({ food: "chocolate" });
431 |     });
432 | 
433 |     skip_on_v2("lazily targets the dropdown when selecting", async () => {
434 |       // skipping this test on react-select version 2 as the "...-menu" classname
435 |       // was only added with the move to emotion in v3
436 |       const { form, input } = renderForm(
437 |         <Select {...defaultProps} menuPortalTarget={document.body} />
438 |       );
439 |       expect(form).toHaveFormValues({ food: "" });
440 |       await selectEvent.select(input, "Chocolate", {
441 |         container: () =>
442 |           document.body.querySelector("[class$=-menu]") as HTMLElement,
443 |       });
444 |       expect(form).toHaveFormValues({ food: "chocolate" });
445 |     });
446 | 
447 |     it("types in and adds a new option", async () => {
448 |       const { form, input } = renderForm(
449 |         <Creatable {...defaultProps} menuPortalTarget={document.body} />
450 |       );
451 |       expect(form).toHaveFormValues({ food: "" });
452 |       await selectEvent.create(input, "papaya", { container: document.body });
453 |       expect(form).toHaveFormValues({ food: "papaya" });
454 |     });
455 | 
456 |     it("clears the first item in a multi-select dropdown", async () => {
457 |       const { form, input } = renderForm(
458 |         <Creatable
459 |           {...defaultProps}
460 |           isMulti
461 |           defaultValue={[OPTIONS[0], OPTIONS[1], OPTIONS[2]]}
462 |           menuPortalTarget={document.body}
463 |         />
464 |       );
465 |       expect(form).toHaveFormValues({
466 |         food: ["chocolate", "vanilla", "strawberry"],
467 |       });
468 | 
469 |       await selectEvent.clearFirst(input);
470 |       expect(form).toHaveFormValues({ food: ["vanilla", "strawberry"] });
471 |     });
472 | 
473 |     it("clears all items", async () => {
474 |       const { form, input } = renderForm(
475 |         <Creatable
476 |           {...defaultProps}
477 |           isMulti
478 |           defaultValue={[OPTIONS[0], OPTIONS[1], OPTIONS[2]]}
479 |           menuPortalTarget={document.body}
480 |         />
481 |       );
482 |       expect(form).toHaveFormValues({
483 |         food: ["chocolate", "vanilla", "strawberry"],
484 |       });
485 | 
486 |       await selectEvent.clearAll(input);
487 |       expect(form).toHaveFormValues({ food: "" });
488 |     });
489 |   });
490 | });
491 | 


--------------------------------------------------------------------------------
/src/act-compat.ts:
--------------------------------------------------------------------------------
 1 | /**
 2 |  * A simple compatibility method for react's "act".
 3 |  * If a recent version of @testing-library/react is already installed,
 4 |  * we just use their implementation - it's complete and has useful warnings.
 5 |  * Otherwise, we just default to a noop.
 6 |  *
 7 |  * We need this because react-select-event doesn't actually pin a
 8 |  * dependency version for @testing-library/react!
 9 |  */
10 | 
11 | type Callback = () => Promise<void | undefined> | void | undefined;
12 | type AsyncAct = (callback: Callback) => Promise<undefined>;
13 | type SyncAct = (callback: Callback) => void;
14 | 
15 | let act: AsyncAct | SyncAct;
16 | 
17 | try {
18 |   act = require("@testing-library/react").act;
19 | } catch (_) {
20 |   // istanbul ignore next
21 |   act = (callback: Function) => {
22 |     callback();
23 |   };
24 | }
25 | 
26 | export default act;
27 | 


--------------------------------------------------------------------------------
/src/index.ts:
--------------------------------------------------------------------------------
  1 | /** Simulate user events on react-select dropdowns */
  2 | 
  3 | import {
  4 |   Matcher,
  5 |   findAllByText,
  6 |   findByText,
  7 |   fireEvent,
  8 |   waitFor,
  9 | } from "@testing-library/dom";
 10 | 
 11 | import act from "./act-compat";
 12 | 
 13 | // find the react-select container from its input field 🤷
 14 | function getReactSelectContainerFromInput(input: HTMLElement): HTMLElement {
 15 |   return input.parentNode!.parentNode!.parentNode!.parentNode!
 16 |     .parentNode as HTMLElement;
 17 | }
 18 | 
 19 | /**
 20 |  * Utility for opening the select's dropdown menu.
 21 |  * @param {HTMLElement} input The input field (eg. `getByLabelText('The label')`)
 22 |  */
 23 | export const openMenu = (input: HTMLElement) => {
 24 |   fireEvent.focus(input);
 25 |   fireEvent.keyDown(input, {
 26 |     key: "ArrowDown",
 27 |     keyCode: 40,
 28 |     code: 40,
 29 |   });
 30 | };
 31 | 
 32 | // type text in the input field
 33 | const type = (input: HTMLElement, text: string) => {
 34 |   fireEvent.change(input, { target: { value: text } });
 35 | };
 36 | 
 37 | // press the "clear" button, and reset various states
 38 | const clear = async (input: HTMLElement, clearButton: Element) => {
 39 |   await act(async () => {
 40 |     fireEvent.mouseDown(clearButton);
 41 |     fireEvent.click(clearButton);
 42 |     // react-select will prevent the menu from opening, and asynchronously focus the select field...
 43 |     await waitFor(() => {});
 44 |     input.blur();
 45 |   });
 46 | };
 47 | 
 48 | interface Config {
 49 |   /** A container where the react-select dropdown gets rendered to.
 50 |    *  Useful when rendering the dropdown in a portal using `menuPortalTarget`.
 51 |    */
 52 |   container?: HTMLElement | (() => HTMLElement);
 53 | }
 54 | 
 55 | /**
 56 |  * Utility for selecting a value in a `react-select` dropdown.
 57 |  * @param {HTMLElement} input The input field (eg. `getByLabelText('The label')`)
 58 |  * @param {Matcher|Matcher[]} optionOrOptions The display name(s) for the option(s) to select
 59 |  * @param {Object} config Optional config options
 60 |  * @param {HTMLElement | (() => HTMLElement)} config.container A container for the react-select and its dropdown (defaults to the react-select container)
 61 |  *            Useful when rending the dropdown to a portal using react-select's `menuPortalTarget`.
 62 |  *            Can be specified as a function if it needs to be lazily evaluated.
 63 |  */
 64 | export const select = async (
 65 |   input: HTMLElement,
 66 |   optionOrOptions: Matcher | Array<Matcher>,
 67 |   config: Config = {}
 68 | ) => {
 69 |   const options = Array.isArray(optionOrOptions)
 70 |     ? optionOrOptions
 71 |     : [optionOrOptions];
 72 | 
 73 |   // Select the items we care about
 74 |   for (const option of options) {
 75 |     await openMenu(input);
 76 | 
 77 |     let container;
 78 |     if (typeof config.container === "function") {
 79 |       // when specified as a function, the container needs to be lazily evaluated, so
 80 |       // we have to wait for it to be visible:
 81 |       await waitFor(config.container);
 82 |       container = config.container();
 83 |     } else if (config.container) {
 84 |       container = config.container;
 85 |     } else {
 86 |       container = getReactSelectContainerFromInput(input);
 87 |     }
 88 | 
 89 |     // only consider visible, interactive elements
 90 |     const matchingElements = await findAllByText(container, option, {
 91 |       // @ts-ignore invalid rtl types :'(
 92 |       ignore: "[aria-live] *,[style*='visibility: hidden']",
 93 |     });
 94 | 
 95 |     act(() => {
 96 |       // When the target option is already selected, the react-select display text
 97 |       // will also match the selector. In this case, the actual dropdown element is
 98 |       // positioned last in the DOM tree.
 99 |       const optionElement = matchingElements[matchingElements.length - 1];
100 |       fireEvent.click(optionElement);
101 |     });
102 |   }
103 | };
104 | 
105 | interface CreateConfig extends Config {
106 |   createOptionText?: string | RegExp;
107 |   waitForElement?: boolean;
108 | }
109 | /**
110 |  * Utility for creating and selecting a value in a Creatable `react-select` dropdown.
111 |  * @async
112 |  * @param {HTMLElement} input The input field (eg. `getByLabelText('The label')`)
113 |  * @param {String} option The display name for the option to type and select
114 |  * @param {Object} config Optional config options
115 |  * @param {HTMLElement} config.container A container for the react-select and its dropdown (defaults to the react-select container)
116 |  *                         Useful when rending the dropdown to a portal using react-select's `menuPortalTarget`
117 |  * @param {boolean} config.waitForElement Whether create should wait for new option to be populated in the select container
118 |  * @param {String|RegExp} config.createOptionText Custom label for the "create new ..." option in the menu (string or regexp)
119 |  */
120 | export const create = async (
121 |   input: HTMLElement,
122 |   option: string,
123 |   { waitForElement = true, ...config }: CreateConfig = {}
124 | ) => {
125 |   const createOptionText = config.createOptionText || /^Create "/;
126 |   openMenu(input);
127 |   type(input, option);
128 | 
129 |   fireEvent.change(input, { target: { value: option } });
130 | 
131 |   await select(input, createOptionText, config);
132 | 
133 |   if (waitForElement) {
134 |     await findByText(getReactSelectContainerFromInput(input), option);
135 |   }
136 | };
137 | 
138 | /**
139 |  * Utility for clearing the first value of a `react-select` dropdown.
140 |  * @param {HTMLElement} input The input field (eg. `getByLabelText('The label')`)
141 |  */
142 | export const clearFirst = async (input: HTMLElement) => {
143 |   const container = getReactSelectContainerFromInput(input);
144 |   // The "clear" button is the first svg element that is hidden to screen readers
145 |   const clearButton = container.querySelector('svg[aria-hidden="true"]')!;
146 |   await clear(input, clearButton);
147 | };
148 | 
149 | /**
150 |  * Utility for clearing all values in a `react-select` dropdown.
151 |  * @param {HTMLElement} input The input field (eg. `getByLabelText('The label')`)
152 |  */
153 | export const clearAll = async (input: HTMLElement) => {
154 |   const container = getReactSelectContainerFromInput(input);
155 |   // The "clear all" button is the penultimate svg element that is hidden to screen readers
156 |   // (the last one is the dropdown arrow)
157 |   const elements = container.querySelectorAll('svg[aria-hidden="true"]');
158 |   const clearAllButton = elements[elements.length - 2];
159 |   await clear(input, clearAllButton);
160 | };
161 | 
162 | const selectEvent = { select, create, clearFirst, clearAll, openMenu };
163 | export default selectEvent;
164 | 


--------------------------------------------------------------------------------
/tsconfig.build.json:
--------------------------------------------------------------------------------
1 | {
2 |   "extends": "./tsconfig.json",
3 |   "compilerOptions": {
4 |     "emitDeclarationOnly": true,
5 |     "outDir": "lib"
6 |   },
7 |   "exclude": ["node_modules", "**/__tests__"]
8 | }
9 | 


--------------------------------------------------------------------------------
/tsconfig.json:
--------------------------------------------------------------------------------
 1 | {
 2 |   "compilerOptions": {
 3 |     "target": "es2015",
 4 |     "module": "commonjs",
 5 |     "lib": ["es2015", "dom"],
 6 |     "declaration": true,
 7 |     "jsx": "react",
 8 | 
 9 |     "strict": true,
10 |     "noImplicitAny": true,
11 |     "strictNullChecks": true,
12 |     "strictFunctionTypes": true,
13 |     "strictBindCallApply": true,
14 |     "strictPropertyInitialization": true,
15 |     "noImplicitThis": true,
16 |     "alwaysStrict": true,
17 | 
18 |     "noUnusedLocals": true,
19 |     "noUnusedParameters": true,
20 |     "noImplicitReturns": true,
21 |     "noFallthroughCasesInSwitch": true,
22 | 
23 |     "esModuleInterop": true,
24 |     "listEmittedFiles": true
25 |   }
26 | }
27 | 


--------------------------------------------------------------------------------