Skip to content

Commit 72431f0

Browse files
akiranakiran
committed
Merge branch 'master' of github.com:akiran/react-slick
2 parents 89eef9f + b7d6788 commit 72431f0

23 files changed

+1192
-108
lines changed

‎.gitignore

+1
Original file line numberDiff line numberDiff line change
@@ -11,3 +11,4 @@ lib
1111
.idea
1212
dist
1313
yarn.lock
14+
.vscode

‎README.md

+4-5
Original file line numberDiff line numberDiff line change
@@ -19,7 +19,6 @@ npm install react-slick
1919
yarn add react-slick
2020
```
2121

22-
2322
⚠️ Also install slick-carousel for css and font
2423

2524
```bash
@@ -33,17 +32,17 @@ But be aware slick-carousel has a peer-dependancy on jQuery which you, or your c
3332
or add cdn link in your html
3433

3534
```html
36-
<link rel="stylesheet" type="text/css" href="https://cdnjs.cloudflare.com/ajax/libs/slick-carousel/1.6.0/slick.min.css" />
35+
<link rel="stylesheet" type="text/css" charset="UTF-8" href="https://cdnjs.cloudflare.com/ajax/libs/slick-carousel/1.6.0/slick.min.css" />
3736
<link rel="stylesheet" type="text/css" href="https://cdnjs.cloudflare.com/ajax/libs/slick-carousel/1.6.0/slick-theme.min.css" />
3837
```
3938

4039
### [Demos](http://neostack.com/opensource/react-slick)
4140

42-
### [PlayGround](https://jsfiddle.net/kirana/20bumb4g/)
43-
Use [jsfiddle template](https://jsfiddle.net/kirana/20bumb4g/) to try react-slick with different settings.
41+
### [PlayGround](https://codesandbox.io/s/zzloxr09mp)
42+
Use [CodeSandbox template](https://codesandbox.io/s/zzloxr09mp) to try react-slick with different settings.
4443

4544
### Filing issues
46-
Please replicate your issue with [jsfiddle template](https://jsfiddle.net/kirana/20bumb4g/) and post it along with issue to make it easy for me to debug.
45+
Please replicate your issue with [CodeSandbox template](https://codesandbox.io/s/zzloxr09mp) and post it along with issue to make it easy for me to debug.
4746

4847

4948
### Starter Kit

‎__tests__/SimpleSlider.test.js

+48
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,48 @@
1+
// includes tests of
2+
// SimpleSlider, MultipleItems
3+
import {mount} from 'enzyme'
4+
import {
5+
testSlider
6+
} from './testUtils'
7+
8+
describe('SimpleSlider with combinations of possibilities', function(){
9+
// try around several possibilities
10+
let _noOfSlides = [2, 5, 12]
11+
let _slidesToShow = [2, 5, 10]
12+
let _slidesToScroll = [1, 2, 3, 10]
13+
if(true){ // for switching real quick to lesser/easier tests for simplicity
14+
_noOfSlides = [5]
15+
_slidesToShow = [2]
16+
_slidesToScroll = [1, 2]
17+
}
18+
19+
for(let noOfSlides of _noOfSlides){
20+
for(let slidesToShow of _slidesToShow){
21+
for(let slidesToScroll of _slidesToScroll){
22+
// following restrictions may not be 100% correct, and there may be more restrictions
23+
if(slidesToShow > noOfSlides || slidesToScroll > slidesToShow) {
24+
continue
25+
}
26+
if(noOfSlides === slidesToShow){
27+
// temporary, jquery slick disables arrows in this case, so the tests fail
28+
continue
29+
}
30+
if(slidesToShow === slidesToScroll){
31+
// temporary, active-class is not being assigned properly, so tests fail
32+
continue
33+
}
34+
const settings1 = {
35+
infinite: true,
36+
speed: 0,
37+
noOfSlides,
38+
slidesToShow,
39+
slidesToScroll,
40+
useCSS: false
41+
}
42+
test(`Test with settings => noOfSlides: ${noOfSlides}, slidesToShow: ${slidesToShow}, slidesToScroll: ${slidesToScroll}`, function(){
43+
testSlider(settings1)
44+
})
45+
}
46+
}
47+
}
48+
})

‎__tests__/jQSlickUtils.js

+107
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,107 @@
1+
// this is for fetching details after initializing react and jquery slicks
2+
// and compare those details to see if things are going different
3+
4+
import {createSliderReact, createJQuerySliderChildren, activeSlideInLastTransition} from './testUtils'
5+
import $ from 'jquery'
6+
import * as slickCarousel from 'slick-carousel'
7+
import util from 'util'
8+
import js_beautify, {html as html_beautify} from 'js-beautify'
9+
10+
// simulates actions from given actions object
11+
// takes document from the scope from where it's called
12+
function simulateActions(actions){
13+
if(actions.clickNext){
14+
for(let click = 0; click < actions.clickNext; click++){
15+
$('.slick-next').click()
16+
}
17+
}
18+
if(actions.clickPrev){
19+
for(let click = 0; click < actions.clickPrev; click++){
20+
$('.slick-prev').click()
21+
}
22+
}
23+
if(actions.clickSequence){
24+
for(let click of actions.clickSequence){
25+
if(click === 'n'){
26+
$('.slick-next').click()
27+
} else if (click === 'p') {
28+
$('.slick-prev').click()
29+
} else {
30+
// that's right, you can't even write n/p properly
31+
}
32+
}
33+
}
34+
}
35+
36+
// takes an object of keys and returns those details
37+
/* Possible keys can be one of the following
38+
currentSlide(index and value), activeSlides(index and value),
39+
allSlides(index and value), clonedSlides(index and value)
40+
*/
41+
function fetchDetails(keys){
42+
let details = {}
43+
let currentSlide = null,
44+
activeSlides = [],
45+
allSlides = [],
46+
clonedSlides = [],
47+
visibleSlides = []
48+
for (let slide of $('div.slick-slide')){
49+
const slideObj = {
50+
index: $(slide).attr('data-slick-index'),
51+
value: $(slide).find('div').find('div').find('h3').text()
52+
}
53+
allSlides.push(slideObj)
54+
if($(slide).hasClass('slick-current')){ currentSlide = slideObj.index }
55+
if($(slide).hasClass('slick-active')){ activeSlides.push(slideObj) }
56+
if($(slide).hasClass('slick-cloned')){ clonedSlides.push(slideObj) }
57+
if($(slide).attr('aria-hidden') == 'false'){ visibleSlides.push(slideObj) }
58+
}
59+
if(keys.currentSlide) { details.currentSlide = currentSlide }
60+
if(keys.activeSlides) { details.activeSlides = activeSlides }
61+
if(keys.allSlides) { details.allSlides = allSlides }
62+
if(keys.clonedSlides) { details.clonedSlides = clonedSlides }
63+
if(keys.visibleSlides) { details.visibleSlides = visibleSlides }
64+
return details
65+
}
66+
67+
// creates a jQuery slick with given settings and
68+
// performs the given actions
69+
// returns the given keys
70+
export function getJQuerySlickDetails(settings, actions, keys){
71+
// create new slider
72+
document.body.innerHTML = `
73+
<section class="regular slider">
74+
${createJQuerySliderChildren(settings.noOfSlides)}
75+
</section>
76+
`
77+
$('.regular.slider').slick({
78+
...settings
79+
})
80+
simulateActions(actions)
81+
// console.log(html_beautify($('.regular.slider').html()))
82+
return fetchDetails(keys)
83+
}
84+
85+
const settings = {
86+
infinite: true,
87+
noOfSlides: 5,
88+
slidesToShow: 3,
89+
slidesToScroll: 2,
90+
useCSS: false,
91+
speed: 0,
92+
}
93+
const actions = {
94+
clickNext: 2,
95+
clickPrev: 1,
96+
clickSequence: ['n', 'p', 'n']
97+
}
98+
const keys = {
99+
activeSlides: true,
100+
visibleSlides: true,
101+
allSlides: true,
102+
}
103+
104+
test('testing getJQuerySlickDetails utility', () => {
105+
const details = getJQuerySlickDetails(settings, actions, keys)
106+
expect(details.activeSlides).toEqual(details.visibleSlides)
107+
})

‎__tests__/mount/centerMode.test.js

+90
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,90 @@
1+
import {getJQuerySlickDetails} from '../jQSlickUtils'
2+
import {getReactSlickDetails} from '../reactSlickUtils'
3+
4+
let settings = {
5+
infinite: true,
6+
speed: 0,
7+
useCSS: false,
8+
noOfSlides: 5,
9+
slidesToShow: 3,
10+
slidesToScroll: 1,
11+
centerMode: true,
12+
}
13+
let actions = {
14+
clickNext: 0,
15+
clickPrev: 0,
16+
clickSequence: []
17+
}
18+
let keys = {
19+
currentSlide: true,
20+
activeSlides: true,
21+
clonedSlides: true,
22+
allSlides: true,
23+
}
24+
25+
const testsUtil = (settings, actions, keys) => {
26+
const jqDetails = getJQuerySlickDetails(settings, actions, keys)
27+
const reactDetails = getReactSlickDetails(settings, actions, keys)
28+
test('checking current slide jQuery vs react', () => {
29+
expect(reactDetails.currentSlide).toEqual(jqDetails.currentSlide)
30+
})
31+
test('checking active slides jQuery vs react', () => {
32+
expect(reactDetails.activeSlides).toEqual(jqDetails.activeSlides)
33+
})
34+
35+
// Following two tests fail
36+
test('checking cloned slides jQuery vs react', () => {
37+
expect(reactDetails.clonedSlides.map(slide => slide.index)).toEqual(jqDetails.clonedSlides.map(slide => slide.index))
38+
})
39+
test('checking all slides jQuery vs react', () => {
40+
expect(reactDetails.allSlides.map(slide => slide.index)).toEqual(jqDetails.allSlides.map(slide => slide.index))
41+
})
42+
}
43+
44+
describe(
45+
'InnerSlider component tests: Part 1', () => {
46+
testsUtil(settings, actions, keys)
47+
}
48+
)
49+
describe(
50+
'InnerSlider component tests: Part 2', () => {
51+
settings.slidesToScroll = 2
52+
testsUtil(settings, actions, keys)
53+
}
54+
)
55+
describe(
56+
'InnerSlider component tests: Part 3', () => {
57+
actions.clickNext = 2
58+
testsUtil(settings, actions, keys)
59+
}
60+
)
61+
describe(
62+
'InnerSlider component tests: Part 4', () => {
63+
actions.clickPrev = 2
64+
testsUtil(settings, actions, keys)
65+
}
66+
)
67+
describe(
68+
'InnerSlider component tests: Part 5', () => {
69+
actions.clickNext = 6
70+
testsUtil(settings, actions, keys)
71+
}
72+
)
73+
describe(
74+
'InnerSlider component tests: Part 6', () => {
75+
actions.clickPrev = 6
76+
testsUtil(settings, actions, keys)
77+
}
78+
)
79+
describe(
80+
'InnerSlider component tests: Part 7', () => {
81+
actions.clickSequence = ['n', 'n', 'n', 'n', 'n', 'n', 'p', 'p', 'p']
82+
testsUtil(settings, actions, keys)
83+
}
84+
)
85+
describe(
86+
'InnerSlider component tests: Part 8', () => {
87+
actions.clickSequence = ['p', 'p', 'p', 'p', 'p', 'p', 'n', 'n', 'n']
88+
testsUtil(settings, actions, keys)
89+
}
90+
)

‎__tests__/mount/lazyload.test.js

+90
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,90 @@
1+
import {getJQuerySlickDetails} from '../jQSlickUtils'
2+
import {getReactSlickDetails} from '../reactSlickUtils'
3+
4+
let settings = {
5+
infinite: true,
6+
speed: 0,
7+
useCSS: false,
8+
lazyLoad: true,
9+
noOfSlides: 5,
10+
slidesToShow: 3,
11+
slidesToScroll: 1,
12+
}
13+
let actions = {
14+
clickNext: 0,
15+
clickPrev: 0,
16+
clickSequence: []
17+
}
18+
let keys = {
19+
currentSlide: true,
20+
activeSlides: true,
21+
clonedSlides: true,
22+
allSlides: true,
23+
}
24+
25+
const testsUtil = (settings, actions, keys) => {
26+
const jqDetails = getJQuerySlickDetails(settings, actions, keys)
27+
const reactDetails = getReactSlickDetails(settings, actions, keys)
28+
test.skip('checking current slide jQuery vs react', () => {
29+
expect(reactDetails.currentSlide).toEqual(jqDetails.currentSlide)
30+
})
31+
test.skip('checking active slides jQuery vs react', () => {
32+
expect(reactDetails.activeSlides).toEqual(jqDetails.activeSlides)
33+
})
34+
35+
// Following two tests fail
36+
test('checking cloned slides jQuery vs react', () => {
37+
expect(reactDetails.clonedSlides.map(slide => slide.index)).toEqual(jqDetails.clonedSlides.map(slide => slide.index))
38+
})
39+
test('checking all slides jQuery vs react', () => {
40+
expect(reactDetails.allSlides.map(slide => slide.index)).toEqual(jqDetails.allSlides.map(slide => slide.index))
41+
})
42+
}
43+
44+
describe(
45+
'InnerSlider component tests with lazyload: Part 1', () => {
46+
testsUtil(settings, actions, keys)
47+
}
48+
)
49+
describe(
50+
'InnerSlider component tests with lazyload: Part 2', () => {
51+
settings.slidesToScroll = 2
52+
testsUtil(settings, actions, keys)
53+
}
54+
)
55+
describe(
56+
'InnerSlider component tests with lazyload: Part 3', () => {
57+
actions.clickNext = 2
58+
testsUtil(settings, actions, keys)
59+
}
60+
)
61+
describe(
62+
'InnerSlider component tests with lazyload: Part 4', () => {
63+
actions.clickPrev = 2
64+
testsUtil(settings, actions, keys)
65+
}
66+
)
67+
describe(
68+
'InnerSlider component tests with lazyload: Part 5', () => {
69+
actions.clickNext = 6
70+
testsUtil(settings, actions, keys)
71+
}
72+
)
73+
describe(
74+
'InnerSlider component tests with lazyload: Part 6', () => {
75+
actions.clickPrev = 6
76+
testsUtil(settings, actions, keys)
77+
}
78+
)
79+
describe(
80+
'InnerSlider component tests with lazyload: Part 7', () => {
81+
actions.clickSequence = ['n', 'n', 'n', 'n', 'n', 'n', 'p', 'p', 'p']
82+
testsUtil(settings, actions, keys)
83+
}
84+
)
85+
describe(
86+
'InnerSlider component tests with lazyload: Part 8', () => {
87+
actions.clickSequence = ['p', 'p', 'p', 'p', 'p', 'p', 'n', 'n', 'n']
88+
testsUtil(settings, actions, keys)
89+
}
90+
)

0 commit comments

Comments
 (0)