add tests for custom hover labels cartesian, geo, mapbox & ternary

Author: etpinard

test/jasmine/tests/geo_test.js

@@ -502,6 +502,21 @@ describe('Test geo interactions', function() {
                 })
                 .then(done);
             });
+
+            it('should show custom \`hoverlabel\' settings', function(done) {
+                Plotly.restyle(gd, {
+                    'hoverlabel.bgcolor': 'red',
+                    'hoverlabel.bordercolor': [['blue', 'black', 'green']]
+                })
+                .then(function() {
+                    mouseEventScatterGeo('mousemove');
+
+                    var path = d3.selectAll('g.hovertext').select('path');
+                    expect(path.style('fill')).toEqual('rgb(255, 0, 0)', 'bgcolor');
+                    expect(path.style('stroke')).toEqual('rgb(0, 0, 255)', 'bordecolor[0]');
+                })
+                .then(done);
+            });
         });
 
         describe('scattergeo hover events', function() {

test/jasmine/tests/hover_label_test.js

@@ -984,3 +984,89 @@ describe('hover updates', function() {
 
     });
 });
+
+describe('Test hover label custom styling:', function() {
+    afterEach(destroyGraphDiv);
+
+    function assertLabel(className, expectation) {
+        var g = d3.select('g.' + className);
+
+        var path = g.select('path');
+        expect(path.style('fill')).toEqual(expectation.path[0], 'bgcolor');
+        expect(path.style('stroke')).toEqual(expectation.path[1], 'bordercolor');
+
+        var text = g.select('text');
+        expect(parseInt(text.style('font-size'))).toEqual(expectation.text[0], 'font.size');
+        expect(text.style('font-family').split(',')[0]).toEqual(expectation.text[1], 'font.family');
+        expect(text.style('fill')).toEqual(expectation.text[2], 'font.color');
+    }
+
+    function assertPtLabel(expectation) {
+        assertLabel('hovertext', expectation);
+    }
+
+    function assertCommonLabel(expectation) {
+        assertLabel('axistext', expectation);
+    }
+
+    function _hover(gd, opts) {
+        Fx.hover(gd, opts);
+        delete gd._lastHoverTime;
+    }
+
+    it('should work for x/y cartesian traces', function(done) {
+        var gd = createGraphDiv();
+
+        Plotly.plot(gd, [{
+            x: [1, 2, 3],
+            y: [1, 2, 1],
+            hoverlabel: {
+                font: {
+                    color: ['red', 'green', 'blue'],
+                    size: 20
+                }
+            }
+        }], {
+            hovermode: 'x',
+            hoverlabel: { bgcolor: 'white' }
+        })
+        .then(function() {
+            _hover(gd, { xval: gd._fullData[0].x[0] });
+
+            assertPtLabel({
+                path: ['rgb(255, 255, 255)', 'rgb(68, 68, 68)'],
+                text: [20, 'Arial', 'rgb(255, 0, 0)']
+            });
+            assertCommonLabel({
+                path: ['rgb(255, 255, 255)', 'rgb(255, 255, 255)'],
+                text: [13, 'Arial', 'rgb(255, 255, 255)']
+            });
+        })
+        .then(function() {
+            _hover(gd, { xval: gd._fullData[0].x[1] });
+
+            assertPtLabel({
+                path: ['rgb(255, 255, 255)', 'rgb(68, 68, 68)'],
+                text: [20, 'Arial', 'rgb(0, 128, 0)']
+            });
+            assertCommonLabel({
+                path: ['rgb(255, 255, 255)', 'rgb(255, 255, 255)'],
+                text: [13, 'Arial', 'rgb(255, 255, 255)']
+            });
+        })
+        .then(function() {
+            _hover(gd, { xval: gd._fullData[0].x[2] });
+
+            assertPtLabel({
+                path: ['rgb(255, 255, 255)', 'rgb(68, 68, 68)'],
+                text: [20, 'Arial', 'rgb(0, 0, 255)']
+            });
+            assertCommonLabel({
+                path: ['rgb(255, 255, 255)', 'rgb(255, 255, 255)'],
+                text: [13, 'Arial', 'rgb(255, 255, 255)']
+            });
+        })
+        .catch(fail)
+        .then(done);
+    });
+});

test/jasmine/tests/mapbox_test.js

@@ -709,6 +709,22 @@ describe('@noCI, mapbox plots', function() {
         assertMouseMove(blankPos, 0).then(function() {
             return assertMouseMove(pointPos, 1);
         })
+        .then(function() {
+            return Plotly.restyle(gd, {
+                'hoverlabel.bgcolor': 'yellow',
+                'hoverlabel.font.size': [[20, 10, 30]]
+            });
+        })
+        .then(function() {
+            return assertMouseMove(pointPos, 1);
+        })
+        .then(function() {
+            var path = d3.select('g.hovertext').select('path');
+            var text = d3.select('g.hovertext').select('text');
+
+            expect(path.style('fill')).toEqual('rgb(255, 255, 0)', 'bgcolor');
+            expect(text.style('font-size')).toEqual('20px', 'font.size[0]');
+        })
         .catch(failTest)
         .then(done);
     }, LONG_TIMEOUT_INTERVAL);

test/jasmine/tests/ternary_test.js

@@ -106,7 +106,7 @@ describe('ternary plots', function() {
             }).then(done);
         });
 
-        it('should display to hover labels', function() {
+        it('should display to hover labels', function(done) {
             var hoverLabels;
 
             mouseEvent('mousemove', blankPos[0], blankPos[1]);
@@ -121,6 +121,22 @@ describe('ternary plots', function() {
             expect(rows[0][0].innerHTML).toEqual('Component A: 0.5', 'with correct text');
             expect(rows[0][1].innerHTML).toEqual('B: 0.25', 'with correct text');
             expect(rows[0][2].innerHTML).toEqual('Component C: 0.25', 'with correct text');
+
+            Plotly.restyle(gd, {
+                'hoverlabel.bordercolor': 'blue',
+                'hoverlabel.font.family': [['Gravitas', 'Arial', 'Roboto']]
+            })
+            .then(function() {
+                delete gd._lastHoverTime;
+                mouseEvent('mousemove', pointPos[0], pointPos[1]);
+
+                var path = d3.select('g.hovertext').select('path');
+                var text = d3.select('g.hovertext').select('text');
+
+                expect(path.style('stroke')).toEqual('rgb(0, 0, 255)', 'bordercolor');
+                expect(text.style('font-family')).toEqual('Gravitas', 'font.family[0]');
+            })
+            .then(done);
         });
 
         it('should respond to hover interactions by', function() {