@gitlab/ui 88.6.0 → 89.0.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.
Files changed (40) hide show
  1. package/CHANGELOG.md +19 -0
  2. package/bin/migrate_custom_utils_to_tw.bundled.mjs +1 -0
  3. package/dist/components/base/datepicker/datepicker.js +1 -1
  4. package/dist/index.css +2 -2
  5. package/dist/index.css.map +1 -1
  6. package/dist/index.js +0 -2
  7. package/dist/vendor/bootstrap-vue/src/components/index.js +0 -2
  8. package/dist/vendor/bootstrap-vue/src/components/tooltip/helpers/bv-tooltip.js +1 -1
  9. package/dist/vendor/bootstrap-vue/src/constants/components.js +1 -3
  10. package/dist/vendor/bootstrap-vue/src/index.js +0 -3
  11. package/package.json +1 -1
  12. package/src/components/base/datepicker/datepicker.vue +1 -1
  13. package/src/components/base/form/form_checkbox/form_checkbox.scss +3 -3
  14. package/src/index.js +0 -2
  15. package/src/scss/bootstrap.scss +0 -1
  16. package/src/scss/components.scss +0 -1
  17. package/src/vendor/bootstrap-vue/nuxt/index.js +0 -1
  18. package/src/vendor/bootstrap-vue/package.json +0 -1
  19. package/src/vendor/bootstrap-vue/src/components/index.d.ts +0 -1
  20. package/src/vendor/bootstrap-vue/src/components/index.js +0 -2
  21. package/src/vendor/bootstrap-vue/src/components/tooltip/helpers/bv-tooltip.js +1 -1
  22. package/src/vendor/bootstrap-vue/src/constants/components.js +0 -2
  23. package/src/vendor/bootstrap-vue/src/index.js +0 -5
  24. package/dist/components/base/carousel/carousel.js +0 -48
  25. package/dist/components/base/carousel/carousel_slide.js +0 -47
  26. package/dist/vendor/bootstrap-vue/src/components/carousel/carousel-slide.js +0 -123
  27. package/dist/vendor/bootstrap-vue/src/components/carousel/carousel.js +0 -617
  28. package/dist/vendor/bootstrap-vue/src/components/carousel/index.js +0 -14
  29. package/src/components/base/carousel/carousel.md +0 -3
  30. package/src/components/base/carousel/carousel.scss +0 -29
  31. package/src/components/base/carousel/carousel.vue +0 -19
  32. package/src/components/base/carousel/carousel_slide.vue +0 -18
  33. package/src/vendor/bootstrap-vue/src/components/carousel/README.md +0 -320
  34. package/src/vendor/bootstrap-vue/src/components/carousel/carousel-slide.js +0 -132
  35. package/src/vendor/bootstrap-vue/src/components/carousel/carousel-slide.spec.js +0 -276
  36. package/src/vendor/bootstrap-vue/src/components/carousel/carousel.js +0 -655
  37. package/src/vendor/bootstrap-vue/src/components/carousel/carousel.spec.js +0 -1069
  38. package/src/vendor/bootstrap-vue/src/components/carousel/index.d.ts +0 -20
  39. package/src/vendor/bootstrap-vue/src/components/carousel/index.js +0 -12
  40. package/src/vendor/bootstrap-vue/src/components/carousel/package.json +0 -185
@@ -1,1069 +0,0 @@
1
- import { mount } from '@vue/test-utils'
2
- import { waitNT, waitRAF } from '../../../tests/utils'
3
- import { BCarousel } from './carousel'
4
- import { BCarouselSlide } from './carousel-slide'
5
-
6
- jest.useFakeTimers()
7
-
8
- const App = {
9
- props: [
10
- // BCarousel props
11
- 'interval',
12
- 'indicators',
13
- 'controls',
14
- 'fade',
15
- 'noAnimation',
16
- 'noWrap',
17
- 'value',
18
- // Custom props
19
- 'slideCount'
20
- ],
21
- render(h) {
22
- const props = { ...this.$props }
23
- const { slideCount = 4 } = props
24
- delete props.slideCount
25
-
26
- const $slides = [...Array(slideCount)].map((_, i) =>
27
- h(BCarouselSlide, { key: `slide-${i}` }, `Slide ${i + 1}`)
28
- )
29
-
30
- return h(BCarousel, { props }, $slides)
31
- }
32
- }
33
-
34
- describe('carousel', () => {
35
- it('has expected default structure', async () => {
36
- const wrapper = mount(BCarousel, {
37
- attachTo: document.body
38
- })
39
-
40
- expect(wrapper.vm).toBeDefined()
41
- await waitNT(wrapper.vm)
42
- await waitRAF()
43
-
44
- // Outer wrapper
45
- // <div role="region" aria-busy="false" class="carousel slide" id="__BVID__52"></div>
46
- expect(wrapper.element.tagName).toBe('DIV')
47
- expect(wrapper.classes()).toContain('carousel')
48
- expect(wrapper.classes()).toContain('slide')
49
- expect(wrapper.classes().length).toBe(2)
50
- expect(wrapper.attributes('role')).toBeDefined()
51
- expect(wrapper.attributes('role')).toEqual('region')
52
- expect(wrapper.attributes('aria-busy')).toBeDefined()
53
- // Will be 'false' when no slides (and only true when a slide is sliding)
54
- expect(wrapper.attributes('aria-busy')).toEqual('false')
55
- expect(wrapper.attributes('id')).toBeDefined()
56
- const id = wrapper.attributes('id')
57
-
58
- // Slide wrapper
59
- // <div role="list" class="carousel-inner" id="__BVID__52___BV_inner_"></div>
60
- expect(wrapper.findAll('.carousel > .carousel-inner').length).toBe(1)
61
- const $inner = wrapper.find('.carousel > .carousel-inner')
62
- expect($inner.classes()).toContain('carousel-inner')
63
- expect($inner.classes().length).toBe(1)
64
- expect($inner.attributes('role')).toBeDefined()
65
- expect($inner.attributes('role')).toEqual('list')
66
- expect($inner.attributes('id')).toBeDefined()
67
- expect($inner.attributes('id')).toEqual(`${id}___BV_inner_`)
68
-
69
- // Controls (none by default)
70
- // <a href="#" role="button" class="carousel-control-prev" aria-controls="__BVID__55___BV_inner_"></a>
71
- // <a href="#" role="button" class="carousel-control-next" aria-controls="__BVID__55___BV_inner_"></a>
72
- expect(wrapper.findAll('.carousel > .carousel-control-prev').length).toBe(0)
73
- expect(wrapper.findAll('.carousel > .carousel-control-next').length).toBe(0)
74
- expect(wrapper.findAll('a').length).toBe(0)
75
-
76
- // Indicators (hidden by default)
77
- // <ol
78
- // aria-hidden="true"
79
- // aria-label="Select a slide to display"
80
- // class="carousel-indicators"
81
- // id="__BVID__52___BV_indicators_"
82
- // aria-owns="__BVID__52___BV_inner_"
83
- // style="display: none;"></ol>
84
- expect(wrapper.findAll('.carousel > ol').length).toBe(1)
85
- const $indicators = wrapper.find('.carousel > ol')
86
- expect($indicators.classes()).toContain('carousel-indicators')
87
- expect($indicators.classes().length).toBe(1)
88
- expect($indicators.attributes('id')).toBeDefined()
89
- expect($indicators.attributes('id')).toEqual(`${id}___BV_indicators_`)
90
- expect($indicators.attributes('aria-owns')).toBeDefined()
91
- expect($indicators.attributes('aria-owns')).toEqual(`${id}___BV_inner_`)
92
- expect($indicators.attributes('aria-hidden')).toBeDefined()
93
- expect($indicators.attributes('aria-hidden')).toEqual('true')
94
- expect($indicators.attributes('aria-label')).toBeDefined()
95
- expect($indicators.attributes('aria-label')).toEqual('Select a slide to display')
96
- expect($indicators.element.style.display).toEqual('none')
97
- expect($indicators.findAll('li').length).toBe(0) // no slides
98
-
99
- wrapper.destroy()
100
- })
101
-
102
- it('has prev/next controls when prop controls is set', async () => {
103
- const wrapper = mount(BCarousel, {
104
- attachTo: document.body,
105
- propsData: {
106
- controls: true
107
- }
108
- })
109
-
110
- expect(wrapper.vm).toBeDefined()
111
- await waitNT(wrapper.vm)
112
- await waitRAF()
113
-
114
- // Outer wrapper
115
- // <div role="region" aria-busy="false" class="carousel slide" id="__BVID__52"></div>
116
- expect(wrapper.element.tagName).toBe('DIV')
117
- expect(wrapper.classes()).toContain('carousel')
118
- expect(wrapper.classes()).toContain('slide')
119
- expect(wrapper.classes().length).toBe(2)
120
- expect(wrapper.attributes('id')).toBeDefined()
121
- const id = wrapper.attributes('id')
122
-
123
- // Slide wrapper
124
- // <div role="list" class="carousel-inner" id="__BVID__52___BV_inner_"></div>
125
- expect(wrapper.findAll('.carousel > .carousel-inner').length).toBe(1)
126
-
127
- // Controls
128
- // <a href="#" role="button" class="carousel-control-prev" aria-controls="__BVID__55___BV_inner_"></a>
129
- // <a href="#" role="button" class="carousel-control-next" aria-controls="__BVID__55___BV_inner_"></a>
130
- expect(wrapper.findAll('.carousel > .carousel-control-prev').length).toBe(1)
131
- expect(wrapper.findAll('.carousel > .carousel-control-next').length).toBe(1)
132
- expect(wrapper.findAll('a').length).toBe(2)
133
- const $prev = wrapper.find('.carousel > .carousel-control-prev')
134
- const $next = wrapper.find('.carousel > .carousel-control-next')
135
- expect($prev.element.tagName).toBe('A')
136
- expect($next.element.tagName).toBe('A')
137
- expect($prev.attributes('href')).toEqual('#')
138
- expect($next.attributes('href')).toEqual('#')
139
- expect($prev.attributes('role')).toEqual('button')
140
- expect($next.attributes('role')).toEqual('button')
141
- expect($prev.attributes('aria-controls')).toEqual(`${id}___BV_inner_`)
142
- expect($next.attributes('aria-controls')).toEqual(`${id}___BV_inner_`)
143
- expect($prev.classes()).toContain('carousel-control-prev')
144
- expect($next.classes()).toContain('carousel-control-next')
145
- expect($prev.classes().length).toBe(1)
146
- expect($next.classes().length).toBe(1)
147
-
148
- // Indicators (hidden by default)
149
- // <ol
150
- // aria-hidden="true"
151
- // aria-label="Select a slide to display"
152
- // class="carousel-indicators"
153
- // id="__BVID__52___BV_indicators_"
154
- // aria-owns="__BVID__52___BV_inner_"
155
- // style="display: none;"></ol>
156
- expect(wrapper.findAll('.carousel > ol').length).toBe(1)
157
- const $indicators = wrapper.find('.carousel > ol')
158
- expect($indicators.classes()).toContain('carousel-indicators')
159
- expect($indicators.classes().length).toBe(1)
160
- expect($indicators.element.style.display).toEqual('none')
161
-
162
- wrapper.destroy()
163
- })
164
-
165
- it('has indicators showing when prop indicators is set', async () => {
166
- const wrapper = mount(BCarousel, {
167
- attachTo: document.body,
168
- propsData: {
169
- indicators: true
170
- }
171
- })
172
-
173
- expect(wrapper.vm).toBeDefined()
174
- await waitNT(wrapper.vm)
175
- await waitRAF()
176
-
177
- // Outer wrapper
178
- // <div role="region" aria-busy="false" class="carousel slide" id="__BVID__52"></div>
179
- expect(wrapper.element.tagName).toBe('DIV')
180
- expect(wrapper.classes()).toContain('carousel')
181
- expect(wrapper.classes()).toContain('slide')
182
- expect(wrapper.classes().length).toBe(2)
183
- expect(wrapper.attributes('id')).toBeDefined()
184
-
185
- // Slide wrapper
186
- // <div role="list" class="carousel-inner" id="__BVID__52___BV_inner_"></div>
187
- expect(wrapper.findAll('.carousel > .carousel-inner').length).toBe(1)
188
-
189
- // Controls (none by default)
190
- // <a href="#" role="button" class="carousel-control-prev" aria-controls="__BVID__55___BV_inner_"></a>
191
- // <a href="#" role="button" class="carousel-control-next" aria-controls="__BVID__55___BV_inner_"></a>
192
- expect(wrapper.findAll('.carousel > .carousel-control-prev').length).toBe(0)
193
- expect(wrapper.findAll('.carousel > .carousel-control-next').length).toBe(0)
194
-
195
- // Indicators
196
- // <ol
197
- // aria-hidden="true"
198
- // aria-label="Select a slide to display"
199
- // class="carousel-indicators"
200
- // id="__BVID__52___BV_indicators_"
201
- // aria-owns="__BVID__52___BV_inner_"
202
- // style="display: none;"></ol>
203
- expect(wrapper.findAll('.carousel > ol').length).toBe(1)
204
- const $indicators = wrapper.find('.carousel > ol')
205
- expect($indicators.classes()).toContain('carousel-indicators')
206
- expect($indicators.classes().length).toBe(1)
207
- expect($indicators.element.style.display).toEqual('')
208
-
209
- wrapper.destroy()
210
- })
211
-
212
- it('should have class "carousel-fade" when prop "fade" is "true"', async () => {
213
- const wrapper = mount(BCarousel, {
214
- attachTo: document.body,
215
- propsData: {
216
- fade: true
217
- }
218
- })
219
-
220
- expect(wrapper.vm).toBeDefined()
221
- await waitNT(wrapper.vm)
222
- await waitRAF()
223
-
224
- expect(wrapper.classes()).toContain('carousel')
225
- expect(wrapper.classes()).toContain('slide')
226
- expect(wrapper.classes()).toContain('carousel-fade')
227
-
228
- wrapper.destroy()
229
- })
230
-
231
- it('should not have class "fade" or "slide" when prop "no-animation" is "true"', async () => {
232
- const wrapper = mount(BCarousel, {
233
- attachTo: document.body,
234
- propsData: {
235
- noAnimation: true
236
- }
237
- })
238
-
239
- expect(wrapper.vm).toBeDefined()
240
- await waitNT(wrapper.vm)
241
- await waitRAF()
242
-
243
- expect(wrapper.classes()).toContain('carousel')
244
- expect(wrapper.classes()).not.toContain('slide')
245
- expect(wrapper.classes()).not.toContain('carousel-fade')
246
-
247
- wrapper.destroy()
248
- })
249
-
250
- it('should not have class "fade" or "slide" when prop "no-animation" and "fade" are "true"', async () => {
251
- const wrapper = mount(BCarousel, {
252
- attachTo: document.body,
253
- propsData: {
254
- fade: true,
255
- noAnimation: true
256
- }
257
- })
258
-
259
- expect(wrapper.vm).toBeDefined()
260
- await waitNT(wrapper.vm)
261
- await waitRAF()
262
-
263
- expect(wrapper.classes()).toContain('carousel')
264
- expect(wrapper.classes()).not.toContain('slide')
265
- expect(wrapper.classes()).not.toContain('carousel-fade')
266
-
267
- wrapper.destroy()
268
- })
269
-
270
- it('should not automatically scroll to next slide when "interval" is "0"', async () => {
271
- const wrapper = mount(App, {
272
- attachTo: document.body,
273
- propsData: {
274
- interval: 0
275
- }
276
- })
277
-
278
- expect(wrapper.vm).toBeDefined()
279
- const $carousel = wrapper.findComponent(BCarousel)
280
- expect($carousel).toBeDefined()
281
- expect($carousel.vm).toBeDefined()
282
-
283
- await waitNT(wrapper.vm)
284
- await waitRAF()
285
-
286
- jest.runOnlyPendingTimers()
287
- await waitNT(wrapper.vm)
288
- await waitRAF()
289
-
290
- expect($carousel.emitted('sliding-start')).toBeUndefined()
291
- expect($carousel.emitted('sliding-end')).toBeUndefined()
292
- expect($carousel.emitted('input')).toBeUndefined()
293
-
294
- wrapper.destroy()
295
- })
296
-
297
- it('should scroll to next/prev slide when next/prev clicked', async () => {
298
- const wrapper = mount(App, {
299
- attachTo: document.body,
300
- propsData: {
301
- interval: 0,
302
- controls: true
303
- }
304
- })
305
-
306
- expect(wrapper.vm).toBeDefined()
307
- const $carousel = wrapper.findComponent(BCarousel)
308
- expect($carousel).toBeDefined()
309
- expect($carousel.vm).toBeDefined()
310
-
311
- const $next = $carousel.find('.carousel-control-next')
312
- const $prev = $carousel.find('.carousel-control-prev')
313
-
314
- await waitNT(wrapper.vm)
315
- await waitRAF()
316
-
317
- expect($carousel.emitted('sliding-start')).toBeUndefined()
318
- expect($carousel.emitted('sliding-end')).toBeUndefined()
319
- expect($carousel.emitted('input')).toBeUndefined()
320
-
321
- await $next.trigger('click')
322
-
323
- expect($carousel.emitted('sliding-start')).toBeDefined()
324
- expect($carousel.emitted('sliding-end')).toBeUndefined()
325
- expect($carousel.emitted('sliding-start').length).toBe(1)
326
- expect($carousel.emitted('sliding-start')[0][0]).toEqual(1)
327
-
328
- jest.runOnlyPendingTimers()
329
- await waitNT(wrapper.vm)
330
- await waitRAF()
331
-
332
- expect($carousel.emitted('sliding-start').length).toBe(1)
333
- expect($carousel.emitted('sliding-end')).toBeDefined()
334
- expect($carousel.emitted('sliding-end').length).toBe(1)
335
- expect($carousel.emitted('sliding-end')[0][0]).toEqual(1)
336
- expect($carousel.emitted('input')).toBeDefined()
337
- expect($carousel.emitted('input').length).toBe(1)
338
- expect($carousel.emitted('input')[0][0]).toEqual(1)
339
-
340
- await $prev.trigger('click')
341
-
342
- expect($carousel.emitted('sliding-start').length).toBe(2)
343
- expect($carousel.emitted('sliding-end').length).toBe(1)
344
- expect($carousel.emitted('sliding-start')[1][0]).toEqual(0)
345
-
346
- jest.runOnlyPendingTimers()
347
- await waitNT(wrapper.vm)
348
- await waitRAF()
349
-
350
- expect($carousel.emitted('sliding-start').length).toBe(2)
351
- expect($carousel.emitted('sliding-end').length).toBe(2)
352
- expect($carousel.emitted('sliding-end')[1][0]).toEqual(0)
353
- expect($carousel.emitted('input').length).toBe(2)
354
- expect($carousel.emitted('input')[1][0]).toEqual(0)
355
-
356
- wrapper.destroy()
357
- })
358
-
359
- it('should scroll to next/prev slide when next/prev space keypress', async () => {
360
- const wrapper = mount(App, {
361
- attachTo: document.body,
362
- propsData: {
363
- interval: 0,
364
- controls: true
365
- }
366
- })
367
-
368
- expect(wrapper.vm).toBeDefined()
369
- const $carousel = wrapper.findComponent(BCarousel)
370
- expect($carousel).toBeDefined()
371
- expect($carousel.vm).toBeDefined()
372
-
373
- const $next = $carousel.find('.carousel-control-next')
374
- const $prev = $carousel.find('.carousel-control-prev')
375
-
376
- await waitNT(wrapper.vm)
377
- await waitRAF()
378
-
379
- expect($carousel.emitted('sliding-start')).toBeUndefined()
380
- expect($carousel.emitted('sliding-end')).toBeUndefined()
381
- expect($carousel.emitted('input')).toBeUndefined()
382
-
383
- await $next.trigger('keydown.space')
384
-
385
- expect($carousel.emitted('sliding-start')).toBeDefined()
386
- expect($carousel.emitted('sliding-end')).toBeUndefined()
387
- expect($carousel.emitted('sliding-start').length).toBe(1)
388
- expect($carousel.emitted('sliding-start')[0][0]).toEqual(1)
389
-
390
- jest.runOnlyPendingTimers()
391
- await waitNT(wrapper.vm)
392
- await waitRAF()
393
-
394
- expect($carousel.emitted('sliding-start').length).toBe(1)
395
- expect($carousel.emitted('sliding-end')).toBeDefined()
396
- expect($carousel.emitted('sliding-end').length).toBe(1)
397
- expect($carousel.emitted('sliding-end')[0][0]).toEqual(1)
398
- expect($carousel.emitted('input')).toBeDefined()
399
- expect($carousel.emitted('input').length).toBe(1)
400
- expect($carousel.emitted('input')[0][0]).toEqual(1)
401
-
402
- await $prev.trigger('keydown.space')
403
-
404
- expect($carousel.emitted('sliding-start').length).toBe(2)
405
- expect($carousel.emitted('sliding-end').length).toBe(1)
406
- expect($carousel.emitted('sliding-start')[1][0]).toEqual(0)
407
-
408
- jest.runOnlyPendingTimers()
409
- await waitNT(wrapper.vm)
410
- await waitRAF()
411
-
412
- expect($carousel.emitted('sliding-start').length).toBe(2)
413
- expect($carousel.emitted('sliding-end').length).toBe(2)
414
- expect($carousel.emitted('sliding-end')[1][0]).toEqual(0)
415
- expect($carousel.emitted('input').length).toBe(2)
416
- expect($carousel.emitted('input')[1][0]).toEqual(0)
417
-
418
- wrapper.destroy()
419
- })
420
-
421
- it('should scroll to specified slide when indicator clicked', async () => {
422
- const wrapper = mount(App, {
423
- attachTo: document.body,
424
- propsData: {
425
- interval: 0,
426
- controls: true
427
- }
428
- })
429
-
430
- expect(wrapper.vm).toBeDefined()
431
- const $carousel = wrapper.findComponent(BCarousel)
432
- expect($carousel).toBeDefined()
433
- expect($carousel.vm).toBeDefined()
434
-
435
- await waitNT(wrapper.vm)
436
- await waitRAF()
437
-
438
- const $indicators = $carousel.findAll('.carousel-indicators > li')
439
- expect($indicators.length).toBe(4)
440
-
441
- expect($carousel.emitted('sliding-start')).toBeUndefined()
442
- expect($carousel.emitted('sliding-end')).toBeUndefined()
443
- expect($carousel.emitted('input')).toBeUndefined()
444
-
445
- await $indicators.at(3).trigger('click')
446
-
447
- expect($carousel.emitted('sliding-start')).toBeDefined()
448
- expect($carousel.emitted('sliding-end')).toBeUndefined()
449
- expect($carousel.emitted('sliding-start').length).toBe(1)
450
- expect($carousel.emitted('sliding-start')[0][0]).toEqual(3)
451
-
452
- jest.runOnlyPendingTimers()
453
- await waitNT(wrapper.vm)
454
- await waitRAF()
455
-
456
- expect($carousel.emitted('sliding-start').length).toBe(1)
457
- expect($carousel.emitted('sliding-end')).toBeDefined()
458
- expect($carousel.emitted('sliding-end').length).toBe(1)
459
- expect($carousel.emitted('sliding-end')[0][0]).toEqual(3)
460
- expect($carousel.emitted('input')).toBeDefined()
461
- expect($carousel.emitted('input').length).toBe(1)
462
- expect($carousel.emitted('input')[0][0]).toEqual(3)
463
-
464
- await $indicators.at(1).trigger('click')
465
-
466
- expect($carousel.emitted('sliding-start').length).toBe(2)
467
- expect($carousel.emitted('sliding-end').length).toBe(1)
468
- expect($carousel.emitted('sliding-start')[1][0]).toEqual(1)
469
-
470
- jest.runOnlyPendingTimers()
471
- await waitNT(wrapper.vm)
472
- await waitRAF()
473
-
474
- expect($carousel.emitted('sliding-start').length).toBe(2)
475
- expect($carousel.emitted('sliding-end').length).toBe(2)
476
- expect($carousel.emitted('sliding-end')[1][0]).toEqual(1)
477
- expect($carousel.emitted('input').length).toBe(2)
478
- expect($carousel.emitted('input')[1][0]).toEqual(1)
479
-
480
- wrapper.destroy()
481
- })
482
-
483
- it('should scroll to specified slide when indicator keypress space/enter', async () => {
484
- const wrapper = mount(App, {
485
- attachTo: document.body,
486
- propsData: {
487
- interval: 0,
488
- controls: true
489
- }
490
- })
491
-
492
- expect(wrapper.vm).toBeDefined()
493
- const $carousel = wrapper.findComponent(BCarousel)
494
- expect($carousel).toBeDefined()
495
- expect($carousel.vm).toBeDefined()
496
-
497
- await waitNT(wrapper.vm)
498
- await waitRAF()
499
-
500
- const $indicators = $carousel.findAll('.carousel-indicators > li')
501
- expect($indicators.length).toBe(4)
502
-
503
- expect($carousel.emitted('sliding-start')).toBeUndefined()
504
- expect($carousel.emitted('sliding-end')).toBeUndefined()
505
- expect($carousel.emitted('input')).toBeUndefined()
506
-
507
- await $indicators.at(3).trigger('keydown.space')
508
-
509
- expect($carousel.emitted('sliding-start')).toBeDefined()
510
- expect($carousel.emitted('sliding-end')).toBeUndefined()
511
- expect($carousel.emitted('sliding-start').length).toBe(1)
512
- expect($carousel.emitted('sliding-start')[0][0]).toEqual(3)
513
-
514
- jest.runOnlyPendingTimers()
515
- await waitNT(wrapper.vm)
516
- await waitRAF()
517
-
518
- expect($carousel.emitted('sliding-start').length).toBe(1)
519
- expect($carousel.emitted('sliding-end')).toBeDefined()
520
- expect($carousel.emitted('sliding-end').length).toBe(1)
521
- expect($carousel.emitted('sliding-end')[0][0]).toEqual(3)
522
- expect($carousel.emitted('input')).toBeDefined()
523
- expect($carousel.emitted('input').length).toBe(1)
524
- expect($carousel.emitted('input')[0][0]).toEqual(3)
525
-
526
- await $indicators.at(1).trigger('keydown.enter')
527
-
528
- expect($carousel.emitted('sliding-start').length).toBe(2)
529
- expect($carousel.emitted('sliding-end').length).toBe(1)
530
- expect($carousel.emitted('sliding-start')[1][0]).toEqual(1)
531
-
532
- jest.runOnlyPendingTimers()
533
- await waitNT(wrapper.vm)
534
- await waitRAF()
535
-
536
- expect($carousel.emitted('sliding-start').length).toBe(2)
537
- expect($carousel.emitted('sliding-end').length).toBe(2)
538
- expect($carousel.emitted('sliding-end')[1][0]).toEqual(1)
539
- expect($carousel.emitted('input').length).toBe(2)
540
- expect($carousel.emitted('input')[1][0]).toEqual(1)
541
-
542
- wrapper.destroy()
543
- })
544
-
545
- it('should scroll to next/prev slide when key next/prev pressed', async () => {
546
- const wrapper = mount(App, {
547
- attachTo: document.body,
548
- propsData: {
549
- interval: 0,
550
- controls: true
551
- }
552
- })
553
-
554
- expect(wrapper.vm).toBeDefined()
555
- const $carousel = wrapper.findComponent(BCarousel)
556
- expect($carousel).toBeDefined()
557
- expect($carousel.vm).toBeDefined()
558
-
559
- await waitNT(wrapper.vm)
560
- await waitRAF()
561
-
562
- expect($carousel.emitted('sliding-start')).toBeUndefined()
563
- expect($carousel.emitted('sliding-end')).toBeUndefined()
564
- expect($carousel.emitted('input')).toBeUndefined()
565
-
566
- await $carousel.trigger('keydown.right')
567
-
568
- expect($carousel.emitted('sliding-start')).toBeDefined()
569
- expect($carousel.emitted('sliding-end')).toBeUndefined()
570
- expect($carousel.emitted('sliding-start').length).toBe(1)
571
- expect($carousel.emitted('sliding-start')[0][0]).toEqual(1)
572
-
573
- jest.runOnlyPendingTimers()
574
- await waitNT(wrapper.vm)
575
- await waitRAF()
576
-
577
- expect($carousel.emitted('sliding-start').length).toBe(1)
578
- expect($carousel.emitted('sliding-end')).toBeDefined()
579
- expect($carousel.emitted('sliding-end').length).toBe(1)
580
- expect($carousel.emitted('sliding-end')[0][0]).toEqual(1)
581
- expect($carousel.emitted('input')).toBeDefined()
582
- expect($carousel.emitted('input').length).toBe(1)
583
- expect($carousel.emitted('input')[0][0]).toEqual(1)
584
-
585
- await $carousel.trigger('keydown.left')
586
-
587
- expect($carousel.emitted('sliding-start').length).toBe(2)
588
- expect($carousel.emitted('sliding-end').length).toBe(1)
589
- expect($carousel.emitted('sliding-start')[1][0]).toEqual(0)
590
-
591
- jest.runOnlyPendingTimers()
592
- await waitNT(wrapper.vm)
593
- await waitRAF()
594
-
595
- expect($carousel.emitted('sliding-start').length).toBe(2)
596
- expect($carousel.emitted('sliding-end').length).toBe(2)
597
- expect($carousel.emitted('sliding-end')[1][0]).toEqual(0)
598
- expect($carousel.emitted('input').length).toBe(2)
599
- expect($carousel.emitted('input')[1][0]).toEqual(0)
600
-
601
- wrapper.destroy()
602
- })
603
-
604
- it('should emit paused and unpaused events when "interval" changed to 0', async () => {
605
- const wrapper = mount(App, {
606
- attachTo: document.body,
607
- propsData: {
608
- interval: 0
609
- }
610
- })
611
-
612
- expect(wrapper.vm).toBeDefined()
613
- const $carousel = wrapper.findComponent(BCarousel)
614
- expect($carousel).toBeDefined()
615
- expect($carousel.vm).toBeDefined()
616
-
617
- await waitNT(wrapper.vm)
618
- await waitRAF()
619
-
620
- expect($carousel.emitted('unpaused')).toBeUndefined()
621
- expect($carousel.emitted('paused')).toBeUndefined()
622
- expect($carousel.emitted('input')).toBeUndefined()
623
-
624
- expect($carousel.vm.interval).toBe(0)
625
-
626
- jest.runOnlyPendingTimers()
627
- await waitNT(wrapper.vm)
628
- await waitRAF()
629
-
630
- expect($carousel.emitted('unpaused')).toBeUndefined()
631
- expect($carousel.emitted('paused')).toBeUndefined()
632
-
633
- await wrapper.setProps({
634
- interval: 1000
635
- })
636
- await waitNT(wrapper.vm)
637
- await waitRAF()
638
-
639
- expect($carousel.vm.interval).toBe(1000)
640
-
641
- jest.runOnlyPendingTimers()
642
- await waitNT(wrapper.vm)
643
- await waitRAF()
644
-
645
- expect($carousel.emitted('unpaused')).toBeDefined()
646
- expect($carousel.emitted('unpaused').length).toBe(1)
647
- expect($carousel.emitted('paused')).toBeUndefined()
648
-
649
- jest.runOnlyPendingTimers()
650
- await waitNT(wrapper.vm)
651
- await waitRAF()
652
-
653
- await wrapper.setProps({
654
- interval: 0
655
- })
656
- await waitNT(wrapper.vm)
657
- await waitRAF()
658
- jest.runOnlyPendingTimers()
659
-
660
- expect($carousel.vm.interval).toBe(0)
661
- expect($carousel.emitted('unpaused').length).toBe(1)
662
- expect($carousel.emitted('paused')).toBeDefined()
663
- expect($carousel.emitted('paused').length).toBe(1)
664
-
665
- jest.runOnlyPendingTimers()
666
- await waitNT(wrapper.vm)
667
- await waitRAF()
668
-
669
- await wrapper.setProps({
670
- interval: 1000
671
- })
672
- await waitNT(wrapper.vm)
673
- await waitRAF()
674
- jest.runOnlyPendingTimers()
675
-
676
- expect($carousel.vm.interval).toBe(1000)
677
- expect($carousel.emitted('unpaused').length).toBe(2)
678
- expect($carousel.emitted('paused').length).toBe(1)
679
-
680
- wrapper.destroy()
681
- })
682
-
683
- it('should scroll to specified slide when value (v-model) changed', async () => {
684
- const wrapper = mount(App, {
685
- attachTo: document.body,
686
- propsData: {
687
- interval: 0,
688
- value: 0
689
- }
690
- })
691
-
692
- expect(wrapper.vm).toBeDefined()
693
- const $carousel = wrapper.findComponent(BCarousel)
694
- expect($carousel).toBeDefined()
695
- expect($carousel.vm).toBeDefined()
696
-
697
- await waitNT(wrapper.vm)
698
- await waitRAF()
699
-
700
- const $indicators = $carousel.findAll('.carousel-indicators > li')
701
- expect($indicators.length).toBe(4)
702
-
703
- expect($carousel.emitted('sliding-start')).toBeUndefined()
704
- expect($carousel.emitted('sliding-end')).toBeUndefined()
705
- expect($carousel.emitted('input')).toBeUndefined()
706
-
707
- expect($carousel.vm.index).toBe(0)
708
- expect($carousel.vm.isSliding).toBe(false)
709
-
710
- await wrapper.setProps({
711
- value: 1
712
- })
713
-
714
- await waitNT(wrapper.vm)
715
- await waitRAF()
716
-
717
- expect($carousel.emitted('sliding-start')).toBeDefined()
718
- expect($carousel.emitted('sliding-end')).toBeUndefined()
719
- expect($carousel.emitted('sliding-start').length).toBe(1)
720
- expect($carousel.emitted('sliding-start')[0][0]).toEqual(1)
721
- expect($carousel.vm.isSliding).toBe(true)
722
-
723
- jest.runOnlyPendingTimers()
724
- await waitNT(wrapper.vm)
725
- await waitRAF()
726
-
727
- expect($carousel.emitted('sliding-start').length).toBe(1)
728
- expect($carousel.emitted('sliding-end')).toBeDefined()
729
- expect($carousel.emitted('sliding-end').length).toBe(1)
730
- expect($carousel.emitted('sliding-end')[0][0]).toEqual(1)
731
- expect($carousel.emitted('input')).toBeDefined()
732
- expect($carousel.emitted('input').length).toBe(1)
733
- expect($carousel.emitted('input')[0][0]).toEqual(1)
734
- expect($carousel.vm.isSliding).toBe(false)
735
-
736
- await wrapper.setProps({
737
- value: 3
738
- })
739
-
740
- await waitNT(wrapper.vm)
741
- await waitRAF()
742
-
743
- expect($carousel.emitted('sliding-start').length).toBe(2)
744
- expect($carousel.emitted('sliding-end').length).toBe(1)
745
- expect($carousel.emitted('sliding-start')[1][0]).toEqual(3)
746
- expect($carousel.vm.isSliding).toBe(true)
747
-
748
- jest.runOnlyPendingTimers()
749
- await waitNT(wrapper.vm)
750
- await waitRAF()
751
-
752
- expect($carousel.emitted('sliding-start').length).toBe(2)
753
- expect($carousel.emitted('sliding-end').length).toBe(2)
754
- expect($carousel.emitted('sliding-end')[1][0]).toEqual(3)
755
- expect($carousel.emitted('input').length).toBe(2)
756
- expect($carousel.emitted('input')[1][0]).toEqual(3)
757
- expect($carousel.vm.isSliding).toBe(false)
758
-
759
- wrapper.destroy()
760
- })
761
-
762
- it('changing slides works when "no-animation" set', async () => {
763
- const wrapper = mount(App, {
764
- attachTo: document.body,
765
- propsData: {
766
- interval: 0,
767
- noAnimation: true
768
- }
769
- })
770
-
771
- expect(wrapper.vm).toBeDefined()
772
- const $carousel = wrapper.findComponent(BCarousel)
773
- expect($carousel).toBeDefined()
774
- expect($carousel.vm).toBeDefined()
775
-
776
- await waitNT(wrapper.vm)
777
- await waitRAF()
778
-
779
- const $indicators = $carousel.findAll('.carousel-indicators > li')
780
- expect($indicators.length).toBe(4)
781
-
782
- expect($carousel.emitted('sliding-start')).toBeUndefined()
783
- expect($carousel.emitted('sliding-end')).toBeUndefined()
784
- expect($carousel.emitted('input')).toBeUndefined()
785
-
786
- expect($carousel.vm.index).toBe(0)
787
- expect($carousel.vm.isSliding).toBe(false)
788
-
789
- // Transitions (or fallback timers) are not used when no-animation set
790
- await wrapper.setProps({
791
- value: 1
792
- })
793
-
794
- await waitNT(wrapper.vm)
795
-
796
- expect($carousel.emitted('sliding-start')).toBeDefined()
797
- expect($carousel.emitted('sliding-end')).toBeDefined()
798
- expect($carousel.emitted('sliding-start').length).toBe(1)
799
- expect($carousel.emitted('sliding-end').length).toBe(1)
800
- expect($carousel.emitted('sliding-start')[0][0]).toEqual(1)
801
- expect($carousel.emitted('sliding-end')[0][0]).toEqual(1)
802
- expect($carousel.emitted('input')).toBeDefined()
803
- expect($carousel.emitted('input').length).toBe(1)
804
- expect($carousel.emitted('input')[0][0]).toEqual(1)
805
- expect($carousel.vm.index).toBe(1)
806
- expect($carousel.vm.isSliding).toBe(false)
807
-
808
- await wrapper.setProps({
809
- value: 3
810
- })
811
-
812
- await waitNT(wrapper.vm)
813
-
814
- expect($carousel.emitted('sliding-start').length).toBe(2)
815
- expect($carousel.emitted('sliding-end').length).toBe(2)
816
- expect($carousel.emitted('sliding-start')[1][0]).toEqual(3)
817
- expect($carousel.emitted('sliding-end')[1][0]).toEqual(3)
818
- expect($carousel.emitted('input').length).toBe(2)
819
- expect($carousel.emitted('input')[1][0]).toEqual(3)
820
- expect($carousel.vm.index).toBe(3)
821
- expect($carousel.vm.isSliding).toBe(false)
822
-
823
- wrapper.destroy()
824
- })
825
-
826
- it('setting new slide when sliding is active, schedules the new slide to happen after finished', async () => {
827
- const wrapper = mount(App, {
828
- attachTo: document.body,
829
- propsData: {
830
- interval: 0
831
- }
832
- })
833
-
834
- expect(wrapper.vm).toBeDefined()
835
- const $carousel = wrapper.findComponent(BCarousel)
836
- expect($carousel).toBeDefined()
837
- expect($carousel.vm).toBeDefined()
838
-
839
- await waitNT(wrapper.vm)
840
- await waitRAF()
841
-
842
- const $indicators = $carousel.findAll('.carousel-indicators > li')
843
- expect($indicators.length).toBe(4)
844
-
845
- expect($carousel.emitted('sliding-start')).toBeUndefined()
846
- expect($carousel.emitted('sliding-end')).toBeUndefined()
847
- expect($carousel.emitted('input')).toBeUndefined()
848
-
849
- expect($carousel.vm.index).toBe(0)
850
- expect($carousel.vm.isSliding).toBe(false)
851
-
852
- await wrapper.setProps({
853
- value: 1
854
- })
855
-
856
- await waitNT(wrapper.vm)
857
- await waitRAF()
858
-
859
- expect($carousel.emitted('sliding-start')).toBeDefined()
860
- expect($carousel.emitted('sliding-end')).toBeUndefined()
861
- expect($carousel.emitted('sliding-start').length).toBe(1)
862
- expect($carousel.emitted('sliding-start')[0][0]).toEqual(1)
863
- expect($carousel.vm.index).toBe(1)
864
- expect($carousel.vm.isSliding).toBe(true)
865
-
866
- // Set new slide while sliding
867
- await wrapper.setProps({
868
- value: 3
869
- })
870
-
871
- jest.runOnlyPendingTimers()
872
- await waitNT(wrapper.vm)
873
- await waitRAF()
874
-
875
- expect($carousel.emitted('sliding-end')).toBeDefined()
876
- expect($carousel.emitted('sliding-end').length).toBe(1)
877
- expect($carousel.emitted('sliding-end')[0][0]).toEqual(1)
878
- // Should issue a new sliding start event
879
- expect($carousel.emitted('sliding-start').length).toBe(2)
880
- expect($carousel.emitted('sliding-start')[1][0]).toEqual(3)
881
- expect($carousel.emitted('input')).toBeDefined()
882
- expect($carousel.emitted('input').length).toBe(2)
883
- expect($carousel.emitted('input')[0][0]).toEqual(1)
884
- expect($carousel.emitted('input')[1][0]).toEqual(3)
885
- expect($carousel.vm.index).toBe(3)
886
- expect($carousel.vm.isSliding).toBe(true)
887
-
888
- // Next transition should happen
889
- jest.runOnlyPendingTimers()
890
- await waitNT(wrapper.vm)
891
- await waitRAF()
892
-
893
- expect($carousel.emitted('sliding-start').length).toBe(2)
894
- expect($carousel.emitted('sliding-end').length).toBe(2)
895
- expect($carousel.emitted('sliding-end')[1][0]).toEqual(3)
896
- expect($carousel.emitted('input').length).toBe(2)
897
- expect($carousel.emitted('input')[1][0]).toEqual(3)
898
- expect($carousel.vm.isSliding).toBe(false)
899
-
900
- wrapper.destroy()
901
- })
902
-
903
- it('next/prev slide wraps to end/start when "no-wrap is "false"', async () => {
904
- const wrapper = mount(App, {
905
- attachTo: document.body,
906
- propsData: {
907
- interval: 0,
908
- noAnimation: true,
909
- noWrap: false,
910
- // Start at last slide
911
- value: 3
912
- }
913
- })
914
-
915
- expect(wrapper.vm).toBeDefined()
916
- const $carousel = wrapper.findComponent(BCarousel)
917
- expect($carousel).toBeDefined()
918
- expect($carousel.vm).toBeDefined()
919
-
920
- await waitNT(wrapper.vm)
921
- await waitRAF()
922
-
923
- const $indicators = $carousel.findAll('.carousel-indicators > li')
924
- expect($indicators.length).toBe(4)
925
-
926
- expect($carousel.emitted('sliding-start')).toBeUndefined()
927
- expect($carousel.emitted('sliding-end')).toBeUndefined()
928
- expect($carousel.emitted('input')).toBeUndefined()
929
-
930
- expect($carousel.vm.index).toBe(3)
931
- expect($carousel.vm.isSliding).toBe(false)
932
-
933
- // Transitions (or fallback timers) are not used when no-animation set
934
- // Call vm.next()
935
- $carousel.vm.next()
936
- await waitNT(wrapper.vm)
937
-
938
- expect($carousel.emitted('sliding-start')).toBeDefined()
939
- expect($carousel.emitted('sliding-end')).toBeDefined()
940
- expect($carousel.emitted('sliding-start').length).toBe(1)
941
- expect($carousel.emitted('sliding-end').length).toBe(1)
942
- // Should have index of 0
943
- expect($carousel.emitted('sliding-start')[0][0]).toEqual(0)
944
- expect($carousel.emitted('sliding-end')[0][0]).toEqual(0)
945
- expect($carousel.emitted('input')).toBeDefined()
946
- expect($carousel.emitted('input').length).toBe(1)
947
- expect($carousel.emitted('input')[0][0]).toEqual(0)
948
- expect($carousel.vm.index).toBe(0)
949
- expect($carousel.vm.isSliding).toBe(false)
950
-
951
- // Call vm.prev()
952
- $carousel.vm.prev()
953
- await waitNT(wrapper.vm)
954
-
955
- expect($carousel.emitted('sliding-start').length).toBe(2)
956
- expect($carousel.emitted('sliding-end').length).toBe(2)
957
- // Should have index set to last slide
958
- expect($carousel.emitted('sliding-start')[1][0]).toEqual(3)
959
- expect($carousel.emitted('sliding-end')[1][0]).toEqual(3)
960
- expect($carousel.emitted('input').length).toBe(2)
961
- expect($carousel.emitted('input')[1][0]).toEqual(3)
962
- expect($carousel.vm.index).toBe(3)
963
- expect($carousel.vm.isSliding).toBe(false)
964
-
965
- wrapper.destroy()
966
- })
967
-
968
- it('next/prev slide does not wrap to end/start when "no-wrap" is "true"', async () => {
969
- const wrapper = mount(App, {
970
- attachTo: document.body,
971
- propsData: {
972
- interval: 0,
973
- // Transitions (or fallback timers) are not used when no-animation set
974
- noAnimation: true,
975
- noWrap: true,
976
- indicators: true,
977
- // Start at last slide
978
- value: 3
979
- }
980
- })
981
-
982
- expect(wrapper.vm).toBeDefined()
983
- const $carousel = wrapper.findComponent(BCarousel)
984
- expect($carousel).toBeDefined()
985
- expect($carousel.vm).toBeDefined()
986
-
987
- await waitNT(wrapper.vm)
988
- await waitRAF()
989
-
990
- const $indicators = $carousel.findAll('.carousel-indicators > li')
991
- expect($indicators.length).toBe(4)
992
-
993
- expect($carousel.emitted('sliding-start')).toBeUndefined()
994
- expect($carousel.emitted('sliding-end')).toBeUndefined()
995
- expect($carousel.emitted('input')).toBeUndefined()
996
-
997
- expect($carousel.vm.index).toBe(3)
998
- expect($carousel.vm.isSliding).toBe(false)
999
-
1000
- // Call vm.next()
1001
- $carousel.vm.next()
1002
- await waitNT(wrapper.vm)
1003
-
1004
- // Should not slide to start
1005
- expect($carousel.emitted('sliding-start')).toBeUndefined()
1006
- expect($carousel.emitted('sliding-end')).toBeUndefined()
1007
- // Should have index of 3 (no input event emitted since value set to 3)
1008
- expect($carousel.emitted('input')).toBeUndefined()
1009
- expect($carousel.vm.index).toBe(3)
1010
- expect($carousel.vm.isSliding).toBe(false)
1011
-
1012
- // Call vm.prev()
1013
- $carousel.vm.prev()
1014
- await waitNT(wrapper.vm)
1015
-
1016
- expect($carousel.emitted('sliding-start').length).toBe(1)
1017
- expect($carousel.emitted('sliding-end').length).toBe(1)
1018
- // Should have index set to 2
1019
- expect($carousel.emitted('sliding-start')[0][0]).toEqual(2)
1020
- expect($carousel.emitted('sliding-end')[0][0]).toEqual(2)
1021
- expect($carousel.emitted('input')).toBeDefined()
1022
- expect($carousel.emitted('input').length).toBe(1)
1023
- expect($carousel.emitted('input')[0][0]).toEqual(2)
1024
- expect($carousel.vm.index).toBe(2)
1025
- expect($carousel.vm.isSliding).toBe(false)
1026
-
1027
- // Call vm.prev()
1028
- $carousel.vm.prev()
1029
- await waitNT(wrapper.vm)
1030
-
1031
- expect($carousel.emitted('sliding-start').length).toBe(2)
1032
- expect($carousel.emitted('sliding-end').length).toBe(2)
1033
- // Should have index set to 1
1034
- expect($carousel.emitted('sliding-start')[1][0]).toEqual(1)
1035
- expect($carousel.emitted('sliding-end')[1][0]).toEqual(1)
1036
- expect($carousel.emitted('input').length).toBe(2)
1037
- expect($carousel.emitted('input')[1][0]).toEqual(1)
1038
- expect($carousel.vm.index).toBe(1)
1039
- expect($carousel.vm.isSliding).toBe(false)
1040
-
1041
- // Call vm.prev()
1042
- $carousel.vm.prev()
1043
- await waitNT(wrapper.vm)
1044
-
1045
- expect($carousel.emitted('sliding-start').length).toBe(3)
1046
- expect($carousel.emitted('sliding-end').length).toBe(3)
1047
- // Should have index set to 0
1048
- expect($carousel.emitted('sliding-start')[2][0]).toEqual(0)
1049
- expect($carousel.emitted('sliding-end')[2][0]).toEqual(0)
1050
- expect($carousel.emitted('input').length).toBe(3)
1051
- expect($carousel.emitted('input')[2][0]).toEqual(0)
1052
- expect($carousel.vm.index).toBe(0)
1053
- expect($carousel.vm.isSliding).toBe(false)
1054
-
1055
- // Call vm.prev() (should not wrap)
1056
- $carousel.vm.prev()
1057
- await waitNT(wrapper.vm)
1058
-
1059
- expect($carousel.emitted('sliding-start').length).toBe(3)
1060
- expect($carousel.emitted('sliding-end').length).toBe(3)
1061
- // Should have index still set to 0, and emit input to update v-model
1062
- expect($carousel.emitted('input').length).toBe(4)
1063
- expect($carousel.emitted('input')[3][0]).toEqual(0)
1064
- expect($carousel.vm.index).toBe(0)
1065
- expect($carousel.vm.isSliding).toBe(false)
1066
-
1067
- wrapper.destroy()
1068
- })
1069
- })