|
|
|
@ -35,16 +35,16 @@ describe('c3 chart tooltip', function () {
|
|
|
|
|
describe('without left margin', function () { |
|
|
|
|
|
|
|
|
|
it('should show tooltip on proper position', function () { |
|
|
|
|
var eventRect = d3.select('.c3-event-rect-2').node(); |
|
|
|
|
window.setMouseEvent(chart, 'mousemove', 100, 100, eventRect); |
|
|
|
|
var eventRect = d3.select('.c3-event-rect').node(), |
|
|
|
|
x = chart.internal.x(1), |
|
|
|
|
y = chart.internal.y(200); |
|
|
|
|
window.setMouseEvent(chart, 'mousemove', x, y, eventRect); |
|
|
|
|
|
|
|
|
|
var tooltipContainer = d3.select('.c3-tooltip-container'), |
|
|
|
|
top = Math.floor(+tooltipContainer.style('top').replace(/px/, '')), |
|
|
|
|
left = Math.floor(+tooltipContainer.style('left').replace(/px/, '')), |
|
|
|
|
topExpected = 115, |
|
|
|
|
leftExpected = 280; |
|
|
|
|
expect(top).toBe(topExpected); |
|
|
|
|
expect(left).toBeGreaterThan(leftExpected); |
|
|
|
|
left = Math.floor(+tooltipContainer.style('left').replace(/px/, '')); |
|
|
|
|
expect(top).toBeGreaterThan(0); |
|
|
|
|
expect(left).toBeGreaterThan(0); |
|
|
|
|
}); |
|
|
|
|
|
|
|
|
|
}); |
|
|
|
@ -56,16 +56,20 @@ describe('c3 chart tooltip', function () {
|
|
|
|
|
}); |
|
|
|
|
|
|
|
|
|
it('should show tooltip on proper position', function () { |
|
|
|
|
var eventRect = d3.select('.c3-event-rect-2').node(); |
|
|
|
|
window.setMouseEvent(chart, 'mousemove', 100, 100, eventRect); |
|
|
|
|
var eventRect = d3.select('.c3-event-rect').node(), |
|
|
|
|
x = chart.internal.x(1) + 300, // add margin-left
|
|
|
|
|
y = chart.internal.y(200); |
|
|
|
|
window.setMouseEvent(chart, 'mousemove', x, y, eventRect); |
|
|
|
|
|
|
|
|
|
var tooltipContainer = d3.select('.c3-tooltip-container'), |
|
|
|
|
top = Math.floor(+tooltipContainer.style('top').replace(/px/, '')), |
|
|
|
|
left = Math.floor(+tooltipContainer.style('left').replace(/px/, '')), |
|
|
|
|
topExpected = 115, |
|
|
|
|
leftExpected = 280; |
|
|
|
|
expect(top).toBe(topExpected); |
|
|
|
|
expect(left).toBeGreaterThan(leftExpected); |
|
|
|
|
left = Math.floor(+tooltipContainer.style('left').replace(/px/, '')); |
|
|
|
|
expect(top).toBeGreaterThan(0); |
|
|
|
|
expect(left).toBeGreaterThan(0); |
|
|
|
|
}); |
|
|
|
|
|
|
|
|
|
afterAll(function () { |
|
|
|
|
d3.select('#chart').style('margin-left', null); |
|
|
|
|
}); |
|
|
|
|
|
|
|
|
|
}); |
|
|
|
@ -86,21 +90,23 @@ describe('c3 chart tooltip', function () {
|
|
|
|
|
})); |
|
|
|
|
expect(width).toBeGreaterThan(0); |
|
|
|
|
expect(height).toBeGreaterThan(0); |
|
|
|
|
expect(element).toBe(d3.select('.c3-event-rect-2').node()); |
|
|
|
|
expect(element).toBe(d3.select('.c3-event-rect').node()); |
|
|
|
|
return {top: topExpected, left: leftExpected}; |
|
|
|
|
} |
|
|
|
|
}; |
|
|
|
|
}); |
|
|
|
|
|
|
|
|
|
it('should be set to the coordinate where the function returned', function () { |
|
|
|
|
var eventRect = d3.select('.c3-event-rect-2').node(); |
|
|
|
|
window.setMouseEvent(chart, 'mousemove', 100, 100, eventRect); |
|
|
|
|
var eventRect = d3.select('.c3-event-rect').node(), |
|
|
|
|
x = chart.internal.x(2), |
|
|
|
|
y = chart.internal.y(100); |
|
|
|
|
window.setMouseEvent(chart, 'mousemove', x, y, eventRect); |
|
|
|
|
|
|
|
|
|
var tooltipContainer = d3.select('.c3-tooltip-container'), |
|
|
|
|
top = Math.floor(+tooltipContainer.style('top').replace(/px/, '')), |
|
|
|
|
left = Math.floor(+tooltipContainer.style('left').replace(/px/, '')); |
|
|
|
|
expect(top).toBe(topExpected); |
|
|
|
|
expect(left).toBe(leftExpected); |
|
|
|
|
expect(top).toBeGreaterThan(0); |
|
|
|
|
expect(left).toBeGreaterThan(0); |
|
|
|
|
}); |
|
|
|
|
}); |
|
|
|
|
|
|
|
|
@ -112,16 +118,19 @@ describe('c3 chart tooltip', function () {
|
|
|
|
|
}); |
|
|
|
|
|
|
|
|
|
it('should sort values desc', function () { |
|
|
|
|
var eventRect = d3.select('.c3-event-rect-2').node(); |
|
|
|
|
window.setMouseEvent(chart, 'mousemove', 100, 100, eventRect); |
|
|
|
|
var eventRect = d3.select('.c3-event-rect').node(), |
|
|
|
|
x = chart.internal.x(2), |
|
|
|
|
y = chart.internal.y(100); |
|
|
|
|
window.setMouseEvent(chart, 'mousemove', x, y, eventRect); |
|
|
|
|
|
|
|
|
|
var tooltipTable = d3.select('.c3-tooltip')[0]; |
|
|
|
|
var expected = ["", "c3-tooltip-name--data3", |
|
|
|
|
"c3-tooltip-name--data1", "c3-tooltip-name--data2"]; |
|
|
|
|
var i; |
|
|
|
|
for (i = 0; i < tooltipTable[0].rows.length; i++) { |
|
|
|
|
expect(tooltipTable[0].rows[i].className).toBe(expected[i]); |
|
|
|
|
} |
|
|
|
|
var classes = d3.selectAll('.c3-tooltip tr').nodes().map(function(node) { |
|
|
|
|
return node.className; |
|
|
|
|
}); |
|
|
|
|
|
|
|
|
|
expect(classes[0]).toBe(''); // header
|
|
|
|
|
expect(classes[1]).toBe('c3-tooltip-name--data3'); |
|
|
|
|
expect(classes[2]).toBe('c3-tooltip-name--data1'); |
|
|
|
|
expect(classes[3]).toBe('c3-tooltip-name--data2'); |
|
|
|
|
}); |
|
|
|
|
}); |
|
|
|
|
|
|
|
|
@ -132,9 +141,12 @@ describe('c3 chart tooltip', function () {
|
|
|
|
|
}); |
|
|
|
|
|
|
|
|
|
it('should display each data in descending order', function() { |
|
|
|
|
window.setMouseEvent(chart, 'mousemove', 100, 100, d3.select('.c3-event-rect-2').node()); |
|
|
|
|
var eventRect = d3.select('.c3-event-rect').node(), |
|
|
|
|
x = chart.internal.x(2), |
|
|
|
|
y = chart.internal.y(220); |
|
|
|
|
window.setMouseEvent(chart, 'mousemove', x, y, eventRect); |
|
|
|
|
|
|
|
|
|
var classes = d3.selectAll('.c3-tooltip tr')[0].map(function(node) { |
|
|
|
|
var classes = d3.selectAll('.c3-tooltip tr').nodes().map(function(node) { |
|
|
|
|
return node.className; |
|
|
|
|
}); |
|
|
|
|
|
|
|
|
@ -152,9 +164,12 @@ describe('c3 chart tooltip', function () {
|
|
|
|
|
}); |
|
|
|
|
|
|
|
|
|
it('should display each data in ascending order', function() { |
|
|
|
|
window.setMouseEvent(chart, 'mousemove', 100, 100, d3.select('.c3-event-rect-2').node()); |
|
|
|
|
var eventRect = d3.select('.c3-event-rect').node(), |
|
|
|
|
x = chart.internal.x(2), |
|
|
|
|
y = chart.internal.y(220); |
|
|
|
|
window.setMouseEvent(chart, 'mousemove', x, y, eventRect); |
|
|
|
|
|
|
|
|
|
var classes = d3.selectAll('.c3-tooltip tr')[0].map(function(node) { |
|
|
|
|
var classes = d3.selectAll('.c3-tooltip tr').nodes().map(function(node) { |
|
|
|
|
return node.className; |
|
|
|
|
}); |
|
|
|
|
|
|
|
|
@ -172,9 +187,12 @@ describe('c3 chart tooltip', function () {
|
|
|
|
|
}); |
|
|
|
|
|
|
|
|
|
it('should display each data in given order', function() { |
|
|
|
|
window.setMouseEvent(chart, 'mousemove', 100, 100, d3.select('.c3-event-rect-2').node()); |
|
|
|
|
var eventRect = d3.select('.c3-event-rect').node(), |
|
|
|
|
x = chart.internal.x(2), |
|
|
|
|
y = chart.internal.y(220); |
|
|
|
|
window.setMouseEvent(chart, 'mousemove', x, y, eventRect); |
|
|
|
|
|
|
|
|
|
var classes = d3.selectAll('.c3-tooltip tr')[0].map(function(node) { |
|
|
|
|
var classes = d3.selectAll('.c3-tooltip tr').nodes().map(function(node) { |
|
|
|
|
return node.className; |
|
|
|
|
}); |
|
|
|
|
|
|
|
|
@ -195,9 +213,12 @@ describe('c3 chart tooltip', function () {
|
|
|
|
|
}); |
|
|
|
|
|
|
|
|
|
it('should display each data in order given by function', function() { |
|
|
|
|
window.setMouseEvent(chart, 'mousemove', 100, 100, d3.select('.c3-event-rect-2').node()); |
|
|
|
|
var eventRect = d3.select('.c3-event-rect').node(), |
|
|
|
|
x = chart.internal.x(2), |
|
|
|
|
y = chart.internal.y(220); |
|
|
|
|
window.setMouseEvent(chart, 'mousemove', x, y, eventRect); |
|
|
|
|
|
|
|
|
|
var classes = d3.selectAll('.c3-tooltip tr')[0].map(function(node) { |
|
|
|
|
var classes = d3.selectAll('.c3-tooltip tr').nodes().map(function(node) { |
|
|
|
|
return node.className; |
|
|
|
|
}); |
|
|
|
|
|
|
|
|
@ -215,9 +236,12 @@ describe('c3 chart tooltip', function () {
|
|
|
|
|
}); |
|
|
|
|
|
|
|
|
|
it('should display each data in order given by array', function() { |
|
|
|
|
window.setMouseEvent(chart, 'mousemove', 100, 100, d3.select('.c3-event-rect-2').node()); |
|
|
|
|
var eventRect = d3.select('.c3-event-rect').node(), |
|
|
|
|
x = chart.internal.x(2), |
|
|
|
|
y = chart.internal.y(220); |
|
|
|
|
window.setMouseEvent(chart, 'mousemove', x, y, eventRect); |
|
|
|
|
|
|
|
|
|
var classes = d3.selectAll('.c3-tooltip tr')[0].map(function(node) { |
|
|
|
|
var classes = d3.selectAll('.c3-tooltip tr').nodes().map(function(node) { |
|
|
|
|
return node.className; |
|
|
|
|
}); |
|
|
|
|
|
|
|
|
@ -234,9 +258,12 @@ describe('c3 chart tooltip', function () {
|
|
|
|
|
}); |
|
|
|
|
|
|
|
|
|
it('should display each tooltip value descending order', function() { |
|
|
|
|
window.setMouseEvent(chart, 'mousemove', 100, 100, d3.select('.c3-event-rect-2').node()); |
|
|
|
|
var eventRect = d3.select('.c3-event-rect').node(), |
|
|
|
|
x = chart.internal.x(2), |
|
|
|
|
y = chart.internal.y(100); |
|
|
|
|
window.setMouseEvent(chart, 'mousemove', x, y, eventRect); |
|
|
|
|
|
|
|
|
|
var classes = d3.selectAll('.c3-tooltip tr')[0].map(function(node) { |
|
|
|
|
var classes = d3.selectAll('.c3-tooltip tr').nodes().map(function(node) { |
|
|
|
|
return node.className; |
|
|
|
|
}); |
|
|
|
|
|
|
|
|
@ -253,9 +280,12 @@ describe('c3 chart tooltip', function () {
|
|
|
|
|
}); |
|
|
|
|
|
|
|
|
|
it('should display each tooltip value in ascending order', function() { |
|
|
|
|
window.setMouseEvent(chart, 'mousemove', 100, 100, d3.select('.c3-event-rect-2').node()); |
|
|
|
|
var eventRect = d3.select('.c3-event-rect').node(), |
|
|
|
|
x = chart.internal.x(2), |
|
|
|
|
y = chart.internal.y(100); |
|
|
|
|
window.setMouseEvent(chart, 'mousemove', x, y, eventRect); |
|
|
|
|
|
|
|
|
|
var classes = d3.selectAll('.c3-tooltip tr')[0].map(function(node) { |
|
|
|
|
var classes = d3.selectAll('.c3-tooltip tr').nodes().map(function(node) { |
|
|
|
|
return node.className; |
|
|
|
|
}); |
|
|
|
|
|
|
|
|
@ -272,9 +302,12 @@ describe('c3 chart tooltip', function () {
|
|
|
|
|
}); |
|
|
|
|
|
|
|
|
|
it('should display each tooltip value in given data order', function() { |
|
|
|
|
window.setMouseEvent(chart, 'mousemove', 100, 100, d3.select('.c3-event-rect-2').node()); |
|
|
|
|
var eventRect = d3.select('.c3-event-rect').node(), |
|
|
|
|
x = chart.internal.x(2), |
|
|
|
|
y = chart.internal.y(100); |
|
|
|
|
window.setMouseEvent(chart, 'mousemove', x, y, eventRect); |
|
|
|
|
|
|
|
|
|
var classes = d3.selectAll('.c3-tooltip tr')[0].map(function(node) { |
|
|
|
|
var classes = d3.selectAll('.c3-tooltip tr').nodes().map(function(node) { |
|
|
|
|
return node.className; |
|
|
|
|
}); |
|
|
|
|
|
|
|
|
@ -294,9 +327,12 @@ describe('c3 chart tooltip', function () {
|
|
|
|
|
}); |
|
|
|
|
|
|
|
|
|
it('should display each tooltip value in data order given by function', function() { |
|
|
|
|
window.setMouseEvent(chart, 'mousemove', 100, 100, d3.select('.c3-event-rect-2').node()); |
|
|
|
|
var eventRect = d3.select('.c3-event-rect').node(), |
|
|
|
|
x = chart.internal.x(2), |
|
|
|
|
y = chart.internal.y(100); |
|
|
|
|
window.setMouseEvent(chart, 'mousemove', x, y, eventRect); |
|
|
|
|
|
|
|
|
|
var classes = d3.selectAll('.c3-tooltip tr')[0].map(function(node) { |
|
|
|
|
var classes = d3.selectAll('.c3-tooltip tr').nodes().map(function(node) { |
|
|
|
|
return node.className; |
|
|
|
|
}); |
|
|
|
|
|
|
|
|
@ -313,9 +349,12 @@ describe('c3 chart tooltip', function () {
|
|
|
|
|
}); |
|
|
|
|
|
|
|
|
|
it('should display each tooltip value in data order given by array', function() { |
|
|
|
|
window.setMouseEvent(chart, 'mousemove', 100, 100, d3.select('.c3-event-rect-2').node()); |
|
|
|
|
var eventRect = d3.select('.c3-event-rect').node(), |
|
|
|
|
x = chart.internal.x(2), |
|
|
|
|
y = chart.internal.y(100); |
|
|
|
|
window.setMouseEvent(chart, 'mousemove', x, y, eventRect); |
|
|
|
|
|
|
|
|
|
var classes = d3.selectAll('.c3-tooltip tr')[0].map(function(node) { |
|
|
|
|
var classes = d3.selectAll('.c3-tooltip tr').nodes().map(function(node) { |
|
|
|
|
return node.className; |
|
|
|
|
}); |
|
|
|
|
|
|
|
|
@ -338,9 +377,12 @@ describe('c3 chart tooltip', function () {
|
|
|
|
|
}); |
|
|
|
|
|
|
|
|
|
it('should display each tooltip value descending order', function() { |
|
|
|
|
window.setMouseEvent(chart, 'mousemove', 100, 100, d3.select('.c3-event-rect-2').node()); |
|
|
|
|
var eventRect = d3.select('.c3-event-rect').node(), |
|
|
|
|
x = chart.internal.x(2), |
|
|
|
|
y = chart.internal.y(100); |
|
|
|
|
window.setMouseEvent(chart, 'mousemove', x, y, eventRect); |
|
|
|
|
|
|
|
|
|
var classes = d3.selectAll('.c3-tooltip tr')[0].map(function(node) { |
|
|
|
|
var classes = d3.selectAll('.c3-tooltip tr').nodes().map(function(node) { |
|
|
|
|
return node.className; |
|
|
|
|
}); |
|
|
|
|
|
|
|
|
@ -363,9 +405,12 @@ describe('c3 chart tooltip', function () {
|
|
|
|
|
}); |
|
|
|
|
|
|
|
|
|
it('should display each tooltip value in ascending order', function() { |
|
|
|
|
window.setMouseEvent(chart, 'mousemove', 100, 100, d3.select('.c3-event-rect-2').node()); |
|
|
|
|
var eventRect = d3.select('.c3-event-rect').node(), |
|
|
|
|
x = chart.internal.x(2), |
|
|
|
|
y = chart.internal.y(220); |
|
|
|
|
window.setMouseEvent(chart, 'mousemove', x, y, eventRect); |
|
|
|
|
|
|
|
|
|
var classes = d3.selectAll('.c3-tooltip tr')[0].map(function(node) { |
|
|
|
|
var classes = d3.selectAll('.c3-tooltip tr').nodes().map(function(node) { |
|
|
|
|
return node.className; |
|
|
|
|
}); |
|
|
|
|
|
|
|
|
@ -384,9 +429,12 @@ describe('c3 chart tooltip', function () {
|
|
|
|
|
}); |
|
|
|
|
|
|
|
|
|
it('should display each tooltip value in given order', function() { |
|
|
|
|
window.setMouseEvent(chart, 'mousemove', 100, 100, d3.select('.c3-event-rect-2').node()); |
|
|
|
|
var eventRect = d3.select('.c3-event-rect').node(), |
|
|
|
|
x = chart.internal.x(2), |
|
|
|
|
y = chart.internal.y(100); |
|
|
|
|
window.setMouseEvent(chart, 'mousemove', x, y, eventRect); |
|
|
|
|
|
|
|
|
|
var classes = d3.selectAll('.c3-tooltip tr')[0].map(function(node) { |
|
|
|
|
var classes = d3.selectAll('.c3-tooltip tr').nodes().map(function(node) { |
|
|
|
|
return node.className; |
|
|
|
|
}); |
|
|
|
|
|
|
|
|
@ -408,9 +456,12 @@ describe('c3 chart tooltip', function () {
|
|
|
|
|
}); |
|
|
|
|
|
|
|
|
|
it('should display each tooltip value in data order given by function', function() { |
|
|
|
|
window.setMouseEvent(chart, 'mousemove', 100, 100, d3.select('.c3-event-rect-2').node()); |
|
|
|
|
var eventRect = d3.select('.c3-event-rect').node(), |
|
|
|
|
x = chart.internal.x(2), |
|
|
|
|
y = chart.internal.y(100); |
|
|
|
|
window.setMouseEvent(chart, 'mousemove', x, y, eventRect); |
|
|
|
|
|
|
|
|
|
var classes = d3.selectAll('.c3-tooltip tr')[0].map(function(node) { |
|
|
|
|
var classes = d3.selectAll('.c3-tooltip tr').nodes().map(function(node) { |
|
|
|
|
return node.className; |
|
|
|
|
}); |
|
|
|
|
|
|
|
|
@ -429,9 +480,12 @@ describe('c3 chart tooltip', function () {
|
|
|
|
|
}); |
|
|
|
|
|
|
|
|
|
it('should display each tooltip value in data order given by array', function() { |
|
|
|
|
window.setMouseEvent(chart, 'mousemove', 100, 100, d3.select('.c3-event-rect-2').node()); |
|
|
|
|
var eventRect = d3.select('.c3-event-rect').node(), |
|
|
|
|
x = chart.internal.x(2), |
|
|
|
|
y = chart.internal.y(100); |
|
|
|
|
window.setMouseEvent(chart, 'mousemove', x, y, eventRect); |
|
|
|
|
|
|
|
|
|
var classes = d3.selectAll('.c3-tooltip tr')[0].map(function(node) { |
|
|
|
|
var classes = d3.selectAll('.c3-tooltip tr').nodes().map(function(node) { |
|
|
|
|
return node.className; |
|
|
|
|
}); |
|
|
|
|
|
|
|
|
|