Skip to content

Commit 26a2d88

Browse files
etpinardetpinard
committed
add dragbox interactions tests (for all 10 of them)
1 parent dc770e2 commit 26a2d88

File tree

2 files changed

+296
-0
lines changed

2 files changed

+296
-0
lines changed

‎test/jasmine/assets/get_rect_center.js‎

Lines changed: 48 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,48 @@
1+
'use strict';
2+
3+
4+
/**
5+
* Get the screen coordinates of the center of
6+
* an SVG rectangle node.
7+
*
8+
* @param {rect} rect svg <rect> node
9+
*/
10+
module.exports = function getRectCenter(rect) {
11+
var corners = getRectScreenCoords(rect);
12+
13+
return [
14+
corners.nw.x + (corners.ne.x - corners.nw.x) / 2,
15+
corners.ne.y + (corners.se.y - corners.ne.y) / 2
16+
];
17+
};
18+
19+
// Taken from: http://stackoverflow.com/a/5835212/4068492
20+
function getRectScreenCoords(rect) {
21+
var svg = findParentSVG(rect);
22+
var pt = svg.createSVGPoint();
23+
var corners = {};
24+
var matrix = rect.getScreenCTM();
25+
26+
pt.x = rect.x.animVal.value;
27+
pt.y = rect.y.animVal.value;
28+
corners.nw = pt.matrixTransform(matrix);
29+
pt.x += rect.width.animVal.value;
30+
corners.ne = pt.matrixTransform(matrix);
31+
pt.y += rect.height.animVal.value;
32+
corners.se = pt.matrixTransform(matrix);
33+
pt.x -= rect.width.animVal.value;
34+
corners.sw = pt.matrixTransform(matrix);
35+
36+
return corners;
37+
}
38+
39+
function findParentSVG(node) {
40+
var parentNode = node.parentNode;
41+
42+
if(parentNode.tagName === 'svg') {
43+
return parentNode;
44+
}
45+
else {
46+
return findParentSVG(parentNode);
47+
}
48+
}

‎test/jasmine/tests/click_test.js‎

Lines changed: 248 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -5,6 +5,7 @@ var DBLCLICKDELAY = require('@src/plots/cartesian/constants').DBLCLICKDELAY;
55
var createGraphDiv = require('../assets/create_graph_div');
66
var destroyGraphDiv = require('../assets/destroy_graph_div');
77
var mouseEvent = require('../assets/mouse_event');
8+
var getRectCenter = require('../assets/get_rect_center');
89
var customMatchers = require('../assets/custom_matchers');
910

1011

@@ -371,4 +372,251 @@ describe('Test click interactions:', function() {
371372
});
372373

373374
});
375+
376+
describe('drag interations', function() {
377+
beforeEach(function(done) {
378+
Plotly.plot(gd, mockCopy.data, mockCopy.layout).then(done);
379+
});
380+
381+
it('on nw dragbox should update the axis ranges', function(done) {
382+
var node = document.querySelector('rect.nwdrag');
383+
var pos = getRectCenter(node);
384+
385+
expect(node.classList[0]).toBe('drag');
386+
expect(node.classList[1]).toBe('nwdrag');
387+
expect(node.classList[2]).toBe('cursor-nw-resize');
388+
389+
expect(gd.layout.xaxis.range).toBeCloseToArray(autoRangeX);
390+
expect(gd.layout.yaxis.range).toBeCloseToArray(autoRangeY);
391+
392+
drag(pos[0], pos[1], pos[0] + 10, pos[1] + 50).then(function() {
393+
expect(gd.layout.xaxis.range).toBeCloseToArray([-3.08579746, 2.156130559]);
394+
expect(gd.layout.yaxis.range).toBeCloseToArray([-0.99100863, 1.86546098]);
395+
396+
return drag(pos[0], pos[1], pos[0] - 10, pos[1] - 50);
397+
}).then(function() {
398+
expect(gd.layout.xaxis.range).toBeCloseToArray(autoRangeX);
399+
expect(gd.layout.yaxis.range).toBeCloseToArray([-0.99100863, 1.10938115]);
400+
401+
done();
402+
});
403+
});
404+
405+
it('on ne dragbox should update the axis ranges', function(done) {
406+
var node = document.querySelector('rect.nedrag');
407+
var pos = getRectCenter(node);
408+
409+
expect(node.classList[0]).toBe('drag');
410+
expect(node.classList[1]).toBe('nedrag');
411+
expect(node.classList[2]).toBe('cursor-ne-resize');
412+
413+
expect(gd.layout.xaxis.range).toBeCloseToArray(autoRangeX);
414+
expect(gd.layout.yaxis.range).toBeCloseToArray(autoRangeY);
415+
416+
drag(pos[0], pos[1], pos[0] + 50, pos[1] + 50).then(function() {
417+
expect(gd.layout.xaxis.range).toBeCloseToArray([-3.01196749, 1.72466470]);
418+
expect(gd.layout.yaxis.range).toBeCloseToArray([-0.99100863, 1.86546098]);
419+
420+
return drag(pos[0], pos[1], pos[0] - 50, pos[1] - 50);
421+
}).then(function() {
422+
expect(gd.layout.xaxis.range).toBeCloseToArray([-3.01196749, 2.08350047]);
423+
expect(gd.layout.yaxis.range).toBeCloseToArray([-0.99100863, 1.10938115]);
424+
425+
done();
426+
});
427+
});
428+
429+
it('on sw dragbox should update the axis ranges', function(done) {
430+
var node = document.querySelector('rect.swdrag');
431+
var pos = getRectCenter(node);
432+
433+
expect(node.classList[0]).toBe('drag');
434+
expect(node.classList[1]).toBe('swdrag');
435+
expect(node.classList[2]).toBe('cursor-sw-resize');
436+
437+
expect(gd.layout.xaxis.range).toBeCloseToArray(autoRangeX);
438+
expect(gd.layout.yaxis.range).toBeCloseToArray(autoRangeY);
439+
440+
drag(pos[0], pos[1], pos[0] + 10, pos[1] + 50).then(function() {
441+
expect(gd.layout.xaxis.range).toBeCloseToArray([-3.08579746, 2.15613055]);
442+
expect(gd.layout.yaxis.range).toBeCloseToArray([-0.36094210, 1.38938271]);
443+
444+
return drag(pos[0], pos[1], pos[0] - 10, pos[1] - 50);
445+
}).then(function() {
446+
expect(gd.layout.xaxis.range).toBeCloseToArray([-3.00958227, 2.15613055]);
447+
expect(gd.layout.yaxis.range).toBeCloseToArray([-0.71100706, 1.38938271]);
448+
449+
done();
450+
});
451+
});
452+
453+
it('on se dragbox should update the axis ranges', function(done) {
454+
var node = document.querySelector('rect.sedrag');
455+
var pos = getRectCenter(node);
456+
457+
expect(node.classList[0]).toBe('drag');
458+
expect(node.classList[1]).toBe('sedrag');
459+
expect(node.classList[2]).toBe('cursor-se-resize');
460+
461+
expect(gd.layout.xaxis.range).toBeCloseToArray(autoRangeX);
462+
expect(gd.layout.yaxis.range).toBeCloseToArray(autoRangeY);
463+
464+
drag(pos[0], pos[1], pos[0] + 50, pos[1] + 50).then(function() {
465+
expect(gd.layout.xaxis.range).toBeCloseToArray([-3.01196749, 1.72466470]);
466+
expect(gd.layout.yaxis.range).toBeCloseToArray([-0.36094210, 1.38938271]);
467+
468+
return drag(pos[0], pos[1], pos[0] - 50, pos[1] - 50);
469+
}).then(function() {
470+
expect(gd.layout.xaxis.range).toBeCloseToArray([-3.01196749, 2.08350047]);
471+
expect(gd.layout.yaxis.range).toBeCloseToArray([-0.71100706, 1.38938271]);
472+
473+
done();
474+
});
475+
});
476+
477+
it('on ew dragbox should update the xaxis range', function(done) {
478+
var node = document.querySelector('rect.ewdrag');
479+
var pos = getRectCenter(node);
480+
481+
expect(node.classList[0]).toBe('drag');
482+
expect(node.classList[1]).toBe('ewdrag');
483+
expect(node.classList[2]).toBe('cursor-ew-resize');
484+
485+
expect(gd.layout.xaxis.range).toBeCloseToArray(autoRangeX);
486+
expect(gd.layout.yaxis.range).toBeCloseToArray(autoRangeY);
487+
488+
drag(pos[0], pos[1], pos[0] + 50, pos[1] + 50).then(function() {
489+
expect(gd.layout.xaxis.range).toBeCloseToArray([-3.375918058, 1.792179992]);
490+
expect(gd.layout.yaxis.range).toBeCloseToArray(autoRangeY);
491+
492+
return drag(pos[0], pos[1], pos[0] - 50, pos[1] - 50);
493+
}).then(function() {
494+
expect(gd.layout.xaxis.range).toBeCloseToArray([-3.01196749, 2.15613055]);
495+
expect(gd.layout.yaxis.range).toBeCloseToArray(autoRangeY);
496+
497+
done();
498+
});
499+
});
500+
501+
it('on w dragbox should update the xaxis range', function(done) {
502+
var node = document.querySelector('rect.wdrag');
503+
var pos = getRectCenter(node);
504+
505+
expect(node.classList[0]).toBe('drag');
506+
expect(node.classList[1]).toBe('wdrag');
507+
expect(node.classList[2]).toBe('cursor-w-resize');
508+
509+
expect(gd.layout.xaxis.range).toBeCloseToArray(autoRangeX);
510+
expect(gd.layout.yaxis.range).toBeCloseToArray(autoRangeY);
511+
512+
drag(pos[0], pos[1], pos[0] + 50, pos[1] + 50).then(function() {
513+
expect(gd.layout.xaxis.range).toBeCloseToArray([-3.40349007, 2.15613055]);
514+
expect(gd.layout.yaxis.range).toBeCloseToArray(autoRangeY);
515+
516+
return drag(pos[0], pos[1], pos[0] - 50, pos[1] - 50);
517+
}).then(function() {
518+
expect(gd.layout.xaxis.range).toBeCloseToArray([-2.93933740, 2.15613055]);
519+
expect(gd.layout.yaxis.range).toBeCloseToArray(autoRangeY);
520+
521+
done();
522+
});
523+
});
524+
525+
it('on e dragbox should update the xaxis range', function(done) {
526+
var node = document.querySelector('rect.edrag');
527+
var pos = getRectCenter(node);
528+
529+
expect(node.classList[0]).toBe('drag');
530+
expect(node.classList[1]).toBe('edrag');
531+
expect(node.classList[2]).toBe('cursor-e-resize');
532+
533+
expect(gd.layout.xaxis.range).toBeCloseToArray(autoRangeX);
534+
expect(gd.layout.yaxis.range).toBeCloseToArray(autoRangeY);
535+
536+
drag(pos[0], pos[1], pos[0] + 50, pos[1] + 50).then(function() {
537+
expect(gd.layout.xaxis.range).toBeCloseToArray([-3.01196749, 1.7246647]);
538+
expect(gd.layout.yaxis.range).toBeCloseToArray(autoRangeY);
539+
540+
return drag(pos[0], pos[1], pos[0] - 50, pos[1] - 50);
541+
}).then(function() {
542+
expect(gd.layout.xaxis.range).toBeCloseToArray([-3.01196749, 2.0835004]);
543+
expect(gd.layout.yaxis.range).toBeCloseToArray(autoRangeY);
544+
545+
done();
546+
});
547+
});
548+
549+
it('on ns dragbox should update the yaxis range', function(done) {
550+
var node = document.querySelector('rect.nsdrag');
551+
var pos = getRectCenter(node);
552+
553+
expect(node.classList[0]).toBe('drag');
554+
expect(node.classList[1]).toBe('nsdrag');
555+
expect(node.classList[2]).toBe('cursor-ns-resize');
556+
557+
expect(gd.layout.xaxis.range).toBeCloseToArray(autoRangeX);
558+
expect(gd.layout.yaxis.range).toBeCloseToArray(autoRangeY);
559+
560+
drag(pos[0], pos[1], pos[0] + 10, pos[1] + 50).then(function() {
561+
expect(gd.layout.xaxis.range).toBeCloseToArray(autoRangeX);
562+
expect(gd.layout.yaxis.range).toBeCloseToArray([-0.59427673, 1.78611460]);
563+
564+
return drag(pos[0], pos[1], pos[0] - 10, pos[1] - 50);
565+
}).then(function() {
566+
expect(gd.layout.xaxis.range).toBeCloseToArray(autoRangeX);
567+
expect(gd.layout.yaxis.range).toBeCloseToArray(autoRangeY);
568+
569+
done();
570+
});
571+
});
572+
573+
it('on s dragbox should update the yaxis range', function(done) {
574+
var node = document.querySelector('rect.sdrag');
575+
var pos = getRectCenter(node);
576+
577+
expect(node.classList[0]).toBe('drag');
578+
expect(node.classList[1]).toBe('sdrag');
579+
expect(node.classList[2]).toBe('cursor-s-resize');
580+
581+
expect(gd.layout.xaxis.range).toBeCloseToArray(autoRangeX);
582+
expect(gd.layout.yaxis.range).toBeCloseToArray(autoRangeY);
583+
584+
drag(pos[0], pos[1], pos[0] + 10, pos[1] + 50).then(function() {
585+
expect(gd.layout.xaxis.range).toBeCloseToArray(autoRangeX);
586+
expect(gd.layout.yaxis.range).toBeCloseToArray([-0.3609421011, 1.3893827]);
587+
588+
return drag(pos[0], pos[1], pos[0] - 10, pos[1] - 50);
589+
}).then(function() {
590+
expect(gd.layout.xaxis.range).toBeCloseToArray(autoRangeX);
591+
expect(gd.layout.yaxis.range).toBeCloseToArray([-0.7110070646, 1.3893827]);
592+
593+
done();
594+
});
595+
});
596+
597+
it('on n dragbox should update the yaxis range', function(done) {
598+
var node = document.querySelector('rect.ndrag');
599+
var pos = getRectCenter(node);
600+
601+
expect(node.classList[0]).toBe('drag');
602+
expect(node.classList[1]).toBe('ndrag');
603+
expect(node.classList[2]).toBe('cursor-n-resize');
604+
605+
expect(gd.layout.xaxis.range).toBeCloseToArray(autoRangeX);
606+
expect(gd.layout.yaxis.range).toBeCloseToArray(autoRangeY);
607+
608+
drag(pos[0], pos[1], pos[0] + 10, pos[1] + 50).then(function() {
609+
expect(gd.layout.xaxis.range).toBeCloseToArray(autoRangeX);
610+
expect(gd.layout.yaxis.range).toBeCloseToArray([-0.991008630, 1.86546098]);
611+
612+
return drag(pos[0], pos[1], pos[0] - 10, pos[1] - 50);
613+
}).then(function() {
614+
expect(gd.layout.xaxis.range).toBeCloseToArray(autoRangeX);
615+
expect(gd.layout.yaxis.range).toBeCloseToArray([-0.991008630, 1.10938115]);
616+
617+
done();
618+
});
619+
});
620+
621+
});
374622
});

0 commit comments

Comments
 (0)