Skip to content

Commit a6517a8

Browse files
committed
add a ⛵ load of auto-colorscale tests
1 parent 39639c0 commit a6517a8

File tree

1 file changed

+293
-0
lines changed

1 file changed

+293
-0
lines changed

test/jasmine/tests/colorscale_test.js

+293
Original file line numberDiff line numberDiff line change
@@ -1,9 +1,16 @@
1+
var Plotly = require('@lib');
2+
13
var Colorscale = require('@src/components/colorscale');
4+
25
var Lib = require('@src/lib');
36
var Plots = require('@src/plots/plots');
47
var Heatmap = require('@src/traces/heatmap');
58
var Scatter = require('@src/traces/scatter');
69

10+
var d3 = require('d3');
11+
var createGraphDiv = require('../assets/create_graph_div');
12+
var destroyGraphDiv = require('../assets/destroy_graph_div');
13+
var failTest = require('../assets/fail_test');
714
var supplyAllDefaults = require('../assets/supply_defaults');
815

916
function _supply(trace, layout) {
@@ -571,3 +578,289 @@ describe('Test colorscale:', function() {
571578
});
572579
});
573580
});
581+
582+
describe('Test colorscale restyle calls:', function() {
583+
var gd;
584+
585+
beforeEach(function() {
586+
gd = createGraphDiv();
587+
});
588+
589+
afterEach(destroyGraphDiv);
590+
591+
function getFill(q) {
592+
return d3.select(q).node().style.fill;
593+
}
594+
595+
it('should be able to toggle between autocolorscale true/false and set colorscales (contour case)', function(done) {
596+
function _assert(msg, exp) {
597+
var cc = [];
598+
cc.push(getFill('.contourbg > path'));
599+
d3.selectAll('.contourfill > path').each(function() {
600+
cc.push(getFill(this));
601+
});
602+
expect(cc).toEqual(exp.contourColors);
603+
604+
expect(gd._fullData[0].colorscale).toEqual(exp.colorscale);
605+
expect(gd._fullData[0].autocolorscale).toBe(exp.autocolorscale, msg);
606+
607+
expect(gd.data[0].colorscale).toEqual(exp.colorscaleIn);
608+
expect(gd.data[0].autocolorscale).toBe(exp.autocolorscaleIn, msg);
609+
}
610+
611+
// update via, assert then assert again (and again ;) after non-calc edits
612+
function _run(msg, restyleObj, exp) {
613+
return Plotly.restyle(gd, restyleObj)
614+
.then(function() { _assert(msg, exp); })
615+
.then(function() { return Plotly.relayout(gd, 'xaxis.range', [-1, 5]); })
616+
.then(function() { _assert(msg + ' after axrange relayout', exp); })
617+
.then(function() { return Plotly.relayout(gd, 'xaxis.autorange', true); })
618+
.then(function() { _assert(msg + ' after autorange', exp); })
619+
.then(function() { return Plotly.restyle(gd, 'contours.showlines', true); })
620+
.then(function() { _assert(msg + ' after contours.showlines restyle', exp); })
621+
.then(function() { return Plotly.restyle(gd, 'contours.showlines', false); })
622+
.then(function() { _assert(msg + ' back to original contours.showlines', exp); });
623+
}
624+
625+
var rdbu = ['rgb(5, 10, 172)', 'rgb(190, 190, 190)', 'rgb(178, 10, 28)'];
626+
var reds = ['rgb(220, 220, 220)', 'rgb(234, 135, 92)', 'rgb(178, 10, 28)'];
627+
var grns = ['rgb(0, 68, 27)', 'rgb(116, 196, 118)', 'rgb(247, 252, 245)'];
628+
629+
Plotly.plot(gd, [{
630+
type: 'contour',
631+
z: [
632+
[1, 20, 30],
633+
[20, 1, 60],
634+
[30, 60, 1]
635+
],
636+
ncontours: 3
637+
}])
638+
.then(function() {
639+
_assert('base (autocolorscale:false by dflt)', {
640+
contourColors: rdbu,
641+
autocolorscale: false,
642+
autocolorscaleIn: undefined,
643+
colorscale: Colorscale.scales.RdBu,
644+
colorscaleIn: undefined
645+
});
646+
})
647+
.then(function() {
648+
return _run('restyle to autocolorscale:true', {autocolorscale: true}, {
649+
contourColors: reds,
650+
autocolorscale: true,
651+
autocolorscaleIn: true,
652+
colorscale: Colorscale.scales.Reds,
653+
colorscaleIn: undefined
654+
});
655+
})
656+
.then(function() {
657+
return _run('restyle to reversescale:true with autocolorscale:true', {reversescale: true}, {
658+
contourColors: reds.slice().reverse(),
659+
autocolorscale: true,
660+
autocolorscaleIn: true,
661+
colorscale: Colorscale.scales.Reds,
662+
colorscaleIn: undefined
663+
});
664+
})
665+
.then(function() {
666+
return _run('restyle back to autocolorscale:false with reversescale:true', {autocolorscale: false}, {
667+
contourColors: rdbu.slice().reverse(),
668+
autocolorscale: false,
669+
autocolorscaleIn: false,
670+
colorscale: Colorscale.scales.RdBu,
671+
colorscaleIn: undefined
672+
});
673+
})
674+
.then(function() {
675+
return _run('restyle to *Greens* colorscale', {colorscale: 'Greens', reversescale: false}, {
676+
contourColors: grns,
677+
autocolorscale: false,
678+
autocolorscaleIn: false,
679+
colorscale: Colorscale.scales.Greens,
680+
colorscaleIn: 'Greens'
681+
});
682+
})
683+
.then(function() {
684+
return _run('restyle back again to autocolorscale:true', {autocolorscale: true}, {
685+
contourColors: reds,
686+
autocolorscale: true,
687+
autocolorscaleIn: true,
688+
colorscale: Colorscale.scales.Reds,
689+
colorscaleIn: 'Greens'
690+
});
691+
})
692+
.then(function() {
693+
return _run('restyle back to autocolorscale:false with colorscale:Greens', {autocolorscale: false}, {
694+
contourColors: grns,
695+
autocolorscale: false,
696+
autocolorscaleIn: false,
697+
colorscale: Colorscale.scales.Greens,
698+
colorscaleIn: 'Greens'
699+
});
700+
})
701+
.catch(failTest)
702+
.then(done);
703+
});
704+
705+
it('should be able to toggle between autocolorscale true/false and set colorscales (scatter marker case)', function(done) {
706+
function _assert(msg, exp) {
707+
var mcc = [];
708+
d3.selectAll('path.point').each(function() {
709+
mcc.push(getFill(this));
710+
});
711+
expect(mcc).toEqual(exp.mcc);
712+
713+
expect(gd._fullData[0].marker.colorscale).toEqual(exp.colorscale);
714+
expect(gd._fullData[0].marker.autocolorscale).toBe(exp.autocolorscale, msg);
715+
716+
expect(gd.data[0].marker.colorscale).toEqual(exp.colorscaleIn);
717+
expect(gd.data[0].marker.autocolorscale).toBe(exp.autocolorscaleIn, msg);
718+
}
719+
720+
// update via, assert then assert again (and again ;) after non-calc edits
721+
function _run(msg, restyleObj, exp) {
722+
return Plotly.restyle(gd, restyleObj)
723+
.then(function() { _assert(msg, exp); })
724+
.then(function() { return Plotly.relayout(gd, 'xaxis.range', [-1, 5]); })
725+
.then(function() { _assert(msg + ' after axrange relayout', exp); })
726+
.then(function() { return Plotly.relayout(gd, 'xaxis.autorange', true); })
727+
.then(function() { _assert(msg + ' after autorange', exp); })
728+
.then(function() { return Plotly.restyle(gd, 'marker.symbol', 'square'); })
729+
.then(function() { _assert(msg + ' after marker.symbol restyle', exp); })
730+
.then(function() { return Plotly.restyle(gd, 'marker.symbol', null); })
731+
.then(function() { _assert(msg + ' back to original marker.symbol', exp); });
732+
}
733+
734+
var rdbu = ['rgb(5, 10, 172)', 'rgb(77, 101, 226)', 'rgb(178, 10, 28)'];
735+
var grns = ['rgb(0, 68, 27)', 'rgb(35, 139, 69)', 'rgb(247, 252, 245)'];
736+
737+
Plotly.plot(gd, [{
738+
mode: 'markers',
739+
y: [1, 2, 3],
740+
marker: {color: [-1, 0, 3]}
741+
}])
742+
.then(function() {
743+
_assert('base (autocolorscale:true by dflt)', {
744+
mcc: rdbu,
745+
autocolorscale: true,
746+
autocolorscaleIn: undefined,
747+
colorscale: Colorscale.scales.RdBu,
748+
colorscaleIn: undefined
749+
});
750+
})
751+
.then(function() {
752+
return _run('set *Greens* colorscale', {'marker.colorscale': 'Greens'}, {
753+
mcc: grns,
754+
autocolorscale: false,
755+
autocolorscaleIn: false,
756+
colorscale: Colorscale.scales.Greens,
757+
colorscaleIn: 'Greens'
758+
});
759+
})
760+
.then(function() {
761+
return _run('back to autocolorscale:true', {'marker.autocolorscale': true}, {
762+
mcc: rdbu,
763+
autocolorscale: true,
764+
autocolorscaleIn: true,
765+
colorscale: Colorscale.scales.RdBu,
766+
colorscaleIn: 'Greens'
767+
});
768+
})
769+
.then(function() {
770+
return _run('back to autocolorscale:false w/ colorscale set', {'marker.autocolorscale': false}, {
771+
mcc: grns,
772+
autocolorscale: false,
773+
autocolorscaleIn: false,
774+
colorscale: Colorscale.scales.Greens,
775+
colorscaleIn: 'Greens'
776+
});
777+
})
778+
.catch(failTest)
779+
.then(done);
780+
});
781+
782+
it('should be able to toggle between autocolorscale true/false and set colorscales (scatter marker line case)', function(done) {
783+
var mlw0 = 5;
784+
785+
function _assert(msg, exp) {
786+
var mlcc = [];
787+
d3.selectAll('path.point').each(function() {
788+
mlcc.push(d3.select(this).node().style.stroke);
789+
});
790+
expect(mlcc).toEqual(exp.mlcc);
791+
792+
expect(gd._fullData[0].marker.line.colorscale).toEqual(exp.colorscale);
793+
expect(gd._fullData[0].marker.line.autocolorscale).toBe(exp.autocolorscale, msg);
794+
795+
expect(gd.data[0].marker.line.colorscale).toEqual(exp.colorscaleIn);
796+
expect(gd.data[0].marker.line.autocolorscale).toBe(exp.autocolorscaleIn, msg);
797+
}
798+
799+
// update via, assert then assert again (and again ;) after non-calc edits
800+
function _run(msg, restyleObj, exp) {
801+
return Plotly.restyle(gd, restyleObj)
802+
.then(function() { _assert(msg, exp); })
803+
.then(function() { return Plotly.relayout(gd, 'xaxis.range', [-1, 5]); })
804+
.then(function() { _assert(msg + ' after axrange relayout', exp); })
805+
.then(function() { return Plotly.relayout(gd, 'xaxis.autorange', true); })
806+
.then(function() { _assert(msg + ' after autorange', exp); })
807+
.then(function() { return Plotly.restyle(gd, 'marker.line.width', 10); })
808+
.then(function() { _assert(msg + ' after marker lw restyle', exp); })
809+
.then(function() { return Plotly.restyle(gd, 'marker.line.width', mlw0); })
810+
.then(function() { _assert(msg + ' back to original marker lw', exp); });
811+
}
812+
813+
var blues = ['rgb(220, 220, 220)', 'rgb(70, 100, 245)', 'rgb(5, 10, 172)'];
814+
var grns = ['rgb(247, 252, 245)', 'rgb(116, 196, 118)', 'rgb(0, 68, 27)'];
815+
816+
Plotly.plot(gd, [{
817+
mode: 'markers',
818+
y: [1, 2, 3],
819+
marker: {
820+
size: 20,
821+
line: {
822+
color: [-1, -2, -3],
823+
width: mlw0
824+
}
825+
}
826+
}])
827+
.then(function() {
828+
_assert('base (autocolorscale:true by dflt)', {
829+
mlcc: blues,
830+
autocolorscale: true,
831+
autocolorscaleIn: undefined,
832+
colorscale: Colorscale.scales.Blues,
833+
colorscaleIn: undefined
834+
});
835+
})
836+
.then(function() {
837+
return _run('set *Greens* colorscale', {'marker.line.colorscale': 'Greens'}, {
838+
mlcc: grns,
839+
autocolorscale: false,
840+
autocolorscaleIn: false,
841+
colorscale: Colorscale.scales.Greens,
842+
colorscaleIn: 'Greens'
843+
});
844+
})
845+
.then(function() {
846+
return _run('back to autocolorscale:true', {'marker.line.autocolorscale': true}, {
847+
mlcc: blues,
848+
autocolorscale: true,
849+
autocolorscaleIn: true,
850+
colorscale: Colorscale.scales.Blues,
851+
colorscaleIn: 'Greens'
852+
});
853+
})
854+
.then(function() {
855+
return _run('back to autocolorscale:false w/ colorscale set', {'marker.line.autocolorscale': false}, {
856+
mlcc: grns,
857+
autocolorscale: false,
858+
autocolorscaleIn: false,
859+
colorscale: Colorscale.scales.Greens,
860+
colorscaleIn: 'Greens'
861+
});
862+
})
863+
.catch(failTest)
864+
.then(done);
865+
});
866+
});

0 commit comments

Comments
 (0)