add dragbox interactions tests (for all 10 of them)

plotly · etpinard · Mar 29, 2016 · Mar 23, 2016 · Mar 23, 2016 · Mar 24, 2016
commit 26a2d889b516b51f3c4086ad8255ef26c0e2d7ef
diff --git a/test/jasmine/assets/get_rect_center.js b/test/jasmine/assets/get_rect_center.js
@@ -0,0 +1,48 @@
+'use strict';
+
+
+/**
+ * Get the screen coordinates of the center of
+ * an SVG rectangle node.
+ *
+ * @param {rect} rect svg <rect> node
+ */
+module.exports = function getRectCenter(rect) {
+    var corners = getRectScreenCoords(rect);
+
+    return [
+        corners.nw.x + (corners.ne.x - corners.nw.x) / 2,
+        corners.ne.y + (corners.se.y - corners.ne.y) / 2
+    ];
+};
+
+// Taken from: http://stackoverflow.com/a/5835212/4068492
+function getRectScreenCoords(rect) {
+    var svg = findParentSVG(rect);
+    var pt = svg.createSVGPoint();
+    var corners = {};
+    var matrix = rect.getScreenCTM();
+
+    pt.x = rect.x.animVal.value;
+    pt.y = rect.y.animVal.value;
+    corners.nw = pt.matrixTransform(matrix);
+    pt.x += rect.width.animVal.value;
+    corners.ne = pt.matrixTransform(matrix);
+    pt.y += rect.height.animVal.value;
+    corners.se = pt.matrixTransform(matrix);
+    pt.x -= rect.width.animVal.value;
+    corners.sw = pt.matrixTransform(matrix);
+
+    return corners;
+}
+
+function findParentSVG(node) {
+    var parentNode = node.parentNode;
+
+    if(parentNode.tagName === 'svg') {
+        return parentNode;
+    }
+    else {
+        return findParentSVG(parentNode);
+    }
+}
diff --git a/test/jasmine/tests/click_test.js b/test/jasmine/tests/click_test.js
@@ -5,6 +5,7 @@ var DBLCLICKDELAY = require('@src/plots/cartesian/constants').DBLCLICKDELAY;
 var createGraphDiv = require('../assets/create_graph_div');
 var destroyGraphDiv = require('../assets/destroy_graph_div');
 var mouseEvent = require('../assets/mouse_event');
+var getRectCenter = require('../assets/get_rect_center');
 var customMatchers = require('../assets/custom_matchers');
 
 
@@ -371,4 +372,251 @@ describe('Test click interactions:', function() {
         });
 
     });
+
+    describe('drag interations', function() {
+        beforeEach(function(done) {
+            Plotly.plot(gd, mockCopy.data, mockCopy.layout).then(done);
+        });
+
+        it('on nw dragbox should update the axis ranges', function(done) {
+            var node = document.querySelector('rect.nwdrag');
+            var pos = getRectCenter(node);
+
+            expect(node.classList[0]).toBe('drag');
+            expect(node.classList[1]).toBe('nwdrag');
+            expect(node.classList[2]).toBe('cursor-nw-resize');
+
+            expect(gd.layout.xaxis.range).toBeCloseToArray(autoRangeX);
+            expect(gd.layout.yaxis.range).toBeCloseToArray(autoRangeY);
+
+            drag(pos[0], pos[1], pos[0] + 10, pos[1] + 50).then(function() {
+                expect(gd.layout.xaxis.range).toBeCloseToArray([-3.08579746, 2.156130559]);
+                expect(gd.layout.yaxis.range).toBeCloseToArray([-0.99100863, 1.86546098]);
+
+                return drag(pos[0], pos[1], pos[0] - 10, pos[1] - 50);
+            }).then(function() {
+                expect(gd.layout.xaxis.range).toBeCloseToArray(autoRangeX);
+                expect(gd.layout.yaxis.range).toBeCloseToArray([-0.99100863, 1.10938115]);
+
+                done();
+            });
+        });
+
+        it('on ne dragbox should update the axis ranges', function(done) {
+            var node = document.querySelector('rect.nedrag');
+            var pos = getRectCenter(node);
+
+            expect(node.classList[0]).toBe('drag');
+            expect(node.classList[1]).toBe('nedrag');
+            expect(node.classList[2]).toBe('cursor-ne-resize');
+
+            expect(gd.layout.xaxis.range).toBeCloseToArray(autoRangeX);
+            expect(gd.layout.yaxis.range).toBeCloseToArray(autoRangeY);
+
+            drag(pos[0], pos[1], pos[0] + 50, pos[1] + 50).then(function() {
+                expect(gd.layout.xaxis.range).toBeCloseToArray([-3.01196749, 1.72466470]);
+                expect(gd.layout.yaxis.range).toBeCloseToArray([-0.99100863, 1.86546098]);
+
+                return drag(pos[0], pos[1], pos[0] - 50, pos[1] - 50);
+            }).then(function() {
+                expect(gd.layout.xaxis.range).toBeCloseToArray([-3.01196749, 2.08350047]);
+                expect(gd.layout.yaxis.range).toBeCloseToArray([-0.99100863, 1.10938115]);
+
+                done();
+            });
+        });
+
+        it('on sw dragbox should update the axis ranges', function(done) {
+            var node = document.querySelector('rect.swdrag');
+            var pos = getRectCenter(node);
+
+            expect(node.classList[0]).toBe('drag');
+            expect(node.classList[1]).toBe('swdrag');
+            expect(node.classList[2]).toBe('cursor-sw-resize');
+
+            expect(gd.layout.xaxis.range).toBeCloseToArray(autoRangeX);
+            expect(gd.layout.yaxis.range).toBeCloseToArray(autoRangeY);
+
+            drag(pos[0], pos[1], pos[0] + 10, pos[1] + 50).then(function() {
+                expect(gd.layout.xaxis.range).toBeCloseToArray([-3.08579746, 2.15613055]);
+                expect(gd.layout.yaxis.range).toBeCloseToArray([-0.36094210, 1.38938271]);
+
+                return drag(pos[0], pos[1], pos[0] - 10, pos[1] - 50);
+            }).then(function() {
+                expect(gd.layout.xaxis.range).toBeCloseToArray([-3.00958227, 2.15613055]);
+                expect(gd.layout.yaxis.range).toBeCloseToArray([-0.71100706, 1.38938271]);
+
+                done();
+            });
+        });
+
+        it('on se dragbox should update the axis ranges', function(done) {
+            var node = document.querySelector('rect.sedrag');
+            var pos = getRectCenter(node);
+
+            expect(node.classList[0]).toBe('drag');
+            expect(node.classList[1]).toBe('sedrag');
+            expect(node.classList[2]).toBe('cursor-se-resize');
+
+            expect(gd.layout.xaxis.range).toBeCloseToArray(autoRangeX);
+            expect(gd.layout.yaxis.range).toBeCloseToArray(autoRangeY);
+
+            drag(pos[0], pos[1], pos[0] + 50, pos[1] + 50).then(function() {
+                expect(gd.layout.xaxis.range).toBeCloseToArray([-3.01196749, 1.72466470]);
+                expect(gd.layout.yaxis.range).toBeCloseToArray([-0.36094210, 1.38938271]);
+
+                return drag(pos[0], pos[1], pos[0] - 50, pos[1] - 50);
+            }).then(function() {
+                expect(gd.layout.xaxis.range).toBeCloseToArray([-3.01196749, 2.08350047]);
+                expect(gd.layout.yaxis.range).toBeCloseToArray([-0.71100706, 1.38938271]);
+
+                done();
+            });
+        });
+
+        it('on ew dragbox should update the xaxis range', function(done) {
+            var node = document.querySelector('rect.ewdrag');
+            var pos = getRectCenter(node);
+
+            expect(node.classList[0]).toBe('drag');
+            expect(node.classList[1]).toBe('ewdrag');
+            expect(node.classList[2]).toBe('cursor-ew-resize');
+
+            expect(gd.layout.xaxis.range).toBeCloseToArray(autoRangeX);
+            expect(gd.layout.yaxis.range).toBeCloseToArray(autoRangeY);
+
+            drag(pos[0], pos[1], pos[0] + 50, pos[1] + 50).then(function() {
+                expect(gd.layout.xaxis.range).toBeCloseToArray([-3.375918058, 1.792179992]);
+                expect(gd.layout.yaxis.range).toBeCloseToArray(autoRangeY);
+
+                return drag(pos[0], pos[1], pos[0] - 50, pos[1] - 50);
+            }).then(function() {
+                expect(gd.layout.xaxis.range).toBeCloseToArray([-3.01196749, 2.15613055]);
+                expect(gd.layout.yaxis.range).toBeCloseToArray(autoRangeY);
+
+                done();
+            });
+        });
+
+        it('on w dragbox should update the xaxis range', function(done) {
+            var node = document.querySelector('rect.wdrag');
+            var pos = getRectCenter(node);
+
+            expect(node.classList[0]).toBe('drag');
+            expect(node.classList[1]).toBe('wdrag');
+            expect(node.classList[2]).toBe('cursor-w-resize');
+
+            expect(gd.layout.xaxis.range).toBeCloseToArray(autoRangeX);
+            expect(gd.layout.yaxis.range).toBeCloseToArray(autoRangeY);
+
+            drag(pos[0], pos[1], pos[0] + 50, pos[1] + 50).then(function() {
+                expect(gd.layout.xaxis.range).toBeCloseToArray([-3.40349007, 2.15613055]);
+                expect(gd.layout.yaxis.range).toBeCloseToArray(autoRangeY);
+
+                return drag(pos[0], pos[1], pos[0] - 50, pos[1] - 50);
+            }).then(function() {
+                expect(gd.layout.xaxis.range).toBeCloseToArray([-2.93933740, 2.15613055]);
+                expect(gd.layout.yaxis.range).toBeCloseToArray(autoRangeY);
+
+                done();
+            });
+        });
+
+        it('on e dragbox should update the xaxis range', function(done) {
+            var node = document.querySelector('rect.edrag');
+            var pos = getRectCenter(node);
+
+            expect(node.classList[0]).toBe('drag');
+            expect(node.classList[1]).toBe('edrag');
+            expect(node.classList[2]).toBe('cursor-e-resize');
+
+            expect(gd.layout.xaxis.range).toBeCloseToArray(autoRangeX);
+            expect(gd.layout.yaxis.range).toBeCloseToArray(autoRangeY);
+
+            drag(pos[0], pos[1], pos[0] + 50, pos[1] + 50).then(function() {
+                expect(gd.layout.xaxis.range).toBeCloseToArray([-3.01196749, 1.7246647]);
+                expect(gd.layout.yaxis.range).toBeCloseToArray(autoRangeY);
+
+                return drag(pos[0], pos[1], pos[0] - 50, pos[1] - 50);
+            }).then(function() {
+                expect(gd.layout.xaxis.range).toBeCloseToArray([-3.01196749, 2.0835004]);
+                expect(gd.layout.yaxis.range).toBeCloseToArray(autoRangeY);
+
+                done();
+            });
+        });
+
+        it('on ns dragbox should update the yaxis range', function(done) {
+            var node = document.querySelector('rect.nsdrag');
+            var pos = getRectCenter(node);
+
+            expect(node.classList[0]).toBe('drag');
+            expect(node.classList[1]).toBe('nsdrag');
+            expect(node.classList[2]).toBe('cursor-ns-resize');
+
+            expect(gd.layout.xaxis.range).toBeCloseToArray(autoRangeX);
+            expect(gd.layout.yaxis.range).toBeCloseToArray(autoRangeY);
+
+            drag(pos[0], pos[1], pos[0] + 10, pos[1] + 50).then(function() {
+                expect(gd.layout.xaxis.range).toBeCloseToArray(autoRangeX);
+                expect(gd.layout.yaxis.range).toBeCloseToArray([-0.59427673, 1.78611460]);
+
+                return drag(pos[0], pos[1], pos[0] - 10, pos[1] - 50);
+            }).then(function() {
+                expect(gd.layout.xaxis.range).toBeCloseToArray(autoRangeX);
+                expect(gd.layout.yaxis.range).toBeCloseToArray(autoRangeY);
+
+                done();
+            });
+        });
+
+        it('on s dragbox should update the yaxis range', function(done) {
+            var node = document.querySelector('rect.sdrag');
+            var pos = getRectCenter(node);
+
+            expect(node.classList[0]).toBe('drag');
+            expect(node.classList[1]).toBe('sdrag');
+            expect(node.classList[2]).toBe('cursor-s-resize');
+
+            expect(gd.layout.xaxis.range).toBeCloseToArray(autoRangeX);
+            expect(gd.layout.yaxis.range).toBeCloseToArray(autoRangeY);
+
+            drag(pos[0], pos[1], pos[0] + 10, pos[1] + 50).then(function() {
+                expect(gd.layout.xaxis.range).toBeCloseToArray(autoRangeX);
+                expect(gd.layout.yaxis.range).toBeCloseToArray([-0.3609421011, 1.3893827]);
+
+                return drag(pos[0], pos[1], pos[0] - 10, pos[1] - 50);
+            }).then(function() {
+                expect(gd.layout.xaxis.range).toBeCloseToArray(autoRangeX);
+                expect(gd.layout.yaxis.range).toBeCloseToArray([-0.7110070646, 1.3893827]);
+
+                done();
+            });
+        });
+
+        it('on n dragbox should update the yaxis range', function(done) {
+            var node = document.querySelector('rect.ndrag');
+            var pos = getRectCenter(node);
+
+            expect(node.classList[0]).toBe('drag');
+            expect(node.classList[1]).toBe('ndrag');
+            expect(node.classList[2]).toBe('cursor-n-resize');
+
+            expect(gd.layout.xaxis.range).toBeCloseToArray(autoRangeX);
+            expect(gd.layout.yaxis.range).toBeCloseToArray(autoRangeY);
+
+            drag(pos[0], pos[1], pos[0] + 10, pos[1] + 50).then(function() {
+                expect(gd.layout.xaxis.range).toBeCloseToArray(autoRangeX);
+                expect(gd.layout.yaxis.range).toBeCloseToArray([-0.991008630, 1.86546098]);
+
+                return drag(pos[0], pos[1], pos[0] - 10, pos[1] - 50);
+            }).then(function() {
+                expect(gd.layout.xaxis.range).toBeCloseToArray(autoRangeX);
+                expect(gd.layout.yaxis.range).toBeCloseToArray([-0.991008630, 1.10938115]);
+
+                done();
+            });
+        });
+
+    });
 });