ScrollableContainerSpec.js 3.0 KB

12345678910111213141516171819202122232425262728293031323334353637383940414243444546474849505152535455565758596061626364656667686970717273747576777879808182838485
  1. describe("Scrollable test", function() {
  2. var testSlider;
  3. var sliderHandleTopPos;
  4. var sliderHandleLeftPos;
  5. var scrollableContainer;
  6. describe("Vertical inside scrollable container", function() {
  7. beforeEach(function() {
  8. testSlider = new Slider("#ex1", {
  9. id: "ex1Slider",
  10. orientation: "vertical",
  11. min: 0,
  12. max: 20,
  13. value: 10,
  14. step: 1
  15. });
  16. scrollableContainer = document.querySelector('#scrollable-div');
  17. scrollableContainer.scrollTop = 145;
  18. var sliderHandleEl = document.querySelector("#ex1Slider .slider-handle");
  19. var sliderHandleBoundingBoxInfo = sliderHandleEl.getBoundingClientRect();
  20. sliderHandleTopPos = sliderHandleBoundingBoxInfo.top;
  21. sliderHandleLeftPos = sliderHandleBoundingBoxInfo.left;
  22. });
  23. afterEach(function() {
  24. if(testSlider) {
  25. testSlider.destroy();
  26. }
  27. });
  28. // The difference between sliderHandleTopPos and mousemoveY is equal to 50 in both cases,
  29. // but difference between initial and final slider value is not equal (6 and 4).
  30. // It happens because we don't 'hit' the center of handle but the top left corner.
  31. it("slides up when handle moves upwards inside scrollable element after scrolling", function() {
  32. var mousemove = document.createEvent('MouseEvents');
  33. var mousemoveX = sliderHandleLeftPos;
  34. var mousemoveY = sliderHandleTopPos - 50;
  35. var newSliderValue;
  36. mousemove.initMouseEvent(
  37. "mousedown",
  38. true /* bubble */,
  39. true /* cancelable */,
  40. window,
  41. null,
  42. 0, 0, mousemoveX, mousemoveY, /* coordinates */
  43. false, false, false, false, /* modifier keys */
  44. 0 /*left*/,
  45. null
  46. );
  47. testSlider.sliderElem.dispatchEvent(mousemove);
  48. newSliderValue = testSlider.getValue();
  49. expect(newSliderValue).toEqual(4);
  50. });
  51. it("slides down when handle moves downwards inside scrollable element after scrolling", function() {
  52. var mousemove = document.createEvent('MouseEvents');
  53. var mousemoveX = sliderHandleLeftPos;
  54. var mousemoveY = sliderHandleTopPos + 50;
  55. var newSliderValue;
  56. mousemove.initMouseEvent(
  57. "mousedown",
  58. true /* bubble */,
  59. true /* cancelable */,
  60. window,
  61. null,
  62. 0, 0, mousemoveX, mousemoveY, /* coordinates */
  63. false, false, false, false, /* modifier keys */
  64. 0 /*left*/,
  65. null
  66. );
  67. testSlider.sliderElem.dispatchEvent(mousemove);
  68. newSliderValue = testSlider.getValue();
  69. expect(newSliderValue).toEqual(14);
  70. });
  71. });
  72. }); // End of spec