pull drag interaction out of shapes_test - and speed it up

Author: alexcjohnson

test/jasmine/assets/drag.js

@@ -0,0 +1,78 @@
+var mouseEvent = require('../assets/mouse_event');
+
+/*
+ * drag: grab a node and drag it (dx, dy) pixels
+ * optionally specify an edge ('n', 'se', 'w' etc)
+ * to grab it by an edge or corner (otherwise the middle is used)
+ */
+module.exports = function(node, dx, dy, edge) {
+
+    edge = edge || '';
+    var bbox = node.getBoundingClientRect(),
+        fromX, fromY;
+
+    if(edge.indexOf('n') !== -1) fromY = bbox.top;
+    else if(edge.indexOf('s') !== -1) fromY = bbox.bottom;
+    else fromY = (bbox.bottom + bbox.top) / 2;
+
+    if(edge.indexOf('w') !== -1) fromX = bbox.left;
+    else if(edge.indexOf('e') !== -1) fromX = bbox.right;
+    else fromX = (bbox.left + bbox.right) / 2;
+
+
+    var toX = fromX + dx,
+        toY = fromY + dy;
+
+    mouseEvent('mousemove', fromX, fromY, {element: node});
+    mouseEvent('mousedown', fromX, fromY, {element: node});
+
+    var promise = waitForDragCover().then(function(dragCoverNode) {
+        mouseEvent('mousemove', toX, toY, {element: dragCoverNode});
+        mouseEvent('mouseup', toX, toY, {element: dragCoverNode});
+        return waitForDragCoverRemoval();
+    });
+
+    return promise;
+};
+
+function waitForDragCover() {
+    return new Promise(function(resolve) {
+        var interval = 5,
+            timeout = 5000;
+
+        var id = setInterval(function() {
+            var dragCoverNode = document.querySelector('.dragcover');
+            if(dragCoverNode) {
+                clearInterval(id);
+                resolve(dragCoverNode);
+            }
+
+            timeout -= interval;
+            if(timeout < 0) {
+                clearInterval(id);
+                throw new Error('waitForDragCover: timeout');
+            }
+        }, interval);
+    });
+}
+
+function waitForDragCoverRemoval() {
+    return new Promise(function(resolve) {
+        var interval = 5,
+            timeout = 5000;
+
+        var id = setInterval(function() {
+            var dragCoverNode = document.querySelector('.dragcover');
+            if(!dragCoverNode) {
+                clearInterval(id);
+                resolve(dragCoverNode);
+            }
+
+            timeout -= interval;
+            if(timeout < 0) {
+                clearInterval(id);
+                throw new Error('waitForDragCoverRemoval: timeout');
+            }
+        }, interval);
+    });
+}

test/jasmine/assets/mouse_event.js

@@ -10,7 +10,7 @@ module.exports = function(type, x, y, opts) {
         fullOpts.buttons = opts.buttons;
     }
 
-    var el = document.elementFromPoint(x, y),
+    var el = opts.element || document.elementFromPoint(x, y),
         ev;
 
     if(type === 'scroll') {
@@ -20,4 +20,6 @@ module.exports = function(type, x, y, opts) {
     }
 
     el.dispatchEvent(ev);
+
+    return el;
 };

test/jasmine/tests/shapes_test.js

@@ -14,6 +14,7 @@ var customMatchers = require('../assets/custom_matchers');
 var createGraphDiv = require('../assets/create_graph_div');
 var destroyGraphDiv = require('../assets/destroy_graph_div');
 var failTest = require('../assets/fail_test');
+var drag = require('../assets/drag');
 
 
 describe('Test shapes defaults:', function() {
@@ -748,7 +749,7 @@ describe('Test shapes', function() {
 
         var initialCoordinates = getShapeCoordinates(layoutShape, x2p, y2p);
 
-        return resize(direction, node, dx, dy).then(function() {
+        return drag(node, dx, dy, direction).then(function() {
             var finalCoordinates = getShapeCoordinates(layoutShape, x2p, y2p);
 
             var keyN, keyS, keyW, keyE;
@@ -815,118 +816,3 @@ describe('Test shapes', function() {
         return coordinates;
     }
 });
-
-var DBLCLICKDELAY = require('@src/plots/cartesian/constants').DBLCLICKDELAY;
-
-function mouseDown(node, x, y) {
-    node.dispatchEvent(new MouseEvent('mousedown', {
-        bubbles: true,
-        clientX: x,
-        clientY: y
-    }));
-}
-
-function mouseMove(node, x, y) {
-    node.dispatchEvent(new MouseEvent('mousemove', {
-        bubbles: true,
-        clientX: x,
-        clientY: y
-    }));
-}
-
-function mouseUp(node, x, y) {
-    node.dispatchEvent(new MouseEvent('mouseup', {
-        bubbles: true,
-        clientX: x,
-        clientY: y
-    }));
-}
-
-function drag(node, dx, dy) {
-    var bbox = node.getBoundingClientRect(),
-        fromX = (bbox.left + bbox.right) / 2,
-        fromY = (bbox.bottom + bbox.top) / 2,
-        toX = fromX + dx,
-        toY = fromY + dy;
-
-    mouseMove(node, fromX, fromY);
-    mouseDown(node, fromX, fromY);
-
-    var promise = waitForDragCover().then(function(dragCoverNode) {
-        mouseMove(dragCoverNode, toX, toY);
-        mouseUp(dragCoverNode, toX, toY);
-        return waitForDragCoverRemoval();
-    });
-
-    return promise;
-}
-
-function resize(direction, node, dx, dy) {
-    var bbox = node.getBoundingClientRect();
-
-    var fromX, fromY, toX, toY;
-
-    if(~direction.indexOf('n')) fromY = bbox.top;
-    else if(~direction.indexOf('s')) fromY = bbox.bottom;
-    else fromY = (bbox.bottom + bbox.top) / 2;
-
-    if(~direction.indexOf('w')) fromX = bbox.left;
-    else if(~direction.indexOf('e')) fromX = bbox.right;
-    else fromX = (bbox.left + bbox.right) / 2;
-
-    toX = fromX + dx;
-    toY = fromY + dy;
-
-    mouseMove(node, fromX, fromY);
-    mouseDown(node, fromX, fromY);
-
-    var promise = waitForDragCover().then(function(dragCoverNode) {
-        mouseMove(dragCoverNode, toX, toY);
-        mouseUp(dragCoverNode, toX, toY);
-        return waitForDragCoverRemoval();
-    });
-
-    return promise;
-}
-
-function waitForDragCover() {
-    return new Promise(function(resolve) {
-        var interval = DBLCLICKDELAY / 4,
-            timeout = 5000;
-
-        var id = setInterval(function() {
-            var dragCoverNode = d3.selectAll('.dragcover').node();
-            if(dragCoverNode) {
-                clearInterval(id);
-                resolve(dragCoverNode);
-            }
-
-            timeout -= interval;
-            if(timeout < 0) {
-                clearInterval(id);
-                throw new Error('waitForDragCover: timeout');
-            }
-        }, interval);
-    });
-}
-
-function waitForDragCoverRemoval() {
-    return new Promise(function(resolve) {
-        var interval = DBLCLICKDELAY / 4,
-            timeout = 5000;
-
-        var id = setInterval(function() {
-            var dragCoverNode = d3.selectAll('.dragcover').node();
-            if(!dragCoverNode) {
-                clearInterval(id);
-                resolve(dragCoverNode);
-            }
-
-            timeout -= interval;
-            if(timeout < 0) {
-                clearInterval(id);
-                throw new Error('waitForDragCoverRemoval: timeout');
-            }
-        }, interval);
-    });
-}