Skip to content

Commit ca1de5d

Browse files
etpinardetpinard
committed
DRY-up drag-start/assert/drag-end tests
1 parent e962e96 commit ca1de5d

File tree

3 files changed

+108
-142
lines changed

3 files changed

+108
-142
lines changed

‎test/jasmine/assets/drag.js

+48-21
Original file line numberDiff line numberDiff line change
@@ -2,37 +2,63 @@ var isNumeric = require('fast-isnumeric');
22
var mouseEvent = require('./mouse_event');
33
var getNodeCoords = require('./get_node_coords');
44

5-
/*
6-
* drag: grab a node and drag it (dx, dy) pixels
7-
* optionally specify an edge ('n', 'se', 'w' etc)
8-
* to grab it by an edge or corner (otherwise the middle is used)
9-
*/
10-
function drag(node, dx, dy, edge, x0, y0, nsteps, noCover) {
11-
nsteps = nsteps || 1;
5+
function makeFns(node, dx, dy, opts) {
6+
opts = opts || {};
7+
8+
var nsteps = opts.nsteps || 1;
9+
var edge = opts.edge || '';
10+
var noCover = Boolean(opts.noCover);
1211

1312
var coords = getNodeCoords(node, edge);
14-
var fromX = isNumeric(x0) ? x0 : coords.x;
15-
var fromY = isNumeric(y0) ? y0 : coords.y;
13+
var fromX = isNumeric(opts.x0) ? opts.x0 : coords.x;
14+
var fromY = isNumeric(opts.y0) ? opts.y0 : coords.y;
1615

17-
mouseEvent('mousemove', fromX, fromY, {element: node});
18-
mouseEvent('mousedown', fromX, fromY, {element: node});
16+
var dragCoverNode;
17+
var toX;
18+
var toY;
1919

20-
var promise = (noCover ? Promise.resolve(node) : waitForDragCover())
21-
.then(function(dragCoverNode) {
22-
var toX;
23-
var toY;
20+
function start() {
21+
mouseEvent('mousemove', fromX, fromY, {element: node});
22+
mouseEvent('mousedown', fromX, fromY, {element: node});
2423

25-
for(var i = 1; i <= nsteps; i++) {
26-
toX = fromX + i * dx / nsteps;
27-
toY = fromY + i * dy / nsteps;
28-
mouseEvent('mousemove', toX, toY, {element: dragCoverNode});
29-
}
24+
return (noCover ? Promise.resolve(node) : waitForDragCover())
25+
.then(function(_dragCoverNode) {
26+
dragCoverNode = _dragCoverNode;
27+
28+
for(var i = 1; i <= nsteps; i++) {
29+
toX = fromX + i * dx / nsteps;
30+
toY = fromY + i * dy / nsteps;
31+
mouseEvent('mousemove', toX, toY, {element: dragCoverNode});
32+
}
33+
});
34+
}
3035

36+
function end() {
3137
mouseEvent('mouseup', toX, toY, {element: dragCoverNode});
3238
return noCover || waitForDragCoverRemoval();
39+
}
40+
41+
return {
42+
start: start,
43+
end: end
44+
};
45+
}
46+
47+
/*
48+
* drag: grab a node and drag it (dx, dy) pixels
49+
* optionally specify an edge ('n', 'se', 'w' etc)
50+
* to grab it by an edge or corner (otherwise the middle is used)
51+
*/
52+
function drag(node, dx, dy, edge, x0, y0, nsteps, noCover) {
53+
var fns = makeFns(node, dx, dy, {
54+
edge: edge,
55+
x0: x0,
56+
y0: y0,
57+
nsteps: nsteps,
58+
noCover: noCover
3359
});
3460

35-
return promise;
61+
return fns.start().then(fns.end);
3662
}
3763

3864
function waitForDragCover() {
@@ -78,5 +104,6 @@ function waitForDragCoverRemoval() {
78104
}
79105

80106
module.exports = drag;
107+
drag.makeFns = makeFns;
81108
drag.waitForDragCover = waitForDragCover;
82109
drag.waitForDragCoverRemoval = waitForDragCoverRemoval;

‎test/jasmine/tests/cartesian_interact_test.js

+36-69
Original file line numberDiff line numberDiff line change
@@ -314,6 +314,11 @@ describe('axis zoom/pan and main plot zoom', function() {
314314
};
315315
}
316316

317+
function makeDragFns(subplot, directions, dx, dy, x0, y0) {
318+
var dragger = getDragger(subplot, directions);
319+
return drag.makeFns(dragger, dx, dy, {x0: x0, y0: y0});
320+
}
321+
317322
describe('subplots with shared axes', function() {
318323
var initialRange = [0, 2];
319324
var autoRange = [-0.1594, 2.1594];
@@ -577,67 +582,46 @@ describe('axis zoom/pan and main plot zoom', function() {
577582
});
578583

579584
it('should draw correct zoomboxes corners', function(done) {
580-
var dragCoverNode;
581-
var p1;
582-
583-
function _dragStart(p0, dp) {
584-
var node = getDragger('xy', 'nsew');
585-
mouseEvent('mousemove', p0[0], p0[1], {element: node});
586-
mouseEvent('mousedown', p0[0], p0[1], {element: node});
587-
588-
var promise = drag.waitForDragCover().then(function(dcn) {
589-
dragCoverNode = dcn;
590-
p1 = [p0[0] + dp[0], p0[1] + dp[1]];
591-
mouseEvent('mousemove', p1[0], p1[1], {element: dragCoverNode});
592-
});
593-
return promise;
594-
}
595-
596-
function _assertAndDragEnd(msg, exp) {
597-
var zl = d3.select(gd).select('g.zoomlayer');
598-
var d = zl.select('.zoombox-corners').attr('d');
599-
600-
if(exp.cornerCnt) {
601-
var actual = (d.match(/Z/g) || []).length;
602-
expect(actual).toBe(exp.cornerCnt, 'zoombox corner cnt: ' + msg);
603-
} else {
604-
expect(d).toBe('M0,0Z', 'no zoombox corners: ' + msg);
605-
}
606-
607-
mouseEvent('mouseup', p1[0], p1[1], {element: dragCoverNode});
608-
return drag.waitForDragCoverRemoval();
585+
function _run(msg, dp, exp) {
586+
var drag = makeDragFns('xy', 'nsew', dp[0], dp[1], 170, 170);
587+
588+
return drag.start().then(function() {
589+
var zl = d3.select(gd).select('g.zoomlayer');
590+
var d = zl.select('.zoombox-corners').attr('d');
591+
592+
if(exp.cornerCnt) {
593+
var actual = (d.match(/Z/g) || []).length;
594+
expect(actual).toBe(exp.cornerCnt, 'zoombox corner cnt: ' + msg);
595+
} else {
596+
expect(d).toBe('M0,0Z', 'no zoombox corners: ' + msg);
597+
}
598+
})
599+
.then(drag.end);
609600
}
610601

611602
Plotly.plot(gd, [{ y: [1, 2, 1] }])
612-
.then(function() { return _dragStart([170, 170], [30, 30]); })
613603
.then(function() {
614-
return _assertAndDragEnd('full-x full-y', {cornerCnt: 4});
604+
return _run('full-x full-y', [30, 30], {cornerCnt: 4});
615605
})
616-
.then(function() { return _dragStart([170, 170], [5, 30]); })
617606
.then(function() {
618-
return _assertAndDragEnd('full-y', {cornerCnt: 2});
607+
return _run('full-y', [5, 30], {cornerCnt: 2});
619608
})
620-
.then(function() { return _dragStart([170, 170], [30, 2]); })
621609
.then(function() {
622-
return _assertAndDragEnd('full-x', {cornerCnt: 2});
610+
return _run('full-x', [30, 2], {cornerCnt: 2});
623611
})
624612
.then(function() { return Plotly.relayout(gd, 'xaxis.fixedrange', true); })
625-
.then(function() { return _dragStart([170, 170], [30, 30]); })
626613
.then(function() {
627-
return _assertAndDragEnd('full-x full-y w/ fixed xaxis', {cornerCnt: 2});
614+
return _run('full-x full-y w/ fixed xaxis', [30, 30], {cornerCnt: 2});
628615
})
629-
.then(function() { return _dragStart([170, 170], [30, 5]); })
630616
.then(function() {
631-
return _assertAndDragEnd('full-x w/ fixed xaxis', {cornerCnt: 0});
617+
return _run('full-x w/ fixed xaxis', [30, 5], {cornerCnt: 0});
632618
})
633619
.then(function() { return Plotly.relayout(gd, {'xaxis.fixedrange': false, 'yaxis.fixedrange': true}); })
634-
.then(function() { return _dragStart([170, 170], [30, 30]); })
635620
.then(function() {
636-
return _assertAndDragEnd('full-x full-y w/ fixed yaxis', {cornerCnt: 2});
621+
return _run('full-x full-y w/ fixed yaxis', [30, 30], {cornerCnt: 2});
637622
})
638-
.then(function() { return _dragStart([170, 170], [5, 30]); })
639623
.then(function() {
640-
return _assertAndDragEnd('full-y w/ fixed yaxis', {cornerCnt: 0});
624+
return _run('full-y w/ fixed yaxis', [5, 30], {cornerCnt: 0});
641625
})
642626
.catch(failTest)
643627
.then(done);
@@ -665,28 +649,6 @@ describe('axis zoom/pan and main plot zoom', function() {
665649
it('should compute correct multicategory tick label span during drag', function(done) {
666650
var fig = Lib.extendDeep({}, require('@mocks/multicategory.json'));
667651

668-
var dragCoverNode;
669-
var p1;
670-
671-
function _dragStart(draggerClassName, p0, dp) {
672-
var node = getDragger('xy', draggerClassName);
673-
mouseEvent('mousemove', p0[0], p0[1], {element: node});
674-
mouseEvent('mousedown', p0[0], p0[1], {element: node});
675-
676-
var promise = drag.waitForDragCover().then(function(dcn) {
677-
dragCoverNode = dcn;
678-
p1 = [p0[0] + dp[0], p0[1] + dp[1]];
679-
mouseEvent('mousemove', p1[0], p1[1], {element: dragCoverNode});
680-
});
681-
return promise;
682-
}
683-
684-
function _assertAndDragEnd(msg, exp) {
685-
_assertLabels(msg, exp);
686-
mouseEvent('mouseup', p1[0], p1[1], {element: dragCoverNode});
687-
return drag.waitForDragCoverRemoval();
688-
}
689-
690652
function _assertLabels(msg, exp) {
691653
var tickLabels = d3.select(gd).selectAll('.xtick > text');
692654
expect(tickLabels.size()).toBe(exp.angle.length, msg + ' - # of tick labels');
@@ -708,23 +670,28 @@ describe('axis zoom/pan and main plot zoom', function() {
708670
});
709671
}
710672

673+
function _run(msg, dp, exp) {
674+
var drag = makeDragFns('xy', 'e', dp[0], dp[1], 585, 390);
675+
return drag.start()
676+
.then(function() { _assertLabels(msg, exp); })
677+
.then(drag.end);
678+
}
679+
711680
Plotly.plot(gd, fig)
712681
.then(function() {
713682
_assertLabels('base', {
714683
angle: [0, 0, 0, 0, 0, 0, 0],
715684
y: [406, 406]
716685
});
717686
})
718-
.then(function() { return _dragStart('edrag', [585, 390], [-340, 0]); })
719687
.then(function() {
720-
return _assertAndDragEnd('drag to wide-range -> rotates labels', {
688+
return _run('drag to wide-range -> rotates labels', [-340, 0], {
721689
angle: [90, 90, 90, 90, 90, 90, 90],
722690
y: [430, 430]
723691
});
724692
})
725-
.then(function() { return _dragStart('edrag', [585, 390], [100, 0]); })
726693
.then(function() {
727-
return _assertAndDragEnd('drag to narrow-range -> un-rotates labels', {
694+
return _run('drag to narrow-range -> un-rotates labels', [100, 0], {
728695
angle: [0, 0, 0, 0, 0, 0, 0],
729696
y: [406, 406]
730697
});

‎test/jasmine/tests/polar_test.js

+24-52
Original file line numberDiff line numberDiff line change
@@ -1300,8 +1300,6 @@ describe('Test polar *gridshape linear* interactions', function() {
13001300
it('should rotate all non-symmetrical layers on angular drag', function(done) {
13011301
var evtCnt = 0;
13021302
var evtData = {};
1303-
var dragCoverNode;
1304-
var p1;
13051303

13061304
var layersRotateFromZero = ['.plotbg > path', '.radial-grid'];
13071305
var layersRotateFromRadialAxis = ['.radial-axis', '.radial-line > line'];
@@ -1317,29 +1315,19 @@ describe('Test polar *gridshape linear* interactions', function() {
13171315
}
13181316
}
13191317

1320-
function _dragStart(p0, dp) {
1318+
function _run(msg, p0, dp, exp) {
13211319
var node = d3.select('.polar > .draglayer > .angulardrag').node();
1322-
mouseEvent('mousemove', p0[0], p0[1], {element: node});
1323-
mouseEvent('mousedown', p0[0], p0[1], {element: node});
1320+
var dragFns = drag.makeFns(node, dp[0], dp[1], {x0: p0[0], y0: p0[1]});
13241321

1325-
var promise = drag.waitForDragCover().then(function(dcn) {
1326-
dragCoverNode = dcn;
1327-
p1 = [p0[0] + dp[0], p0[1] + dp[1]];
1328-
mouseEvent('mousemove', p1[0], p1[1], {element: dragCoverNode});
1329-
});
1330-
return promise;
1331-
}
1332-
1333-
function _assertAndDragEnd(msg, exp) {
1334-
layersRotateFromZero.forEach(function(q) {
1335-
_assertTransformRotate(msg, q, exp.fromZero);
1336-
});
1337-
layersRotateFromRadialAxis.forEach(function(q) {
1338-
_assertTransformRotate(msg, q, exp.fromRadialAxis);
1339-
});
1340-
1341-
mouseEvent('mouseup', p1[0], p1[1], {element: dragCoverNode});
1342-
return drag.waitForDragCoverRemoval();
1322+
return dragFns.start().then(function() {
1323+
layersRotateFromZero.forEach(function(q) {
1324+
_assertTransformRotate(msg, q, exp.fromZero);
1325+
});
1326+
layersRotateFromRadialAxis.forEach(function(q) {
1327+
_assertTransformRotate(msg, q, exp.fromRadialAxis);
1328+
});
1329+
})
1330+
.then(dragFns.end);
13431331
}
13441332

13451333
Plotly.plot(gd, [{
@@ -1370,9 +1358,8 @@ describe('Test polar *gridshape linear* interactions', function() {
13701358
_assertTransformRotate('base', q, -90);
13711359
});
13721360
})
1373-
.then(function() { return _dragStart([150, 20], [30, 30]); })
13741361
.then(function() {
1375-
return _assertAndDragEnd('rotate clockwise', {
1362+
return _run('rotate clockwise', [150, 20], [30, 30], {
13761363
fromZero: 7.2,
13771364
fromRadialAxis: -82.8
13781365
});
@@ -1390,9 +1377,6 @@ describe('Test polar *gridshape linear* interactions', function() {
13901377
});
13911378

13921379
it('should place zoombox handles at correct place on main drag', function(done) {
1393-
var dragCoverNode;
1394-
var p1;
1395-
13961380
// d attr to array of segment [x,y]
13971381
function path2coords(path) {
13981382
if(!path.size()) return [[]];
@@ -1407,29 +1391,19 @@ describe('Test polar *gridshape linear* interactions', function() {
14071391
.reduce(function(a, b) { return a.concat(b); });
14081392
}
14091393

1410-
function _dragStart(p0, dp) {
1394+
function _run(msg, p0, dp, exp) {
14111395
var node = d3.select('.polar > .draglayer > .maindrag').node();
1412-
mouseEvent('mousemove', p0[0], p0[1], {element: node});
1413-
mouseEvent('mousedown', p0[0], p0[1], {element: node});
1414-
1415-
var promise = drag.waitForDragCover().then(function(dcn) {
1416-
dragCoverNode = dcn;
1417-
p1 = [p0[0] + dp[0], p0[1] + dp[1]];
1418-
mouseEvent('mousemove', p1[0], p1[1], {element: dragCoverNode});
1419-
});
1420-
return promise;
1421-
}
1396+
var dragFns = drag.makeFns(node, dp[0], dp[1], {x0: p0[0], y0: p0[1]});
14221397

1423-
function _assertAndDragEnd(msg, exp) {
1424-
var zl = d3.select(gd).select('g.zoomlayer');
1398+
return dragFns.start().then(function() {
1399+
var zl = d3.select(gd).select('g.zoomlayer');
14251400

1426-
expect(path2coords(zl.select('.zoombox')))
1427-
.toBeCloseTo2DArray(exp.zoombox, 2, msg + ' - zoombox');
1428-
expect(path2coords(zl.select('.zoombox-corners')))
1429-
.toBeCloseTo2DArray(exp.corners, 2, msg + ' - corners');
1430-
1431-
mouseEvent('mouseup', p1[0], p1[1], {element: dragCoverNode});
1432-
return drag.waitForDragCoverRemoval();
1401+
expect(path2coords(zl.select('.zoombox')))
1402+
.toBeCloseTo2DArray(exp.zoombox, 2, msg + ' - zoombox');
1403+
expect(path2coords(zl.select('.zoombox-corners')))
1404+
.toBeCloseTo2DArray(exp.corners, 2, msg + ' - corners');
1405+
})
1406+
.then(dragFns.end);
14331407
}
14341408

14351409
Plotly.plot(gd, [{
@@ -1445,9 +1419,8 @@ describe('Test polar *gridshape linear* interactions', function() {
14451419
height: 400,
14461420
margin: {l: 50, t: 50, b: 50, r: 50}
14471421
})
1448-
.then(function() { return _dragStart([170, 170], [220, 220]); })
14491422
.then(function() {
1450-
_assertAndDragEnd('drag outward toward bottom right', {
1423+
return _run('drag outward toward bottom right', [170, 170], [220, 220], {
14511424
zoombox: [
14521425
[-142.658, -46.353], [-88.167, 121.352],
14531426
[88.167, 121.352], [142.658, -46.352],
@@ -1470,9 +1443,8 @@ describe('Test polar *gridshape linear* interactions', function() {
14701443
.then(function() {
14711444
return Plotly.relayout(gd, 'polar.sector', [-90, 90]);
14721445
})
1473-
.then(function() { return _dragStart([200, 200], [200, 230]); })
14741446
.then(function() {
1475-
_assertAndDragEnd('half-sector, drag outward', {
1447+
return _run('half-sector, drag outward', [200, 200], [200, 230], {
14761448
zoombox: [
14771449
[0, 121.352], [88.167, 121.352],
14781450
[142.658, -46.352], [0, -150],

0 commit comments

Comments
 (0)