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