test legend, rangeselector, rangeslider automargin updates

Author: alexcjohnson

test/jasmine/tests/legend_test.js

@@ -524,18 +524,36 @@ describe('legend relayout update', function() {
     afterEach(destroyGraphDiv);
 
     it('should hide and show the legend', function(done) {
-        var mockCopy = Lib.extendDeep({}, mock);
+        var mockCopy = Lib.extendDeep({}, mock, {layout: {
+            legend: {x: 1.1, xanchor: 'left'},
+            margin: {l: 50, r: 50},
+            width: 500
+        }});
+
+        function plotWidth() {
+            return d3.select('.ygrid').node().getBoundingClientRect().width;
+        }
+
         Plotly.newPlot(gd, mockCopy.data, mockCopy.layout)
         .then(function() {
             expect(d3.selectAll('g.legend').size()).toBe(1);
+            // check that the margins changed
+            expect(plotWidth()).toBeLessThan(400);
             return Plotly.relayout(gd, {showlegend: false});
         })
         .then(function() {
             expect(d3.selectAll('g.legend').size()).toBe(0);
+            expect(plotWidth()).toBe(400);
             return Plotly.relayout(gd, {showlegend: true});
         })
         .then(function() {
             expect(d3.selectAll('g.legend').size()).toBe(1);
+            expect(plotWidth()).toBeLessThan(400);
+            return Plotly.relayout(gd, {'legend.x': 0.7});
+        })
+        .then(function() {
+            expect(d3.selectAll('g.legend').size()).toBe(1);
+            expect(plotWidth()).toBe(400);
         })
         .catch(failTest)
         .then(done);

test/jasmine/tests/range_selector_test.js

@@ -597,3 +597,63 @@ describe('range selector interactions:', function() {
         .then(done);
     });
 });
+
+describe('range selector automargin', function() {
+    'use strict';
+
+    var mock = require('@mocks/range_selector.json');
+
+    var gd, mockCopy;
+
+    beforeEach(function(done) {
+        gd = createGraphDiv();
+        mockCopy = Lib.extendDeep({}, mock, {layout: {
+            width: 500,
+            height: 500,
+            margin: {l: 50, r: 50, t: 100, b: 100}
+        }});
+
+        Plotly.plot(gd, mockCopy.data, mockCopy.layout)
+        .catch(failTest)
+        .then(done);
+    });
+
+    afterEach(destroyGraphDiv);
+
+    function plotWidth() {
+        return d3.selectAll('.ygrid').node().getBoundingClientRect().width;
+    }
+
+    function plotHeight() {
+        return d3.selectAll('.xgrid').node().getBoundingClientRect().height;
+    }
+
+    it('updates automargin when hiding, showing, or moving', function(done) {
+        expect(plotWidth()).toBe(400);
+        expect(plotHeight()).toBe(300);
+
+        Plotly.relayout(gd, {
+            'xaxis.rangeselector.y': 1.3,
+            'xaxis.rangeselector.xanchor': 'center'
+        })
+        .then(function() {
+            expect(plotWidth()).toBeLessThan(400);
+            expect(plotHeight()).toBeLessThan(300);
+
+            return Plotly.relayout(gd, {'xaxis.rangeselector.visible': false});
+        })
+        .then(function() {
+            expect(plotWidth()).toBe(400);
+            expect(plotHeight()).toBe(300);
+
+            return Plotly.relayout(gd, {'xaxis.rangeselector.visible': true});
+        })
+        .then(function() {
+            expect(plotWidth()).toBeLessThan(400);
+            expect(plotHeight()).toBeLessThan(300);
+        })
+        .catch(failTest)
+        .then(done);
+    });
+
+});

test/jasmine/tests/range_slider_test.js

@@ -363,38 +363,53 @@ describe('Rangeslider visibility property', function() {
 
     afterEach(destroyGraphDiv);
 
+    function plotHeight() {
+        return d3.select('.xgrid').node().getBoundingClientRect().height;
+    }
+
+    function defaultLayout(opts) {
+        return Lib.extendDeep({
+            width: 500,
+            height: 600,
+            margin: {l: 50, r: 50, t: 100, b: 100}
+        }, opts || {});
+    }
+
     it('should not add the slider to the DOM by default', function(done) {
-        Plotly.plot(gd, [{ x: [1, 2, 3], y: [2, 3, 4] }], {})
+        Plotly.plot(gd, [{ x: [1, 2, 3], y: [2, 3, 4] }], defaultLayout())
         .then(function() {
             var rangeSlider = getRangeSlider();
             expect(rangeSlider).not.toBeDefined();
+            expect(plotHeight()).toBe(400);
         })
         .catch(failTest)
         .then(done);
     });
 
     it('should add the slider if rangeslider is set to anything', function(done) {
-        Plotly.plot(gd, [{ x: [1, 2, 3], y: [2, 3, 4] }], {})
+        Plotly.plot(gd, [{ x: [1, 2, 3], y: [2, 3, 4] }], defaultLayout())
         .then(function() {
             return Plotly.relayout(gd, 'xaxis.rangeslider', 'exists');
         })
         .then(function() {
             var rangeSlider = getRangeSlider();
             expect(rangeSlider).toBeDefined();
+            expect(plotHeight()).toBeLessThan(400);
         })
         .catch(failTest)
         .then(done);
     });
 
     it('should add the slider if visible changed to `true`', function(done) {
-        Plotly.plot(gd, [{ x: [1, 2, 3], y: [2, 3, 4] }], {})
+        Plotly.plot(gd, [{ x: [1, 2, 3], y: [2, 3, 4] }], defaultLayout())
         .then(function() {
             return Plotly.relayout(gd, 'xaxis.rangeslider.visible', true);
         })
         .then(function() {
             var rangeSlider = getRangeSlider();
             expect(rangeSlider).toBeDefined();
             expect(countRangeSliderClipPaths()).toEqual(1);
+            expect(plotHeight()).toBeLessThan(400);
         })
         .catch(failTest)
         .then(done);
@@ -404,18 +419,19 @@ describe('Rangeslider visibility property', function() {
         Plotly.plot(gd, [{
             x: [1, 2, 3],
             y: [2, 3, 4]
-        }], {
+        }], defaultLayout({
             xaxis: {
                 rangeslider: { visible: true }
             }
-        })
+        }))
         .then(function() {
             return Plotly.relayout(gd, 'xaxis.rangeslider.visible', false);
         })
         .then(function() {
             var rangeSlider = getRangeSlider();
             expect(rangeSlider).not.toBeDefined();
             expect(countRangeSliderClipPaths()).toEqual(0);
+            expect(plotHeight()).toBe(400);
         })
         .catch(failTest)
         .then(done);
@@ -434,11 +450,11 @@ describe('Rangeslider visibility property', function() {
             type: 'bar',
             x: [1, 2, 3],
             y: [2, 5, 2]
-        }], {
+        }], defaultLayout({
             xaxis: {
                 rangeslider: { visible: true }
             }
-        })
+        }))
         .then(function() {
             expect(count('g.scatterlayer > g.trace')).toEqual(1);
             expect(count('g.barlayer > g.trace')).toEqual(1);