Skip to content

Commit e58b74d

Browse files
committed
test Plotly.react with component arrays
1 parent 45c56b0 commit e58b74d

File tree

1 file changed

+134
-0
lines changed

1 file changed

+134
-0
lines changed

test/jasmine/tests/plot_api_test.js

+134
Original file line numberDiff line numberDiff line change
@@ -10,6 +10,8 @@ var pkg = require('../../../package.json');
1010
var subroutines = require('@src/plot_api/subroutines');
1111
var helpers = require('@src/plot_api/helpers');
1212
var editTypes = require('@src/plot_api/edit_types');
13+
var annotations = require('@src/components/annotations');
14+
var images = require('@src/components/images');
1315

1416
var d3 = require('d3');
1517
var createGraphDiv = require('../assets/create_graph_div');
@@ -2193,6 +2195,10 @@ describe('Test plot api', function() {
21932195
spyOn(subroutines, m).and.callThrough();
21942196
subroutines[m].calls.reset();
21952197
});
2198+
2199+
spyOn(annotations, 'drawOne').and.callThrough();
2200+
spyOn(annotations, 'draw').and.callThrough();
2201+
spyOn(images, 'draw').and.callThrough();
21962202
});
21972203

21982204
afterEach(destroyGraphDiv);
@@ -2202,6 +2208,9 @@ describe('Test plot api', function() {
22022208

22032209
gd.on('plotly_afterplot', function() { plotCalls++; });
22042210
subroutines.layoutStyles.calls.reset();
2211+
annotations.draw.calls.reset();
2212+
annotations.drawOne.calls.reset();
2213+
images.draw.calls.reset();
22052214
}
22062215

22072216
function countCalls(counts) {
@@ -2217,6 +2226,16 @@ describe('Test plot api', function() {
22172226

22182227
expect(plotCalls).toBe(counts.plot || 0, 'calls to Plotly.plot');
22192228
plotCalls = 0;
2229+
2230+
// only consider annotation and image draw calls if we *don't* do a full plot.
2231+
if(!counts.plot) {
2232+
expect(annotations.draw).toHaveBeenCalledTimes(counts.annotationDraw || 0);
2233+
expect(annotations.drawOne).toHaveBeenCalledTimes(counts.annotationDrawOne || 0);
2234+
expect(images.draw).toHaveBeenCalledTimes(counts.imageDraw || 0);
2235+
}
2236+
annotations.draw.calls.reset();
2237+
annotations.drawOne.calls.reset();
2238+
images.draw.calls.reset();
22202239
}
22212240

22222241
it('should notice new data by ===, without layout.datarevision', function(done) {
@@ -2344,6 +2363,121 @@ describe('Test plot api', function() {
23442363
.then(done);
23452364
});
23462365

2366+
it('redraws annotations one at a time', function(done) {
2367+
var data = [{y: [1, 2, 3], mode: 'markers'}];
2368+
var layout = {};
2369+
var ymax;
2370+
2371+
Plotly.newPlot(gd, data, layout)
2372+
.then(countPlots)
2373+
.then(function() {
2374+
ymax = layout.yaxis.range[1];
2375+
2376+
layout.annotations = [{
2377+
x: 1,
2378+
y: 4,
2379+
text: 'Way up high',
2380+
showarrow: false
2381+
}, {
2382+
x: 1,
2383+
y: 2,
2384+
text: 'On the data',
2385+
showarrow: false
2386+
}];
2387+
return Plotly.react(gd, data, layout);
2388+
})
2389+
.then(function() {
2390+
// autoranged - so we get a full replot
2391+
countCalls({plot: 1});
2392+
expect(d3.selectAll('.annotation').size()).toBe(2);
2393+
2394+
layout.annotations[1].bgcolor = 'rgb(200, 100, 0)';
2395+
return Plotly.react(gd, data, layout);
2396+
})
2397+
.then(function() {
2398+
countCalls({annotationDrawOne: 1});
2399+
expect(window.getComputedStyle(d3.select('.annotation[data-index="1"] .bg').node()).fill)
2400+
.toBe('rgb(200, 100, 0)');
2401+
expect(layout.yaxis.range[1]).not.toBeCloseTo(ymax, 0);
2402+
2403+
layout.annotations[0].font = {color: 'rgb(0, 255, 0)'};
2404+
layout.annotations[1].bgcolor = 'rgb(0, 0, 255)';
2405+
return Plotly.react(gd, data, layout);
2406+
})
2407+
.then(function() {
2408+
countCalls({annotationDrawOne: 2});
2409+
expect(window.getComputedStyle(d3.select('.annotation[data-index="0"] text').node()).fill)
2410+
.toBe('rgb(0, 255, 0)');
2411+
expect(window.getComputedStyle(d3.select('.annotation[data-index="1"] .bg').node()).fill)
2412+
.toBe('rgb(0, 0, 255)');
2413+
2414+
Lib.extendFlat(layout.annotations[0], {yref: 'paper', y: 0.8});
2415+
2416+
return Plotly.react(gd, data, layout);
2417+
})
2418+
.then(function() {
2419+
countCalls({plot: 1});
2420+
expect(layout.yaxis.range[1]).toBeCloseTo(ymax, 0);
2421+
})
2422+
.catch(fail)
2423+
.then(done);
2424+
});
2425+
2426+
it('redraws images all at once', function(done) {
2427+
var data = [{y: [1, 2, 3], mode: 'markers'}];
2428+
var layout = {};
2429+
var jsLogo = 'https://images.plot.ly/language-icons/api-home/js-logo.png';
2430+
2431+
var x, y, height, width;
2432+
2433+
Plotly.newPlot(gd, data, layout)
2434+
.then(countPlots)
2435+
.then(function() {
2436+
layout.images = [{
2437+
source: jsLogo,
2438+
xref: 'paper',
2439+
yref: 'paper',
2440+
x: 0.1,
2441+
y: 0.1,
2442+
sizex: 0.2,
2443+
sizey: 0.2
2444+
}, {
2445+
source: jsLogo,
2446+
xref: 'x',
2447+
yref: 'y',
2448+
x: 1,
2449+
y: 2,
2450+
sizex: 1,
2451+
sizey: 1
2452+
}];
2453+
Plotly.react(gd, data, layout);
2454+
})
2455+
.then(function() {
2456+
countCalls({imageDraw: 1});
2457+
expect(d3.selectAll('image').size()).toBe(2);
2458+
2459+
var n = d3.selectAll('image').node();
2460+
x = n.attributes.x.value;
2461+
y = n.attributes.y.value;
2462+
height = n.attributes.height.value;
2463+
width = n.attributes.width.value;
2464+
2465+
layout.images[0].y = 0.8;
2466+
layout.images[0].sizey = 0.4;
2467+
Plotly.react(gd, data, layout);
2468+
})
2469+
.then(function() {
2470+
countCalls({imageDraw: 1});
2471+
var n = d3.selectAll('image').node();
2472+
expect(n.attributes.x.value).toBe(x);
2473+
expect(n.attributes.width.value).toBe(width);
2474+
expect(n.attributes.y.value).not.toBe(y);
2475+
expect(n.attributes.height.value).not.toBe(height);
2476+
})
2477+
.catch(fail)
2478+
.then(done);
2479+
});
2480+
23472481
it('can change config, and always redraws', function(done) {
23482482
var data = [{y: [1, 2, 3]}];
23492483
var layout = {};

0 commit comments

Comments
 (0)