Added test to cover #5855

plotly · Aug 5, 2021 · 5fe96ec · 5fe96ec
1 parent e9953c1
commit 5fe96ec
Show file tree

Hide file tree

Showing 3 changed files with 45 additions and 1 deletion.
diff --git a/draftlogs/5856_add.md b/draftlogs/5856_add.md
@@ -1 +1,2 @@
-- Add touch support to slider [[#5856](https://github.com/plotly/plotly.js/pull/5856)]
+- Add touch support to `slider` component [[#5856](https://github.com/plotly/plotly.js/pull/5856)], 
+  with thanks to @keul for the contribution!
diff --git a/test/jasmine/assets/touch_event.js b/test/jasmine/assets/touch_event.js
@@ -9,6 +9,10 @@ module.exports = function(type, x, y, opts) {
         target: el,
         clientX: x,
         clientY: y,
+        screenX: x,
+        screenY: y,
+        pageX: x,
+        pageY: y,
         radiusX: 2.5,
         radiusY: 2.5,
         rotationAngle: 10,

diff --git a/test/jasmine/tests/sliders_test.js b/test/jasmine/tests/sliders_test.js
@@ -7,6 +7,7 @@ var Plotly = require('@lib/index');
 var Lib = require('@src/lib');
 var createGraphDiv = require('../assets/create_graph_div');
 var destroyGraphDiv = require('../assets/destroy_graph_div');
+var touchEvent = require('../assets/touch_event');
 
 var delay = require('../assets/delay');
 var assertPlotSize = require('../assets/custom_assertions').assertPlotSize;
@@ -507,6 +508,44 @@ describe('sliders interactions', function() {
         .then(done, done.fail);
     });
 
+    it('should respond to touch interactions', function(done) {
+        var firstGroup = gd._fullLayout._infolayer.select('.' + constants.railTouchRectClass);
+        var firstGrip = gd._fullLayout._infolayer.select('.' + constants.gripRectClass);
+        var railNode = firstGroup.node();
+        var gripNode = firstGrip.node();
+        var touchRect = railNode.getBoundingClientRect();
+        var gripRect = gripNode.getBoundingClientRect();
+
+        var originalFill = gripNode.style.fill;
+
+        expect(mockCopy.layout.sliders[0].active).toEqual(2);
+
+        // Dispatch start of touch where the grip control is
+        touchEvent('touchstart', gripRect.left + 5, gripRect.top + 5);
+
+        expect(mockCopy.layout.sliders[0].active).toEqual(2);
+        var touchdownFill = gripNode.style.fill;
+        expect(touchdownFill).not.toEqual(originalFill);
+
+        // Drag to the right side:
+        touchEvent('touchmove', touchRect.left + touchRect.width - 5, gripRect.top + 5);
+
+        var touchmoveFill = gripNode.style.fill;
+        expect(touchmoveFill).toEqual(touchdownFill);
+
+        delay(100)()
+        .then(function() {
+            expect(mockCopy.layout.sliders[0].active).toEqual(5);
+
+            touchEvent('touchend', touchRect.left + touchRect.width - 5, gripRect.top + 5);
+
+            var touchupFill = gripNode.style.fill;
+            expect(touchupFill).toEqual(originalFill);
+            expect(mockCopy.layout.sliders[0].active).toEqual(5);
+        })
+        .then(done, done.fail);
+    });
+
     it('should issue events on interaction', function(done) {
         var cntStart = 0;
         var cntInteraction = 0;