summaryrefslogtreecommitdiffstats
path: root/test
diff options
context:
space:
mode:
Diffstat (limited to 'test')
-rw-r--r--test/.jshintrc19
-rw-r--r--test/drag.html11
-rw-r--r--test/index.html63
-rw-r--r--test/test.css31
-rw-r--r--test/unit/adaptive-height.js29
-rw-r--r--test/unit/add-remove-cells.js41
-rw-r--r--test/unit/auto-play.js51
-rw-r--r--test/unit/cell-selector.js12
-rw-r--r--test/unit/contain.js10
-rw-r--r--test/unit/destroy.js20
-rw-r--r--test/unit/drag.js22
-rw-r--r--test/unit/empty.js22
-rw-r--r--test/unit/get-parent-cell.js42
-rw-r--r--test/unit/get-wrap-cells.js16
-rw-r--r--test/unit/group-cells.js39
-rw-r--r--test/unit/init.js30
-rw-r--r--test/unit/lazyload.js10
-rw-r--r--test/unit/page-dots.js15
-rw-r--r--test/unit/position-cells.js16
-rw-r--r--test/unit/prev-next-buttons.js25
-rw-r--r--test/unit/resize.js8
-rw-r--r--test/unit/select-cell.js18
-rw-r--r--test/unit/watch.js40
23 files changed, 354 insertions, 236 deletions
diff --git a/test/.jshintrc b/test/.jshintrc
index 09697b0..677c29f 100644
--- a/test/.jshintrc
+++ b/test/.jshintrc
@@ -7,23 +7,6 @@
"predef": {
"Flickity": false,
"matchesSelector": false,
- "classie": false,
- "docReady": false,
-
- "asyncTest": false,
- "deepEqual": false,
- "equal": false,
- "expect": false,
- "module": false,
- "notDeepEqual": false,
- "notEqual": false,
- "notStrictEqual": false,
- "ok": false,
- "QUnit": false,
- "raises": false,
- "start": false,
- "stop": false,
- "strictEqual": false,
- "test": false
+ "QUnit": false
}
}
diff --git a/test/drag.html b/test/drag.html
index b2dec65..eac906c 100644
--- a/test/drag.html
+++ b/test/drag.html
@@ -26,20 +26,17 @@
<script src="../bower_components/qunit/qunit/qunit.js"></script>
<!-- dependencies -->
- <script src="../bower_components/get-style-property/get-style-property.js"></script>
<script src="../bower_components/get-size/get-size.js"></script>
- <script src="../bower_components/matches-selector/matches-selector.js"></script>
- <script src="../bower_components/eventEmitter/EventEmitter.js"></script>
- <script src="../bower_components/eventie/eventie.js"></script>
- <script src="../bower_components/doc-ready/doc-ready.js"></script>
- <script src="../bower_components/classie/classie.js"></script>
+ <script src="../bower_components/desandro-matches-selector/matches-selector.js"></script>
+ <script src="../bower_components/ev-emitter/ev-emitter.js"></script>
<script src="../bower_components/unipointer/unipointer.js"></script>
<script src="../bower_components/unidragger/unidragger.js"></script>
<script src="../bower_components/tap-listener/tap-listener.js"></script>
<script src="../bower_components/fizzy-ui-utils/utils.js"></script>
- <script src="../bower_components/imagesloaded/imagesloaded.js"></script>
+<!-- <script src="../bower_components/imagesloaded/imagesloaded.js"></script> -->
<!-- Flickity source -->
<script src="../js/cell.js"></script>
+ <script src="../js/slide.js"></script>
<script src="../js/animate.js"></script>
<script src="../js/flickity.js"></script>
<script src="../js/drag.js"></script>
diff --git a/test/index.html b/test/index.html
index 5dc7d2e..6de5c26 100644
--- a/test/index.html
+++ b/test/index.html
@@ -13,20 +13,17 @@
<script src="../bower_components/qunit/qunit/qunit.js"></script>
<!-- dependencies -->
- <script src="../bower_components/get-style-property/get-style-property.js"></script>
<script src="../bower_components/get-size/get-size.js"></script>
- <script src="../bower_components/matches-selector/matches-selector.js"></script>
- <script src="../bower_components/eventEmitter/EventEmitter.js"></script>
- <script src="../bower_components/eventie/eventie.js"></script>
- <script src="../bower_components/doc-ready/doc-ready.js"></script>
- <script src="../bower_components/classie/classie.js"></script>
- <script src="../bower_components/imagesloaded/imagesloaded.js"></script>
+<!-- <script src="../bower_components/imagesloaded/imagesloaded.js"></script> -->
+ <script src="../bower_components/desandro-matches-selector/matches-selector.js"></script>
+ <script src="../bower_components/ev-emitter/ev-emitter.js"></script>
<script src="../bower_components/fizzy-ui-utils/utils.js"></script>
<script src="../bower_components/unipointer/unipointer.js"></script>
<script src="../bower_components/unidragger/unidragger.js"></script>
<script src="../bower_components/tap-listener/tap-listener.js"></script>
<!-- Flickity source -->
<script src="../js/cell.js"></script>
+ <script src="../js/slide.js"></script>
<script src="../js/animate.js"></script>
<script src="../js/flickity.js"></script>
<script src="../js/drag.js"></script>
@@ -58,6 +55,9 @@
<script src="unit/add-remove-cells.js"></script>
<script src="unit/destroy.js"></script>
<script src="unit/lazyload.js"></script>
+ <script src="unit/group-cells.js"></script>
+ <script src="unit/adaptive-height.js"></script>
+ <script src="unit/select-cell.js"></script>
</head>
<body>
@@ -216,5 +216,54 @@
<div class="cell"><img data-flickity-lazyload="http://i.imgur.com/LkmcILl.jpg" /></div>
</div>
+ <h2>groupCells</h2>
+ <div id="group-cells" class="gallery">
+ <div class="cell"></div>
+ <div class="cell cell--width2"></div>
+ <div class="cell"></div>
+
+ <div class="cell cell--width3"></div>
+ <div class="cell"></div>
+
+ <div class="cell cell--width2"></div>
+ <div class="cell cell--width2"></div>
+
+ <div class="cell cell--width2"></div>
+
+ <div class="cell cell--width4"></div>
+
+ <div class="cell"></div>
+ <div class="cell"></div>
+ <div class="cell cell--width2"></div>
+
+ <div class="cell"></div>
+ <div class="cell"></div>
+ </div>
+
+ <h2>adaptiveHeight</h2>
+ <div id="adaptive-height" class="gallery">
+ <div class="cell cell--height2"></div>
+ <div class="cell"></div>
+ <div class="cell cell--height3"></div>
+
+ <div class="cell"></div>
+ <div class="cell cell--height4"></div>
+ <div class="cell cell--height2"></div>
+
+ <div class="cell"></div>
+ <div class="cell cell--height2"></div>
+ </div>
+
+ <div id="select-cell" class="gallery">
+ <div class="cell select-cell__0">0</div>
+ <div class="cell select-cell__1">1</div>
+ <div class="cell select-cell__2">2</div>
+ <div class="cell select-cell__3">3</div>
+ <div class="cell select-cell__4">4</div>
+ <div class="cell select-cell__5">5</div>
+ <div class="cell select-cell__6">6</div>
+ <div class="cell select-cell__7">7</div>
+ </div>
+
</body>
</html>
diff --git a/test/test.css b/test/test.css
index 4759fcf..f8ef806 100644
--- a/test/test.css
+++ b/test/test.css
@@ -1,3 +1,5 @@
+/** { box-sizing: border-box; }*/
+
body {
font-family: sans-serif;
color: #333;
@@ -37,3 +39,32 @@ body {
display: block;
max-height: 100px;
}
+
+/* ---- group-cells ---- */
+
+#group-cells .cell {
+ width: 100px;
+/* border: 1px solid;*/
+}
+
+#group-cells .cell--width2 { width: 200px; }
+#group-cells .cell--width3 { width: 300px; }
+#group-cells .cell--width4 { width: 400px; }
+
+#group-cells.is-expanded { width: 600px; }
+
+#group-cells .cell:nth-child(2n) { background: #09F; }
+
+/* ---- adaptive-height ---- */
+
+#adaptive-height .cell { width: 33.33%; }
+
+#adaptive-height .cell--height2 { height: 200px; }
+#adaptive-height .cell--height3 { height: 300px; }
+#adaptive-height .cell--height4 { height: 400px; }
+
+#adaptive-height .cell:nth-child(2n) { background: #09F; }
+
+/* ---- select-cell ---- */
+
+#select-cell .cell { width: 33.33%; }
diff --git a/test/unit/adaptive-height.js b/test/unit/adaptive-height.js
new file mode 100644
index 0000000..655ac4a
--- /dev/null
+++ b/test/unit/adaptive-height.js
@@ -0,0 +1,29 @@
+QUnit.test( 'adaptiveHeight', function( assert ) {
+ 'use strict';
+
+ var flkty = new Flickity( '#adaptive-height', {
+ adaptiveHeight: true
+ });
+
+ // 2,1,3, 1,4,2, 1,2,1
+
+ function checkSelectHeight( index, height ) {
+ flkty.select( index, false, true );
+ assert.equal( flkty.viewport.style.height, height + 'px', 'slide ' + index );
+ }
+
+ checkSelectHeight( 0, 200 );
+ checkSelectHeight( 1, 100 );
+ checkSelectHeight( 2, 300 );
+ checkSelectHeight( 3, 100 );
+ checkSelectHeight( 4, 400 );
+ checkSelectHeight( 5, 200 );
+
+ flkty.options.groupCells = true;
+ flkty.resize();
+
+ checkSelectHeight( 0, 300 );
+ checkSelectHeight( 1, 400 );
+ checkSelectHeight( 2, 200 );
+
+});
diff --git a/test/unit/add-remove-cells.js b/test/unit/add-remove-cells.js
index 29786f8..b483839 100644
--- a/test/unit/add-remove-cells.js
+++ b/test/unit/add-remove-cells.js
@@ -1,5 +1,4 @@
-test( 'add/remove cells', function() {
-
+QUnit.test( 'add/remove cells', function( assert ) {
'use strict';
function makeCellElem() {
@@ -16,77 +15,75 @@ test( 'add/remove cells', function() {
return isPercent ? diff < 0.1 : diff <= 1;
}
-
var elem = document.querySelector('#add-remove-cells');
var flkty = new Flickity( elem );
var sliderElem = elem.querySelector('.flickity-slider');
function checkCellElem( cellElem, index, message ) {
- equal( sliderElem.children[ index ], cellElem, message + ' cell element in DOM correct' );
- equal( flkty.cells[ index ].element, cellElem, message + ' element added as cell' );
- ok( isPositionApprox( cellElem.style.left, index * 25 ), ' element positioned' );
+ assert.equal( sliderElem.children[ index ], cellElem, message + ' cell element in DOM correct' );
+ assert.equal( flkty.cells[ index ].element, cellElem, message + ' element added as cell' );
+ assert.ok( isPositionApprox( cellElem.style.left, index * 25 ), ' element positioned' );
}
// prepend cell element
var cellElem = makeCellElem();
flkty.prepend( cellElem );
checkCellElem( cellElem, 0, 'prepended' );
- equal( flkty.selectedIndex, 1, 'selectedIndex +1 after prepend' );
+ assert.equal( flkty.selectedIndex, 1, 'selectedIndex +1 after prepend' );
// append cell element
cellElem = makeCellElem();
flkty.append( cellElem );
var lastIndex = flkty.cells.length - 1;
checkCellElem( cellElem, lastIndex, 'appended' );
- equal( flkty.selectedIndex, 1, 'selectedIndex same after prepend' );
+ assert.equal( flkty.selectedIndex, 1, 'selectedIndex same after prepend' );
// insert single cell element
cellElem = makeCellElem(); // this one gets removed first
flkty.select( 2 );
flkty.insert( cellElem, 2 );
checkCellElem( cellElem, 2, 'single inserted' );
- equal( flkty.selectedIndex, 3, 'selectedIndex +1 after insert before' );
+ assert.equal( flkty.selectedIndex, 3, 'selectedIndex +1 after insert before' );
flkty.insert( makeCellElem(), 4 );
- equal( flkty.selectedIndex, 3, 'selectedIndex same after insert before' );
+ assert.equal( flkty.selectedIndex, 3, 'selectedIndex same after insert before' );
// insert multiple cell elements
var cellElems = [ makeCellElem(), makeCellElem(), makeCellElem() ];
flkty.insert( cellElems, 3 );
checkCellElem( cellElems[0], 3, 'first multiple inserted' );
checkCellElem( cellElems[1], 4, 'second multiple inserted' );
checkCellElem( cellElems[2], 5, 'third multiple inserted' );
- equal( flkty.selectedIndex, 6, 'selectedIndex +6 after 3 insert before' );
+ assert.equal( flkty.selectedIndex, 6, 'selectedIndex +6 after 3 insert before' );
function checkCellPositions() {
var isGap = false;
for ( var i=0, len = flkty.cells.length; i < len; i++ ) {
var cell = flkty.cells[i];
if ( !isPositionApprox( cell.element.style.left, i * 25 ) ) {
- ok( false, 'gap in cell position ' + i + ' after removal' );
+ assert.ok( false, 'gap in cell position ' + i + ' after removal' );
isGap = true;
}
}
- ok( !isGap, 'no gaps in cell positions' );
+ assert.ok( !isGap, 'no gaps in cell positions' );
}
// remove single cell element that was inserted
var len = flkty.cells.length;
flkty.remove( cellElem );
- equal( len - sliderElem.children.length, 1, 'element removed from DOM' );
- equal( len - flkty.cells.length, 1, 'cell removed' );
- equal( flkty.selectedIndex, 5, 'selectedIndex -1 after remove before' );
+ assert.equal( len - sliderElem.children.length, 1, 'element removed from DOM' );
+ assert.equal( len - flkty.cells.length, 1, 'cell removed' );
+ assert.equal( flkty.selectedIndex, 5, 'selectedIndex -1 after remove before' );
checkCellPositions();
// remove multiple
len = flkty.cells.length;
flkty.select( 4 );
flkty.remove([ cellElems[2], cellElems[0], cellElems[1] ]);
- equal( len - sliderElem.children.length, 3, 'elements removed from DOM' );
- equal( len - flkty.cells.length, 3, 'cells removed' );
- equal( flkty.selectedIndex, 2, 'selectedIndex -2 after 2 removed before' );
+ assert.equal( len - sliderElem.children.length, 3, 'elements removed from DOM' );
+ assert.equal( len - flkty.cells.length, 3, 'cells removed' );
+ assert.equal( flkty.selectedIndex, 2, 'selectedIndex -2 after 2 removed before' );
checkCellPositions();
// remove all cells
flkty.remove( flkty.getCellElements() );
- equal( flkty.cells.length, 0, 'all cells removed' );
+ assert.equal( flkty.cells.length, 0, 'all cells removed' );
flkty.resize();
- ok( true, 'resize with zero items didnt freak out' );
-
+ assert.ok( true, 'resize with zero items didnt freak out' );
});
diff --git a/test/unit/auto-play.js b/test/unit/auto-play.js
index 9d6431d..ad1803a 100644
--- a/test/unit/auto-play.js
+++ b/test/unit/auto-play.js
@@ -1,5 +1,4 @@
-test( 'auto play', function( assert ) {
-
+QUnit.test( 'auto play', function( assert ) {
'use strict';
var done = assert.async();
@@ -9,9 +8,10 @@ test( 'auto play', function( assert ) {
});
var selectCount = 0;
+ var testDelay = flkty.options.autoPlay + 100;
var tests;
-
+
function nextTest() {
if ( tests.length ) {
var next = tests.shift();
@@ -21,39 +21,52 @@ test( 'auto play', function( assert ) {
done();
}
}
-
+
tests = [
// check that player runs
function() {
var onSelect = function() {
selectCount++;
if ( selectCount < 5 ) {
- equal( flkty.selectedIndex, selectCount % flkty.cells.length,
+ assert.equal( flkty.selectedIndex, selectCount % flkty.cells.length,
'auto-played to ' + flkty.selectedIndex );
} else if ( selectCount == 5 ) {
// HACK do async, should be able to stop after a tick
- flkty.off( 'cellSelect', onSelect );
+ flkty.off( 'select', onSelect );
nextTest();
}
};
- flkty.on( 'cellSelect', onSelect );
+ flkty.on( 'select', onSelect );
},
// pause & unpause
function() {
function onPauseSelect() {
- ok( false, 'player ticked during pause' );
+ assert.ok( false, 'player ticked during pause' );
}
- flkty.on( 'cellSelect', onPauseSelect );
+ flkty.on( 'select', onPauseSelect );
flkty.pausePlayer();
setTimeout( function() {
- ok( true, 'player did not tick during pause' );
- flkty.off( 'cellSelect', onPauseSelect );
- flkty.once( 'cellSelect', function() {
- ok( true, 'player resumed after unpausing' );
+ assert.ok( true, 'player did not tick during pause' );
+ flkty.off( 'select', onPauseSelect );
+ flkty.once( 'select', function() {
+ assert.ok( true, 'player resumed after unpausing' );
nextTest();
});
flkty.unpausePlayer();
- }, flkty.options.autoPlay + 100 );
+ }, testDelay );
+ },
+ // stopPlayer
+ function() {
+ var ticks = 0;
+ function onSelect() {
+ ticks++;
+ }
+ flkty.stopPlayer();
+ setTimeout( function() {
+ flkty.off( 'select', onSelect );
+ assert.equal( ticks, 0, 'no ticks after stopped' );
+ nextTest();
+ }, testDelay * 2 );
},
// double playPlayer()
function() {
@@ -62,15 +75,15 @@ test( 'auto play', function( assert ) {
ticks++;
}
flkty.stopPlayer();
- flkty.on( 'cellSelect', onSelect );
+ flkty.on( 'select', onSelect );
flkty.playPlayer();
flkty.playPlayer();
setTimeout( function() {
- flkty.off( 'cellSelect', onSelect );
- equal( ticks, 1, 'only one tick after double playPlayer' );
+ flkty.off( 'select', onSelect );
+ assert.equal( ticks, 1, 'only one tick after double playPlayer' );
nextTest();
- }, flkty.options.autoPlay + 100 );
- }
+ }, testDelay );
+ },
];
nextTest();
diff --git a/test/unit/cell-selector.js b/test/unit/cell-selector.js
index a6945e1..80c1282 100644
--- a/test/unit/cell-selector.js
+++ b/test/unit/cell-selector.js
@@ -1,4 +1,4 @@
-test( 'cellSelector', function() {
+QUnit.test( 'cellSelector', function( assert ) {
'use strict';
var elem = document.querySelector('#cell-selector');
@@ -19,14 +19,14 @@ test( 'cellSelector', function() {
// getCellElements()
var cellElems = flkty.getCellElements();
var queriedCellElems = elem.querySelectorAll( flkty.options.cellSelector );
- equal( cellElems.length, flkty.cells.length, 'getCellElements returns corrent number of elements' );
+ assert.equal( cellElems.length, flkty.cells.length, 'getCellElements returns corrent number of elements' );
for( i=0, len = cellElems.length; i < len; i++ ) {
- equal( cellElems[i], queriedCellElems[i], 'cell element same as queried cell element' );
+ assert.equal( cellElems[i], queriedCellElems[i], 'cell element same as queried cell element' );
}
- ok( cellsMatchSelector, 'all cell elements match cellSelector' );
+ assert.ok( cellsMatchSelector, 'all cell elements match cellSelector' );
- equal( notCell1.parentNode, elem, 'notCell1 parent node is still gallery' );
- equal( notCell2.parentNode, elem, 'notCell2 parent node is still gallery' );
+ assert.equal( notCell1.parentNode, elem, 'notCell1 parent node is still gallery' );
+ assert.equal( notCell2.parentNode, elem, 'notCell2 parent node is still gallery' );
});
diff --git a/test/unit/contain.js b/test/unit/contain.js
index 4cffb3d..1c26650 100644
--- a/test/unit/contain.js
+++ b/test/unit/contain.js
@@ -1,4 +1,4 @@
-test( 'contain', function() {
+QUnit.test( 'contain', function( assert ) {
'use strict';
@@ -6,16 +6,16 @@ test( 'contain', function() {
contain: true
});
- equal( Math.round( flkty.x + flkty.cursorPosition ), 0, 'selected at 0, position left edge' );
+ assert.equal( Math.round( flkty.x + flkty.cursorPosition ), 0, 'selected at 0, position left edge' );
flkty.select( 1 );
flkty.positionSliderAtSelected();
- equal( Math.round( flkty.x + flkty.cursorPosition ), 0, 'selected at 1, position left edge' );
+ assert.equal( Math.round( flkty.x + flkty.cursorPosition ), 0, 'selected at 1, position left edge' );
flkty.select( 4 );
flkty.positionSliderAtSelected();
var endLimit = flkty.slideableWidth - flkty.size.innerWidth * ( 1 - flkty.cellAlign );
- equal( Math.round( -endLimit ), Math.round( flkty.x ), 'selected at 4, position right edge' );
+ assert.equal( Math.round( -endLimit ), Math.round( flkty.x ), 'selected at 4, position right edge' );
flkty.select( 5 );
flkty.positionSliderAtSelected();
- equal( Math.round( -endLimit ), Math.round( flkty.x ), 'selected at 5, position right edge' );
+ assert.equal( Math.round( -endLimit ), Math.round( flkty.x ), 'selected at 5, position right edge' );
});
diff --git a/test/unit/destroy.js b/test/unit/destroy.js
index de65d31..df94b7a 100644
--- a/test/unit/destroy.js
+++ b/test/unit/destroy.js
@@ -1,4 +1,4 @@
-test( 'destroy', function( assert ) {
+QUnit.test( 'destroy', function( assert ) {
'use strict';
@@ -9,15 +9,15 @@ test( 'destroy', function( assert ) {
// do it async
setTimeout( function() {
flkty.destroy();
- strictEqual( elem.flickityGUID, undefined, 'flickityGUID removed' );
- ok( !flkty.isActive, 'not active' );
- ok( !Flickity.data( elem ), '.data() returns falsey' );
- ok( elem.children[0], '.cell', 'cell is back as first child' );
- ok( !matchesSelector( elem, '.flickity-enabled'), 'flickity-enabled class removed' );
- ok( !elem.querySelector('.flickity-prev-next-button'), 'no buttons' );
- ok( !elem.querySelector('.flickity-page-dots'), 'no page dots' );
- ok( !elem.style.height, 'no height set' );
- ok( !elem.children[0].style.left, 'first cell has no left position' );
+ assert.strictEqual( elem.flickityGUID, undefined, 'flickityGUID removed' );
+ assert.ok( !flkty.isActive, 'not active' );
+ assert.ok( !Flickity.data( elem ), '.data() returns falsey' );
+ assert.ok( elem.children[0], '.cell', 'cell is back as first child' );
+ assert.ok( !matchesSelector( elem, '.flickity-enabled'), 'flickity-enabled class removed' );
+ assert.ok( !elem.querySelector('.flickity-prev-next-button'), 'no buttons' );
+ assert.ok( !elem.querySelector('.flickity-page-dots'), 'no page dots' );
+ assert.ok( !elem.style.height, 'no height set' );
+ assert.ok( !elem.children[0].style.left, 'first cell has no left position' );
done();
}, 20 );
diff --git a/test/unit/drag.js b/test/unit/drag.js
index 1bcf846..8859215 100644
--- a/test/unit/drag.js
+++ b/test/unit/drag.js
@@ -62,19 +62,19 @@ function getDoNextDragTest( done ) {
function getFakeDragTest( args ) {
var assert = args.assert;
var flkty = args.flickity;
- var msgCell = 'cell[' + args.index + ']';
+ var msgCell = 'slide[' + args.index + ']';
return function fakeDragTest() {
var selectMsg = ( args.message ? args.message + '. ' : '' ) + 'selected ' + msgCell;
- flkty.once( 'cellSelect', function() {
+ flkty.once( 'select', function() {
assert.equal( flkty.selectedIndex, args.index, selectMsg );
});
var settleMsg = ( args.message ? args.message + '. ' : '' ) + 'settled ' + msgCell;
- var target = flkty.cells[ args.index ].target;
+ var target = flkty.slides[ args.index ].target;
flkty.once( 'settle', function() {
assert.equal( Math.round( -flkty.x ), Math.round( target ), settleMsg );
- args.callback();
+ setTimeout( args.callback );
});
fakeDrag( args.flickity, args.dragPositions );
@@ -83,7 +83,7 @@ function getFakeDragTest( args ) {
-test( 'drag', function( assert ) {
+QUnit.test( 'drag', function( assert ) {
// async test
var done = assert.async();
@@ -119,17 +119,17 @@ test( 'drag', function( assert ) {
// minimal movement to trigger static click
function() {
flkty.once( 'staticClick', function() {
- ok( true, 'staticClick fired on non-drag');
- equal( flkty.selectedIndex, 2, 'selected index still at 2 after click' );
- doNextDragTest();
+ assert.ok( true, 'staticClick fired on non-drag');
+ assert.equal( flkty.selectedIndex, 2, 'selected index still at 2 after click' );
+ setTimeout( doNextDragTest );
});
fakeDrag( flkty, [ 0, 1, 0, -2, -1 ] );
},
// move out then back to where it started
function() {
flkty.once( 'settle', function() {
- equal( flkty.selectedIndex, 2, 'move out then back. same cell' );
- doNextDragTest();
+ assert.equal( flkty.selectedIndex, 2, 'move out then back. same cell' );
+ setTimeout( doNextDragTest );
});
fakeDrag( flkty, [ 0, 10, 20, 30, 20 ] );
},
@@ -144,7 +144,7 @@ test( 'drag', function( assert ) {
});
-test( 'drag with wrapAround', function( assert ) {
+QUnit.test( 'drag with wrapAround', function( assert ) {
// async test
var done = assert.async();
diff --git a/test/unit/empty.js b/test/unit/empty.js
index c8f865f..b12fa0c 100644
--- a/test/unit/empty.js
+++ b/test/unit/empty.js
@@ -1,17 +1,17 @@
-test('empty', function() {
+QUnit.test( 'empty', function( assert ) {
'use strict';
var gallery = document.querySelector('#empty');
var flkty = new Flickity( gallery );
- ok( true, 'empty gallery ok' );
- ok( flkty.prevButton.element.disabled, 'previous button disabled' );
- ok( flkty.nextButton.element.disabled, 'next button disabled' );
- equal( flkty.pageDots.dots.length, 0, '0 page dots');
+ assert.ok( true, 'empty gallery ok' );
+ assert.ok( flkty.prevButton.element.disabled, 'previous button disabled' );
+ assert.ok( flkty.nextButton.element.disabled, 'next button disabled' );
+ assert.equal( flkty.pageDots.dots.length, 0, '0 page dots');
flkty.resize();
- ok( true, 'resize with empty gallery ok');
+ assert.ok( true, 'resize with empty gallery ok');
function makeCellElem() {
var cellElem = document.createElement('div');
@@ -20,12 +20,12 @@ test('empty', function() {
}
flkty.append( makeCellElem() );
- equal( flkty.cells.length, 1, 'added cell to empty gallery' );
+ assert.equal( flkty.cells.length, 1, 'added cell to empty gallery' );
- ok( flkty.prevButton.element.disabled, 'previous button disabled' );
- ok( flkty.nextButton.element.disabled, 'next button disabled' );
- equal( flkty.pageDots.dots.length, 1, '1 page dots');
+ assert.ok( flkty.prevButton.element.disabled, 'previous button disabled' );
+ assert.ok( flkty.nextButton.element.disabled, 'next button disabled' );
+ assert.equal( flkty.pageDots.dots.length, 1, '1 page dots');
// destroy and re-init with higher initialIndex
flkty.destroy();
@@ -34,6 +34,6 @@ test('empty', function() {
});
// #291
- ok( true, 'initializing with initialIndex > cells doesnt throw error' );
+ assert.ok( true, 'initializing with initialIndex > cells doesnt throw error' );
});
diff --git a/test/unit/get-parent-cell.js b/test/unit/get-parent-cell.js
index 349ada4..ef8d3fc 100644
--- a/test/unit/get-parent-cell.js
+++ b/test/unit/get-parent-cell.js
@@ -1,39 +1,37 @@
-test( 'getParentCell', function() {
+QUnit.test( 'getParentCell', function( assert ) {
'use strict';
- var utils = window.fizzyUIUtils;
-
var gallery = document.querySelector('#get-parent-cell');
var flkty = new Flickity( gallery );
// cell1
var cell = flkty.getParentCell( gallery.querySelector('.cell1') );
- ok( cell, 'getParentCell( cell ) ok' );
- ok( cell instanceof Flickity.Cell, 'cell is Flickity.Cell' );
- var index = utils.indexOf( flkty.cells, cell );
- equal( index, 0, 'cell is index 0' );
+ assert.ok( cell, 'getParentCell( cell ) ok' );
+ assert.ok( cell instanceof Flickity.Cell, 'cell is Flickity.Cell' );
+ var index = flkty.cells.indexOf( cell );
+ assert.equal( index, 0, 'cell is index 0' );
// cell3
cell = flkty.getParentCell( gallery.querySelector('.cell3') );
- ok( cell, 'getParentCell( cell ) ok' );
- ok( cell instanceof Flickity.Cell, 'cell is Flickity.Cell' );
- index = utils.indexOf( flkty.cells, cell );
- equal( index, 2, 'cell is index 2' );
+ assert.ok( cell, 'getParentCell( cell ) ok' );
+ assert.ok( cell instanceof Flickity.Cell, 'cell is Flickity.Cell' );
+ index = flkty.cells.indexOf( cell );
+ assert.equal( index, 2, 'cell is index 2' );
// child1
cell = flkty.getParentCell( gallery.querySelector('.child1') );
- ok( cell, 'getParentCell( cell ) ok' );
- ok( cell instanceof Flickity.Cell, 'cell is Flickity.Cell' );
- index = utils.indexOf( flkty.cells, cell );
- equal( index, 0, 'cell is index 0' );
+ assert.ok( cell, 'getParentCell( cell ) ok' );
+ assert.ok( cell instanceof Flickity.Cell, 'cell is Flickity.Cell' );
+ index = flkty.cells.indexOf( cell );
+ assert.equal( index, 0, 'cell is index 0' );
// child2
cell = flkty.getParentCell( gallery.querySelector('.child2') );
- ok( cell, 'getParentCell( cell ) ok' );
- ok( cell instanceof Flickity.Cell, 'cell is Flickity.Cell' );
- index = utils.indexOf( flkty.cells, cell );
- equal( index, 1, 'cell is index 1' );
+ assert.ok( cell, 'getParentCell( cell ) ok' );
+ assert.ok( cell instanceof Flickity.Cell, 'cell is Flickity.Cell' );
+ index = flkty.cells.indexOf( cell );
+ assert.equal( index, 1, 'cell is index 1' );
// outside
cell = flkty.getParentCell( document.querySelector('.outside') );
- ok( !cell, 'getParentCell( notCell ) not ok' );
- index = utils.indexOf( flkty.cells, cell );
- equal( index, -1, 'not cell is index -1' );
+ assert.ok( !cell, 'getParentCell( notCell ) not ok' );
+ index = flkty.cells.indexOf( cell );
+ assert.equal( index, -1, 'not cell is index -1' );
});
diff --git a/test/unit/get-wrap-cells.js b/test/unit/get-wrap-cells.js
index 39ddf54..adda707 100644
--- a/test/unit/get-wrap-cells.js
+++ b/test/unit/get-wrap-cells.js
@@ -1,26 +1,24 @@
-test( 'getWrapCells', function() {
-
+QUnit.test( 'getWrapCells', function( assert ) {
'use strict';
-
var flkty = new Flickity( '#get-wrap-cells', {
wrapAround: true
});
// cells are 25% width
// center align, 2 cells on each side
- equal( flkty.beforeShiftCells.length, 2, 'center align, 2 before shift cells' );
- equal( flkty.afterShiftCells.length, 2, 'center align, 2 after shift cells' );
+ assert.equal( flkty.beforeShiftCells.length, 2, 'center align, 2 before shift cells' );
+ assert.equal( flkty.afterShiftCells.length, 2, 'center align, 2 after shift cells' );
flkty.options.cellAlign = 'left';
flkty.resize();
// left align, 0, 4
- equal( flkty.beforeShiftCells.length, 0, 'left align, 1 before shift cells' );
- equal( flkty.afterShiftCells.length, 4, 'left align, 4 after shift cells' );
+ assert.equal( flkty.beforeShiftCells.length, 0, 'left align, 1 before shift cells' );
+ assert.equal( flkty.afterShiftCells.length, 4, 'left align, 4 after shift cells' );
flkty.options.cellAlign = 'right';
flkty.resize();
// right align, 4, 0
- equal( flkty.beforeShiftCells.length, 4, 'right align, 4 before shift cells' );
- equal( flkty.afterShiftCells.length, 0, 'right align, 0 after shift cells' );
+ assert.equal( flkty.beforeShiftCells.length, 4, 'right align, 4 before shift cells' );
+ assert.equal( flkty.afterShiftCells.length, 0, 'right align, 0 after shift cells' );
});
diff --git a/test/unit/group-cells.js b/test/unit/group-cells.js
new file mode 100644
index 0000000..84dbb0e
--- /dev/null
+++ b/test/unit/group-cells.js
@@ -0,0 +1,39 @@
+QUnit.test( 'groupCells', function( assert ) {
+ 'use strict';
+
+ var flkty = new Flickity( '#group-cells', {
+ groupCells: true
+ });
+
+ function getSlideCellsCount() {
+ var counts = flkty.slides.map( function( slide ) {
+ return slide.cells.length;
+ });
+ return counts.join(',');
+ }
+
+ assert.equal( getSlideCellsCount(), '3,2,2,1,1,3,2', 'groupCells: true' );
+ var targets = flkty.slides.map( function( slide ) {
+ return slide.target;
+ });
+ assert.deepEqual( targets, [200, 600, 1000, 1300, 1600, 2000, 2300], 'targets' );
+
+ flkty.selectCell( 6 );
+ assert.equal( flkty.selectedIndex, 2, 'selectCell(6) selects 3rd slide' );
+ flkty.selectCell( flkty.cells[2].element );
+ assert.equal( flkty.selectedIndex, 0, 'selectCell(3rd elem) selects 1st slide' );
+
+ flkty.options.groupCells = 2;
+ flkty.reposition();
+ assert.equal( getSlideCellsCount(), '2,2,2,2,2,2,2', 'groupCells: 2' );
+
+ flkty.options.groupCells = '75%';
+ flkty.reposition();
+ assert.equal( getSlideCellsCount(), '2,1,1,2,1,1,1,2,2,1', 'groupCells: 75%' );
+
+ flkty.element.classList.add('is-expanded'); // 600px wide
+ flkty.options.groupCells = true;
+ flkty.resize();
+ assert.equal( getSlideCellsCount(), '3,3,2,3,3', 'groupCells: true, container @ 600px' );
+
+});
diff --git a/test/unit/init.js b/test/unit/init.js
index eb8f0ff..34b84d1 100644
--- a/test/unit/init.js
+++ b/test/unit/init.js
@@ -2,35 +2,35 @@
'use strict';
-module('Flickity');
+QUnit.module('Flickity');
var utils = window.fizzyUIUtils;
-test( 'init', function() {
+QUnit.test( 'init', function( assert ) {
var elem = document.querySelector('#init');
var flkty = new Flickity( elem );
for ( var prop in Flickity.defaults ) {
- equal( flkty.options[ prop ], Flickity.defaults[ prop ], prop + ' option matches default' );
+ assert.equal( flkty.options[ prop ], Flickity.defaults[ prop ], prop + ' option matches default' );
}
- equal( flkty.element, elem, '.element is proper element' );
+ assert.equal( flkty.element, elem, '.element is proper element' );
var children = utils.makeArray( flkty.element.children );
- notEqual( utils.indexOf( children, flkty.viewport ), -1, 'viewport element is a child element' );
- equal( flkty.viewport.children[0], flkty.slider, 'slider is in viewport' );
- equal( flkty.viewport.style.height, '100px', 'viewport height set' );
+ assert.notEqual( children.indexOf( flkty.viewport ), -1, 'viewport element is a child element' );
+ assert.equal( flkty.viewport.children[0], flkty.slider, 'slider is in viewport' );
+ assert.equal( flkty.viewport.style.height, '100px', 'viewport height set' );
- ok( flkty.isActive, 'isActive' );
- ok( matchesSelector( elem, '.flickity-enabled' ), 'flickity-enabled class added' );
+ assert.ok( flkty.isActive, 'isActive' );
+ assert.ok( matchesSelector( elem, '.flickity-enabled' ), 'flickity-enabled class added' );
- equal( flkty.cells.length, 6, 'has 6 cells' );
- equal( flkty.cells[0].element.style.left, '0%', 'first cell left: 0%' );
- equal( flkty.cells[5].element.style.left, '500%', '6th cell left: 500%' );
+ assert.equal( flkty.cells.length, 6, 'has 6 cells' );
+ assert.equal( flkty.cells[0].element.style.left, '0%', 'first cell left: 0%' );
+ assert.equal( flkty.cells[5].element.style.left, '500%', '6th cell left: 500%' );
- equal( flkty.selectedIndex, 0, 'selectedIndex = 0' );
- equal( flkty.cursorPosition, 200, 'cursorPosition = 200' );
- equal( flkty.x + flkty.cursorPosition, 0, 'x + cursorPosition = 0' );
+ assert.equal( flkty.selectedIndex, 0, 'selectedIndex = 0' );
+ assert.equal( flkty.cursorPosition, 200, 'cursorPosition = 200' );
+ assert.equal( flkty.x + flkty.cursorPosition, 0, 'x + cursorPosition = 0' );
});
diff --git a/test/unit/lazyload.js b/test/unit/lazyload.js
index 058decb..7091928 100644
--- a/test/unit/lazyload.js
+++ b/test/unit/lazyload.js
@@ -1,4 +1,4 @@
-test( 'lazyload', function( assert ) {
+QUnit.test( 'lazyload', function( assert ) {
'use strict';
var done = assert.async();
@@ -12,9 +12,9 @@ test( 'lazyload', function( assert ) {
flkty.on( 'lazyLoad', function( event, cellElem ) {
loadCount++;
- equal( event.type, 'load', 'event.type == load' );
- ok( event.target.complete, 'img ' + loadCount + ' is complete' );
- ok( cellElem, 'cellElement argument there' );
+ assert.equal( event.type, 'load', 'event.type == load' );
+ assert.ok( event.target.complete, 'img ' + loadCount + ' is complete' );
+ assert.ok( cellElem, 'cellElement argument there' );
// after first 2 have loaded, select 7th cell
if ( loadCount == 2 ) {
@@ -22,7 +22,7 @@ test( 'lazyload', function( assert ) {
}
if ( loadCount == 5 ) {
var loadedImgs = gallery.querySelectorAll('.flickity-lazyloaded');
- equal( loadedImgs.length, '5', 'only 5 images loaded' );
+ assert.equal( loadedImgs.length, '5', 'only 5 images loaded' );
done();
}
});
diff --git a/test/unit/page-dots.js b/test/unit/page-dots.js
index a92f8a3..53e6fae 100644
--- a/test/unit/page-dots.js
+++ b/test/unit/page-dots.js
@@ -1,5 +1,4 @@
-test( 'pageDots', function() {
-
+QUnit.test( 'pageDots', function( assert ) {
'use strict';
var elem = document.querySelector('#page-dots');
@@ -8,9 +7,9 @@ test( 'pageDots', function() {
var dotsHolder = elem.querySelector('.flickity-page-dots');
var dotsElems = dotsHolder.querySelectorAll('.dot');
- ok( dotsHolder, 'dots holder in DOM' );
- equal( flkty.pageDots.holder, dotsHolder, 'dots holder element matches flkty.pageDots.holder' );
- equal( dotsElems.length, flkty.cells.length, 'number of dots matches number of cells' );
+ assert.ok( dotsHolder, 'dots holder in DOM' );
+ assert.equal( flkty.pageDots.holder, dotsHolder, 'dots holder element matches flkty.pageDots.holder' );
+ assert.equal( dotsElems.length, flkty.cells.length, 'number of dots matches number of cells' );
function getSelectedDotIndex() {
var selectedDot = dotsHolder.querySelector('.is-selected');
@@ -23,12 +22,12 @@ test( 'pageDots', function() {
return -1;
}
- equal( getSelectedDotIndex(), 0, 'first dot is selected' );
+ assert.equal( getSelectedDotIndex(), 0, 'first dot is selected' );
flkty.select( 2 );
- equal( getSelectedDotIndex(), 2, '3rd dot is selected' );
+ assert.equal( getSelectedDotIndex(), 2, '3rd dot is selected' );
// fake tap
flkty.pageDots.onTap( { target: dotsElems[4] } );
- equal( flkty.selectedIndex, 4, 'tap dot selects cell' );
+ assert.equal( flkty.selectedIndex, 4, 'tap dot selects cell' );
});
diff --git a/test/unit/position-cells.js b/test/unit/position-cells.js
index 348a30d..63aed0f 100644
--- a/test/unit/position-cells.js
+++ b/test/unit/position-cells.js
@@ -27,24 +27,24 @@ function checkCellPositions( flkty, expecteds ) {
return isOK;
}
-test( 'position cells', function() {
+QUnit.test( 'position cells', function( assert ) {
var flkty = new Flickity('#position-cells');
- ok( checkCellPositions( flkty, [ 0, 40, 65, 125, 165, 225 ] ), 'percent cell position' );
+ assert.ok( checkCellPositions( flkty, [ 0, 40, 65, 125, 165, 225 ] ), 'percent cell position' );
// .cell { margin: 0 2%; }
- classie.add( flkty.element, 'percent-margin' );
+ flkty.element.classList.add('percent-margin');
flkty.positionCells();
- ok( checkCellPositions( flkty, [ 0, 44, 73, 137, 181, 245 ] ), 'percent cell position with margin' );
- classie.remove( flkty.element, 'percent-margin' );
+ assert.ok( checkCellPositions( flkty, [ 0, 44, 73, 137, 181, 245 ] ), 'percent cell position with margin' );
+ flkty.element.classList.remove('percent-margin');
// pixel-based position
flkty.options.percentPosition = false;
flkty.positionCells();
- ok( checkCellPositions( flkty, [ 0, 160, 260, 500, 660, 900 ] ), 'pixel cell position' );
+ assert.ok( checkCellPositions( flkty, [ 0, 160, 260, 500, 660, 900 ] ), 'pixel cell position' );
// pixel margin, { margin: 0 10px; }
- classie.add( flkty.element, 'pixel-margin' );
+ flkty.element.classList.add('pixel-margin');
flkty.positionCells();
- ok( checkCellPositions( flkty, [ 0, 180, 300, 560, 740, 1000 ] ), 'pixel cell position with margin' );
+ assert.ok( checkCellPositions( flkty, [ 0, 180, 300, 560, 740, 1000 ] ), 'pixel cell position with margin' );
});
diff --git a/test/unit/prev-next-buttons.js b/test/unit/prev-next-buttons.js
index 57991f2..261df2f 100644
--- a/test/unit/prev-next-buttons.js
+++ b/test/unit/prev-next-buttons.js
@@ -1,4 +1,4 @@
-test( 'prev-next-buttons', function() {
+QUnit.test( 'prev-next-buttons', function( assert ) {
'use strict';
var elem = document.querySelector('#prev-next-buttons');
@@ -6,27 +6,22 @@ test( 'prev-next-buttons', function() {
var prevElem = elem.querySelector('.flickity-prev-next-button.previous');
var nextElem = elem.querySelector('.flickity-prev-next-button.next');
- ok( prevElem, 'previous button in DOM' );
- ok( nextElem, 'next button in DOM' );
- equal( flkty.prevButton.element, prevElem, 'previous button element matches prevButton.element' );
- equal( flkty.nextButton.element, nextElem, 'next button element matches nextButton.element' );
- ok( prevElem.disabled, 'previous button is disabled at first index' );
+ assert.ok( prevElem, 'previous button in DOM' );
+ assert.ok( nextElem, 'next button in DOM' );
+ assert.equal( flkty.prevButton.element, prevElem, 'previous button element matches prevButton.element' );
+ assert.equal( flkty.nextButton.element, nextElem, 'next button element matches nextButton.element' );
+ assert.ok( prevElem.disabled, 'previous button is disabled at first index' );
- var isIE8 = 'attachEvent' in window;
- // cannot focus disabled button in IE8
- if ( isIE8 ) {
- prevElem.disabled = false;
- }
prevElem.focus();
prevElem.click();
- equal( flkty.selectedIndex, 0, 'selectedIndex still at 0' );
+ assert.equal( flkty.selectedIndex, 0, 'selectedIndex still at 0' );
nextElem.focus();
nextElem.click();
- equal( flkty.selectedIndex, 1, 'next button clicked, selectedIndex at 1' );
+ assert.equal( flkty.selectedIndex, 1, 'next button clicked, selectedIndex at 1' );
prevElem.focus();
prevElem.click();
- equal( flkty.selectedIndex, 0, 'previous button clicked, selectedIndex back at 0' );
+ assert.equal( flkty.selectedIndex, 0, 'previous button clicked, selectedIndex back at 0' );
flkty.select( 5 );
- ok( nextElem.disabled, 'next button disabled when at last cell' );
+ assert.ok( nextElem.disabled, 'next button disabled when at last cell' );
});
diff --git a/test/unit/resize.js b/test/unit/resize.js
index b99e4d8..2f4dd7a 100644
--- a/test/unit/resize.js
+++ b/test/unit/resize.js
@@ -1,4 +1,4 @@
-test( 'resize', function() {
+QUnit.test( 'resize', function( assert ) {
'use strict';
@@ -9,8 +9,8 @@ test( 'resize', function() {
elem.style.width = '500px';
flkty.resize();
- equal( flkty.selectedIndex, 2, 'selectedIndex = 2' );
- equal( flkty.cursorPosition, 250, 'cursorPosition = 250' );
- equal( flkty.x + flkty.cursorPosition, -1000, 'x + cursorPosition = -1000' );
+ assert.equal( flkty.selectedIndex, 2, 'selectedIndex = 2' );
+ assert.equal( flkty.cursorPosition, 250, 'cursorPosition = 250' );
+ assert.equal( flkty.x + flkty.cursorPosition, -1000, 'x + cursorPosition = -1000' );
});
diff --git a/test/unit/select-cell.js b/test/unit/select-cell.js
new file mode 100644
index 0000000..28ae4b5
--- /dev/null
+++ b/test/unit/select-cell.js
@@ -0,0 +1,18 @@
+QUnit.test( 'selectCell', function( assert ) {
+ 'use strict';
+
+ var gallery = document.querySelector('#select-cell');
+ var cellElems = gallery.querySelectorAll('.cell');
+ var flkty = new Flickity( gallery, {
+ groupCells: true, // groups of 3
+ });
+
+ flkty.selectCell( 3 );
+ assert.equal( flkty.selectedIndex, 1, 'selectCell number' );
+ flkty.selectCell( cellElems[1] );
+ assert.equal( flkty.selectedIndex, 0, 'selectCell element' );
+ flkty.selectCell('.select-cell__6');
+ assert.equal( flkty.selectedIndex, 2, 'selectCell selector string' );
+ flkty.selectCell('none');
+ assert.equal( flkty.selectedIndex, 2, 'selectCell bad string is okay' );
+});
diff --git a/test/unit/watch.js b/test/unit/watch.js
index 3283d8c..14cd8fd 100644
--- a/test/unit/watch.js
+++ b/test/unit/watch.js
@@ -1,38 +1,10 @@
-docReady( function() {
-
+QUnit.test( 'watch fallback', function( assert ) {
'use strict';
- if ( Flickity.supportsConditionalCSS() ) {
-
- test( 'watch', function() {
-
- var elem = document.querySelector('#watch');
- var flkty = new Flickity( elem, {
- watchCSS: true
- });
-
- ok( !flkty.isActive, 'not active without :after' );
- // add :after via CSS class
- classie.add( elem, 'has-after' );
- flkty.watchCSS();
- ok( flkty.isActive, 'active with :after' );
- });
-
- } else {
-
- test( 'watch fallback', function() {
-
- var elem = document.querySelector('#watch');
- var flkty = new Flickity( elem, {
- watchCSS: true
- });
-
- ok( !flkty.isActive, 'fallback not active, watchCSS: true' );
- flkty.options.watchCSS = 'fallbackOn';
- flkty.watchCSS();
- ok( flkty.isActive, 'active with watchCSS: "fallbackOn" ');
- });
-
- }
+ var elem = document.querySelector('#watch');
+ var flkty = new Flickity( elem, {
+ watchCSS: true
+ });
+ assert.ok( !flkty.isActive, 'fallback not active, watchCSS: true' );
});
generated by cgit v1.1 at 2025-06-03 12:38:54 +0000