7
7
* file that was distributed with this source code.
8
8
*/
9
9
10
-
11
10
import { Application } from '@hotwired/stimulus' ;
12
11
import { getByTestId , waitFor } from '@testing-library/dom' ;
13
12
import AutocompleteController , {
@@ -21,7 +20,7 @@ import { vi } from 'vitest';
21
20
22
21
const shortDelay = ( ms : number ) : Promise < void > => new Promise ( ( resolve ) => setTimeout ( resolve , ms ) ) ;
23
22
24
- const startAutocompleteTest = async ( html : string ) : Promise < { container : HTMLElement , tomSelect : TomSelect } > => {
23
+ const startAutocompleteTest = async ( html : string ) : Promise < { container : HTMLElement ; tomSelect : TomSelect } > => {
25
24
const container = document . createElement ( 'div' ) ;
26
25
container . innerHTML = html ;
27
26
@@ -48,7 +47,7 @@ const startAutocompleteTest = async (html: string): Promise<{ container: HTMLEle
48
47
}
49
48
50
49
return { container, tomSelect } ;
51
- }
50
+ } ;
52
51
53
52
const fetchMocker = createFetchMock ( vi ) ;
54
53
describe ( 'AutocompleteController' , ( ) => {
@@ -80,7 +79,7 @@ describe('AutocompleteController', () => {
80
79
} ) ;
81
80
82
81
it ( 'connect with ajax URL on a select element' , async ( ) => {
83
- const { container, tomSelect} = await startAutocompleteTest ( `
82
+ const { container, tomSelect } = await startAutocompleteTest ( `
84
83
<label for="the-select">Items</label>
85
84
<select
86
85
id="the-select"
@@ -96,25 +95,25 @@ describe('AutocompleteController', () => {
96
95
results : [
97
96
{
98
97
value : 3 ,
99
- text : 'salad'
98
+ text : 'salad' ,
100
99
} ,
101
- ]
102
- } ) ,
100
+ ] ,
101
+ } )
103
102
) ;
104
103
105
104
fetchMock . mockResponseOnce (
106
105
JSON . stringify ( {
107
106
results : [
108
107
{
109
108
value : 1 ,
110
- text : 'pizza'
109
+ text : 'pizza' ,
111
110
} ,
112
111
{
113
112
value : 2 ,
114
- text : 'popcorn'
115
- }
116
- ]
117
- } ) ,
113
+ text : 'popcorn' ,
114
+ } ,
115
+ ] ,
116
+ } )
118
117
) ;
119
118
120
119
const controlInput = tomSelect . control_input ;
@@ -140,7 +139,7 @@ describe('AutocompleteController', () => {
140
139
} ) ;
141
140
142
141
it ( 'connect with ajax URL on an input element' , async ( ) => {
143
- const { container, tomSelect} = await startAutocompleteTest ( `
142
+ const { container, tomSelect } = await startAutocompleteTest ( `
144
143
<label for="the-input">Items</label>
145
144
<input
146
145
id="the-input"
@@ -156,25 +155,25 @@ describe('AutocompleteController', () => {
156
155
results : [
157
156
{
158
157
value : 3 ,
159
- text : 'salad'
158
+ text : 'salad' ,
160
159
} ,
161
160
] ,
162
- } ) ,
161
+ } )
163
162
) ;
164
163
165
164
fetchMock . mockResponseOnce (
166
165
JSON . stringify ( {
167
166
results : [
168
167
{
169
168
value : 1 ,
170
- text : 'pizza'
169
+ text : 'pizza' ,
171
170
} ,
172
171
{
173
172
value : 2 ,
174
- text : 'popcorn'
173
+ text : 'popcorn' ,
175
174
} ,
176
175
] ,
177
- } ) ,
176
+ } )
178
177
) ;
179
178
180
179
const controlInput = tomSelect . control_input ;
@@ -233,8 +232,8 @@ describe('AutocompleteController', () => {
233
232
></select>
234
233
` ) ;
235
234
236
- expect ( tomSelect . settings . shouldLoad ( '' ) ) . toBeTruthy ( )
237
- } )
235
+ expect ( tomSelect . settings . shouldLoad ( '' ) ) . toBeTruthy ( ) ;
236
+ } ) ;
238
237
239
238
it ( 'default min-characters will always load after first load' , async ( ) => {
240
239
const { container, tomSelect } = await startAutocompleteTest ( `
@@ -255,10 +254,10 @@ describe('AutocompleteController', () => {
255
254
results : [
256
255
{
257
256
value : 1 ,
258
- text : 'pizza'
257
+ text : 'pizza' ,
259
258
} ,
260
259
] ,
261
- } ) ,
260
+ } )
262
261
) ;
263
262
// wait for the initial Ajax request to finish
264
263
userEvent . click ( controlInput ) ;
@@ -280,14 +279,14 @@ describe('AutocompleteController', () => {
280
279
results : [
281
280
{
282
281
value : 1 ,
283
- text : 'pizza'
282
+ text : 'pizza' ,
284
283
} ,
285
284
{
286
285
value : 2 ,
287
- text : 'popcorn'
286
+ text : 'popcorn' ,
288
287
} ,
289
288
] ,
290
- } ) ,
289
+ } )
291
290
) ;
292
291
controlInput . value = 'foo' ;
293
292
controlInput . dispatchEvent ( new Event ( 'input' ) ) ;
@@ -302,18 +301,18 @@ describe('AutocompleteController', () => {
302
301
results : [
303
302
{
304
303
value : 1 ,
305
- text : 'pizza'
304
+ text : 'pizza' ,
306
305
} ,
307
306
{
308
307
value : 2 ,
309
- text : 'popcorn'
308
+ text : 'popcorn' ,
310
309
} ,
311
310
{
312
311
value : 3 ,
313
- text : 'apples'
312
+ text : 'apples' ,
314
313
} ,
315
314
] ,
316
- } ) ,
315
+ } )
317
316
) ;
318
317
controlInput . value = 'fo' ;
319
318
controlInput . dispatchEvent ( new Event ( 'input' ) ) ;
@@ -350,19 +349,19 @@ describe('AutocompleteController', () => {
350
349
fetchMock . mockResponseOnce (
351
350
JSON . stringify ( {
352
351
results : [
353
- { value : 1 , text : 'dog1' } ,
354
- { value : 2 , text : 'dog2' } ,
355
- { value : 3 , text : 'dog3' } ,
356
- { value : 4 , text : 'dog4' } ,
357
- { value : 5 , text : 'dog5' } ,
358
- { value : 6 , text : 'dog6' } ,
359
- { value : 7 , text : 'dog7' } ,
360
- { value : 8 , text : 'dog8' } ,
361
- { value : 9 , text : 'dog9' } ,
362
- { value : 10 , text : 'dog10' } ,
352
+ { value : 1 , text : 'dog1' } ,
353
+ { value : 2 , text : 'dog2' } ,
354
+ { value : 3 , text : 'dog3' } ,
355
+ { value : 4 , text : 'dog4' } ,
356
+ { value : 5 , text : 'dog5' } ,
357
+ { value : 6 , text : 'dog6' } ,
358
+ { value : 7 , text : 'dog7' } ,
359
+ { value : 8 , text : 'dog8' } ,
360
+ { value : 9 , text : 'dog9' } ,
361
+ { value : 10 , text : 'dog10' } ,
363
362
] ,
364
- next_page : '/path/to/autocomplete?query=&page=2'
365
- } ) ,
363
+ next_page : '/path/to/autocomplete?query=&page=2' ,
364
+ } )
366
365
) ;
367
366
368
367
const controlInput = tomSelect . control_input ;
@@ -380,11 +379,11 @@ describe('AutocompleteController', () => {
380
379
fetchMock . mockResponseOnce (
381
380
JSON . stringify ( {
382
381
results : [
383
- { value : 11 , text : 'dog11' } ,
384
- { value : 12 , text : 'dog12' } ,
382
+ { value : 11 , text : 'dog11' } ,
383
+ { value : 12 , text : 'dog12' } ,
385
384
] ,
386
385
next_page : null ,
387
- } ) ,
386
+ } )
388
387
) ;
389
388
390
389
// trigger a scroll, this will cause TomSelect to check "shouldLoadMore"
@@ -514,7 +513,7 @@ describe('AutocompleteController', () => {
514
513
<option value="8">dog8</option>
515
514
` ;
516
515
517
- let newTomSelect : TomSelect | null = null ;
516
+ let newTomSelect : TomSelect | null = null ;
518
517
container . addEventListener ( 'autocomplete:connect' , ( event : any ) => {
519
518
newTomSelect = ( event . detail as AutocompleteConnectOptions ) . tomSelect ;
520
519
} ) ;
@@ -570,8 +569,10 @@ describe('AutocompleteController', () => {
570
569
tomSelect . addItem ( '3' ) ;
571
570
tomSelect . addItem ( '2' ) ;
572
571
const getSelectedValues = ( ) => {
573
- return Array . from ( selectElement . selectedOptions ) . map ( ( option ) => option . value ) . sort ( ) ;
574
- }
572
+ return Array . from ( selectElement . selectedOptions )
573
+ . map ( ( option ) => option . value )
574
+ . sort ( ) ;
575
+ } ;
575
576
const selectElement = getByTestId ( container , 'main-element' ) as HTMLSelectElement ;
576
577
expect ( getSelectedValues ( ) ) . toEqual ( [ '2' , '3' ] ) ;
577
578
@@ -645,7 +646,7 @@ describe('AutocompleteController', () => {
645
646
const selectElement = getByTestId ( container , 'main-element' ) as HTMLSelectElement ;
646
647
expect ( tomSelect . control_input . placeholder ) . toBe ( 'Select a dog' ) ;
647
648
648
- let newTomSelect : TomSelect | null = null ;
649
+ let newTomSelect : TomSelect | null = null ;
649
650
container . addEventListener ( 'autocomplete:connect' , ( event : any ) => {
650
651
newTomSelect = ( event . detail as AutocompleteConnectOptions ) . tomSelect ;
651
652
} ) ;
@@ -685,36 +686,36 @@ describe('AutocompleteController', () => {
685
686
{
686
687
group_by : [ 'Meat' ] ,
687
688
value : 1 ,
688
- text : 'Beef'
689
+ text : 'Beef' ,
689
690
} ,
690
691
{
691
692
group_by : [ 'Meat' ] ,
692
693
value : 2 ,
693
- text : 'Mutton'
694
+ text : 'Mutton' ,
694
695
} ,
695
696
{
696
697
group_by : [ 'starchy' ] ,
697
698
value : 3 ,
698
- text : 'Potatoes'
699
+ text : 'Potatoes' ,
699
700
} ,
700
701
{
701
702
group_by : [ 'starchy' , 'Meat' ] ,
702
703
value : 4 ,
703
- text : 'chili con carne'
704
+ text : 'chili con carne' ,
704
705
} ,
705
706
] ,
706
707
optgroups : [
707
708
{
708
709
value : 'Meat' ,
709
- label : 'Meat'
710
+ label : 'Meat' ,
710
711
} ,
711
712
{
712
713
value : 'starchy' ,
713
- label : 'starchy'
714
+ label : 'starchy' ,
714
715
} ,
715
- ]
716
+ ] ,
716
717
} ,
717
- } ) ,
718
+ } )
718
719
) ;
719
720
720
721
fetchMock . mockResponseOnce (
@@ -724,22 +725,22 @@ describe('AutocompleteController', () => {
724
725
{
725
726
group_by : [ 'Meat' ] ,
726
727
value : 1 ,
727
- text : 'Beef'
728
+ text : 'Beef' ,
728
729
} ,
729
730
{
730
731
group_by : [ 'Meat' ] ,
731
732
value : 2 ,
732
- text : 'Mutton'
733
+ text : 'Mutton' ,
733
734
} ,
734
735
] ,
735
736
optgroups : [
736
737
{
737
738
value : 'Meat' ,
738
- label : 'Meat'
739
+ label : 'Meat' ,
739
740
} ,
740
- ]
741
- }
742
- } ) ,
741
+ ] ,
742
+ } ,
743
+ } )
743
744
) ;
744
745
745
746
const controlInput = tomSelect . control_input ;
@@ -801,8 +802,10 @@ describe('AutocompleteController', () => {
801
802
tomSelect . addItem ( '3' ) ;
802
803
803
804
const getSelectedValues = ( ) => {
804
- return Array . from ( selectElement . selectedOptions ) . map ( ( option ) => option . value ) . sort ( ) ;
805
- }
805
+ return Array . from ( selectElement . selectedOptions )
806
+ . map ( ( option ) => option . value )
807
+ . sort ( ) ;
808
+ } ;
806
809
807
810
const selectElement = getByTestId ( container , 'main-element' ) as HTMLSelectElement ;
808
811
expect ( getSelectedValues ( ) ) . toEqual ( [ '2' , '3' ] ) ;
0 commit comments