-
Notifications
You must be signed in to change notification settings - Fork 252
Commit
This commit does not belong to any branch on this repository, and may belong to a fork outside of the repository.
Merge pull request #130 from testing-library/select-multiple
Select multiple
- Loading branch information
Showing
4 changed files
with
261 additions
and
3 deletions.
There are no files selected for viewing
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,174 @@ | ||
| import React from "react"; | ||
| import { render, cleanup, fireEvent } from "@testing-library/react"; | ||
| import "jest-dom/extend-expect"; | ||
| import userEvent from "../src"; | ||
|
|
||
| afterEach(cleanup); | ||
|
|
||
| describe("userEvent.selectOptions", () => { | ||
| it.each(["select", "select multiple"])( | ||
| "should fire the correct events for <%s>", | ||
| type => { | ||
| const events = []; | ||
| const eventsHandler = jest.fn(evt => events.push(evt.type)); | ||
| const multiple = type === "select multiple"; | ||
| const eventHandlers = { | ||
| onMouseOver: eventsHandler, | ||
| onMouseMove: eventsHandler, | ||
| onMouseDown: eventsHandler, | ||
| onFocus: eventsHandler, | ||
| onMouseUp: eventsHandler, | ||
| onClick: eventsHandler | ||
| }; | ||
|
|
||
| const { getByTestId } = render( | ||
| <select {...{ ...eventHandlers, multiple }} data-testid="element"> | ||
| <option value="1">1</option> | ||
| <option value="2">2</option> | ||
| <option value="3">3</option> | ||
| </select> | ||
| ); | ||
|
|
||
| userEvent.selectOptions(getByTestId("element"), "1"); | ||
|
|
||
| expect(events).toEqual([ | ||
| "mouseover", | ||
| "mousemove", | ||
| "mousedown", | ||
| "focus", | ||
| "mouseup", | ||
| "click", | ||
| "mouseover", // The events repeat because we click on the child OPTION too | ||
| "mousemove", // But these specifically are the events bubbling up to the <select> | ||
| "mousedown", | ||
| "focus", | ||
| "mouseup", | ||
| "click" | ||
| ]); | ||
| } | ||
| ); | ||
|
|
||
| it("should fire the correct events on selected OPTION child with <select>", () => { | ||
| function handleEvent(evt) { | ||
| const optValue = parseInt(evt.target.value); | ||
| events[optValue] = [...(events[optValue] || []), evt.type]; | ||
| } | ||
|
|
||
| const events = []; | ||
| const eventsHandler = jest.fn(handleEvent); | ||
| const eventHandlers = { | ||
| onMouseOver: eventsHandler, | ||
| onMouseMove: eventsHandler, | ||
| onMouseDown: eventsHandler, | ||
| onFocus: eventsHandler, | ||
| onMouseUp: eventsHandler, | ||
| onClick: eventsHandler | ||
| }; | ||
|
|
||
| const { getByTestId } = render( | ||
| <select data-testid="element"> | ||
| <option {...eventHandlers} value="1"> | ||
| 1 | ||
| </option> | ||
| <option {...eventHandlers} value="2"> | ||
| 2 | ||
| </option> | ||
| <option {...eventHandlers} value="3"> | ||
| 3 | ||
| </option> | ||
| </select> | ||
| ); | ||
|
|
||
| userEvent.selectOptions(getByTestId("element"), ["2"]); | ||
|
|
||
| expect(events[1]).toBe(undefined); | ||
| expect(events[3]).toBe(undefined); | ||
| expect(events[2]).toEqual([ | ||
| "mouseover", | ||
| "mousemove", | ||
| "mousedown", | ||
| "focus", | ||
| "mouseup", | ||
| "click" | ||
| ]); | ||
| }); | ||
|
|
||
| it("should fire the correct events on selected OPTION children with <select multiple>", () => { | ||
| function handleEvent(evt) { | ||
| const optValue = parseInt(evt.target.value); | ||
| events[optValue] = [...(events[optValue] || []), evt.type]; | ||
| } | ||
|
|
||
| const events = []; | ||
| const eventsHandler = jest.fn(handleEvent); | ||
| const eventHandlers = { | ||
| onMouseOver: eventsHandler, | ||
| onMouseMove: eventsHandler, | ||
| onMouseDown: eventsHandler, | ||
| onFocus: eventsHandler, | ||
| onMouseUp: eventsHandler, | ||
| onClick: eventsHandler | ||
| }; | ||
|
|
||
| const { getByTestId } = render( | ||
| <select multiple data-testid="element"> | ||
| <option {...eventHandlers} value="1"> | ||
| 1 | ||
| </option> | ||
| <option {...eventHandlers} value="2"> | ||
| 2 | ||
| </option> | ||
| <option {...eventHandlers} value="3"> | ||
| 3 | ||
| </option> | ||
| </select> | ||
| ); | ||
|
|
||
| userEvent.selectOptions(getByTestId("element"), ["1", "3"]); | ||
|
|
||
| expect(events[2]).toBe(undefined); | ||
| expect(events[1]).toEqual([ | ||
| "mouseover", | ||
| "mousemove", | ||
| "mousedown", | ||
| "focus", | ||
| "mouseup", | ||
| "click" | ||
| ]); | ||
|
|
||
| expect(events[3]).toEqual([ | ||
| "mouseover", | ||
| "mousemove", | ||
| "mousedown", | ||
| "focus", | ||
| "mouseup", | ||
| "click" | ||
| ]); | ||
| }); | ||
|
|
||
| it("sets the selected prop on the selected OPTION", () => { | ||
| const onSubmit = jest.fn(); | ||
|
|
||
| const { getByTestId } = render( | ||
| <form onSubmit={onSubmit}> | ||
| <select multiple data-testid="element"> | ||
| <option data-testid="val1" value="1"> | ||
| 1 | ||
| </option> | ||
| <option data-testid="val2" value="2"> | ||
| 2 | ||
| </option> | ||
| <option data-testid="val3" value="3"> | ||
| 3 | ||
| </option> | ||
| </select> | ||
| </form> | ||
| ); | ||
|
|
||
| userEvent.selectOptions(getByTestId("element"), ["1", "3"]); | ||
|
|
||
| expect(getByTestId("val1").selected).toBe(true); | ||
| expect(getByTestId("val2").selected).toBe(false); | ||
| expect(getByTestId("val3").selected).toBe(true); | ||
| }); | ||
| }); |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters