add-remove-cells.js 3.4 KB

12345678910111213141516171819202122232425262728293031323334353637383940414243444546474849505152535455565758596061626364656667686970717273747576777879808182838485868788
  1. QUnit.test( 'add/remove cells', function( assert ) {
  2. 'use strict';
  3. function makeCellElem() {
  4. var cellElem = document.createElement('div');
  5. cellElem.className = 'cell';
  6. return cellElem;
  7. }
  8. // position values can be off by 0.1% or 1px
  9. function isPositionApprox( value, expected ) {
  10. var isPercent = value.indexOf('%') != -1;
  11. value = parseFloat( value );
  12. var diff = Math.abs( expected - value );
  13. return isPercent ? diff < 0.1 : diff <= 1;
  14. }
  15. var elem = document.querySelector('#add-remove-cells');
  16. var flkty = new Flickity( elem );
  17. var sliderElem = elem.querySelector('.flickity-slider');
  18. function checkCellElem( cellElem, index, message ) {
  19. assert.equal( sliderElem.children[ index ], cellElem, message + ' cell element in DOM correct' );
  20. assert.equal( flkty.cells[ index ].element, cellElem, message + ' element added as cell' );
  21. assert.ok( isPositionApprox( cellElem.style.left, index * 25 ), ' element positioned' );
  22. }
  23. // prepend cell element
  24. var cellElem = makeCellElem();
  25. flkty.prepend( cellElem );
  26. checkCellElem( cellElem, 0, 'prepended' );
  27. assert.equal( flkty.selectedIndex, 1, 'selectedIndex +1 after prepend' );
  28. // append cell element
  29. cellElem = makeCellElem();
  30. flkty.append( cellElem );
  31. var lastIndex = flkty.cells.length - 1;
  32. checkCellElem( cellElem, lastIndex, 'appended' );
  33. assert.equal( flkty.selectedIndex, 1, 'selectedIndex same after prepend' );
  34. // insert single cell element
  35. cellElem = makeCellElem(); // this one gets removed first
  36. flkty.select( 2 );
  37. flkty.insert( cellElem, 2 );
  38. checkCellElem( cellElem, 2, 'single inserted' );
  39. assert.equal( flkty.selectedIndex, 3, 'selectedIndex +1 after insert before' );
  40. flkty.insert( makeCellElem(), 4 );
  41. assert.equal( flkty.selectedIndex, 3, 'selectedIndex same after insert before' );
  42. // insert multiple cell elements
  43. var cellElems = [ makeCellElem(), makeCellElem(), makeCellElem() ];
  44. flkty.insert( cellElems, 3 );
  45. checkCellElem( cellElems[0], 3, 'first multiple inserted' );
  46. checkCellElem( cellElems[1], 4, 'second multiple inserted' );
  47. checkCellElem( cellElems[2], 5, 'third multiple inserted' );
  48. assert.equal( flkty.selectedIndex, 6, 'selectedIndex +6 after 3 insert before' );
  49. function checkCellPositions() {
  50. var isGap = false;
  51. for ( var i=0, len = flkty.cells.length; i < len; i++ ) {
  52. var cell = flkty.cells[i];
  53. if ( !isPositionApprox( cell.element.style.left, i * 25 ) ) {
  54. assert.ok( false, 'gap in cell position ' + i + ' after removal' );
  55. isGap = true;
  56. }
  57. }
  58. assert.ok( !isGap, 'no gaps in cell positions' );
  59. }
  60. // remove single cell element that was inserted
  61. var len = flkty.cells.length;
  62. flkty.remove( cellElem );
  63. assert.equal( len - sliderElem.children.length, 1, 'element removed from DOM' );
  64. assert.equal( len - flkty.cells.length, 1, 'cell removed' );
  65. assert.equal( flkty.selectedIndex, 5, 'selectedIndex -1 after remove before' );
  66. checkCellPositions();
  67. // remove multiple
  68. len = flkty.cells.length;
  69. flkty.select( 4 );
  70. flkty.remove([ cellElems[2], cellElems[0], cellElems[1] ]);
  71. assert.equal( len - sliderElem.children.length, 3, 'elements removed from DOM' );
  72. assert.equal( len - flkty.cells.length, 3, 'cells removed' );
  73. checkCellPositions();
  74. // remove all cells
  75. flkty.remove( flkty.getCellElements() );
  76. assert.equal( flkty.cells.length, 0, 'all cells removed' );
  77. flkty.resize();
  78. assert.ok( true, 'resize with zero items didnt freak out' );
  79. });