Skip to content
38 changes: 38 additions & 0 deletions test/jasmine/tests/plots_test.js
Original file line number Diff line number Diff line change
Expand Up @@ -1326,3 +1326,41 @@ describe('grids', function() {
.then(done, done.fail);
});
});

describe('Test Plots with automargin and minreducedwidth/height', function() {
var gd;

beforeEach(function() {
gd = createGraphDiv();
});

afterEach(destroyGraphDiv);

it('should resize the plot area when tweaking min-reduced width & height', function(done) {
function assert(attr, exp) {
var xy = d3Select('rect.nsewdrag')[0][0];
expect(xy.getAttribute(attr)).toEqual(exp);
}

var fig = require('@mocks/z-automargin-minreducedheight.json');

Plotly.newPlot(gd, fig)
.then(function() {
assert('height', '55');
Copy link
Contributor Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Thanks @archmoj for suggesting this test. Copied it over here but just dropped a couple of the width assertions as I noticed that this was actually a bit variable when margin.minreducedwidth wasn't specified. For example, I checked between a couple browsers and saw plot widths of both 64px and 71px initially. Do you know why this would be?

Copy link
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

I bet it is related to each OS+browser rendering fonts slightly differently.
FYI - We mainly use Chrome on CircleCI; but we also have tests using Firefox.
You may consider testing the initial width values to be in a range thanks to Jasmine's toBeCloseTo.

})
.then(function() {
return Plotly.relayout(gd, 'margin.minreducedheight', 100);
})
.then(function() {
assert('height', '100');
})
.then(function() {
return Plotly.relayout(gd, 'margin.minreducedwidth', 100);
})
.then(function() {
assert('width', '100');
assert('height', '100');
})
.then(done, done.fail);
});
});