diff --git a/src/plots/cartesian/graph_interact.js b/src/plots/cartesian/graph_interact.js index 3af14739642..9994260899c 100644 --- a/src/plots/cartesian/graph_interact.js +++ b/src/plots/cartesian/graph_interact.js @@ -778,8 +778,9 @@ function createHoverText(hoverData, opts) { var i, traceHoverinfo; for (i = 0; i < hoverData.length; i++) { traceHoverinfo = hoverData[i].trace.hoverinfo; - if (traceHoverinfo.indexOf('all')===-1 && - traceHoverinfo.indexOf(hovermode)===-1) { + var parts = traceHoverinfo.split('+'); + if (parts.indexOf('all') === -1 && + parts.indexOf(hovermode) === -1) { showCommonLabel = false; break; } diff --git a/test/jasmine/tests/hover_label_test.js b/test/jasmine/tests/hover_label_test.js new file mode 100644 index 00000000000..97d81031c58 --- /dev/null +++ b/test/jasmine/tests/hover_label_test.js @@ -0,0 +1,245 @@ +var d3 = require('d3'); + +var Plotly = require('@src/index'); +var Fx = require('@src/plots/cartesian/graph_interact'); +var Lib = require('@src/lib'); + +var createGraphDiv = require('../assets/create_graph_div'); +var destroyGraphDiv = require('../assets/destroy_graph_div'); + +describe('hover info', function() { + 'use strict'; + + var mock = require('@mocks/14.json'), + evt = { + clientX: mock.layout.width/ 2, + clientY: mock.layout.height / 2 + }; + + afterEach(destroyGraphDiv); + + describe('hover info', function() { + var mockCopy = Lib.extendDeep({}, mock); + + beforeEach(function(done) { + Plotly.plot(createGraphDiv(), mockCopy.data, mockCopy.layout).then(done); + }); + + it('responds to hover', function() { + var gd = document.getElementById('graph'); + Fx.hover('graph', evt, 'xy'); + + var hoverTrace = gd._hoverdata[0]; + + expect(hoverTrace.curveNumber).toEqual(0); + expect(hoverTrace.pointNumber).toEqual(17); + expect(hoverTrace.x).toEqual(0.388); + expect(hoverTrace.y).toEqual(1); + + expect(d3.selectAll('g.axistext').size()).toEqual(1); + expect(d3.selectAll('g.hovertext').size()).toEqual(1); + expect(d3.selectAll('g.axistext').select('text').html()).toEqual('0.388'); + expect(d3.selectAll('g.hovertext').select('text').html()).toEqual('1'); + }); + }); + + describe('hover info x', function() { + var mockCopy = Lib.extendDeep({}, mock); + + mockCopy.data[0].hoverinfo = 'x'; + + beforeEach(function(done) { + Plotly.plot(createGraphDiv(), mockCopy.data, mockCopy.layout).then(done); + }); + + it('responds to hover x', function() { + var gd = document.getElementById('graph'); + Fx.hover('graph', evt, 'xy'); + + var hoverTrace = gd._hoverdata[0]; + + expect(hoverTrace.curveNumber).toEqual(0); + expect(hoverTrace.pointNumber).toEqual(17); + expect(hoverTrace.x).toEqual(0.388); + expect(hoverTrace.y).toEqual(1); + + expect(d3.selectAll('g.axistext').size()).toEqual(1); + expect(d3.selectAll('g.hovertext').size()).toEqual(0); + expect(d3.selectAll('g.axistext').select('text').html()).toEqual('0.388'); + }); + }); + + describe('hover info y', function() { + var mockCopy = Lib.extendDeep({}, mock); + + mockCopy.data[0].hoverinfo = 'y'; + + beforeEach(function(done) { + Plotly.plot(createGraphDiv(), mockCopy.data, mockCopy.layout).then(done); + }); + + it('responds to hover y', function() { + var gd = document.getElementById('graph'); + Fx.hover('graph', evt, 'xy'); + + var hoverTrace = gd._hoverdata[0]; + + expect(hoverTrace.curveNumber).toEqual(0); + expect(hoverTrace.pointNumber).toEqual(17); + expect(hoverTrace.x).toEqual(0.388); + expect(hoverTrace.y).toEqual(1); + + expect(d3.selectAll('g.axistext').size()).toEqual(0); + expect(d3.selectAll('g.hovertext').size()).toEqual(1); + expect(d3.selectAll('g.hovertext').select('text').html()).toEqual('1'); + }); + }); + + describe('hover info text', function() { + var mockCopy = Lib.extendDeep({}, mock); + + mockCopy.data[0].text = [] + mockCopy.data[0].text[17] = 'hover text' + mockCopy.data[0].hoverinfo = 'text'; + + beforeEach(function(done) { + Plotly.plot(createGraphDiv(), mockCopy.data, mockCopy.layout).then(done); + }); + + it('responds to hover text', function() { + var gd = document.getElementById('graph'); + Fx.hover('graph', evt, 'xy'); + + var hoverTrace = gd._hoverdata[0]; + + expect(hoverTrace.curveNumber).toEqual(0); + expect(hoverTrace.pointNumber).toEqual(17); + expect(hoverTrace.x).toEqual(0.388); + expect(hoverTrace.y).toEqual(1); + + expect(d3.selectAll('g.axistext').size()).toEqual(0); + expect(d3.selectAll('g.hovertext').size()).toEqual(1); + expect(d3.selectAll('g.hovertext').select('text').html()).toEqual('hover text'); + }); + }); + + describe('hover info all', function() { + var mockCopy = Lib.extendDeep({}, mock); + + mockCopy.data[0].text = [] + mockCopy.data[0].text[17] = 'hover text' + mockCopy.data[0].hoverinfo = 'all'; + + beforeEach(function(done) { + Plotly.plot(createGraphDiv(), mockCopy.data, mockCopy.layout).then(done); + }); + + it('responds to hover all', function() { + var gd = document.getElementById('graph'); + Fx.hover('graph', evt, 'xy'); + + var hoverTrace = gd._hoverdata[0]; + + expect(hoverTrace.curveNumber).toEqual(0); + expect(hoverTrace.pointNumber).toEqual(17); + expect(hoverTrace.x).toEqual(0.388); + expect(hoverTrace.y).toEqual(1); + + expect(d3.selectAll('g.axistext').size()).toEqual(1); + expect(d3.selectAll('g.hovertext').size()).toEqual(1); + expect(d3.selectAll('g.axistext').select('text').html()).toEqual('0.388'); + expect(d3.selectAll('g.hovertext').select('text').selectAll('tspan').size()).toEqual(2); + expect(d3.selectAll('g.hovertext').selectAll('tspan')[0][0].innerHTML).toEqual('1') + expect(d3.selectAll('g.hovertext').selectAll('tspan')[0][1].innerHTML).toEqual('hover text') + }); + }); + + describe('hover info y+text', function() { + var mockCopy = Lib.extendDeep({}, mock); + + mockCopy.data[0].text = [] + mockCopy.data[0].text[17] = 'hover text' + mockCopy.data[0].hoverinfo = 'y+text'; + + beforeEach(function(done) { + Plotly.plot(createGraphDiv(), mockCopy.data, mockCopy.layout).then(done); + }); + + it('responds to hover y+text', function() { + var gd = document.getElementById('graph'); + Fx.hover('graph', evt, 'xy'); + + var hoverTrace = gd._hoverdata[0]; + + expect(hoverTrace.curveNumber).toEqual(0); + expect(hoverTrace.pointNumber).toEqual(17); + expect(hoverTrace.x).toEqual(0.388); + expect(hoverTrace.y).toEqual(1); + + expect(d3.selectAll('g.axistext').size()).toEqual(0); + expect(d3.selectAll('g.hovertext').size()).toEqual(1); + expect(d3.selectAll('g.hovertext').selectAll('tspan').size()).toEqual(2); + expect(d3.selectAll('g.hovertext').selectAll('tspan')[0][0].innerHTML).toEqual('1') + expect(d3.selectAll('g.hovertext').selectAll('tspan')[0][1].innerHTML).toEqual('hover text') + }); + }); + + describe('hover info x+text', function() { + var mockCopy = Lib.extendDeep({}, mock); + + mockCopy.data[0].text = [] + mockCopy.data[0].text[17] = 'hover text' + mockCopy.data[0].hoverinfo = 'x+text'; + + beforeEach(function(done) { + Plotly.plot(createGraphDiv(), mockCopy.data, mockCopy.layout).then(done); + }); + + it('responds to hover x+text', function() { + var gd = document.getElementById('graph'); + Fx.hover('graph', evt, 'xy'); + + var hoverTrace = gd._hoverdata[0]; + + expect(hoverTrace.curveNumber).toEqual(0); + expect(hoverTrace.pointNumber).toEqual(17); + expect(hoverTrace.x).toEqual(0.388); + expect(hoverTrace.y).toEqual(1); + + expect(d3.selectAll('g.axistext').size()).toEqual(1); + expect(d3.selectAll('g.hovertext').size()).toEqual(1); + expect(d3.selectAll('g.axistext').select('text').html()).toEqual('0.388'); + expect(d3.selectAll('g.hovertext').select('text').html()).toEqual('hover text'); + }); + }); + + describe('hover info text with html', function() { + var mockCopy = Lib.extendDeep({}, mock); + + mockCopy.data[0].text = [] + mockCopy.data[0].text[17] = 'hover
text' + mockCopy.data[0].hoverinfo = 'text'; + + beforeEach(function(done) { + Plotly.plot(createGraphDiv(), mockCopy.data, mockCopy.layout).then(done); + }); + + it('responds to hover text with html', function() { + var gd = document.getElementById('graph'); + Fx.hover('graph', evt, 'xy'); + + var hoverTrace = gd._hoverdata[0]; + + expect(hoverTrace.curveNumber).toEqual(0); + expect(hoverTrace.pointNumber).toEqual(17); + expect(hoverTrace.x).toEqual(0.388); + expect(hoverTrace.y).toEqual(1); + + expect(d3.selectAll('g.axistext').size()).toEqual(0); + expect(d3.selectAll('g.hovertext').size()).toEqual(1); + expect(d3.selectAll('g.hovertext').selectAll('tspan')[0][0].innerHTML).toEqual('hover') + expect(d3.selectAll('g.hovertext').selectAll('tspan')[0][1].innerHTML).toEqual('text') + expect(d3.selectAll('g.hovertext').select('text').selectAll('tspan').size()).toEqual(2); + }); + }); +}); diff --git a/test/jasmine/tests/plot_interact_test.js b/test/jasmine/tests/plot_interact_test.js index bddb8492853..80ed3a1918d 100644 --- a/test/jasmine/tests/plot_interact_test.js +++ b/test/jasmine/tests/plot_interact_test.js @@ -45,27 +45,6 @@ describe('Test plot structure', function () { expect(nodes[0].length).toEqual(Npts); }); - - it('responds to hover', function() { - var gd = document.getElementById('graph'); - - var evt = { - clientX: gd.layout.width/ 2, - clientY: gd.layout.height / 2 - }; - - Fx.hover('graph', evt, 'xy'); - - var hoverTrace = gd._hoverdata[0]; - - expect(hoverTrace.curveNumber).toEqual(0); - expect(hoverTrace.pointNumber).toEqual(17); - expect(hoverTrace.x).toEqual(0.388); - expect(hoverTrace.y).toEqual(1); - - expect(d3.selectAll('g.axistext')[0].length).toEqual(1); - expect(d3.selectAll('g.hovertext')[0].length).toEqual(1); - }); }); describe('pie traces', function() { @@ -86,7 +65,6 @@ describe('Test plot structure', function () { expect(nodes[0].length).toEqual(Npts); }); }); - }); describe('geo plots', function() {