@@ -22,43 +22,43 @@ describe('<Combobox />', () => {
22
22
23
23
it ( 'should render with empty options array' , ( ) => {
24
24
const combobox = render ( < Combobox options = { [ ] } /> ) ;
25
- combobox . getByTestId ( 'combobox-input' ) ;
25
+ combobox . getByTestId ( 'react-gears- combobox-input' ) ;
26
26
} ) ;
27
27
28
28
it ( 'should show options when focused' , ( ) => {
29
29
const combobox = render ( < Combobox options = { OPTIONS } /> ) ;
30
- assert . equal ( combobox . getByTestId ( 'combobox-menu' ) . getAttribute ( 'aria-hidden' ) , 'true' ) ;
30
+ assert . equal ( combobox . getByTestId ( 'react-gears- combobox-menu' ) . getAttribute ( 'aria-hidden' ) , 'true' ) ;
31
31
32
- const input = combobox . getByTestId ( 'combobox-input' ) ;
32
+ const input = combobox . getByTestId ( 'react-gears- combobox-input' ) ;
33
33
fireEvent . focus ( input ) ;
34
34
35
- assert . equal ( combobox . getByTestId ( 'combobox-menu' ) . getAttribute ( 'aria-hidden' ) , 'false' ) ;
35
+ assert . equal ( combobox . getByTestId ( 'react-gears- combobox-menu' ) . getAttribute ( 'aria-hidden' ) , 'false' ) ;
36
36
} ) ;
37
37
38
38
it ( 'should pass inputClassName to Input' , ( ) => {
39
39
const innerClassName = 'js-no-autofocus' ;
40
40
const combobox = render ( < Combobox options = { OPTIONS } inputClassName = { innerClassName } /> ) ;
41
41
42
- assert ( combobox . getByTestId ( 'combobox-input' ) . classList . contains ( innerClassName ) ) ;
42
+ assert ( combobox . getByTestId ( 'react-gears- combobox-input' ) . classList . contains ( innerClassName ) ) ;
43
43
} ) ;
44
44
45
45
it ( 'should have "search" as default Input type' , ( ) => {
46
46
const combobox = render ( < Combobox options = { [ ] } /> ) ;
47
- const input = combobox . getByTestId ( 'combobox-input' ) ;
47
+ const input = combobox . getByTestId ( 'react-gears- combobox-input' ) ;
48
48
49
49
assert . strictEqual ( input . type , 'search' ) ;
50
50
} ) ;
51
51
52
52
it ( 'should pass type to Input' , ( ) => {
53
53
const combobox = render ( < Combobox options = { [ ] } type = "text" /> ) ;
54
- const input = combobox . getByTestId ( 'combobox-input' ) ;
54
+ const input = combobox . getByTestId ( 'react-gears- combobox-input' ) ;
55
55
56
56
assert . strictEqual ( input . type , 'text' ) ;
57
57
} ) ;
58
58
59
59
it ( 'should show all options when there is a selected option' , ( ) => {
60
60
const combobox = render ( < Combobox options = { OPTIONS } value = { OPTIONS [ 0 ] } /> ) ;
61
- const input = combobox . getByTestId ( 'combobox-input' ) ;
61
+ const input = combobox . getByTestId ( 'react-gears- combobox-input' ) ;
62
62
fireEvent . focus ( input ) ;
63
63
64
64
OPTIONS . forEach ( ( o ) => {
@@ -70,7 +70,7 @@ describe('<Combobox />', () => {
70
70
const mockOnChange = sinon . spy ( ) ;
71
71
const combobox = render ( < Combobox options = { OPTIONS } onChange = { mockOnChange } /> ) ;
72
72
73
- const input = combobox . getByTestId ( 'combobox-input' ) ;
73
+ const input = combobox . getByTestId ( 'react-gears- combobox-input' ) ;
74
74
fireEvent . focus ( input ) ;
75
75
76
76
const option = combobox . getByText ( 'D-O' ) ;
@@ -83,43 +83,43 @@ describe('<Combobox />', () => {
83
83
it ( 'should close menu on blur' , ( ) => {
84
84
const combobox = render ( < Combobox options = { OPTIONS } /> ) ;
85
85
86
- const input = combobox . getByTestId ( 'combobox-input' ) ;
86
+ const input = combobox . getByTestId ( 'react-gears- combobox-input' ) ;
87
87
fireEvent . focus ( input ) ;
88
88
89
- assert . equal ( combobox . getByTestId ( 'combobox-menu' ) . getAttribute ( 'aria-hidden' ) , 'false' ) ;
89
+ assert . equal ( combobox . getByTestId ( 'react-gears- combobox-menu' ) . getAttribute ( 'aria-hidden' ) , 'false' ) ;
90
90
91
91
fireEvent . blur ( input ) ;
92
92
93
- assert . equal ( combobox . getByTestId ( 'combobox-menu' ) . getAttribute ( 'aria-hidden' ) , 'true' ) ;
93
+ assert . equal ( combobox . getByTestId ( 'react-gears- combobox-menu' ) . getAttribute ( 'aria-hidden' ) , 'true' ) ;
94
94
} ) ;
95
95
96
96
it ( 'should not close menu when menu container is focused' , ( ) => {
97
97
const combobox = render ( < Combobox options = { OPTIONS } /> ) ;
98
- const input = combobox . getByTestId ( 'combobox-input' ) ;
98
+ const input = combobox . getByTestId ( 'react-gears- combobox-input' ) ;
99
99
fireEvent . focus ( input ) ;
100
- const dropdown = combobox . getByTestId ( 'combobox-dropdown' ) ;
101
- const menu = combobox . getByTestId ( 'combobox-menu' ) ;
100
+ const dropdown = combobox . getByTestId ( 'react-gears- combobox-dropdown' ) ;
101
+ const menu = combobox . getByTestId ( 'react-gears- combobox-menu' ) ;
102
102
fireEvent . blur ( dropdown , { relatedTarget : menu } ) ;
103
103
104
- expect ( combobox . getByTestId ( 'combobox-menu' ) . getAttribute ( 'aria-hidden' ) ) . toEqual ( 'false' ) ;
104
+ expect ( combobox . getByTestId ( 'react-gears- combobox-menu' ) . getAttribute ( 'aria-hidden' ) ) . toEqual ( 'false' ) ;
105
105
} ) ;
106
106
107
107
it ( 'should close menu on blur of caret button' , ( ) => {
108
108
const combobox = render ( < Combobox options = { OPTIONS } /> ) ;
109
109
110
- const caret = combobox . getByTestId ( 'combobox-caret' ) ;
110
+ const caret = combobox . getByTestId ( 'react-gears- combobox-caret' ) ;
111
111
fireEvent . mouseDown ( caret ) ;
112
112
113
- assert . strictEqual ( combobox . getByTestId ( 'combobox-menu' ) . getAttribute ( 'aria-hidden' ) , 'false' ) ;
113
+ assert . strictEqual ( combobox . getByTestId ( 'react-gears- combobox-menu' ) . getAttribute ( 'aria-hidden' ) , 'false' ) ;
114
114
115
115
fireEvent . blur ( caret ) ;
116
116
117
- assert . strictEqual ( combobox . getByTestId ( 'combobox-menu' ) . getAttribute ( 'aria-hidden' ) , 'true' ) ;
117
+ assert . strictEqual ( combobox . getByTestId ( 'react-gears- combobox-menu' ) . getAttribute ( 'aria-hidden' ) , 'true' ) ;
118
118
} ) ;
119
119
120
120
it ( 'should blur input on close' , ( ) => {
121
121
const combobox = render ( < Combobox options = { OPTIONS } /> ) ;
122
- const input = combobox . getByTestId ( 'combobox-input' ) ;
122
+ const input = combobox . getByTestId ( 'react-gears- combobox-input' ) ;
123
123
input . focus ( ) ;
124
124
125
125
let option = combobox . getByText ( 'D-O' ) ;
@@ -141,7 +141,7 @@ describe('<Combobox />', () => {
141
141
it ( 'should navigate options by up/down keys' , ( ) => {
142
142
const combobox = render ( < Combobox options = { OPTIONS } /> ) ;
143
143
144
- const input = combobox . getByTestId ( 'combobox-input' ) ;
144
+ const input = combobox . getByTestId ( 'react-gears- combobox-input' ) ;
145
145
fireEvent . focus ( input ) ;
146
146
147
147
assert ( combobox . getByText ( 'R2-D2' ) . classList . contains ( 'active' ) ) ;
@@ -168,7 +168,7 @@ describe('<Combobox />', () => {
168
168
/>
169
169
) ;
170
170
171
- const input = combobox . getByTestId ( 'combobox-input' ) ;
171
+ const input = combobox . getByTestId ( 'react-gears- combobox-input' ) ;
172
172
fireEvent . click ( input ) ;
173
173
174
174
assert . strictEqual ( input . value , 'bar' ) ;
@@ -178,15 +178,15 @@ describe('<Combobox />', () => {
178
178
const mockOnChange = sinon . spy ( ) ;
179
179
const combobox = render ( < Combobox options = { OPTIONS } onChange = { mockOnChange } /> ) ;
180
180
181
- const input = combobox . getByTestId ( 'combobox-input' ) ;
181
+ const input = combobox . getByTestId ( 'react-gears- combobox-input' ) ;
182
182
fireEvent . focus ( input ) ;
183
183
fireEvent . keyDown ( input , { key : 'ArrowDown' , code : 40 } ) ;
184
184
185
185
assert ( combobox . getByText ( 'BB8' ) . classList . contains ( 'active' ) ) ;
186
186
187
187
fireEvent . keyDown ( input , { key : 'Enter' , code : 13 } ) ;
188
188
189
- assert . equal ( combobox . getByTestId ( 'combobox-menu' ) . getAttribute ( 'aria-hidden' ) , 'true' ) ;
189
+ assert . equal ( combobox . getByTestId ( 'react-gears- combobox-menu' ) . getAttribute ( 'aria-hidden' ) , 'true' ) ;
190
190
sinon . assert . called ( mockOnChange ) ;
191
191
sinon . assert . calledWith ( mockOnChange , OPTIONS [ 1 ] . value ) ;
192
192
} ) ;
@@ -197,7 +197,7 @@ describe('<Combobox />', () => {
197
197
value = v ;
198
198
} ;
199
199
let combobox = render ( < Combobox options = { OPTIONS } onChange = { mockOnChange } value = { value } /> ) ;
200
- let input = combobox . getByTestId ( 'combobox-input' ) ;
200
+ let input = combobox . getByTestId ( 'react-gears- combobox-input' ) ;
201
201
fireEvent . focus ( input ) ;
202
202
203
203
const option = combobox . getByText ( 'D-O' ) ;
@@ -207,7 +207,7 @@ describe('<Combobox />', () => {
207
207
208
208
cleanup ( ) ;
209
209
combobox = render ( < Combobox options = { OPTIONS } onChange = { mockOnChange } value = { value } /> ) ;
210
- input = combobox . getByTestId ( 'combobox-input' ) ;
210
+ input = combobox . getByTestId ( 'react-gears- combobox-input' ) ;
211
211
212
212
fireEvent . mouseDown ( input ) ;
213
213
fireEvent . keyDown ( input , { key : 'Backspace' , code : 8 } ) ;
@@ -218,55 +218,55 @@ describe('<Combobox />', () => {
218
218
it ( 'should open options with down key' , ( ) => {
219
219
const combobox = render ( < Combobox options = { OPTIONS } /> ) ;
220
220
221
- const input = combobox . getByTestId ( 'combobox-input' ) ;
221
+ const input = combobox . getByTestId ( 'react-gears- combobox-input' ) ;
222
222
fireEvent . focus ( input ) ;
223
223
224
- assert . equal ( combobox . getByTestId ( 'combobox-menu' ) . getAttribute ( 'aria-hidden' ) , 'false' ) ;
224
+ assert . equal ( combobox . getByTestId ( 'react-gears- combobox-menu' ) . getAttribute ( 'aria-hidden' ) , 'false' ) ;
225
225
226
- const caret = combobox . getByTestId ( 'combobox-caret' ) ;
226
+ const caret = combobox . getByTestId ( 'react-gears- combobox-caret' ) ;
227
227
fireEvent . mouseDown ( caret ) ;
228
228
229
- assert . equal ( combobox . getByTestId ( 'combobox-menu' ) . getAttribute ( 'aria-hidden' ) , 'true' ) ;
229
+ assert . equal ( combobox . getByTestId ( 'react-gears- combobox-menu' ) . getAttribute ( 'aria-hidden' ) , 'true' ) ;
230
230
231
231
fireEvent . keyDown ( input , { key : 'ArrowDown' , code : 40 } ) ;
232
232
233
- assert . equal ( combobox . getByTestId ( 'combobox-menu' ) . getAttribute ( 'aria-hidden' ) , 'false' ) ;
233
+ assert . equal ( combobox . getByTestId ( 'react-gears- combobox-menu' ) . getAttribute ( 'aria-hidden' ) , 'false' ) ;
234
234
} ) ;
235
235
236
236
it ( 'should open options if input is clicked' , async ( ) => {
237
237
const combobox = render ( < Combobox options = { OPTIONS } value = { 3 } /> ) ;
238
238
239
- assert . equal ( combobox . getByTestId ( 'combobox-menu' ) . getAttribute ( 'aria-hidden' ) , 'true' ) ;
239
+ assert . equal ( combobox . getByTestId ( 'react-gears- combobox-menu' ) . getAttribute ( 'aria-hidden' ) , 'true' ) ;
240
240
241
- const input = combobox . getByTestId ( 'combobox-input' ) ;
241
+ const input = combobox . getByTestId ( 'react-gears- combobox-input' ) ;
242
242
fireEvent . mouseDown ( input ) ;
243
243
244
- assert . equal ( combobox . getByTestId ( 'combobox-menu' ) . getAttribute ( 'aria-hidden' ) , 'false' ) ;
244
+ assert . equal ( combobox . getByTestId ( 'react-gears- combobox-menu' ) . getAttribute ( 'aria-hidden' ) , 'false' ) ;
245
245
} ) ;
246
246
247
247
it ( 'should open/close options with dropdown toggle' , ( ) => {
248
248
const combobox = render ( < Combobox options = { OPTIONS } /> ) ;
249
249
250
- const input = combobox . getByTestId ( 'combobox-input' ) ;
250
+ const input = combobox . getByTestId ( 'react-gears- combobox-input' ) ;
251
251
fireEvent . focus ( input ) ;
252
252
253
- assert . equal ( combobox . getByTestId ( 'combobox-menu' ) . getAttribute ( 'aria-hidden' ) , 'false' ) ;
253
+ assert . equal ( combobox . getByTestId ( 'react-gears- combobox-menu' ) . getAttribute ( 'aria-hidden' ) , 'false' ) ;
254
254
255
- const caret = combobox . getByTestId ( 'combobox-caret' ) ;
255
+ const caret = combobox . getByTestId ( 'react-gears- combobox-caret' ) ;
256
256
fireEvent . mouseDown ( caret ) ;
257
257
258
- assert . equal ( combobox . getByTestId ( 'combobox-menu' ) . getAttribute ( 'aria-hidden' ) , 'true' ) ;
258
+ assert . equal ( combobox . getByTestId ( 'react-gears- combobox-menu' ) . getAttribute ( 'aria-hidden' ) , 'true' ) ;
259
259
260
260
fireEvent . mouseDown ( caret ) ;
261
261
262
- assert . equal ( combobox . getByTestId ( 'combobox-menu' ) . getAttribute ( 'aria-hidden' ) , 'false' ) ;
262
+ assert . equal ( combobox . getByTestId ( 'react-gears- combobox-menu' ) . getAttribute ( 'aria-hidden' ) , 'false' ) ;
263
263
} ) ;
264
264
265
265
describe ( 'default filterOptions ' , ( ) => {
266
266
it ( 'should filter by input (case insensitive)' , ( ) => {
267
267
const combobox = render ( < Combobox options = { OPTIONS } /> ) ;
268
268
269
- const input = combobox . getByTestId ( 'combobox-input' ) ;
269
+ const input = combobox . getByTestId ( 'react-gears- combobox-input' ) ;
270
270
fireEvent . focus ( input ) ;
271
271
272
272
fireEvent . change ( input , { target : { value : 'bb8' } } ) ;
@@ -278,7 +278,7 @@ describe('<Combobox />', () => {
278
278
it ( 'should update filtered options when input is updated' , ( ) => {
279
279
const combobox = render ( < Combobox options = { OPTIONS } /> ) ;
280
280
281
- const input = combobox . getByTestId ( 'combobox-input' ) ;
281
+ const input = combobox . getByTestId ( 'react-gears- combobox-input' ) ;
282
282
fireEvent . focus ( input ) ;
283
283
fireEvent . change ( input , { target : { value : 'd2' } } ) ;
284
284
@@ -306,7 +306,7 @@ describe('<Combobox />', () => {
306
306
307
307
const combobox = render ( < Combobox options = { groupedOptions } /> ) ;
308
308
309
- const input = combobox . getByTestId ( 'combobox-input' ) ;
309
+ const input = combobox . getByTestId ( 'react-gears- combobox-input' ) ;
310
310
fireEvent . focus ( input ) ;
311
311
312
312
const droidLabel = combobox . getByText ( 'Droids' ) ;
@@ -335,7 +335,7 @@ describe('<Combobox />', () => {
335
335
< Combobox options = { OPTIONS } onChange = { mockOnChange } onCreate = { mockOnCreate } />
336
336
) ;
337
337
338
- const input = combobox . getByTestId ( 'combobox-input' ) ;
338
+ const input = combobox . getByTestId ( 'react-gears- combobox-input' ) ;
339
339
fireEvent . focus ( input ) ;
340
340
341
341
userEvent . type ( input , 'new option' ) ;
@@ -360,18 +360,18 @@ describe('<Combobox />', () => {
360
360
/>
361
361
) ;
362
362
363
- const input = combobox . getByTestId ( 'combobox-input' ) ;
363
+ const input = combobox . getByTestId ( 'react-gears- combobox-input' ) ;
364
364
365
365
userEvent . type ( input , 'new option' ) ;
366
366
367
- let newOptionButton = combobox . getByTestId ( 'create-new-option' ) ;
367
+ let newOptionButton = combobox . getByTestId ( 'react-gears-combobox- create-new-option' ) ;
368
368
369
369
assert ( newOptionButton . hasAttribute ( 'disabled' ) ) ;
370
370
371
371
input . setSelectionRange ( 0 , 'new option' . length ) ;
372
372
userEvent . type ( input , 'foobar' ) ;
373
373
374
- newOptionButton = combobox . getByTestId ( 'create-new-option' ) ;
374
+ newOptionButton = combobox . getByTestId ( 'react-gears-combobox- create-new-option' ) ;
375
375
376
376
assert ( ! newOptionButton . hasAttribute ( 'disabled' ) ) ;
377
377
} ) ;
@@ -393,7 +393,7 @@ describe('<Combobox />', () => {
393
393
let combobox = render (
394
394
< Combobox options = { OPTIONS } onChange = { mockOnChange } value = { value } multi />
395
395
) ;
396
- let input = combobox . getByTestId ( 'combobox-input' ) ;
396
+ let input = combobox . getByTestId ( 'react-gears- combobox-input' ) ;
397
397
fireEvent . focus ( input ) ;
398
398
399
399
const option1 = combobox . getByText ( 'D-O' ) ;
@@ -409,7 +409,7 @@ describe('<Combobox />', () => {
409
409
410
410
cleanup ( ) ;
411
411
combobox = render ( < Combobox options = { OPTIONS } onChange = { mockOnChange } value = { value } multi /> ) ;
412
- input = combobox . getByTestId ( 'combobox-input' ) ;
412
+ input = combobox . getByTestId ( 'react-gears- combobox-input' ) ;
413
413
414
414
fireEvent . keyDown ( input , { key : 'Backspace' , code : 8 } ) ;
415
415
0 commit comments