From 0c6ecb61f43220375dca07ede09d801bf0c6fca5 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Mikl=C3=B3s=20Tusz?= Date: Wed, 23 Mar 2016 15:44:29 -0400 Subject: [PATCH 01/12] Remove unused artifact code --- src/plots/cartesian/graph_interact.js | 5 ----- 1 file changed, 5 deletions(-) diff --git a/src/plots/cartesian/graph_interact.js b/src/plots/cartesian/graph_interact.js index 1a13c920c5d..94cfab430a6 100644 --- a/src/plots/cartesian/graph_interact.js +++ b/src/plots/cartesian/graph_interact.js @@ -2032,11 +2032,6 @@ fx.dragElement = function(options) { if(!gd._mouseDownTime) gd._mouseDownTime = 0; function onStart(e) { - // because we cancel event bubbling, - // explicitly trigger input blur event. - var inputBox = document.querySelector('.plugin-editable'); - if(inputBox) d3.select(inputBox).on('blur').call(inputBox); - // make dragging and dragged into properties of gd // so that others can look at and modify them gd._dragged = false; From 113e802a0e46e785f2f6775ebc63c479a999403f Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Mikl=C3=B3s=20Tusz?= Date: Wed, 23 Mar 2016 17:17:18 -0400 Subject: [PATCH 02/12] Remove delay for action after double click --- src/plots/cartesian/constants.js | 2 +- src/plots/cartesian/graph_interact.js | 17 ----------------- 2 files changed, 1 insertion(+), 18 deletions(-) diff --git a/src/plots/cartesian/constants.js b/src/plots/cartesian/constants.js index 77fa41ebdb3..167f96cebdf 100644 --- a/src/plots/cartesian/constants.js +++ b/src/plots/cartesian/constants.js @@ -28,7 +28,7 @@ module.exports = { // ms between first mousedown and 2nd mouseup to constitute dblclick... // we don't seem to have access to the system setting - DBLCLICKDELAY: 600, + DBLCLICKDELAY: 300, // pixels to move mouse before you stop clamping to starting point MINDRAG: 8, diff --git a/src/plots/cartesian/graph_interact.js b/src/plots/cartesian/graph_interact.js index 94cfab430a6..19c428761fa 100644 --- a/src/plots/cartesian/graph_interact.js +++ b/src/plots/cartesian/graph_interact.js @@ -1576,7 +1576,6 @@ function dragBox(gd, plotinfo, x, y, w, h, ns, ew) { function zoomDone(dragged, numClicks) { if(Math.min(box.h, box.w) < MINDRAG * 2) { if(numClicks === 2) doubleClick(); - else pauseForDrag(gd); return removeZoombox(gd); } @@ -1629,7 +1628,6 @@ function dragBox(gd, plotinfo, x, y, w, h, ns, ew) { } }); } - else pauseForDrag(gd); } // scroll zoom, on all draggers except corners @@ -1932,21 +1930,6 @@ function getEndText(ax, end) { } } -function pauseForDrag(gd) { - // prevent more redraws until we know if a doubleclick - // has occurred - gd._dragging = true; - var deferredReplot = gd._replotPending; - gd._replotPending = false; - - setTimeout(function() { - gd._replotPending = deferredReplot; - finishDrag(gd); - }, - constants.DBLCLICKDELAY - ); -} - function finishDrag(gd) { gd._dragging = false; if(gd._replotPending) Plotly.plot(gd); From 58badccf0eb91d5212a3d076877b7201a0bf2c9b Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Mikl=C3=B3s=20Tusz?= Date: Thu, 24 Mar 2016 13:08:26 -0400 Subject: [PATCH 03/12] Add test for doubleclick reset -> drag to zoom --- test/jasmine/tests/click_test.js | 36 +++++++++++++++++++++++++++++++- 1 file changed, 35 insertions(+), 1 deletion(-) diff --git a/test/jasmine/tests/click_test.js b/test/jasmine/tests/click_test.js index 7b123dc6266..6bc931f551a 100644 --- a/test/jasmine/tests/click_test.js +++ b/test/jasmine/tests/click_test.js @@ -37,6 +37,19 @@ describe('Test click interactions:', function() { }); } + function drag(fromX, fromY, toX, toY) { + return new Promise(function(resolve) { + mouseEvent('mousemove', fromX, fromY); + mouseEvent('mousedown', fromX, fromY); + mouseEvent('mousemove', toX, toY); + + setTimeout(function() { + mouseEvent('mouseup', toX, toY); + resolve(); + }, DBLCLICKDELAY / 2); + }); + } + describe('click events', function() { var futureData; @@ -97,7 +110,7 @@ describe('Test click interactions:', function() { }); }); - describe('double click interactions', function() { + fdescribe('double click interactions', function() { var mockCopy; var autoRangeX = [-3.011967491973726, 2.1561305597186564], @@ -196,6 +209,27 @@ describe('Test click interactions:', function() { }); }); + it('when set to \'reset+autorange\' (the default) should autosize on 1st double click and zoom when immediately dragged', function(done) { + mockCopy = setRanges(mockCopy); + + Plotly.plot(gd, mockCopy.data, mockCopy.layout).then(function() { + expect(gd.layout.xaxis.range).toBeCloseToArray(setRangeX); + expect(gd.layout.yaxis.range).toBeCloseToArray(setRangeY); + + return doubleClick(blankPos[0], blankPos[1]); + }).then(function() { + expect(gd.layout.xaxis.range).toBeCloseToArray(autoRangeX); + expect(gd.layout.yaxis.range).toBeCloseToArray(autoRangeY); + + return drag(100, 100, 200, 200); + }).then(function() { + expect(gd.layout.xaxis.range).toBeCloseToArray([-2.70624901567643, -1.9783478816352495]); + expect(gd.layout.yaxis.range).toBeCloseToArray([0.5007032802920716, 1.2941670624404753]); + + done(); + }); + }); + it('when set to \'reset+autorange\' (the default) should follow updated auto ranges', function(done) { var updateData = { x: [[1e-4, 0, 1e3]], From 6586d1ce71f31e8f56bfdb7e805b8f0cf1ac6c1e Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Mikl=C3=B3s=20Tusz?= Date: Thu, 24 Mar 2016 13:17:31 -0400 Subject: [PATCH 04/12] Fixup: darn fdescribes --- test/jasmine/tests/click_test.js | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/test/jasmine/tests/click_test.js b/test/jasmine/tests/click_test.js index 6bc931f551a..b1fd2f4cd86 100644 --- a/test/jasmine/tests/click_test.js +++ b/test/jasmine/tests/click_test.js @@ -110,7 +110,7 @@ describe('Test click interactions:', function() { }); }); - fdescribe('double click interactions', function() { + describe('double click interactions', function() { var mockCopy; var autoRangeX = [-3.011967491973726, 2.1561305597186564], From 86013852ef379ee826e0daa77ff3676ab1dbf8e2 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?=C3=89tienne=20T=C3=A9treault-Pinard?= Date: Tue, 29 Mar 2016 11:05:10 -0400 Subject: [PATCH 05/12] clean up click test: - move copy-mock step and add-custom-matchers to suite scope - rewrite one test as promise chain - define auto range values in suite scope --- test/jasmine/tests/click_test.js | 61 ++++++++++++++------------------ 1 file changed, 26 insertions(+), 35 deletions(-) diff --git a/test/jasmine/tests/click_test.js b/test/jasmine/tests/click_test.js index b1fd2f4cd86..cdf0e1d4918 100644 --- a/test/jasmine/tests/click_test.js +++ b/test/jasmine/tests/click_test.js @@ -9,12 +9,25 @@ var customMatchers = require('../assets/custom_matchers'); describe('Test click interactions:', function() { - var mock = require('@mocks/14.json'), - gd; + var mock = require('@mocks/14.json'); + + var mockCopy, gd; var pointPos = [351, 223], blankPos = [70, 363]; + var autoRangeX = [-3.011967491973726, 2.1561305597186564], + autoRangeY = [-0.9910086301469277, 1.389382716298284]; + + beforeAll(function() { + jasmine.addMatchers(customMatchers); + }); + + beforeEach(function() { + gd = createGraphDiv(); + mockCopy = Lib.extendDeep({}, mock); + }); + afterEach(destroyGraphDiv); // cartesian click events events use the hover data @@ -54,11 +67,7 @@ describe('Test click interactions:', function() { var futureData; beforeEach(function(done) { - gd = createGraphDiv(); - - var mockCopy = Lib.extendDeep({}, mock); - Plotly.plot(gd, mockCopy.data, mockCopy.layout) - .then(done); + Plotly.plot(gd, mockCopy.data, mockCopy.layout).then(done); gd.on('plotly_click', function(data) { futureData = data; @@ -90,11 +99,7 @@ describe('Test click interactions:', function() { var futureData; beforeEach(function(done) { - gd = createGraphDiv(); - - var mockCopy = Lib.extendDeep({}, mock); - Plotly.plot(gd, mockCopy.data, mockCopy.layout) - .then(done); + Plotly.plot(gd, mockCopy.data, mockCopy.layout).then(done); gd.on('plotly_doubleclick', function(data) { futureData = data; @@ -111,11 +116,6 @@ describe('Test click interactions:', function() { }); describe('double click interactions', function() { - var mockCopy; - - var autoRangeX = [-3.011967491973726, 2.1561305597186564], - autoRangeY = [-0.9910086301469277, 1.389382716298284]; - var setRangeX = [-3, 1], setRangeY = [-0.5, 1]; @@ -129,15 +129,6 @@ describe('Test click interactions:', function() { 'yaxis.range[1]': zoomRangeY[1] }; - beforeAll(function() { - jasmine.addMatchers(customMatchers); - }); - - beforeEach(function() { - gd = createGraphDiv(); - mockCopy = Lib.extendDeep({}, mock); - }); - function setRanges(mockCopy) { mockCopy.layout.xaxis.autorange = false; mockCopy.layout.xaxis.range = setRangeX.slice(); @@ -153,17 +144,17 @@ describe('Test click interactions:', function() { expect(gd.layout.xaxis.range).toBeCloseToArray(autoRangeX); expect(gd.layout.yaxis.range).toBeCloseToArray(autoRangeY); - Plotly.relayout(gd, update).then(function() { - expect(gd.layout.xaxis.range).toBeCloseToArray(zoomRangeX); - expect(gd.layout.yaxis.range).toBeCloseToArray(zoomRangeY); + return Plotly.relayout(gd, update); + }).then(function() { + expect(gd.layout.xaxis.range).toBeCloseToArray(zoomRangeX); + expect(gd.layout.yaxis.range).toBeCloseToArray(zoomRangeY); - return doubleClick(blankPos[0], blankPos[1]); - }).then(function() { - expect(gd.layout.xaxis.range).toBeCloseToArray(autoRangeX); - expect(gd.layout.yaxis.range).toBeCloseToArray(autoRangeY); + return doubleClick(blankPos[0], blankPos[1]); + }).then(function() { + expect(gd.layout.xaxis.range).toBeCloseToArray(autoRangeX); + expect(gd.layout.yaxis.range).toBeCloseToArray(autoRangeY); - done(); - }); + done(); }); }); From dc770e2fd43ce13050ff272650c8d5bbbf5ba4b8 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?=C3=89tienne=20T=C3=A9treault-Pinard?= Date: Tue, 29 Mar 2016 11:06:50 -0400 Subject: [PATCH 06/12] make drag values work in all window size: - large drag values resulted in failed tests in small window sizes --- test/jasmine/tests/click_test.js | 6 +++--- 1 file changed, 3 insertions(+), 3 deletions(-) diff --git a/test/jasmine/tests/click_test.js b/test/jasmine/tests/click_test.js index cdf0e1d4918..a18998d1541 100644 --- a/test/jasmine/tests/click_test.js +++ b/test/jasmine/tests/click_test.js @@ -212,10 +212,10 @@ describe('Test click interactions:', function() { expect(gd.layout.xaxis.range).toBeCloseToArray(autoRangeX); expect(gd.layout.yaxis.range).toBeCloseToArray(autoRangeY); - return drag(100, 100, 200, 200); + return drag(50, 50, 100, 100); }).then(function() { - expect(gd.layout.xaxis.range).toBeCloseToArray([-2.70624901567643, -1.9783478816352495]); - expect(gd.layout.yaxis.range).toBeCloseToArray([0.5007032802920716, 1.2941670624404753]); + expect(gd.layout.xaxis.range).toBeCloseToArray([-3.0119674, 2.156130559]); + expect(gd.layout.yaxis.range).toBeCloseToArray([-0.9910086, 1.389382716]); done(); }); From 26a2d889b516b51f3c4086ad8255ef26c0e2d7ef Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?=C3=89tienne=20T=C3=A9treault-Pinard?= Date: Tue, 29 Mar 2016 11:08:06 -0400 Subject: [PATCH 07/12] add dragbox interactions tests (for all 10 of them) --- test/jasmine/assets/get_rect_center.js | 48 +++++ test/jasmine/tests/click_test.js | 248 +++++++++++++++++++++++++ 2 files changed, 296 insertions(+) create mode 100644 test/jasmine/assets/get_rect_center.js diff --git a/test/jasmine/assets/get_rect_center.js b/test/jasmine/assets/get_rect_center.js new file mode 100644 index 00000000000..51b5df0128d --- /dev/null +++ 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 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 index a18998d1541..467338f39d3 100644 --- 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(); + }); + }); + + }); }); From 179f16218f7ff1fec31b3efdf9decd20d73d6b0d Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?=C3=89tienne=20T=C3=A9treault-Pinard?= Date: Tue, 29 Mar 2016 11:36:40 -0400 Subject: [PATCH 08/12] add zoomb and pan interaction test cases --- test/jasmine/tests/click_test.js | 48 ++++++++++++++++++++++++++++++++ 1 file changed, 48 insertions(+) diff --git a/test/jasmine/tests/click_test.js b/test/jasmine/tests/click_test.js index 467338f39d3..906bab22704 100644 --- a/test/jasmine/tests/click_test.js +++ b/test/jasmine/tests/click_test.js @@ -619,4 +619,52 @@ describe('Test click interactions:', function() { }); }); + + describe('zoom interactions', function() { + beforeEach(function(done) { + Plotly.plot(gd, mockCopy.data, mockCopy.layout).then(done); + }); + + it('on main dragbox should update the axis ranges', function(done) { + expect(gd.layout.xaxis.range).toBeCloseToArray(autoRangeX); + expect(gd.layout.yaxis.range).toBeCloseToArray(autoRangeY); + + drag(100, 100, 400, 300).then(function() { + expect(gd.layout.xaxis.range).toBeCloseToArray([-2.70624901, -0.52254561]); + expect(gd.layout.yaxis.range).toBeCloseToArray([-0.29276050, 1.294167062]); + + return drag(100, 100, 400, 300); + }).then(function() { + expect(gd.layout.xaxis.range).toBeCloseToArray([-2.57707219, -1.65438061]); + expect(gd.layout.yaxis.range).toBeCloseToArray([0.172738250, 1.230689959]); + + done(); + }); + }); + }); + + describe('pan interactions', function() { + beforeEach(function(done) { + mockCopy.layout.dragmode = 'pan'; + + Plotly.plot(gd, mockCopy.data, mockCopy.layout).then(done); + }); + + it('on main dragbox should update the axis ranges', function(done) { + expect(gd.layout.xaxis.range).toBeCloseToArray(autoRangeX); + expect(gd.layout.yaxis.range).toBeCloseToArray(autoRangeY); + + drag(100, 100, 400, 300).then(function() { + expect(gd.layout.xaxis.range).toBeCloseToArray([-5.19567089, -0.02757284]); + expect(gd.layout.yaxis.range).toBeCloseToArray([0.595918934, 2.976310280]); + + return drag(100, 100, 400, 300); + }).then(function() { + expect(gd.layout.xaxis.range).toBeCloseToArray([-7.37937429, -2.21127624]); + expect(gd.layout.yaxis.range).toBeCloseToArray([2.182846498, 4.563237844]); + + done(); + }); + }); + }); }); From 97afe67ae3c3fe39cee74f131ec3e20fa08c6024 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?=C3=89tienne=20T=C3=A9treault-Pinard?= Date: Tue, 29 Mar 2016 11:37:33 -0400 Subject: [PATCH 09/12] Revert "make drag values work in all window size:" This reverts commit dc770e2fd43ce13050ff272650c8d5bbbf5ba4b8. --- test/jasmine/tests/click_test.js | 6 +++--- 1 file changed, 3 insertions(+), 3 deletions(-) diff --git a/test/jasmine/tests/click_test.js b/test/jasmine/tests/click_test.js index 906bab22704..f82f21d26a8 100644 --- a/test/jasmine/tests/click_test.js +++ b/test/jasmine/tests/click_test.js @@ -213,10 +213,10 @@ describe('Test click interactions:', function() { expect(gd.layout.xaxis.range).toBeCloseToArray(autoRangeX); expect(gd.layout.yaxis.range).toBeCloseToArray(autoRangeY); - return drag(50, 50, 100, 100); + return drag(100, 100, 200, 200); }).then(function() { - expect(gd.layout.xaxis.range).toBeCloseToArray([-3.0119674, 2.156130559]); - expect(gd.layout.yaxis.range).toBeCloseToArray([-0.9910086, 1.389382716]); + expect(gd.layout.xaxis.range).toBeCloseToArray([-2.70624901567643, -1.9783478816352495]); + expect(gd.layout.yaxis.range).toBeCloseToArray([0.5007032802920716, 1.2941670624404753]); done(); }); From 5b27ea4f9861baa6f3cf5fed376ef4a085cd5374 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?=C3=89tienne=20T=C3=A9treault-Pinard?= Date: Tue, 29 Mar 2016 12:33:54 -0400 Subject: [PATCH 10/12] make drag delay 25% of DBLCLICKDELAY: - to speed up tests - add overwrite arg (so that double-click + drag test works) --- test/jasmine/tests/click_test.js | 6 +++--- 1 file changed, 3 insertions(+), 3 deletions(-) diff --git a/test/jasmine/tests/click_test.js b/test/jasmine/tests/click_test.js index f82f21d26a8..4105c1ade5d 100644 --- a/test/jasmine/tests/click_test.js +++ b/test/jasmine/tests/click_test.js @@ -51,7 +51,7 @@ describe('Test click interactions:', function() { }); } - function drag(fromX, fromY, toX, toY) { + function drag(fromX, fromY, toX, toY, delay) { return new Promise(function(resolve) { mouseEvent('mousemove', fromX, fromY); mouseEvent('mousedown', fromX, fromY); @@ -60,7 +60,7 @@ describe('Test click interactions:', function() { setTimeout(function() { mouseEvent('mouseup', toX, toY); resolve(); - }, DBLCLICKDELAY / 2); + }, delay || DBLCLICKDELAY / 4); }); } @@ -213,7 +213,7 @@ describe('Test click interactions:', function() { expect(gd.layout.xaxis.range).toBeCloseToArray(autoRangeX); expect(gd.layout.yaxis.range).toBeCloseToArray(autoRangeY); - return drag(100, 100, 200, 200); + return drag(100, 100, 200, 200, DBLCLICKDELAY / 2); }).then(function() { expect(gd.layout.xaxis.range).toBeCloseToArray([-2.70624901567643, -1.9783478816352495]); expect(gd.layout.yaxis.range).toBeCloseToArray([0.5007032802920716, 1.2941670624404753]); From 2ad535f4f789cc07a27d24412f848afeeceb22a8 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?=C3=89tienne=20T=C3=A9treault-Pinard?= Date: Tue, 29 Mar 2016 12:35:40 -0400 Subject: [PATCH 11/12] move test cases around --- test/jasmine/tests/click_test.js | 494 +++++++++++++++---------------- 1 file changed, 247 insertions(+), 247 deletions(-) diff --git a/test/jasmine/tests/click_test.js b/test/jasmine/tests/click_test.js index 4105c1ade5d..d70f5f16f59 100644 --- a/test/jasmine/tests/click_test.js +++ b/test/jasmine/tests/click_test.js @@ -116,6 +116,253 @@ 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(); + }); + }); + + }); + describe('double click interactions', function() { var setRangeX = [-3, 1], setRangeY = [-0.5, 1]; @@ -373,253 +620,6 @@ 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(); - }); - }); - - }); - describe('zoom interactions', function() { beforeEach(function(done) { Plotly.plot(gd, mockCopy.data, mockCopy.layout).then(done); From 5881c4bd8f8d1f3f8c9f33dbcbc09ecd3b2c5e52 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?=C3=89tienne=20T=C3=A9treault-Pinard?= Date: Tue, 29 Mar 2016 12:45:47 -0400 Subject: [PATCH 12/12] fix typo in test case description --- test/jasmine/tests/click_test.js | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/test/jasmine/tests/click_test.js b/test/jasmine/tests/click_test.js index d70f5f16f59..fe1a1e39d18 100644 --- a/test/jasmine/tests/click_test.js +++ b/test/jasmine/tests/click_test.js @@ -116,7 +116,7 @@ describe('Test click interactions:', function() { }); }); - describe('drag interations', function() { + describe('drag interactions', function() { beforeEach(function(done) { Plotly.plot(gd, mockCopy.data, mockCopy.layout).then(done); });