@instructure/ui-selectable 10.16.1-snapshot-0 → 10.16.1-snapshot-1
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/CHANGELOG.md +1 -1
- package/es/Selectable/__new-tests__/Selectable.test.js +635 -326
- package/lib/Selectable/__new-tests__/Selectable.test.js +686 -377
- package/package.json +8 -8
- package/src/Selectable/__new-tests__/Selectable.test.tsx +0 -1
- package/src/Selectable/index.tsx +1 -1
- package/src/Selectable/props.ts +1 -1
- package/tsconfig.build.tsbuildinfo +1 -1
- package/types/Selectable/__new-tests__/Selectable.test.d.ts.map +1 -1
- package/types/Selectable/index.d.ts +6 -6
- package/types/Selectable/index.d.ts.map +1 -1
- package/types/Selectable/props.d.ts +1 -1
- package/types/Selectable/props.d.ts.map +1 -1
|
@@ -22,29 +22,55 @@
|
|
|
22
22
|
* SOFTWARE.
|
|
23
23
|
*/
|
|
24
24
|
|
|
25
|
-
import React from 'react';
|
|
26
25
|
import { render, screen, waitFor } from '@testing-library/react';
|
|
27
26
|
import { vi } from 'vitest';
|
|
28
27
|
import userEvent from '@testing-library/user-event';
|
|
29
28
|
import '@testing-library/jest-dom';
|
|
30
29
|
import { Selectable } from '../index';
|
|
30
|
+
import { jsx as _jsx, jsxs as _jsxs } from "@emotion/react/jsx-runtime";
|
|
31
31
|
const defaultOptions = ['foo', 'bar', 'baz'];
|
|
32
32
|
describe('<Selectable />', () => {
|
|
33
|
-
const getSelectable = selectable =>
|
|
34
|
-
|
|
35
|
-
|
|
36
|
-
|
|
37
|
-
|
|
38
|
-
|
|
39
|
-
|
|
33
|
+
const getSelectable = selectable => _jsxs("span", {
|
|
34
|
+
...selectable.getRootProps(),
|
|
35
|
+
children: [_jsx("label", {
|
|
36
|
+
...selectable.getLabelProps(),
|
|
37
|
+
children: "Selectable"
|
|
38
|
+
}), _jsx("input", {
|
|
39
|
+
type: "text",
|
|
40
|
+
...selectable.getTriggerProps(),
|
|
41
|
+
...selectable.getInputProps()
|
|
42
|
+
}), _jsx("ul", {
|
|
43
|
+
...selectable.getListProps(),
|
|
44
|
+
children: defaultOptions.map(opt => _jsx("li", {
|
|
45
|
+
...selectable.getOptionProps({
|
|
46
|
+
id: opt
|
|
47
|
+
}),
|
|
48
|
+
children: opt
|
|
49
|
+
}, opt))
|
|
50
|
+
})]
|
|
51
|
+
});
|
|
40
52
|
it('should focus trigger when label is clicked', async () => {
|
|
41
|
-
render(
|
|
42
|
-
|
|
43
|
-
|
|
44
|
-
|
|
45
|
-
|
|
46
|
-
|
|
47
|
-
|
|
53
|
+
render(_jsx(Selectable, {
|
|
54
|
+
children: selectable => _jsxs("span", {
|
|
55
|
+
...selectable.getRootProps(),
|
|
56
|
+
children: [_jsx("label", {
|
|
57
|
+
...selectable.getLabelProps(),
|
|
58
|
+
children: "Selectable"
|
|
59
|
+
}), _jsx("input", {
|
|
60
|
+
type: "text",
|
|
61
|
+
...selectable.getTriggerProps(),
|
|
62
|
+
...selectable.getInputProps()
|
|
63
|
+
}), _jsx("ul", {
|
|
64
|
+
...selectable.getListProps(),
|
|
65
|
+
children: defaultOptions.map(opt => _jsx("li", {
|
|
66
|
+
...selectable.getOptionProps({
|
|
67
|
+
id: opt
|
|
68
|
+
}),
|
|
69
|
+
children: opt
|
|
70
|
+
}, opt))
|
|
71
|
+
})]
|
|
72
|
+
})
|
|
73
|
+
}));
|
|
48
74
|
const label = screen.getByText('Selectable');
|
|
49
75
|
const input = screen.getByRole('combobox');
|
|
50
76
|
expect(document.activeElement).not.toBe(input);
|
|
@@ -56,16 +82,29 @@ describe('<Selectable />', () => {
|
|
|
56
82
|
it('should not blur trigger when label is clicked', async () => {
|
|
57
83
|
const onFocus = vi.fn();
|
|
58
84
|
const onBlur = vi.fn();
|
|
59
|
-
render(
|
|
60
|
-
|
|
61
|
-
|
|
62
|
-
|
|
63
|
-
|
|
64
|
-
|
|
65
|
-
|
|
66
|
-
|
|
67
|
-
|
|
68
|
-
|
|
85
|
+
render(_jsx(Selectable, {
|
|
86
|
+
children: selectable => _jsxs("span", {
|
|
87
|
+
...selectable.getRootProps(),
|
|
88
|
+
children: [_jsx("label", {
|
|
89
|
+
...selectable.getLabelProps(),
|
|
90
|
+
children: "Selectable"
|
|
91
|
+
}), _jsx("input", {
|
|
92
|
+
type: "text",
|
|
93
|
+
...selectable.getTriggerProps(),
|
|
94
|
+
...selectable.getInputProps(),
|
|
95
|
+
onBlur: onBlur,
|
|
96
|
+
onFocus: onFocus
|
|
97
|
+
}), _jsx("ul", {
|
|
98
|
+
...selectable.getListProps(),
|
|
99
|
+
children: defaultOptions.map(opt => _jsx("li", {
|
|
100
|
+
...selectable.getOptionProps({
|
|
101
|
+
id: opt
|
|
102
|
+
}),
|
|
103
|
+
children: opt
|
|
104
|
+
}, opt))
|
|
105
|
+
})]
|
|
106
|
+
})
|
|
107
|
+
}));
|
|
69
108
|
const label = screen.getByText('Selectable');
|
|
70
109
|
const input = screen.getByRole('combobox');
|
|
71
110
|
expect(document.activeElement).not.toBe(input);
|
|
@@ -79,19 +118,32 @@ describe('<Selectable />', () => {
|
|
|
79
118
|
const onClick = vi.fn();
|
|
80
119
|
const onMouseDown = vi.fn();
|
|
81
120
|
const onRequestHideOptions = vi.fn();
|
|
82
|
-
render(
|
|
121
|
+
render(_jsx(Selectable, {
|
|
83
122
|
isShowingOptions: true,
|
|
84
|
-
onRequestHideOptions: onRequestHideOptions
|
|
85
|
-
|
|
86
|
-
|
|
87
|
-
|
|
88
|
-
|
|
89
|
-
|
|
90
|
-
|
|
91
|
-
|
|
92
|
-
|
|
93
|
-
|
|
94
|
-
|
|
123
|
+
onRequestHideOptions: onRequestHideOptions,
|
|
124
|
+
children: selectable => _jsxs("span", {
|
|
125
|
+
...selectable.getRootProps(),
|
|
126
|
+
children: [_jsx("label", {
|
|
127
|
+
...selectable.getLabelProps(),
|
|
128
|
+
children: "Selectable"
|
|
129
|
+
}), _jsx("input", {
|
|
130
|
+
type: "text",
|
|
131
|
+
...selectable.getTriggerProps(),
|
|
132
|
+
...selectable.getInputProps()
|
|
133
|
+
}), _jsx("ul", {
|
|
134
|
+
...selectable.getListProps({
|
|
135
|
+
onClick,
|
|
136
|
+
onMouseDown
|
|
137
|
+
}),
|
|
138
|
+
children: defaultOptions.map(opt => _jsx("li", {
|
|
139
|
+
...selectable.getOptionProps({
|
|
140
|
+
id: opt
|
|
141
|
+
}),
|
|
142
|
+
children: opt
|
|
143
|
+
}, opt))
|
|
144
|
+
})]
|
|
145
|
+
})
|
|
146
|
+
}));
|
|
95
147
|
const input = screen.getByRole('combobox');
|
|
96
148
|
const list = screen.getByRole('listbox');
|
|
97
149
|
input.focus();
|
|
@@ -107,18 +159,31 @@ describe('<Selectable />', () => {
|
|
|
107
159
|
const onClick = vi.fn();
|
|
108
160
|
const onMouseDown = vi.fn();
|
|
109
161
|
const onRequestHideOptions = vi.fn();
|
|
110
|
-
render(
|
|
162
|
+
render(_jsx(Selectable, {
|
|
111
163
|
isShowingOptions: true,
|
|
112
|
-
onRequestHideOptions: onRequestHideOptions
|
|
113
|
-
|
|
114
|
-
|
|
115
|
-
|
|
116
|
-
|
|
117
|
-
|
|
118
|
-
|
|
119
|
-
|
|
120
|
-
|
|
121
|
-
|
|
164
|
+
onRequestHideOptions: onRequestHideOptions,
|
|
165
|
+
children: selectable => _jsxs("span", {
|
|
166
|
+
...selectable.getRootProps(),
|
|
167
|
+
children: [_jsx("label", {
|
|
168
|
+
...selectable.getLabelProps(),
|
|
169
|
+
children: "Selectable"
|
|
170
|
+
}), _jsx("input", {
|
|
171
|
+
type: "text",
|
|
172
|
+
...selectable.getTriggerProps(),
|
|
173
|
+
...selectable.getInputProps()
|
|
174
|
+
}), _jsx("ul", {
|
|
175
|
+
...selectable.getListProps(),
|
|
176
|
+
children: defaultOptions.map(opt => _jsx("li", {
|
|
177
|
+
...selectable.getOptionProps({
|
|
178
|
+
id: opt,
|
|
179
|
+
onClick,
|
|
180
|
+
onMouseDown
|
|
181
|
+
}),
|
|
182
|
+
children: opt
|
|
183
|
+
}, opt))
|
|
184
|
+
})]
|
|
185
|
+
})
|
|
186
|
+
}));
|
|
122
187
|
const input = screen.getByRole('combobox');
|
|
123
188
|
const option = screen.getByText('foo');
|
|
124
189
|
input.focus();
|
|
@@ -135,17 +200,32 @@ describe('<Selectable />', () => {
|
|
|
135
200
|
const onMouseDown = vi.fn();
|
|
136
201
|
const onClick = vi.fn();
|
|
137
202
|
const onKeyDown = vi.fn();
|
|
138
|
-
render(
|
|
139
|
-
|
|
140
|
-
|
|
141
|
-
|
|
142
|
-
|
|
143
|
-
|
|
144
|
-
|
|
145
|
-
|
|
146
|
-
|
|
147
|
-
|
|
148
|
-
|
|
203
|
+
render(_jsx(Selectable, {
|
|
204
|
+
children: selectable => _jsxs("span", {
|
|
205
|
+
...selectable.getRootProps(),
|
|
206
|
+
children: [_jsx("label", {
|
|
207
|
+
...selectable.getLabelProps(),
|
|
208
|
+
children: "Selectable"
|
|
209
|
+
}), _button || (_button = _jsx("button", {
|
|
210
|
+
onMouseDown: onMouseDown,
|
|
211
|
+
onClick: onClick,
|
|
212
|
+
onKeyDown: onKeyDown,
|
|
213
|
+
children: "Selected"
|
|
214
|
+
})), _jsx("input", {
|
|
215
|
+
type: "text",
|
|
216
|
+
...selectable.getTriggerProps(),
|
|
217
|
+
...selectable.getInputProps()
|
|
218
|
+
}), _jsx("ul", {
|
|
219
|
+
...selectable.getListProps(),
|
|
220
|
+
children: defaultOptions.map(opt => _jsx("li", {
|
|
221
|
+
...selectable.getOptionProps({
|
|
222
|
+
id: opt
|
|
223
|
+
}),
|
|
224
|
+
children: opt
|
|
225
|
+
}, opt))
|
|
226
|
+
})]
|
|
227
|
+
})
|
|
228
|
+
}));
|
|
149
229
|
const button = screen.getByText('Selected');
|
|
150
230
|
userEvent.click(button);
|
|
151
231
|
await userEvent.type(button, '{enter}');
|
|
@@ -159,10 +239,11 @@ describe('<Selectable />', () => {
|
|
|
159
239
|
describe('should fire onRequestShowOptions', () => {
|
|
160
240
|
it('when label is clicked', async () => {
|
|
161
241
|
const onRequestShowOptions = vi.fn();
|
|
162
|
-
const _render = render(
|
|
242
|
+
const _render = render(_jsx(Selectable, {
|
|
163
243
|
isShowingOptions: false,
|
|
164
|
-
onRequestShowOptions: onRequestShowOptions
|
|
165
|
-
|
|
244
|
+
onRequestShowOptions: onRequestShowOptions,
|
|
245
|
+
children: selectable => getSelectable(selectable)
|
|
246
|
+
})),
|
|
166
247
|
rerender = _render.rerender;
|
|
167
248
|
const label = screen.getByText('Selectable');
|
|
168
249
|
userEvent.click(label);
|
|
@@ -171,10 +252,11 @@ describe('<Selectable />', () => {
|
|
|
171
252
|
});
|
|
172
253
|
|
|
173
254
|
// Set isShowingOptions:
|
|
174
|
-
rerender(
|
|
255
|
+
rerender(_jsx(Selectable, {
|
|
175
256
|
isShowingOptions: true,
|
|
176
|
-
onRequestShowOptions: onRequestShowOptions
|
|
177
|
-
|
|
257
|
+
onRequestShowOptions: onRequestShowOptions,
|
|
258
|
+
children: selectable => getSelectable(selectable)
|
|
259
|
+
}));
|
|
178
260
|
userEvent.click(label);
|
|
179
261
|
await waitFor(() => {
|
|
180
262
|
expect(onRequestShowOptions).toHaveBeenCalledTimes(1);
|
|
@@ -182,20 +264,22 @@ describe('<Selectable />', () => {
|
|
|
182
264
|
});
|
|
183
265
|
it('when input is clicked', async () => {
|
|
184
266
|
const onRequestShowOptions = vi.fn();
|
|
185
|
-
const _render2 = render(
|
|
267
|
+
const _render2 = render(_jsx(Selectable, {
|
|
186
268
|
isShowingOptions: false,
|
|
187
|
-
onRequestShowOptions: onRequestShowOptions
|
|
188
|
-
|
|
269
|
+
onRequestShowOptions: onRequestShowOptions,
|
|
270
|
+
children: selectable => getSelectable(selectable)
|
|
271
|
+
})),
|
|
189
272
|
rerender = _render2.rerender;
|
|
190
273
|
const input = screen.getByRole('combobox');
|
|
191
274
|
userEvent.click(input);
|
|
192
275
|
await waitFor(() => {
|
|
193
276
|
expect(onRequestShowOptions).toHaveBeenCalledTimes(1);
|
|
194
277
|
});
|
|
195
|
-
rerender(
|
|
278
|
+
rerender(_jsx(Selectable, {
|
|
196
279
|
isShowingOptions: true,
|
|
197
|
-
onRequestShowOptions: onRequestShowOptions
|
|
198
|
-
|
|
280
|
+
onRequestShowOptions: onRequestShowOptions,
|
|
281
|
+
children: selectable => getSelectable(selectable)
|
|
282
|
+
}));
|
|
199
283
|
userEvent.click(input);
|
|
200
284
|
await waitFor(() => {
|
|
201
285
|
expect(onRequestShowOptions).toHaveBeenCalledTimes(1);
|
|
@@ -203,10 +287,11 @@ describe('<Selectable />', () => {
|
|
|
203
287
|
});
|
|
204
288
|
it('when up/down arrows are pressed', async () => {
|
|
205
289
|
const onRequestShowOptions = vi.fn();
|
|
206
|
-
render(
|
|
290
|
+
render(_jsx(Selectable, {
|
|
207
291
|
isShowingOptions: false,
|
|
208
|
-
onRequestShowOptions: onRequestShowOptions
|
|
209
|
-
|
|
292
|
+
onRequestShowOptions: onRequestShowOptions,
|
|
293
|
+
children: selectable => getSelectable(selectable)
|
|
294
|
+
}));
|
|
210
295
|
const input = screen.getByRole('combobox');
|
|
211
296
|
await userEvent.type(input, '{arrowdown}');
|
|
212
297
|
await waitFor(() => {
|
|
@@ -219,16 +304,18 @@ describe('<Selectable />', () => {
|
|
|
219
304
|
});
|
|
220
305
|
it('when space is pressed', async () => {
|
|
221
306
|
const onRequestShowOptions = vi.fn();
|
|
222
|
-
const _render3 = render(
|
|
223
|
-
onRequestShowOptions: onRequestShowOptions
|
|
224
|
-
|
|
307
|
+
const _render3 = render(_jsx(Selectable, {
|
|
308
|
+
onRequestShowOptions: onRequestShowOptions,
|
|
309
|
+
children: selectable => getSelectable(selectable)
|
|
310
|
+
})),
|
|
225
311
|
rerender = _render3.rerender;
|
|
226
312
|
const input = screen.getByRole('combobox');
|
|
227
313
|
await userEvent.type(input, '{space}');
|
|
228
|
-
rerender(
|
|
314
|
+
rerender(_jsx(Selectable, {
|
|
229
315
|
isShowingOptions: true,
|
|
230
|
-
onRequestShowOptions: onRequestShowOptions
|
|
231
|
-
|
|
316
|
+
onRequestShowOptions: onRequestShowOptions,
|
|
317
|
+
children: selectable => getSelectable(selectable)
|
|
318
|
+
}));
|
|
232
319
|
await userEvent.type(input, '{space}');
|
|
233
320
|
await waitFor(() => {
|
|
234
321
|
expect(onRequestShowOptions).toHaveBeenCalledTimes(1);
|
|
@@ -238,20 +325,22 @@ describe('<Selectable />', () => {
|
|
|
238
325
|
describe('should fire onRequestHideOptions', () => {
|
|
239
326
|
it('when label is clicked', async () => {
|
|
240
327
|
const onRequestHideOptions = vi.fn();
|
|
241
|
-
const _render4 = render(
|
|
328
|
+
const _render4 = render(_jsx(Selectable, {
|
|
242
329
|
isShowingOptions: true,
|
|
243
|
-
onRequestHideOptions: onRequestHideOptions
|
|
244
|
-
|
|
330
|
+
onRequestHideOptions: onRequestHideOptions,
|
|
331
|
+
children: selectable => getSelectable(selectable)
|
|
332
|
+
})),
|
|
245
333
|
rerender = _render4.rerender;
|
|
246
334
|
const label = screen.getByText('Selectable');
|
|
247
335
|
await userEvent.click(label);
|
|
248
336
|
await waitFor(() => {
|
|
249
337
|
expect(onRequestHideOptions).toHaveBeenCalledTimes(1);
|
|
250
338
|
});
|
|
251
|
-
rerender(
|
|
339
|
+
rerender(_jsx(Selectable, {
|
|
252
340
|
isShowingOptions: false,
|
|
253
|
-
onRequestHideOptions: onRequestHideOptions
|
|
254
|
-
|
|
341
|
+
onRequestHideOptions: onRequestHideOptions,
|
|
342
|
+
children: selectable => getSelectable(selectable)
|
|
343
|
+
}));
|
|
255
344
|
await userEvent.click(label);
|
|
256
345
|
await waitFor(() => {
|
|
257
346
|
expect(onRequestHideOptions).toHaveBeenCalledTimes(1);
|
|
@@ -259,20 +348,22 @@ describe('<Selectable />', () => {
|
|
|
259
348
|
});
|
|
260
349
|
it('when input is clicked', async () => {
|
|
261
350
|
const onRequestHideOptions = vi.fn();
|
|
262
|
-
const _render5 = render(
|
|
351
|
+
const _render5 = render(_jsx(Selectable, {
|
|
263
352
|
isShowingOptions: true,
|
|
264
|
-
onRequestHideOptions: onRequestHideOptions
|
|
265
|
-
|
|
353
|
+
onRequestHideOptions: onRequestHideOptions,
|
|
354
|
+
children: selectable => getSelectable(selectable)
|
|
355
|
+
})),
|
|
266
356
|
rerender = _render5.rerender;
|
|
267
357
|
const input = screen.getByRole('combobox');
|
|
268
358
|
await userEvent.click(input);
|
|
269
359
|
await waitFor(() => {
|
|
270
360
|
expect(onRequestHideOptions).toHaveBeenCalledTimes(1);
|
|
271
361
|
});
|
|
272
|
-
rerender(
|
|
362
|
+
rerender(_jsx(Selectable, {
|
|
273
363
|
isShowingOptions: false,
|
|
274
|
-
onRequestHideOptions: onRequestHideOptions
|
|
275
|
-
|
|
364
|
+
onRequestHideOptions: onRequestHideOptions,
|
|
365
|
+
children: selectable => getSelectable(selectable)
|
|
366
|
+
}));
|
|
276
367
|
await userEvent.click(input);
|
|
277
368
|
await waitFor(() => {
|
|
278
369
|
expect(onRequestHideOptions).toHaveBeenCalledTimes(1);
|
|
@@ -283,23 +374,35 @@ describe('<Selectable />', () => {
|
|
|
283
374
|
describe('getRootProps()', () => {
|
|
284
375
|
it('should provide prop getter for root element', async () => {
|
|
285
376
|
const renderSpy = vi.fn();
|
|
286
|
-
render(
|
|
287
|
-
|
|
288
|
-
|
|
377
|
+
render(_jsx(Selectable, {
|
|
378
|
+
children: selectable => {
|
|
379
|
+
renderSpy(selectable);
|
|
380
|
+
return null;
|
|
381
|
+
}
|
|
289
382
|
}));
|
|
290
383
|
const selectableProps = renderSpy.mock.calls[0][0];
|
|
291
384
|
expect(selectableProps.getRootProps).toBeDefined();
|
|
292
385
|
});
|
|
293
386
|
it('should allow custom props to pass through', async () => {
|
|
294
|
-
render(
|
|
295
|
-
|
|
296
|
-
|
|
297
|
-
|
|
298
|
-
|
|
299
|
-
|
|
300
|
-
|
|
301
|
-
|
|
302
|
-
|
|
387
|
+
render(_jsx(Selectable, {
|
|
388
|
+
children: selectable => _jsxs("span", {
|
|
389
|
+
...selectable.getRootProps({
|
|
390
|
+
'data-custom-attr': true,
|
|
391
|
+
className: 'customClass',
|
|
392
|
+
style: {
|
|
393
|
+
color: 'red'
|
|
394
|
+
}
|
|
395
|
+
}),
|
|
396
|
+
children: [_jsx("label", {
|
|
397
|
+
...selectable.getLabelProps(),
|
|
398
|
+
children: "Selectable"
|
|
399
|
+
}), _jsx("input", {
|
|
400
|
+
type: "text",
|
|
401
|
+
...selectable.getTriggerProps(),
|
|
402
|
+
...selectable.getInputProps()
|
|
403
|
+
})]
|
|
404
|
+
})
|
|
405
|
+
}));
|
|
303
406
|
const root = screen.getByText('Selectable').closest('span');
|
|
304
407
|
expect(root).toHaveAttribute('data-custom-attr', 'true');
|
|
305
408
|
expect(root).toHaveClass('customClass');
|
|
@@ -308,13 +411,18 @@ describe('<Selectable />', () => {
|
|
|
308
411
|
it('should allow supplemental onClick behavior', async () => {
|
|
309
412
|
const onClick = vi.fn();
|
|
310
413
|
const onRequestShowOptions = vi.fn();
|
|
311
|
-
render(
|
|
312
|
-
onRequestShowOptions: onRequestShowOptions
|
|
313
|
-
|
|
314
|
-
|
|
315
|
-
|
|
316
|
-
|
|
317
|
-
|
|
414
|
+
render(_jsx(Selectable, {
|
|
415
|
+
onRequestShowOptions: onRequestShowOptions,
|
|
416
|
+
children: selectable => _jsx("span", {
|
|
417
|
+
children: _jsx("input", {
|
|
418
|
+
type: "text",
|
|
419
|
+
...selectable.getTriggerProps({
|
|
420
|
+
onClick
|
|
421
|
+
}),
|
|
422
|
+
...selectable.getInputProps()
|
|
423
|
+
})
|
|
424
|
+
})
|
|
425
|
+
}));
|
|
318
426
|
const input = screen.getByRole('combobox');
|
|
319
427
|
await userEvent.click(input);
|
|
320
428
|
await waitFor(() => {
|
|
@@ -326,42 +434,70 @@ describe('<Selectable />', () => {
|
|
|
326
434
|
describe('getLabelProps()', () => {
|
|
327
435
|
it('should provide prop getter for label element', async () => {
|
|
328
436
|
const renderSpy = vi.fn();
|
|
329
|
-
render(
|
|
330
|
-
|
|
331
|
-
|
|
437
|
+
render(_jsx(Selectable, {
|
|
438
|
+
children: selectable => {
|
|
439
|
+
renderSpy(selectable);
|
|
440
|
+
return null;
|
|
441
|
+
}
|
|
332
442
|
}));
|
|
333
443
|
expect(renderSpy.mock.calls[0].length > 0).toBeTruthy();
|
|
334
444
|
});
|
|
335
445
|
it('should set htmlFor prop', async () => {
|
|
336
|
-
render(
|
|
337
|
-
|
|
338
|
-
|
|
446
|
+
render(_jsx(Selectable, {
|
|
447
|
+
children: selectable => _jsxs("span", {
|
|
448
|
+
children: [_jsx("label", {
|
|
449
|
+
...selectable.getLabelProps(),
|
|
450
|
+
children: "Selectable"
|
|
451
|
+
}), _jsx("input", {
|
|
452
|
+
type: "text",
|
|
453
|
+
...selectable.getTriggerProps(),
|
|
454
|
+
...selectable.getInputProps()
|
|
455
|
+
})]
|
|
456
|
+
})
|
|
457
|
+
}));
|
|
339
458
|
const label = screen.getByText('Selectable');
|
|
340
459
|
const input = screen.getByRole('combobox');
|
|
341
460
|
expect(label).toHaveAttribute('for', input.getAttribute('id'));
|
|
342
461
|
});
|
|
343
462
|
it('should set htmlFor prop with custom defined id', async () => {
|
|
344
463
|
const customId = 'CustomSelect';
|
|
345
|
-
render(
|
|
346
|
-
id: customId
|
|
347
|
-
|
|
348
|
-
|
|
349
|
-
|
|
464
|
+
render(_jsx(Selectable, {
|
|
465
|
+
id: customId,
|
|
466
|
+
children: selectable => _jsxs("span", {
|
|
467
|
+
children: [_jsx("label", {
|
|
468
|
+
...selectable.getLabelProps(),
|
|
469
|
+
children: "Selectable"
|
|
470
|
+
}), _jsx("input", {
|
|
471
|
+
type: "text",
|
|
472
|
+
...selectable.getTriggerProps(),
|
|
473
|
+
...selectable.getInputProps()
|
|
474
|
+
})]
|
|
475
|
+
})
|
|
476
|
+
}));
|
|
350
477
|
const label = screen.getByText('Selectable');
|
|
351
478
|
const input = screen.getByRole('combobox');
|
|
352
479
|
expect(input).toHaveAttribute('id', customId);
|
|
353
480
|
expect(label).toHaveAttribute('for', customId);
|
|
354
481
|
});
|
|
355
482
|
it('should allow custom props to pass through', async () => {
|
|
356
|
-
render(
|
|
357
|
-
|
|
358
|
-
|
|
359
|
-
|
|
360
|
-
|
|
361
|
-
|
|
362
|
-
|
|
363
|
-
|
|
364
|
-
|
|
483
|
+
render(_jsx(Selectable, {
|
|
484
|
+
children: selectable => _jsxs("span", {
|
|
485
|
+
children: [_jsx("label", {
|
|
486
|
+
...selectable.getLabelProps({
|
|
487
|
+
'data-custom-attr': true,
|
|
488
|
+
className: 'customClass',
|
|
489
|
+
style: {
|
|
490
|
+
color: 'red'
|
|
491
|
+
}
|
|
492
|
+
}),
|
|
493
|
+
children: "Selectable"
|
|
494
|
+
}), _jsx("input", {
|
|
495
|
+
type: "text",
|
|
496
|
+
...selectable.getTriggerProps(),
|
|
497
|
+
...selectable.getInputProps()
|
|
498
|
+
})]
|
|
499
|
+
})
|
|
500
|
+
}));
|
|
365
501
|
const label = screen.getByText('Selectable');
|
|
366
502
|
expect(label).toHaveAttribute('data-custom-attr', 'true');
|
|
367
503
|
expect(label).toHaveClass('customClass');
|
|
@@ -373,16 +509,26 @@ describe('<Selectable />', () => {
|
|
|
373
509
|
describe('getTriggerProps()', () => {
|
|
374
510
|
it('should provide prop getter for trigger element', async () => {
|
|
375
511
|
const renderSpy = vi.fn();
|
|
376
|
-
render(
|
|
377
|
-
|
|
378
|
-
|
|
512
|
+
render(_jsx(Selectable, {
|
|
513
|
+
children: selectable => {
|
|
514
|
+
renderSpy(selectable);
|
|
515
|
+
return null;
|
|
516
|
+
}
|
|
379
517
|
}));
|
|
380
518
|
expect(renderSpy.mock.calls[0][0].getTriggerProps).toBeDefined();
|
|
381
519
|
});
|
|
382
520
|
it('should set appropriate prop defaults', async () => {
|
|
383
|
-
const _render6 = render(
|
|
384
|
-
|
|
385
|
-
|
|
521
|
+
const _render6 = render(_jsx(Selectable, {
|
|
522
|
+
children: selectable => _jsxs("span", {
|
|
523
|
+
children: [_jsx("input", {
|
|
524
|
+
type: "text",
|
|
525
|
+
...selectable.getTriggerProps()
|
|
526
|
+
}), _jsx("span", {
|
|
527
|
+
...selectable.getDescriptionProps(),
|
|
528
|
+
children: "description"
|
|
529
|
+
})]
|
|
530
|
+
})
|
|
531
|
+
})),
|
|
386
532
|
container = _render6.container;
|
|
387
533
|
const input = container.querySelector('input');
|
|
388
534
|
const desc = screen.getByText('description');
|
|
@@ -391,11 +537,17 @@ describe('<Selectable />', () => {
|
|
|
391
537
|
expect(input).toHaveAttribute('id');
|
|
392
538
|
});
|
|
393
539
|
it('should set appropriate props based on isShowingOptions', async () => {
|
|
394
|
-
const _render7 = render(
|
|
395
|
-
isShowingOptions: false
|
|
396
|
-
|
|
397
|
-
|
|
398
|
-
|
|
540
|
+
const _render7 = render(_jsx(Selectable, {
|
|
541
|
+
isShowingOptions: false,
|
|
542
|
+
children: selectable => _jsxs("span", {
|
|
543
|
+
children: [_jsx("input", {
|
|
544
|
+
type: "text",
|
|
545
|
+
...selectable.getTriggerProps()
|
|
546
|
+
}), _jsx("ul", {
|
|
547
|
+
...selectable.getListProps()
|
|
548
|
+
})]
|
|
549
|
+
})
|
|
550
|
+
})),
|
|
399
551
|
container = _render7.container,
|
|
400
552
|
rerender = _render7.rerender;
|
|
401
553
|
const input = container.querySelector('input');
|
|
@@ -404,24 +556,37 @@ describe('<Selectable />', () => {
|
|
|
404
556
|
expect(input).not.toHaveAttribute('aria-controls');
|
|
405
557
|
|
|
406
558
|
// Set prop: isShowingOptions true
|
|
407
|
-
rerender(
|
|
408
|
-
isShowingOptions: true
|
|
409
|
-
|
|
410
|
-
|
|
411
|
-
|
|
559
|
+
rerender(_jsx(Selectable, {
|
|
560
|
+
isShowingOptions: true,
|
|
561
|
+
children: selectable => _jsxs("span", {
|
|
562
|
+
children: [_jsx("input", {
|
|
563
|
+
type: "text",
|
|
564
|
+
...selectable.getTriggerProps()
|
|
565
|
+
}), _jsx("ul", {
|
|
566
|
+
...selectable.getListProps()
|
|
567
|
+
})]
|
|
568
|
+
})
|
|
569
|
+
}));
|
|
412
570
|
expect(input).toHaveAttribute('aria-expanded', 'true');
|
|
413
571
|
expect(input).toHaveAttribute('aria-controls', list.id);
|
|
414
572
|
});
|
|
415
573
|
it('should set appropriate props based on highlightedOptionId', async () => {
|
|
416
|
-
const _render8 = render(
|
|
417
|
-
isShowingOptions: true
|
|
418
|
-
|
|
419
|
-
|
|
420
|
-
|
|
421
|
-
|
|
422
|
-
|
|
423
|
-
|
|
424
|
-
|
|
574
|
+
const _render8 = render(_jsx(Selectable, {
|
|
575
|
+
isShowingOptions: true,
|
|
576
|
+
children: selectable => _jsxs("span", {
|
|
577
|
+
children: [_jsx("input", {
|
|
578
|
+
type: "text",
|
|
579
|
+
...selectable.getTriggerProps()
|
|
580
|
+
}), _jsx("ul", {
|
|
581
|
+
...selectable.getListProps(),
|
|
582
|
+
children: defaultOptions.map(opt => _jsx("li", {
|
|
583
|
+
...selectable.getOptionProps({
|
|
584
|
+
id: opt
|
|
585
|
+
})
|
|
586
|
+
}, opt))
|
|
587
|
+
})]
|
|
588
|
+
})
|
|
589
|
+
})),
|
|
425
590
|
container = _render8.container,
|
|
426
591
|
rerender = _render8.rerender;
|
|
427
592
|
const input = container.querySelector('input');
|
|
@@ -429,55 +594,81 @@ describe('<Selectable />', () => {
|
|
|
429
594
|
expect(input).not.toHaveAttribute('aria-activedescendant');
|
|
430
595
|
|
|
431
596
|
// Set prop: highlightedOptionId
|
|
432
|
-
rerender(
|
|
597
|
+
rerender(_jsx(Selectable, {
|
|
433
598
|
isShowingOptions: true,
|
|
434
|
-
highlightedOptionId: defaultOptions[0]
|
|
435
|
-
|
|
436
|
-
|
|
437
|
-
|
|
438
|
-
|
|
439
|
-
|
|
440
|
-
|
|
441
|
-
|
|
599
|
+
highlightedOptionId: defaultOptions[0],
|
|
600
|
+
children: selectable => _jsxs("span", {
|
|
601
|
+
children: [_jsx("input", {
|
|
602
|
+
type: "text",
|
|
603
|
+
...selectable.getTriggerProps()
|
|
604
|
+
}), _jsx("ul", {
|
|
605
|
+
...selectable.getListProps(),
|
|
606
|
+
children: defaultOptions.map(opt => _jsx("li", {
|
|
607
|
+
...selectable.getOptionProps({
|
|
608
|
+
id: opt
|
|
609
|
+
})
|
|
610
|
+
}, opt))
|
|
611
|
+
})]
|
|
612
|
+
})
|
|
613
|
+
}));
|
|
442
614
|
expect(input).toHaveAttribute('aria-activedescendant', options[0].id);
|
|
443
615
|
|
|
444
616
|
// Set prop: highlightedOptionId
|
|
445
|
-
rerender(
|
|
617
|
+
rerender(_jsx(Selectable, {
|
|
446
618
|
isShowingOptions: true,
|
|
447
|
-
highlightedOptionId: defaultOptions[1]
|
|
448
|
-
|
|
449
|
-
|
|
450
|
-
|
|
451
|
-
|
|
452
|
-
|
|
453
|
-
|
|
454
|
-
|
|
619
|
+
highlightedOptionId: defaultOptions[1],
|
|
620
|
+
children: selectable => _jsxs("span", {
|
|
621
|
+
children: [_jsx("input", {
|
|
622
|
+
type: "text",
|
|
623
|
+
...selectable.getTriggerProps()
|
|
624
|
+
}), _jsx("ul", {
|
|
625
|
+
...selectable.getListProps(),
|
|
626
|
+
children: defaultOptions.map(opt => _jsx("li", {
|
|
627
|
+
...selectable.getOptionProps({
|
|
628
|
+
id: opt
|
|
629
|
+
})
|
|
630
|
+
}, opt))
|
|
631
|
+
})]
|
|
632
|
+
})
|
|
633
|
+
}));
|
|
455
634
|
expect(input).toHaveAttribute('aria-activedescendant', options[1].id);
|
|
456
635
|
|
|
457
636
|
// Set prop: isShowingOptions
|
|
458
|
-
rerender(
|
|
637
|
+
rerender(_jsx(Selectable, {
|
|
459
638
|
isShowingOptions: false,
|
|
460
|
-
highlightedOptionId: defaultOptions[1]
|
|
461
|
-
|
|
462
|
-
|
|
463
|
-
|
|
464
|
-
|
|
465
|
-
|
|
466
|
-
|
|
467
|
-
|
|
639
|
+
highlightedOptionId: defaultOptions[1],
|
|
640
|
+
children: selectable => _jsxs("span", {
|
|
641
|
+
children: [_jsx("input", {
|
|
642
|
+
type: "text",
|
|
643
|
+
...selectable.getTriggerProps()
|
|
644
|
+
}), _jsx("ul", {
|
|
645
|
+
...selectable.getListProps(),
|
|
646
|
+
children: defaultOptions.map(opt => _jsx("li", {
|
|
647
|
+
...selectable.getOptionProps({
|
|
648
|
+
id: opt
|
|
649
|
+
})
|
|
650
|
+
}, opt))
|
|
651
|
+
})]
|
|
652
|
+
})
|
|
653
|
+
}));
|
|
468
654
|
expect(input).not.toHaveAttribute('aria-activedescendant');
|
|
469
655
|
});
|
|
470
656
|
it('should allow custom props to pass through', async () => {
|
|
471
|
-
const _render9 = render(
|
|
472
|
-
|
|
473
|
-
|
|
474
|
-
|
|
475
|
-
|
|
476
|
-
|
|
477
|
-
|
|
478
|
-
|
|
479
|
-
|
|
480
|
-
|
|
657
|
+
const _render9 = render(_jsx(Selectable, {
|
|
658
|
+
children: selectable => _jsx("span", {
|
|
659
|
+
children: _jsx("input", {
|
|
660
|
+
type: "text",
|
|
661
|
+
...selectable.getTriggerProps({
|
|
662
|
+
'data-custom-attr': true,
|
|
663
|
+
placeholder: 'Type to enter text',
|
|
664
|
+
className: 'customClass',
|
|
665
|
+
style: {
|
|
666
|
+
color: 'red'
|
|
667
|
+
}
|
|
668
|
+
})
|
|
669
|
+
})
|
|
670
|
+
})
|
|
671
|
+
})),
|
|
481
672
|
container = _render9.container;
|
|
482
673
|
const input = container.querySelector('input');
|
|
483
674
|
expect(input).toHaveAttribute('data-custom-attr', 'true');
|
|
@@ -486,12 +677,17 @@ describe('<Selectable />', () => {
|
|
|
486
677
|
expect(input).toHaveClass('customClass');
|
|
487
678
|
});
|
|
488
679
|
it('should allow props to be overridden', async () => {
|
|
489
|
-
const _render10 = render(
|
|
490
|
-
|
|
491
|
-
|
|
492
|
-
|
|
493
|
-
|
|
494
|
-
|
|
680
|
+
const _render10 = render(_jsx(Selectable, {
|
|
681
|
+
children: selectable => _jsx("span", {
|
|
682
|
+
children: _jsx("input", {
|
|
683
|
+
type: "text",
|
|
684
|
+
...selectable.getTriggerProps({
|
|
685
|
+
'aria-haspopup': 'menu',
|
|
686
|
+
'aria-controls': 'customId'
|
|
687
|
+
})
|
|
688
|
+
})
|
|
689
|
+
})
|
|
690
|
+
})),
|
|
495
691
|
container = _render10.container;
|
|
496
692
|
const input = container.querySelector('input');
|
|
497
693
|
expect(input).toHaveAttribute('aria-haspopup', 'menu');
|
|
@@ -499,22 +695,32 @@ describe('<Selectable />', () => {
|
|
|
499
695
|
});
|
|
500
696
|
it('should provide a ref to the text input', async () => {
|
|
501
697
|
const inputRef = vi.fn();
|
|
502
|
-
const _render11 = render(
|
|
503
|
-
|
|
504
|
-
|
|
505
|
-
|
|
506
|
-
|
|
698
|
+
const _render11 = render(_jsx(Selectable, {
|
|
699
|
+
children: selectable => _jsx("span", {
|
|
700
|
+
children: _jsx("input", {
|
|
701
|
+
type: "text",
|
|
702
|
+
...selectable.getTriggerProps({
|
|
703
|
+
ref: inputRef
|
|
704
|
+
})
|
|
705
|
+
})
|
|
706
|
+
})
|
|
707
|
+
})),
|
|
507
708
|
container = _render11.container;
|
|
508
709
|
const input = container.querySelector('input');
|
|
509
710
|
expect(inputRef).toHaveBeenCalledWith(input);
|
|
510
711
|
});
|
|
511
712
|
it('should allow role and aria-autocomplete props to be overridden', async () => {
|
|
512
|
-
const _render12 = render(
|
|
513
|
-
|
|
514
|
-
|
|
515
|
-
|
|
516
|
-
|
|
517
|
-
|
|
713
|
+
const _render12 = render(_jsx(Selectable, {
|
|
714
|
+
children: selectable => _jsx("span", {
|
|
715
|
+
children: _jsx("input", {
|
|
716
|
+
type: "text",
|
|
717
|
+
...selectable.getTriggerProps({
|
|
718
|
+
role: 'textbox',
|
|
719
|
+
'aria-autocomplete': 'list'
|
|
720
|
+
})
|
|
721
|
+
})
|
|
722
|
+
})
|
|
723
|
+
})),
|
|
518
724
|
container = _render12.container;
|
|
519
725
|
const input = container.querySelector('input');
|
|
520
726
|
expect(input).toHaveAttribute('role', 'textbox');
|
|
@@ -523,13 +729,19 @@ describe('<Selectable />', () => {
|
|
|
523
729
|
it('should allow supplemental onClick behavior', async () => {
|
|
524
730
|
const onClick = vi.fn();
|
|
525
731
|
const onRequestShowOptions = vi.fn();
|
|
526
|
-
render(
|
|
527
|
-
onRequestShowOptions: onRequestShowOptions
|
|
528
|
-
|
|
529
|
-
|
|
530
|
-
|
|
531
|
-
|
|
532
|
-
|
|
732
|
+
render(_jsx(Selectable, {
|
|
733
|
+
onRequestShowOptions: onRequestShowOptions,
|
|
734
|
+
children: selectable => _jsx("span", {
|
|
735
|
+
...selectable.getRootProps(),
|
|
736
|
+
children: _jsx("input", {
|
|
737
|
+
type: "text",
|
|
738
|
+
...selectable.getTriggerProps({
|
|
739
|
+
onClick
|
|
740
|
+
}),
|
|
741
|
+
...selectable.getInputProps()
|
|
742
|
+
})
|
|
743
|
+
})
|
|
744
|
+
}));
|
|
533
745
|
const input = screen.getByRole('combobox');
|
|
534
746
|
await input.click();
|
|
535
747
|
expect(onClick).toHaveBeenCalledTimes(1);
|
|
@@ -539,17 +751,24 @@ describe('<Selectable />', () => {
|
|
|
539
751
|
describe('getInputProps()', () => {
|
|
540
752
|
it('should provide prop getter for trigger element', async () => {
|
|
541
753
|
const renderSpy = vi.fn();
|
|
542
|
-
render(
|
|
543
|
-
|
|
544
|
-
|
|
754
|
+
render(_jsx(Selectable, {
|
|
755
|
+
children: selectable => {
|
|
756
|
+
renderSpy(selectable);
|
|
757
|
+
return null;
|
|
758
|
+
}
|
|
545
759
|
}));
|
|
546
760
|
const args = renderSpy.mock.calls[0][0];
|
|
547
761
|
expect(args.getInputProps).toBeDefined();
|
|
548
762
|
});
|
|
549
763
|
it('should set appropriate prop defaults', async () => {
|
|
550
|
-
const _render13 = render(
|
|
551
|
-
|
|
552
|
-
|
|
764
|
+
const _render13 = render(_jsx(Selectable, {
|
|
765
|
+
children: selectable => _jsx("span", {
|
|
766
|
+
children: _jsx("input", {
|
|
767
|
+
type: "text",
|
|
768
|
+
...selectable.getInputProps()
|
|
769
|
+
})
|
|
770
|
+
})
|
|
771
|
+
})),
|
|
553
772
|
container = _render13.container;
|
|
554
773
|
const input = container.querySelector('input');
|
|
555
774
|
expect(input).toHaveAttribute('role', 'combobox');
|
|
@@ -557,39 +776,54 @@ describe('<Selectable />', () => {
|
|
|
557
776
|
expect(input).toHaveAttribute('autocomplete', 'off');
|
|
558
777
|
});
|
|
559
778
|
it('should set appropriate props when readOnly', async () => {
|
|
560
|
-
render(
|
|
561
|
-
|
|
562
|
-
|
|
563
|
-
|
|
564
|
-
|
|
779
|
+
render(_jsx(Selectable, {
|
|
780
|
+
children: selectable => _jsx("span", {
|
|
781
|
+
children: _jsx("input", {
|
|
782
|
+
type: "text",
|
|
783
|
+
...selectable.getInputProps({
|
|
784
|
+
readOnly: true
|
|
785
|
+
})
|
|
786
|
+
})
|
|
787
|
+
})
|
|
788
|
+
}));
|
|
565
789
|
const input = screen.getByRole('combobox');
|
|
566
790
|
expect(input).toHaveAttribute('aria-autocomplete', 'none');
|
|
567
791
|
expect(input).toHaveAttribute('readOnly');
|
|
568
792
|
expect(input).not.toHaveAttribute('disabled');
|
|
569
793
|
});
|
|
570
794
|
it('should allow props to be overridden', async () => {
|
|
571
|
-
const _render14 = render(
|
|
572
|
-
|
|
573
|
-
|
|
574
|
-
|
|
575
|
-
|
|
576
|
-
|
|
795
|
+
const _render14 = render(_jsx(Selectable, {
|
|
796
|
+
children: selectable => _jsx("span", {
|
|
797
|
+
children: _jsx("input", {
|
|
798
|
+
type: "text",
|
|
799
|
+
...selectable.getInputProps({
|
|
800
|
+
role: 'textbox',
|
|
801
|
+
'aria-autocomplete': 'inline'
|
|
802
|
+
})
|
|
803
|
+
})
|
|
804
|
+
})
|
|
805
|
+
})),
|
|
577
806
|
container = _render14.container;
|
|
578
807
|
const input = container.querySelector('input');
|
|
579
808
|
expect(input).toHaveAttribute('role', 'textbox');
|
|
580
809
|
expect(input).toHaveAttribute('aria-autocomplete', 'inline');
|
|
581
810
|
});
|
|
582
811
|
it('should allow custom props to pass through', async () => {
|
|
583
|
-
const _render15 = render(
|
|
584
|
-
|
|
585
|
-
|
|
586
|
-
|
|
587
|
-
|
|
588
|
-
|
|
589
|
-
|
|
590
|
-
|
|
591
|
-
|
|
592
|
-
|
|
812
|
+
const _render15 = render(_jsx(Selectable, {
|
|
813
|
+
children: selectable => _jsx("span", {
|
|
814
|
+
children: _jsx("input", {
|
|
815
|
+
type: "text",
|
|
816
|
+
...selectable.getInputProps({
|
|
817
|
+
'data-custom-attr': true,
|
|
818
|
+
placeholder: 'Type to enter text',
|
|
819
|
+
className: 'customClass',
|
|
820
|
+
style: {
|
|
821
|
+
color: 'red'
|
|
822
|
+
}
|
|
823
|
+
})
|
|
824
|
+
})
|
|
825
|
+
})
|
|
826
|
+
})),
|
|
593
827
|
container = _render15.container;
|
|
594
828
|
const input = container.querySelector('input');
|
|
595
829
|
expect(input).toHaveAttribute('data-custom-attr', 'true');
|
|
@@ -601,36 +835,52 @@ describe('<Selectable />', () => {
|
|
|
601
835
|
describe('getListProps()', () => {
|
|
602
836
|
it('should provide prop getter for list element', async () => {
|
|
603
837
|
const renderSpy = vi.fn();
|
|
604
|
-
render(
|
|
605
|
-
|
|
606
|
-
|
|
838
|
+
render(_jsx(Selectable, {
|
|
839
|
+
children: selectable => {
|
|
840
|
+
renderSpy(selectable);
|
|
841
|
+
return null;
|
|
842
|
+
}
|
|
607
843
|
}));
|
|
608
844
|
const args = renderSpy.mock.calls[0][0];
|
|
609
845
|
expect(args.getListProps).toBeDefined();
|
|
610
846
|
});
|
|
611
847
|
it('should set appropriate prop defaults', async () => {
|
|
612
|
-
const _render16 = render(
|
|
613
|
-
isShowingOptions: true
|
|
614
|
-
|
|
615
|
-
|
|
616
|
-
|
|
848
|
+
const _render16 = render(_jsx(Selectable, {
|
|
849
|
+
isShowingOptions: true,
|
|
850
|
+
children: selectable => _jsxs("span", {
|
|
851
|
+
...selectable.getRootProps(),
|
|
852
|
+
children: [_jsx("input", {
|
|
853
|
+
type: "text",
|
|
854
|
+
...selectable.getTriggerProps()
|
|
855
|
+
}), _jsx("ul", {
|
|
856
|
+
...selectable.getListProps()
|
|
857
|
+
})]
|
|
858
|
+
})
|
|
859
|
+
})),
|
|
617
860
|
container = _render16.container;
|
|
618
861
|
const list = container.querySelector('ul');
|
|
619
862
|
expect(list).toHaveAttribute('id');
|
|
620
863
|
expect(list).toHaveAttribute('role', 'listbox');
|
|
621
864
|
});
|
|
622
865
|
it('should allow custom props to pass through', async () => {
|
|
623
|
-
const _render17 = render(
|
|
624
|
-
isShowingOptions: true
|
|
625
|
-
|
|
626
|
-
|
|
627
|
-
|
|
628
|
-
|
|
629
|
-
|
|
630
|
-
|
|
631
|
-
|
|
632
|
-
|
|
633
|
-
|
|
866
|
+
const _render17 = render(_jsx(Selectable, {
|
|
867
|
+
isShowingOptions: true,
|
|
868
|
+
children: selectable => _jsxs("span", {
|
|
869
|
+
...selectable.getRootProps(),
|
|
870
|
+
children: [_jsx("input", {
|
|
871
|
+
type: "text",
|
|
872
|
+
...selectable.getTriggerProps()
|
|
873
|
+
}), _jsx("ul", {
|
|
874
|
+
...selectable.getListProps({
|
|
875
|
+
'data-custom-attr': true,
|
|
876
|
+
className: 'customClass',
|
|
877
|
+
style: {
|
|
878
|
+
color: 'red'
|
|
879
|
+
}
|
|
880
|
+
})
|
|
881
|
+
})]
|
|
882
|
+
})
|
|
883
|
+
})),
|
|
634
884
|
container = _render17.container;
|
|
635
885
|
const list = container.querySelector('ul');
|
|
636
886
|
expect(list).toHaveAttribute('data-custom-attr', 'true');
|
|
@@ -641,36 +891,55 @@ describe('<Selectable />', () => {
|
|
|
641
891
|
describe('getOptionProps()', () => {
|
|
642
892
|
it('should provide prop getter for option element', async () => {
|
|
643
893
|
const renderSpy = vi.fn();
|
|
644
|
-
render(
|
|
645
|
-
|
|
646
|
-
|
|
894
|
+
render(_jsx(Selectable, {
|
|
895
|
+
children: selectable => {
|
|
896
|
+
renderSpy(selectable);
|
|
897
|
+
return null;
|
|
898
|
+
}
|
|
647
899
|
}));
|
|
648
900
|
const args = renderSpy.mock.calls[0][0];
|
|
649
901
|
expect(args.getOptionProps).toBeDefined();
|
|
650
902
|
});
|
|
651
903
|
it('should set appropriate prop defaults', async () => {
|
|
652
|
-
render(
|
|
653
|
-
|
|
654
|
-
|
|
655
|
-
|
|
656
|
-
|
|
657
|
-
|
|
658
|
-
|
|
904
|
+
render(_jsx(Selectable, {
|
|
905
|
+
children: selectable => _jsxs("span", {
|
|
906
|
+
children: [_jsx("input", {
|
|
907
|
+
type: "text",
|
|
908
|
+
...selectable.getTriggerProps()
|
|
909
|
+
}), _jsx("ul", {
|
|
910
|
+
...selectable.getListProps(),
|
|
911
|
+
children: defaultOptions.map(opt => _jsx("li", {
|
|
912
|
+
...selectable.getOptionProps({
|
|
913
|
+
id: opt
|
|
914
|
+
}),
|
|
915
|
+
children: opt
|
|
916
|
+
}, opt))
|
|
917
|
+
})]
|
|
918
|
+
})
|
|
919
|
+
}));
|
|
659
920
|
const option = screen.getByText(defaultOptions[0]);
|
|
660
921
|
expect(option.tagName).toBe('LI');
|
|
661
922
|
expect(option).toHaveAttribute('role', 'option');
|
|
662
923
|
expect(option).toHaveAttribute('aria-selected', 'false');
|
|
663
924
|
});
|
|
664
925
|
it('should set aria-selected based on selectedOptionId', async () => {
|
|
665
|
-
const _render18 = render(
|
|
666
|
-
selectedOptionId: defaultOptions[1]
|
|
667
|
-
|
|
668
|
-
|
|
669
|
-
|
|
670
|
-
|
|
671
|
-
|
|
672
|
-
|
|
673
|
-
|
|
926
|
+
const _render18 = render(_jsx(Selectable, {
|
|
927
|
+
selectedOptionId: defaultOptions[1],
|
|
928
|
+
children: selectable => _jsxs("span", {
|
|
929
|
+
children: [_jsx("input", {
|
|
930
|
+
type: "text",
|
|
931
|
+
...selectable.getTriggerProps()
|
|
932
|
+
}), _jsx("ul", {
|
|
933
|
+
...selectable.getListProps(),
|
|
934
|
+
children: defaultOptions.map(opt => _jsx("li", {
|
|
935
|
+
...selectable.getOptionProps({
|
|
936
|
+
id: opt
|
|
937
|
+
}),
|
|
938
|
+
children: opt
|
|
939
|
+
}, opt))
|
|
940
|
+
})]
|
|
941
|
+
})
|
|
942
|
+
})),
|
|
674
943
|
container = _render18.container,
|
|
675
944
|
rerender = _render18.rerender;
|
|
676
945
|
const options = container.querySelectorAll('li');
|
|
@@ -679,32 +948,49 @@ describe('<Selectable />', () => {
|
|
|
679
948
|
expect(options[2]).toHaveAttribute('aria-selected', 'false');
|
|
680
949
|
|
|
681
950
|
// Set prop: selectedOptionId
|
|
682
|
-
rerender(
|
|
683
|
-
selectedOptionId: [defaultOptions[0], defaultOptions[1]]
|
|
684
|
-
|
|
685
|
-
|
|
686
|
-
|
|
687
|
-
|
|
688
|
-
|
|
689
|
-
|
|
690
|
-
|
|
951
|
+
rerender(_jsx(Selectable, {
|
|
952
|
+
selectedOptionId: [defaultOptions[0], defaultOptions[1]],
|
|
953
|
+
children: selectable => _jsxs("span", {
|
|
954
|
+
children: [_jsx("input", {
|
|
955
|
+
type: "text",
|
|
956
|
+
...selectable.getTriggerProps()
|
|
957
|
+
}), _jsx("ul", {
|
|
958
|
+
...selectable.getListProps(),
|
|
959
|
+
children: defaultOptions.map(opt => _jsx("li", {
|
|
960
|
+
...selectable.getOptionProps({
|
|
961
|
+
id: opt
|
|
962
|
+
}),
|
|
963
|
+
children: opt
|
|
964
|
+
}, opt))
|
|
965
|
+
})]
|
|
966
|
+
})
|
|
967
|
+
}));
|
|
691
968
|
expect(options[0]).toHaveAttribute('aria-selected', 'true');
|
|
692
969
|
expect(options[1]).toHaveAttribute('aria-selected', 'true');
|
|
693
970
|
expect(options[2]).toHaveAttribute('aria-selected', 'false');
|
|
694
971
|
});
|
|
695
972
|
it('should allow custom props to pass through', async () => {
|
|
696
|
-
render(
|
|
697
|
-
|
|
698
|
-
|
|
699
|
-
|
|
700
|
-
|
|
701
|
-
|
|
702
|
-
|
|
703
|
-
|
|
704
|
-
|
|
705
|
-
|
|
706
|
-
|
|
707
|
-
|
|
973
|
+
render(_jsx(Selectable, {
|
|
974
|
+
children: selectable => _jsxs("span", {
|
|
975
|
+
children: [_jsx("input", {
|
|
976
|
+
type: "text",
|
|
977
|
+
...selectable.getTriggerProps()
|
|
978
|
+
}), _jsx("ul", {
|
|
979
|
+
...selectable.getListProps(),
|
|
980
|
+
children: defaultOptions.map(opt => _jsx("li", {
|
|
981
|
+
...selectable.getOptionProps({
|
|
982
|
+
id: opt,
|
|
983
|
+
'data-custom-attr': true,
|
|
984
|
+
className: 'customClass',
|
|
985
|
+
style: {
|
|
986
|
+
color: 'red'
|
|
987
|
+
}
|
|
988
|
+
}),
|
|
989
|
+
children: opt
|
|
990
|
+
}, opt))
|
|
991
|
+
})]
|
|
992
|
+
})
|
|
993
|
+
}));
|
|
708
994
|
const option = screen.getByText(defaultOptions[0]);
|
|
709
995
|
expect(option.tagName).toBe('LI');
|
|
710
996
|
expect(option).toHaveAttribute('data-custom-attr', 'true');
|
|
@@ -714,17 +1000,25 @@ describe('<Selectable />', () => {
|
|
|
714
1000
|
it('should allow supplemental onClick behavior', async () => {
|
|
715
1001
|
const onClick = vi.fn();
|
|
716
1002
|
const onRequestSelectOption = vi.fn();
|
|
717
|
-
render(
|
|
1003
|
+
render(_jsx(Selectable, {
|
|
718
1004
|
isShowingOptions: true,
|
|
719
|
-
onRequestSelectOption: onRequestSelectOption
|
|
720
|
-
|
|
721
|
-
|
|
722
|
-
|
|
723
|
-
|
|
724
|
-
|
|
725
|
-
|
|
726
|
-
|
|
727
|
-
|
|
1005
|
+
onRequestSelectOption: onRequestSelectOption,
|
|
1006
|
+
children: selectable => _jsxs("span", {
|
|
1007
|
+
children: [_jsx("input", {
|
|
1008
|
+
type: "text",
|
|
1009
|
+
...selectable.getInputProps()
|
|
1010
|
+
}), _jsx("ul", {
|
|
1011
|
+
...selectable.getListProps(),
|
|
1012
|
+
children: defaultOptions.map(opt => _jsx("li", {
|
|
1013
|
+
...selectable.getOptionProps({
|
|
1014
|
+
id: opt,
|
|
1015
|
+
onClick
|
|
1016
|
+
}),
|
|
1017
|
+
children: opt
|
|
1018
|
+
}, opt))
|
|
1019
|
+
})]
|
|
1020
|
+
})
|
|
1021
|
+
}));
|
|
728
1022
|
const option_0 = screen.getByText(defaultOptions[0]);
|
|
729
1023
|
const option_1 = screen.getByText(defaultOptions[1]);
|
|
730
1024
|
userEvent.click(option_0);
|
|
@@ -738,21 +1032,34 @@ describe('<Selectable />', () => {
|
|
|
738
1032
|
describe('getDisabledOptionProps()', () => {
|
|
739
1033
|
it('should provide prop getter for disabled option element', async () => {
|
|
740
1034
|
const renderSpy = vi.fn();
|
|
741
|
-
render(
|
|
742
|
-
|
|
743
|
-
|
|
1035
|
+
render(_jsx(Selectable, {
|
|
1036
|
+
children: selectable => {
|
|
1037
|
+
renderSpy(selectable);
|
|
1038
|
+
return null;
|
|
1039
|
+
}
|
|
744
1040
|
}));
|
|
745
1041
|
const args = renderSpy.mock.calls[0][0];
|
|
746
1042
|
expect(args.getDisabledOptionProps).toBeDefined();
|
|
747
1043
|
});
|
|
748
1044
|
it('should set aria-disabled prop', async () => {
|
|
749
|
-
render(
|
|
750
|
-
|
|
751
|
-
|
|
752
|
-
|
|
753
|
-
|
|
754
|
-
|
|
755
|
-
|
|
1045
|
+
render(_jsx(Selectable, {
|
|
1046
|
+
children: selectable => _jsxs("span", {
|
|
1047
|
+
children: [_jsx("input", {
|
|
1048
|
+
type: "text",
|
|
1049
|
+
...selectable.getTriggerProps(),
|
|
1050
|
+
...selectable.getInputProps()
|
|
1051
|
+
}), _jsx("ul", {
|
|
1052
|
+
...selectable.getListProps(),
|
|
1053
|
+
children: defaultOptions.map(opt => _jsx("li", {
|
|
1054
|
+
...selectable.getOptionProps({
|
|
1055
|
+
id: opt
|
|
1056
|
+
}),
|
|
1057
|
+
...selectable.getDisabledOptionProps(),
|
|
1058
|
+
children: opt
|
|
1059
|
+
}, opt))
|
|
1060
|
+
})]
|
|
1061
|
+
})
|
|
1062
|
+
}));
|
|
756
1063
|
const option = screen.getByText(defaultOptions[0]);
|
|
757
1064
|
expect(option.tagName).toBe('LI');
|
|
758
1065
|
expect(option).toHaveAttribute('aria-disabled', 'true');
|
|
@@ -761,9 +1068,11 @@ describe('<Selectable />', () => {
|
|
|
761
1068
|
describe('getDescriptionProps()', () => {
|
|
762
1069
|
it('should provide prop getter for description element', async () => {
|
|
763
1070
|
const renderSpy = vi.fn();
|
|
764
|
-
render(
|
|
765
|
-
|
|
766
|
-
|
|
1071
|
+
render(_jsx(Selectable, {
|
|
1072
|
+
children: selectable => {
|
|
1073
|
+
renderSpy(selectable);
|
|
1074
|
+
return null;
|
|
1075
|
+
}
|
|
767
1076
|
}));
|
|
768
1077
|
const selectableProps = renderSpy.mock.calls[0][0];
|
|
769
1078
|
expect(selectableProps.getDescriptionProps).toBeDefined();
|