Skip to content

Commit f5b2902

Browse files
etpinardetpinard
committed
add more scattergl in/out selection tests
... locking down fixes for: - #3740 - #2958
1 parent fedd8b0 commit f5b2902

File tree

1 file changed

+251
-80
lines changed

1 file changed

+251
-80
lines changed

‎test/jasmine/tests/gl2d_double_click_test.js‎

Lines changed: 251 additions & 80 deletions
Original file line numberDiff line numberDiff line change
@@ -422,13 +422,15 @@ describe('Test gl2d lasso/select:', function() {
422422
.then(done);
423423
});
424424

425-
it('@gl should behave correctly during select+doubleclick+pan scenarios', function(done) {
426-
gd = createGraphDiv();
427-
428-
// See https://github.com/plotly/plotly.js/issues/2767
425+
function grabScene() {
426+
return gd.calcdata[0][0].t._scene;
427+
}
429428

430-
function grabScene() {
431-
return gd.calcdata[0][0].t._scene;
429+
describe('select+doubleclick+pan scenarios:', function() {
430+
function init() {
431+
var scene = grabScene();
432+
spyOn(scene.scatter2d, 'update').and.callThrough();
433+
spyOn(scene.scatter2d, 'draw').and.callThrough();
432434
}
433435

434436
function _assert(msg, exp) {
@@ -486,11 +488,229 @@ describe('Test gl2d lasso/select:', function() {
486488
scene.scatter2d.draw.calls.reset();
487489
}
488490

491+
it('@gl should behave correctly during select -> doubleclick -> pan:', function(done) {
492+
gd = createGraphDiv();
493+
494+
// See https://github.com/plotly/plotly.js/issues/2767
495+
496+
Plotly.newPlot(gd, [{
497+
type: 'scattergl',
498+
mode: 'markers',
499+
y: [1, 2, 1],
500+
marker: {size: 30}
501+
}], {
502+
dragmode: 'select',
503+
margin: {t: 0, b: 0, l: 0, r: 0},
504+
width: 500,
505+
height: 500
506+
})
507+
.then(delay(20))
508+
.then(init)
509+
.then(function() {
510+
_assert('base', {
511+
selectBatch: [[]],
512+
unselectBatch: [[]],
513+
updateArgs: [],
514+
drawArgs: []
515+
});
516+
})
517+
.then(function() { return select([[20, 20], [480, 250]]); })
518+
.then(function() {
519+
var scene = grabScene();
520+
_assert('after select', {
521+
selectBatch: [[1]],
522+
unselectBatch: [[0, 2]],
523+
updateArgs: [
524+
// N.B. scatter2d now draws unselected options
525+
scene.markerUnselectedOptions,
526+
],
527+
drawArgs: [
528+
// draw unselectBatch
529+
[scene.unselectBatch]
530+
]
531+
});
532+
})
533+
.then(function() { return doubleClick(250, 250); })
534+
.then(function() {
535+
var scene = grabScene();
536+
_assert('after doubleclick', {
537+
selectBatch: [[]],
538+
unselectBatch: [[]],
539+
updateArgs: [
540+
// N.B. bring scatter2d back to 'base' marker options
541+
[scene.markerOptions[0]]
542+
],
543+
drawArgs: [
544+
// call data[0] batch
545+
[0]
546+
]
547+
});
548+
})
549+
.then(function() { return Plotly.relayout(gd, 'dragmode', 'pan'); })
550+
.then(function() {
551+
_assert('after relayout to *pan*', {
552+
selectBatch: [[]],
553+
unselectBatch: [[]],
554+
// nothing to do when relayouting to 'pan'
555+
updateArgs: [],
556+
drawArgs: []
557+
});
558+
})
559+
.then(function() { return drag([[200, 200], [250, 250]]); })
560+
.then(function() {
561+
var scene = grabScene();
562+
_assert('after pan', {
563+
selectBatch: [[]],
564+
unselectBatch: [[]],
565+
// drag triggers:
566+
// - 2 scene.update() calls, which each invoke
567+
// + 1 scatter2d.update (updating viewport)
568+
// + 1 scatter2d.draw (same as after double-click)
569+
//
570+
// replot on mouseup triggers:
571+
// - 1 scatter2d.update resetting markerOptions
572+
// - 1 scatter2d.update updating viewport
573+
// - 1 (full) scene.draw()
574+
updateArgs: [
575+
['range'],
576+
['range'],
577+
// N.B. bring scatter2d back to 'base' marker options
578+
[scene.markerOptions],
579+
['range']
580+
],
581+
drawArgs: [
582+
// call data[0] batch
583+
[0],
584+
[0],
585+
[0]
586+
]
587+
});
588+
})
589+
.catch(failTest)
590+
.then(done);
591+
});
592+
593+
it('@gl should behave correctly when doubleclick before selecting anything', function(done) {
594+
gd = createGraphDiv();
595+
596+
Plotly.newPlot(gd, [{
597+
type: 'scattergl',
598+
mode: 'markers',
599+
y: [1, 2, 1],
600+
marker: {size: 30}
601+
}], {
602+
dragmode: 'select',
603+
margin: {t: 0, b: 0, l: 0, r: 0},
604+
width: 500,
605+
height: 500
606+
})
607+
.then(delay(20))
608+
.then(init)
609+
.then(function() { return doubleClick(250, 250); })
610+
.then(function() {
611+
var scene = grabScene();
612+
_assert('after doublclick', {
613+
selectBatch: [[]],
614+
unselectBatch: [[]],
615+
updateArgs: [
616+
// N.B. bring scatter2d back to 'base' marker options
617+
[scene.markerOptions[0]]
618+
],
619+
drawArgs: [
620+
// call data[0] batch
621+
[0]
622+
]
623+
});
624+
})
625+
.catch(failTest)
626+
.then(done);
627+
});
628+
629+
it('@gl should behave correctly during select -> doubleclick -> dragmode:mode -> dragmode:select', function(done) {
630+
gd = createGraphDiv();
631+
632+
// https://github.com/plotly/plotly.js/issues/2958
633+
634+
Plotly.newPlot(gd, [{
635+
type: 'scattergl',
636+
mode: 'markers',
637+
y: [1, 2, 1],
638+
marker: {size: 30}
639+
}], {
640+
dragmode: 'select',
641+
margin: {t: 0, b: 0, l: 0, r: 0},
642+
width: 500,
643+
height: 500
644+
})
645+
.then(delay(20))
646+
.then(init)
647+
.then(function() {
648+
_assert('base', {
649+
selectBatch: [[]],
650+
unselectBatch: [[]],
651+
updateArgs: [],
652+
drawArgs: []
653+
});
654+
})
655+
.then(function() { return select([[20, 20], [480, 250]]); })
656+
.then(function() { return doubleClick(250, 250); })
657+
.then(function() { return Plotly.relayout(gd, 'dragmode', 'pan'); })
658+
.then(function() { return Plotly.relayout(gd, 'dragmode', 'select'); })
659+
.then(function() {
660+
var scene = grabScene();
661+
_assert('after', {
662+
selectBatch: [[]],
663+
unselectBatch: [[]],
664+
updateArgs: [
665+
scene.markerUnselectedOptions,
666+
[scene.markerOptions[0]],
667+
[[{}]],
668+
['range']
669+
],
670+
drawArgs: [
671+
[[[0, 2]]],
672+
[0],
673+
[0]
674+
]
675+
});
676+
})
677+
.catch(failTest)
678+
.then(done);
679+
});
680+
});
681+
682+
it('@gl should draw parts in correct order during selections', function(done) {
683+
gd = createGraphDiv();
684+
685+
// https://github.com/plotly/plotly.js/issues/3740
686+
687+
var tracker = [];
688+
689+
function _assert(msg, exp) {
690+
expect(tracker.length).toBe(exp.length, msg + ' same # of sub-draw calls');
691+
692+
tracker.forEach(function(d, i) {
693+
var expi = exp[i];
694+
expect(d[0]).toBe(expi[0], msg + ' ' + i + 'th sub-draw call');
695+
696+
expect(d[1].length).toBe(expi[1].length, msg + ' same # of sub-draw args|' + i + 'th call');
697+
expi[1].forEach(function(e, j) {
698+
expect(d[1][j]).toEqual(e, ['arg', j, msg + ' in call', i].join(' '));
699+
});
700+
});
701+
702+
tracker = [];
703+
}
704+
489705
Plotly.newPlot(gd, [{
490706
type: 'scattergl',
491707
mode: 'markers',
492708
y: [1, 2, 1],
493709
marker: {size: 30}
710+
}, {
711+
type: 'scattergl',
712+
mode: 'lines',
713+
y: [1, 2, 1]
494714
}], {
495715
dragmode: 'select',
496716
margin: {t: 0, b: 0, l: 0, r: 0},
@@ -500,88 +720,39 @@ describe('Test gl2d lasso/select:', function() {
500720
.then(delay(20))
501721
.then(function() {
502722
var scene = grabScene();
503-
spyOn(scene.scatter2d, 'update').and.callThrough();
504-
spyOn(scene.scatter2d, 'draw').and.callThrough();
505-
})
506-
.then(function() {
507-
_assert('base', {
508-
selectBatch: [[]],
509-
unselectBatch: [[]],
510-
updateArgs: [],
511-
drawArgs: []
723+
spyOn(scene.scatter2d, 'draw').and.callFake(function() {
724+
tracker.push(['scatter2d', arguments]);
512725
});
513-
})
514-
.then(function() { return select([[20, 20], [480, 250]]); })
515-
.then(function() {
516-
var scene = grabScene();
517-
_assert('after select', {
518-
selectBatch: [[1]],
519-
unselectBatch: [[0, 2]],
520-
updateArgs: [
521-
// N.B. scatter2d now draws unselected options
522-
scene.markerUnselectedOptions,
523-
],
524-
drawArgs: [
525-
// draw unselectBatch
526-
[scene.unselectBatch]
527-
]
726+
spyOn(scene.line2d, 'draw').and.callFake(function() {
727+
tracker.push(['line2d', arguments]);
728+
});
729+
spyOn(scene.select2d, 'draw').and.callFake(function() {
730+
tracker.push(['select2d', arguments]);
528731
});
529732
})
530-
.then(function() { return doubleClick(250, 250); })
733+
.then(function() { return Plotly.relayout(gd, 'xaxis.range', [0, 4]); })
531734
.then(function() {
532-
var scene = grabScene();
533-
_assert('after doubleclick', {
534-
selectBatch: [[]],
535-
unselectBatch: [[]],
536-
updateArgs: [
537-
// N.B. bring scatter2d back to 'base' marker options
538-
[scene.markerOptions[0]]
539-
],
540-
drawArgs: [
541-
// call data[0] batch
542-
[0]
543-
]
544-
});
735+
_assert('base', [
736+
['scatter2d', [0]],
737+
['line2d', [1]],
738+
['select2d', [[[], []]]]
739+
]);
545740
})
546-
.then(function() { return Plotly.relayout(gd, 'dragmode', 'pan'); })
741+
.then(function() { return select([[20, 20], [480, 250]]); })
547742
.then(function() {
548-
_assert('after relayout to *pan*', {
549-
selectBatch: [[]],
550-
unselectBatch: [[]],
551-
// nothing to do when relayouting to 'pan'
552-
updateArgs: [],
553-
drawArgs: []
554-
});
743+
_assert('on selection', [
744+
['scatter2d', [[[0, 2], []]]],
745+
['line2d', [1]],
746+
['select2d', [[[1], []]]]
747+
]);
555748
})
556-
.then(function() { return drag([[200, 200], [250, 250]]); })
749+
.then(function() { return doubleClick(250, 250); })
557750
.then(function() {
558-
var scene = grabScene();
559-
_assert('after pan', {
560-
selectBatch: [[]],
561-
unselectBatch: [[]],
562-
// drag triggers:
563-
// - 2 scene.update() calls, which each invoke
564-
// + 1 scatter2d.update (updating viewport)
565-
// + 1 scatter2d.draw (same as after double-click)
566-
//
567-
// replot on mouseup triggers:
568-
// - 1 scatter2d.update resetting markerOptions
569-
// - 1 scatter2d.update updating viewport
570-
// - 1 (full) scene.draw()
571-
updateArgs: [
572-
['range'],
573-
['range'],
574-
// N.B. bring scatter2d back to 'base' marker options
575-
[scene.markerOptions],
576-
['range']
577-
],
578-
drawArgs: [
579-
// call data[0] batch
580-
[0],
581-
[0],
582-
[0]
583-
]
584-
});
751+
_assert('after double-click', [
752+
['scatter2d', [0]],
753+
['line2d', [1]],
754+
['select2d', [[[], []]]]
755+
]);
585756
})
586757
.catch(failTest)
587758
.then(done);

0 commit comments

Comments
 (0)