basics.js 3.2 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081
  1. QUnit.test( 'init', function( assert ) {
  2. assert.expect( 30 );
  3. var done = assert.async();
  4. var testElem = document.querySelector('.test--basics');
  5. var h2 = testElem.querySelector('h2');
  6. h2.textContent = 'Drag this element';
  7. testElem.classList.add('running');
  8. var draggieElem = testElem.querySelector('.draggie');
  9. var draggie = new Draggabilly( draggieElem );
  10. assert.equal( draggieElem.style.position, 'relative', 'position: relative set' );
  11. var didPointerDown, didPointerMove, didPointerUp, didDragStart, didDragMove,
  12. didDragEnd;
  13. draggie.once( 'pointerDown', function( event, pointer ) {
  14. didPointerDown = true;
  15. assert.equal( typeof event, 'object', 'pointerDown event argument' );
  16. assert.ok( pointer.pageX, 'pointerDown pageX' );
  17. assert.ok( draggieElem.classList.contains('is-pointer-down'),
  18. 'is-pointer-down class added' );
  19. } );
  20. draggie.once( 'pointerMove', function( event, pointer, moveVector ) {
  21. didPointerMove = true;
  22. assert.equal( typeof event, 'object', 'pointerMove event argument' );
  23. assert.equal( typeof pointer.pageX, 'number', 'pointerMove pageX' );
  24. assert.equal( typeof moveVector.x, 'number', 'pointerMove moveVector.x' );
  25. assert.equal( typeof moveVector.y, 'number', 'pointerMove moveVector.y' );
  26. } );
  27. draggie.once( 'pointerUp', function( event, pointer ) {
  28. didPointerUp = true;
  29. assert.equal( typeof event, 'object', 'pointerUp event argument' );
  30. assert.ok( pointer.pageX, 'pointerUp pageX' );
  31. assert.ok( !draggieElem.classList.contains('is-pointer-down'),
  32. 'is-pointer-down class removed' );
  33. } );
  34. draggie.once( 'dragStart', function( event, pointer ) {
  35. didDragStart = true;
  36. assert.equal( typeof event, 'object', 'didDragStart event argument' );
  37. assert.equal( typeof pointer.pageX, 'number', 'didDragStart pageX' );
  38. assert.ok( draggieElem.classList.contains('is-dragging'),
  39. 'is-dragging class added' );
  40. } );
  41. draggie.once( 'dragMove', function( event, pointer, moveVector ) {
  42. didDragMove = true;
  43. assert.equal( typeof event, 'object', 'dragMove event argument' );
  44. assert.equal( typeof pointer.pageX, 'number', 'dragMove pageX' );
  45. assert.equal( typeof moveVector.x, 'number', 'dragMove moveVector.x' );
  46. assert.equal( typeof moveVector.y, 'number', 'dragMove moveVector.y' );
  47. } );
  48. draggie.once( 'dragEnd', function( event, pointer ) {
  49. didDragEnd = true;
  50. assert.equal( typeof event, 'object', 'dragEnd event argument' );
  51. assert.ok( pointer.pageX, 'dragEnd pageX' );
  52. assert.ok( !draggieElem.classList.contains('is-dragging'),
  53. 'is-dragging class removed' );
  54. assert.ok( didPointerDown, 'didPointerDown' );
  55. assert.ok( didPointerMove, 'didPointerMove' );
  56. assert.ok( didPointerUp, 'didPointerUp' );
  57. assert.ok( didDragStart, 'didDragStart' );
  58. assert.ok( didDragMove, 'didDragMove' );
  59. assert.ok( didDragEnd, 'didDragEnd' );
  60. assert.ok( draggieElem.style.left, 'drag elem style left' );
  61. assert.ok( draggieElem.style.top, 'drag elem style left' );
  62. assert.ok( !draggieElem.style.transform, 'transform style removed' );
  63. // done
  64. h2.textContent = 'basics: done';
  65. testElem.classList.remove('running');
  66. done();
  67. } );
  68. } );