-
Notifications
You must be signed in to change notification settings - Fork 240
/
select-options.ts
117 lines (109 loc) 路 3.67 KB
/
select-options.ts
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
import {createEvent, getConfig, fireEvent} from '@testing-library/dom'
import {isDisabled, isInstanceOfElement} from './utils'
import {click} from './click'
import {focus} from './focus'
import {hover, unhover} from './hover'
function selectOptionsBase(
newValue: boolean,
select: Element,
values: HTMLElement | HTMLElement[] | string[] | string,
init?: MouseEventInit,
) {
if (!newValue && !(select as HTMLSelectElement).multiple) {
throw getConfig().getElementError(
`Unable to deselect an option in a non-multiple select. Use selectOptions to change the selection instead.`,
select,
)
}
const valArray = Array.isArray(values) ? values : [values]
const allOptions = Array.from(
select.querySelectorAll('option, [role="option"]'),
)
const selectedOptions = valArray
.map(val => {
if (typeof val !== 'string' && allOptions.includes(val)) {
return val
} else {
const matchingOption = allOptions.find(
o =>
(o as HTMLInputElement | HTMLTextAreaElement).value === val ||
o.innerHTML === val,
)
if (matchingOption) {
return matchingOption
} else {
throw getConfig().getElementError(
`Value "${String(val)}" not found in options`,
select,
)
}
}
})
.filter(option => !isDisabled(option))
if (isDisabled(select) || !selectedOptions.length) return
if (isInstanceOfElement(select, 'HTMLSelectElement')) {
if ((select as HTMLSelectElement).multiple) {
for (const option of selectedOptions) {
// events fired for multiple select are weird. Can't use hover...
fireEvent.pointerOver(option, init)
fireEvent.pointerEnter(select, init)
fireEvent.mouseOver(option)
fireEvent.mouseEnter(select)
fireEvent.pointerMove(option, init)
fireEvent.mouseMove(option, init)
fireEvent.pointerDown(option, init)
fireEvent.mouseDown(option, init)
focus(select)
fireEvent.pointerUp(option, init)
fireEvent.mouseUp(option, init)
selectOption(option as HTMLOptionElement)
fireEvent.click(option, init)
}
} else if (selectedOptions.length === 1) {
// the click to open the select options
click(select, init)
selectOption(selectedOptions[0] as HTMLOptionElement)
// the browser triggers another click event on the select for the click on the option
// this second click has no 'down' phase
fireEvent.pointerOver(select, init)
fireEvent.pointerEnter(select, init)
fireEvent.mouseOver(select)
fireEvent.mouseEnter(select)
fireEvent.pointerUp(select, init)
fireEvent.mouseUp(select, init)
fireEvent.click(select, init)
} else {
throw getConfig().getElementError(
`Cannot select multiple options on a non-multiple select`,
select,
)
}
} else if (select.getAttribute('role') === 'listbox') {
selectedOptions.forEach(option => {
hover(option, init)
click(option, init)
unhover(option, init)
})
} else {
throw getConfig().getElementError(
`Cannot select options on elements that are neither select nor listbox elements`,
select,
)
}
function selectOption(option: HTMLOptionElement) {
option.selected = newValue
fireEvent(
select,
createEvent('input', select, {
bubbles: true,
cancelable: false,
composed: true,
...init,
}),
)
fireEvent.change(select, init)
}
}
const selectOptions = selectOptionsBase.bind(null, true)
const deselectOptions = selectOptionsBase.bind(null, false)
export {selectOptions, deselectOptions}