Add cancelable events test

Author: dy

test/jasmine/assets/mouse_event.js

@@ -4,7 +4,8 @@ module.exports = function(type, x, y, opts) {
     var fullOpts = {
         bubbles: true,
         clientX: x,
-        clientY: y
+        clientY: y,
+        cancelable: true
     };
 
     // https://developer.mozilla.org/en-US/docs/Web/API/MouseEvent

test/jasmine/assets/touch_event.js

@@ -19,7 +19,8 @@ module.exports = function(type, x, y, opts) {
         touches: [touchObj],
         targetTouches: [],
         changedTouches: [touchObj],
-        bubbles: true
+        bubbles: true,
+        cancelable: true
     };
 
     if(opts && opts.altKey) {

test/jasmine/tests/gl3d_plot_interact_test.js

@@ -9,6 +9,7 @@ var createGraphDiv = require('../assets/create_graph_div');
 var destroyGraphDiv = require('../assets/destroy_graph_div');
 var fail = require('../assets/fail_test');
 var mouseEvent = require('../assets/mouse_event');
+var touchEvent = require('../assets/touch_event');
 var selectButton = require('../assets/modebar_button');
 var delay = require('../assets/delay');
 
@@ -651,26 +652,88 @@ describe('Test gl3d modebar handlers', function() {
 });
 
 describe('Test gl3d drag and wheel interactions', function() {
-    var gd, relayoutCallback;
+    var gd;
 
-    function scroll(target) {
+    function scroll(target, amt) {
         return new Promise(function(resolve) {
-            target.dispatchEvent(new WheelEvent('wheel', {deltaY: 1}));
+            target.dispatchEvent(new WheelEvent('wheel', {deltaY: amt || 1, cancelable: true}));
             setTimeout(resolve, 0);
         });
     }
 
-    function drag(target) {
+    function drag(target, start, end) {
         return new Promise(function(resolve) {
-            target.dispatchEvent(new MouseEvent('mousedown', {x: 0, y: 0}));
-            target.dispatchEvent(new MouseEvent('mousemove', { x: 100, y: 100}));
-            target.dispatchEvent(new MouseEvent('mouseup', { x: 100, y: 100}));
+            mouseEvent('mousedown', start[0], start[1], {element: target});
+            mouseEvent('mousemove', end[0], end[1], {element: target});
+            mouseEvent('mouseup', end[0], end[1], {element: target});
             setTimeout(resolve, 0);
         });
     }
 
-    beforeEach(function(done) {
+    function touchDrag(target, start, end) {
+        return new Promise(function(resolve) {
+            touchEvent('touchstart', start[0], start[1], {element: target});
+            touchEvent('touchmove', end[0], end[1], {element: target});
+            touchEvent('touchend', end[0], end[1], {element: target});
+            setTimeout(resolve, 0);
+        });
+    }
+
+    beforeEach(function() {
         gd = createGraphDiv();
+        jasmine.DEFAULT_TIMEOUT_INTERVAL = 3000;
+    });
+
+    afterEach(function() {
+        Plotly.purge(gd);
+        destroyGraphDiv();
+    });
+
+    it('should not scroll document while panning', function(done) {
+        var mock = {
+            data: [
+                { type: 'scatter3d' }
+            ],
+            layout: {
+                width: 500,
+                height: 500,
+                scene: { camera: { eye: { x: 0.1, y: 0.1, z: 1 }}}
+            }
+        };
+
+        var sceneTarget, relayoutCallback = jasmine.createSpy('relayoutCallback');
+
+        function assertEvent(e) {
+            expect(e.defaultPrevented).toEqual(true);
+            relayoutCallback();
+        }
+
+        gd.addEventListener('touchend', assertEvent);
+        gd.addEventListener('touchstart', assertEvent);
+        gd.addEventListener('touchmove', assertEvent);
+        gd.addEventListener('wheel', assertEvent);
+
+        Plotly.plot(gd, mock)
+        .then(function() {
+            sceneTarget = gd.querySelector('.svg-container .gl-container #scene');
+
+            return touchDrag(sceneTarget, [100, 100], [0, 0]);
+        })
+        .then(function() {
+            return drag(sceneTarget, [100, 100], [0, 0]);
+        })
+        .then(function() {
+            return scroll(sceneTarget);
+        })
+        .then(function() {
+            expect(relayoutCallback).toHaveBeenCalledTimes(3);
+        })
+        .catch(fail)
+        .then(done);
+    });
+
+    it('should update the scene camera', function(done) {
+        var sceneLayout, sceneLayout2, sceneTarget, sceneTarget2, relayoutCallback;
 
         var mock = {
             data: [
@@ -684,31 +747,23 @@ describe('Test gl3d drag and wheel interactions', function() {
         };
 
         Plotly.plot(gd, mock)
-        .then(delay(20))
         .then(function() {
             relayoutCallback = jasmine.createSpy('relayoutCallback');
             gd.on('plotly_relayout', relayoutCallback);
-        })
-        .then(done);
-    });
 
-    afterEach(function() {
-        Plotly.purge(gd);
-        destroyGraphDiv();
-    });
-
-    it('should update the scene camera', function(done) {
-        var sceneLayout = gd._fullLayout.scene,
-            sceneLayout2 = gd._fullLayout.scene2,
-            sceneTarget = gd.querySelector('.svg-container .gl-container #scene  canvas'),
+            sceneLayout = gd._fullLayout.scene;
+            sceneLayout2 = gd._fullLayout.scene2;
+            sceneTarget = gd.querySelector('.svg-container .gl-container #scene  canvas');
             sceneTarget2 = gd.querySelector('.svg-container .gl-container #scene2 canvas');
 
-        expect(sceneLayout.camera.eye)
-            .toEqual({x: 0.1, y: 0.1, z: 1});
-        expect(sceneLayout2.camera.eye)
-            .toEqual({x: 2.5, y: 2.5, z: 2.5});
+            expect(sceneLayout.camera.eye)
+                .toEqual({x: 0.1, y: 0.1, z: 1});
+            expect(sceneLayout2.camera.eye)
+                .toEqual({x: 2.5, y: 2.5, z: 2.5});
 
-        scroll(sceneTarget).then(function() {
+            return scroll(sceneTarget);
+        })
+        .then(function() {
             expect(relayoutCallback).toHaveBeenCalledTimes(1);
             relayoutCallback.calls.reset();
 
@@ -718,13 +773,13 @@ describe('Test gl3d drag and wheel interactions', function() {
             expect(relayoutCallback).toHaveBeenCalledTimes(1);
             relayoutCallback.calls.reset();
 
-            return drag(sceneTarget2);
+            return drag(sceneTarget2, [0, 0], [100, 100]);
         })
         .then(function() {
             expect(relayoutCallback).toHaveBeenCalledTimes(1);
             relayoutCallback.calls.reset();
 
-            return drag(sceneTarget);
+            return drag(sceneTarget, [0, 0], [100, 100]);
         })
         .then(function() {
             expect(relayoutCallback).toHaveBeenCalledTimes(1);
@@ -739,10 +794,10 @@ describe('Test gl3d drag and wheel interactions', function() {
             expect(relayoutCallback).toHaveBeenCalledTimes(1);
             relayoutCallback.calls.reset();
 
-            return drag(sceneTarget);
+            return drag(sceneTarget, [0, 0], [100, 100]);
         })
         .then(function() {
-            return drag(sceneTarget2);
+            return drag(sceneTarget2, [0, 0], [100, 100]);
         })
         .then(function() {
             expect(relayoutCallback).toHaveBeenCalledTimes(0);
@@ -756,14 +811,15 @@ describe('Test gl3d drag and wheel interactions', function() {
             expect(relayoutCallback).toHaveBeenCalledTimes(1);
             relayoutCallback.calls.reset();
 
-            return drag(sceneTarget);
+            return drag(sceneTarget, [0, 0], [100, 100]);
         })
         .then(function() {
-            return drag(sceneTarget2);
+            return drag(sceneTarget2, [0, 0], [100, 100]);
         })
         .then(function() {
             expect(relayoutCallback).toHaveBeenCalledTimes(2);
         })
+        .catch(fail)
         .then(done);
     });
 });