touch: Add scrolling tests

seiyria · Feb 14, 2019 · 6110dc5 · 6110dc5
1 parent e145456
commit 6110dc5
Show file tree

Hide file tree

Showing 2 changed files with 108 additions and 0 deletions.
diff --git a/test/specs/TouchCapableSpec.js b/test/specs/TouchCapableSpec.js
@@ -480,4 +480,92 @@ describe("Touch Capable Tests", function() {
 
   });
 
+  describe("Scrolling tests", function() {
+
+    describe("horizontal sliding tests", function() {
+      var horzScrollDiv;
+
+      beforeEach(function() {
+        // Initialize the slider
+        $testSlider = $('#' + inputId).slider(sliderOptions);
+
+        // Get slider instance
+        sliderInst = $testSlider.data('slider');
+
+        horzScrollDiv = document.getElementById('horz-scroll-div');
+      });
+
+      // index= [0 1 2 3 4]
+      // ticks= [0 3 5 7 10]
+      it("should not scroll the div horizontally while sliding the slider", function(done) {
+        var sliderElem = $testSlider.slider('getElement');
+
+        $testSlider.on('slideStop', function() {
+          expect(horzScrollDiv.scrollLeft).toBe(0);
+          done();
+        });
+
+        var tick = sliderInst.ticks[2];  // 5
+        var sliderCoords = calcTouchEventCoords(sliderElem);
+        var coords = [sliderCoords.x + tick.offsetLeft, sliderCoords.y];
+        touchStart = createTouchEvent(sliderElem, 'touchstart', coords);
+
+        tick = sliderInst.ticks[3];  // 7
+        coords = [sliderCoords.x + tick.offsetLeft, sliderCoords.y];
+        touchMove = createTouchEvent(sliderElem, 'touchmove', coords);
+
+        touchEnd = createTouchEvent(sliderElem, 'touchend', coords);
+
+        sliderElem.dispatchEvent(touchStart);
+        sliderElem.dispatchEvent(touchMove);
+        sliderElem.dispatchEvent(touchEnd);
+      });
+
+    });
+
+    describe("vertical sliding tests", function() {
+      var vertScrollDiv;
+
+      beforeEach(function() {
+        sliderOptions.orientation = 'vertical';
+
+        // Initialize the slider
+        $testSlider = $('#' + inputId).slider(sliderOptions);
+
+        // Get slider instance
+        sliderInst = $testSlider.data('slider');
+
+        vertScrollDiv = document.getElementById('vert-scroll-div');
+      });
+
+      // index= [0 1 2 3 4]
+      // ticks= [0 3 5 7 10]
+      it("should not scroll the div vertically while sliding the slider", function(done) {
+        var sliderElem = $testSlider.slider('getElement');
+
+        $testSlider.on('slideStop', function() {
+          expect(vertScrollDiv.scrollTop).toBe(0);
+          done();
+        });
+
+        var tick = sliderInst.ticks[2];  // 5
+        var sliderCoords = calcTouchEventCoords(sliderElem);
+        var coords = [sliderCoords.x + tick.offsetLeft, sliderCoords.y];
+        touchStart = createTouchEvent(sliderElem, 'touchstart', coords);
+
+        tick = sliderInst.ticks[3];  // 7
+        coords = [sliderCoords.x + tick.offsetLeft, sliderCoords.y];
+        touchMove = createTouchEvent(sliderElem, 'touchmove', coords);
+
+        touchEnd = createTouchEvent(sliderElem, 'touchend', coords);
+
+        sliderElem.dispatchEvent(touchStart);
+        sliderElem.dispatchEvent(touchMove);
+        sliderElem.dispatchEvent(touchEnd);
+      });
+
+    });
+
+  });
+
 });
diff --git a/tpl/SpecRunner.tpl b/tpl/SpecRunner.tpl
@@ -26,6 +26,16 @@
 			padding: 2000px 0 500px 0;
 		}
 
+		#horz-scroll-div {
+			overflow-x: scroll;
+			width: 300px;
+			height: 150px;
+		}
+		#vert-scroll-div {
+			overflow-y: scroll;
+			width: 150px;
+			height: 300px;
+		}
 	</style>
 </head>
 <body>
@@ -96,6 +106,16 @@
 		<input id="ex1" data-slider-id='ex1Slider' type="text"/>
 	</div>
 
+	<div id="horz-scroll-div">
+		<input id="horz-touch-slider" type="text"/>
+		<div style="position: relative; left: 1000px">Text</div>
+	</div>
+
+	<div id="vert-scroll-div">
+		<input id="vert-touch-slider" type="text"/>
+		<div style="position: relative; top: 1000px">More text</div>
+	</div>
+
 	<div id="low-div">
 		<input id="veryLowPositionedSlider" type="text"/>
 	</div>