ArrayOk hoverinfo fixups

src/traces/scattercarpet/hover.js

@@ -67,7 +67,7 @@ module.exports = function hoverPoints(pointData, xval, yval, hovermode) {
     var tj = ij[1] - j0;
 
     var xy = carpet.evalxy([], i0, j0, ti, tj);
-    text.push('y: ' + xy[1].toFixed(3));
+    text.push('y = ' + xy[1].toFixed(3));
 
     newPointData.extraText = text.join('<br>');
 

test/jasmine/assets/custom_assertions.js

@@ -59,6 +59,92 @@ exports.assertHoverLabelStyle = function(g, expectation, msg, textSelector) {
     expect(textStyle.fill).toBe(expectation.fontColor, msg + ': font.color');
 };
 
+function assertLabelContent(label, expectation, msg) {
+    var lines = label.selectAll('tspan');
+    var lineCnt = lines.size();
+    var expectMultiLine = Array.isArray(expectation);
+
+    function extract(sel) {
+        return sel.node() ? sel.html() : null;
+    }
+
+    if(lineCnt > 0) {
+        if(expectMultiLine) {
+            expect(lines.size()).toBe(expectation.length, msg + ': # of lines');
+            lines.each(function(_, i) {
+                var l = d3.select(this);
+                expect(extract(l)).toBe(expectation[i], msg + ': tspan line ' + i);
+            });
+        } else {
+            fail('Expected a single-line label, found multiple lines');
+        }
+    } else {
+        if(!expectMultiLine) {
+            expect(extract(label)).toBe(expectation, msg + ': text content');
+        } else {
+            fail('Expected a multi-line label, found single');
+        }
+    }
+}
+
+function count(selector) {
+    return d3.selectAll(selector).size();
+}
+
+exports.assertHoverLabelContent = function(expectation, msg) {
+    if(!msg) msg = '';
+
+    var ptSelector = 'g.hovertext';
+    var ptExpectation = expectation[0];
+    var ptMsg = msg + ' point hover label';
+    var ptCnt = count(ptSelector);
+
+    var axSelector = 'g.axistext';
+    var axExpectation = expectation[1];
+    var axMsg = 'common axis hover label';
+    var axCnt = count(axSelector);
+
+    if(ptCnt === 1) {
+        assertLabelContent(
+            d3.select(ptSelector + '> text.nums'),
+            ptExpectation[0],
+            ptMsg + ' (nums)'
+        );
+        assertLabelContent(
+            d3.select(ptSelector + '> text.name'),
+            ptExpectation[1],
+            ptMsg + ' (name)'
+        );
+    } else if(ptCnt > 1) {
+        expect(ptCnt).toBe(ptExpectation.length, ptMsg + ' # of visible nodes');
+
+        d3.selectAll(ptSelector).each(function(_, i) {
+            assertLabelContent(
+                d3.select(this).select('text.nums'),
+                ptExpectation[i][0],
+                ptMsg + ' (nums ' + i + ')'
+            );
+            assertLabelContent(
+                d3.select(this).select('text.name'),
+                ptExpectation[i][1],
+                ptMsg + ' (name ' + i + ')'
+            );
+        });
+    } else {
+        expect(ptExpectation).toBe(null, ptMsg + ' should not be displayed');
+    }
+
+    if(axCnt > 0) {
+        assertLabelContent(
+            d3.select(axSelector + '> text'),
+            axExpectation,
+            axMsg
+        );
+    } else {
+        expect(axExpectation).toBe(null, axMsg + ' should not be displayed');
+    }
+};
+
 exports.assertClip = function(sel, isClipped, size, msg) {
     expect(sel.size()).toBe(size, msg + ' clip path (selection size)');
 

test/jasmine/tests/carpet_test.js

@@ -11,6 +11,9 @@ var createGraphDiv = require('../assets/create_graph_div');
 var destroyGraphDiv = require('../assets/destroy_graph_div');
 var fail = require('../assets/fail_test');
 
+var mouseEvent = require('../assets/mouse_event');
+var assertHoverLabelContent = require('../assets/custom_assertions').assertHoverLabelContent;
+
 describe('carpet supplyDefaults', function() {
     'use strict';
 
@@ -565,3 +568,39 @@ describe('scattercarpet array attributes', function() {
         .then(done);
     });
 });
+
+describe('scattercarpet hover labels', function() {
+    var gd;
+
+    afterEach(destroyGraphDiv);
+
+    function run(pos, fig, content) {
+        gd = createGraphDiv();
+
+        return Plotly.plot(gd, fig).then(function() {
+            mouseEvent('mousemove', pos[0], pos[1]);
+            assertHoverLabelContent([content, null]);
+        });
+    }
+
+    it('should generate hover label (base)', function(done) {
+        var fig = Lib.extendDeep({}, require('@mocks/scattercarpet.json'));
+
+        run(
+            [200, 200], fig,
+            [['a = 0.200', 'b = 3.500', 'y = 2.900'], 'a = 0.2']
+        )
+        .then(done);
+    });
+
+    it('should generate hover label with \'hoverinfo\' set', function(done) {
+        var fig = Lib.extendDeep({}, require('@mocks/scattercarpet.json'));
+        fig.data[5].hoverinfo = 'a+y';
+
+        run(
+            [200, 200], fig,
+            [['a = 0.200', 'y = 2.900'], null]
+        )
+        .then(done);
+    });
+});

test/jasmine/tests/choropleth_test.js

@@ -1,6 +1,17 @@
 var Choropleth = require('@src/traces/choropleth');
+
+var Plotly = require('@lib');
 var Plots = require('@src/plots/plots');
+var Lib = require('@src/lib');
+
+var d3 = require('d3');
+var createGraphDiv = require('../assets/create_graph_div');
+var destroyGraphDiv = require('../assets/destroy_graph_div');
+var mouseEvent = require('../assets/mouse_event');
 
+var customAssertions = require('../assets/custom_assertions');
+var assertHoverLabelStyle = customAssertions.assertHoverLabelStyle;
+var assertHoverLabelContent = customAssertions.assertHoverLabelContent;
 
 describe('Test choropleth', function() {
     'use strict';
@@ -45,7 +56,76 @@ describe('Test choropleth', function() {
             Choropleth.supplyDefaults(traceIn, traceOut, defaultColor, layout);
             expect(traceOut.visible).toBe(false);
         });
+    });
+});
+
+describe('Test choropleth hover:', function() {
+    var gd;
+
+    afterEach(destroyGraphDiv);
+
+    function run(pos, fig, content, style) {
+        gd = createGraphDiv();
+
+        style = style || {
+            bgcolor: 'rgb(68, 68, 68)',
+            bordercolor: 'rgb(255, 255, 255)',
+            fontColor: 'rgb(255, 255, 255)',
+            fontSize: 13,
+            fontFamily: 'Arial'
+        };
+
+        return Plotly.plot(gd, fig).then(function() {
+            mouseEvent('mousemove', pos[0], pos[1]);
+            assertHoverLabelContent([content, null]);
+            assertHoverLabelStyle(d3.select('g.hovertext'), style);
+        });
+    }
+
+    it('should generate hover label info (base)', function(done) {
+        var fig = Lib.extendDeep({}, require('@mocks/geo_first.json'));
+
+        run(
+            [400, 160],
+            fig,
+            [['RUS', '10', ''], 'trace 1']
+        )
+        .then(done);
+    });
+
+    it('should generate hover label info (\'text\' array case)', function(done) {
+        var fig = Lib.extendDeep({}, require('@mocks/geo_first.json'));
+        fig.data[1].text = ['tExT', 'TeXt', '-text-'];
+        fig.data[1].hoverinfo = 'text';
 
+        run(
+            [400, 160],
+            fig,
+            ['-text-', null]
+        )
+        .then(done);
     });
 
+    it('should generate hover label with custom styling', function(done) {
+        var fig = Lib.extendDeep({}, require('@mocks/geo_first.json'));
+        fig.data[1].hoverlabel = {
+            bgcolor: 'red',
+            bordercolor: ['blue', 'black', 'green'],
+            font: {family: 'Roboto'}
+        };
+
+        run(
+            [400, 160],
+            fig,
+            [['RUS', '10', ''], 'trace 1'],
+            {
+                bgcolor: 'rgb(255, 0, 0)',
+                bordercolor: 'rgb(0, 128, 0)',
+                fontColor: 'rgb(0, 128, 0)',
+                fontSize: 13,
+                fontFamily: 'Roboto'
+            }
+        )
+        .then(done);
+    });
 });

test/jasmine/tests/geo_test.js

@@ -553,72 +553,6 @@ describe('Test geo interactions', function() {
             Plotly.plot(gd, mockCopy.data, mockCopy.layout).then(done);
         });
 
-        describe('scattergeo hover labels', function() {
-            it('should show one hover text group', function() {
-                mouseEventScatterGeo('mousemove');
-                expect(d3.selectAll('g.hovertext').size()).toEqual(1);
-            });
-
-            it('should show longitude and latitude values', function() {
-                mouseEventScatterGeo('mousemove');
-
-                var node = d3.selectAll('g.hovertext').selectAll('tspan')[0][0];
-                expect(node.innerHTML).toEqual('(0°, 0°)');
-            });
-
-            it('should show the trace name', function() {
-                mouseEventScatterGeo('mousemove');
-
-                var node = d3.selectAll('g.hovertext').selectAll('text')[0][0];
-                expect(node.innerHTML).toEqual('trace 0');
-            });
-
-            it('should show *text* (case 1)', function(done) {
-                Plotly.restyle(gd, 'text', [['A', 'B']]).then(function() {
-                    mouseEventScatterGeo('mousemove');
-
-                    var node = d3.selectAll('g.hovertext').selectAll('tspan')[0][1];
-                    expect(node.innerHTML).toEqual('A');
-                })
-                .then(done);
-            });
-
-            it('should show *text* (case 2)', function(done) {
-                Plotly.restyle(gd, 'text', [[null, 'B']]).then(function() {
-                    mouseEventScatterGeo('mousemove');
-
-                    var node = d3.selectAll('g.hovertext').selectAll('tspan')[0][1];
-                    expect(node).toBeUndefined();
-                })
-                .then(done);
-            });
-
-            it('should show *text* (case 3)', function(done) {
-                Plotly.restyle(gd, 'text', [['', 'B']]).then(function() {
-                    mouseEventScatterGeo('mousemove');
-
-                    var node = d3.selectAll('g.hovertext').selectAll('tspan')[0][1];
-                    expect(node).toBeUndefined();
-                })
-                .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 pathStyle = window.getComputedStyle(d3.select('g.hovertext path').node());
-                    expect(pathStyle.fill).toEqual('rgb(255, 0, 0)', 'bgcolor');
-                    expect(pathStyle.stroke).toEqual('rgb(0, 0, 255)', 'bordecolor[0]');
-                })
-                .then(done);
-            });
-        });
-
         describe('scattergeo hover events', function() {
             var ptData, cnt;
 
@@ -745,30 +679,6 @@ describe('Test geo interactions', function() {
             });
         });
 
-        describe('choropleth hover labels', function() {
-            beforeEach(function() {
-                mouseEventChoropleth('mouseover');
-                mouseEventChoropleth('mousemove');
-            });
-
-            it('should show one hover text group', function() {
-                expect(d3.selectAll('g.hovertext').size()).toEqual(1);
-            });
-
-            it('should show location and z values', function() {
-                var node = d3.selectAll('g.hovertext').selectAll('tspan')[0];
-
-                expect(node[0].innerHTML).toEqual('RUS');
-                expect(node[1].innerHTML).toEqual('10');
-            });
-
-            it('should show the trace name', function() {
-                var node = d3.selectAll('g.hovertext').selectAll('text')[0][0];
-
-                expect(node.innerHTML).toEqual('trace 1');
-            });
-        });
-
         describe('choropleth hover events', function() {
             var ptData;