From 9041b5a2b94cb5836687739d5280b28182810d09 Mon Sep 17 00:00:00 2001 From: Evert Timberg Date: Sat, 17 Sep 2016 15:57:33 -0400 Subject: [PATCH] Update default config tests and re-enable --- gulpfile.js | 1 - test/defaultConfig.tests.js | 559 ++++++++++++++++++------------------ 2 files changed, 281 insertions(+), 279 deletions(-) diff --git a/gulpfile.js b/gulpfile.js index b3dab98d11a..26ee0bd04cd 100644 --- a/gulpfile.js +++ b/gulpfile.js @@ -43,7 +43,6 @@ var testFiles = [ // Disable tests which need to be rewritten based on changes introduced by // the following changes: https://github.com/chartjs/Chart.js/pull/2346 '!./test/core.layoutService.tests.js', - '!./test/defaultConfig.tests.js' ]; gulp.task('bower', bowerTask); diff --git a/test/defaultConfig.tests.js b/test/defaultConfig.tests.js index 0123f420f9f..fb34d33ec2c 100644 --- a/test/defaultConfig.tests.js +++ b/test/defaultConfig.tests.js @@ -1,293 +1,296 @@ // Test the bubble chart default config -describe("Test the bubble chart default config", function() { - it('should reutrn correct tooltip strings', function() { - var config = Chart.defaults.bubble; - - // Title is always blank - expect(config.tooltips.callbacks.title()).toBe(''); - - // Item label - var data = { - datasets: [{ - label: 'My dataset', - data: [{ - x: 10, - y: 12, - r: 5 - }] - }] - }; - - var tooltipItem = { - datasetIndex: 0, - index: 0 - }; - - expect(config.tooltips.callbacks.label(tooltipItem, data)).toBe('My dataset: (10, 12, 5)'); +describe("Default Configs", function() { + describe("Bubble Chart", function() { + it('should return correct tooltip strings', function() { + var config = Chart.defaults.bubble; + var chart = window.acquireChart({ + type: 'bubble', + data: { + datasets: [{ + label: 'My dataset', + data: [{ + x: 10, + y: 12, + r: 5 + }] + }] + }, + options: config + }); + + // fake out the tooltip hover and force the tooltip to update + chart.tooltip._active = [chart.getDatasetMeta(0).data[0]]; + chart.tooltip.update(); + + // Title is always blank + expect(chart.tooltip._model.title).toEqual([]); + expect(chart.tooltip._model.body).toEqual([{ + before: [], + lines: ['My dataset: (10, 12, 5)'], + after: [] + }]); + }); }); -}); - -describe('Test the doughnut chart default config', function() { - it('should return correct tooltip strings', function() { - var config = Chart.defaults.doughnut; - - // Title is always blank - expect(config.tooltips.callbacks.title()).toBe(''); - - // Item label - var data = { - labels: ['label1', 'label2', 'label3'], - datasets: [{ - data: [10, 20, 30], - }] - }; - - var tooltipItem = { - datasetIndex: 0, - index: 1 - }; - - expect(config.tooltips.callbacks.label(tooltipItem, data)).toBe('label2: 20'); - }); - - it('should return the correct html legend', function() { - var config = Chart.defaults.doughnut; - - var chart = { - id: 'mychart', - data: { - labels: ['label1', 'label2'], - datasets: [{ - data: [10, 20], - backgroundColor: ['red', 'green'] - }] - } - }; - var expectedLegend = ''; - expect(config.legendCallback(chart)).toBe(expectedLegend); - }); - - it('should return correct legend label objects', function() { - var config = Chart.defaults.doughnut; - var data = { - labels: ['label1', 'label2', 'label3'], - datasets: [{ - data: [10, 20, NaN], - backgroundColor: ['red', 'green', 'blue'], - metaData: [{}, {}, {}] - }] - }; - - var expected = [{ - text: 'label1', - fillStyle: 'red', - hidden: false, - index: 0, - strokeStyle: '#000', - lineWidth: 2 - }, { - text: 'label2', - fillStyle: 'green', - hidden: false, - index: 1, - strokeStyle: '#000', - lineWidth: 2 - }, { - text: 'label3', - fillStyle: 'blue', - hidden: true, - index: 2, - strokeStyle: '#000', - lineWidth: 2 - }]; - - var chart = { - data: data, - options: { - elements: { - arc: { + describe('Doughnut Chart', function() { + it('should return correct tooltip strings', function() { + var config = Chart.defaults.doughnut; + var chart = window.acquireChart({ + type: 'doughnut', + data: { + labels: ['label1', 'label2', 'label3'], + datasets: [{ + data: [10, 20, 30], + }] + }, + options: config + }); + + // fake out the tooltip hover and force the tooltip to update + chart.tooltip._active = [chart.getDatasetMeta(0).data[1]]; + chart.tooltip.update(); + + // Title is always blank + expect(chart.tooltip._model.title).toEqual([]); + expect(chart.tooltip._model.body).toEqual([{ + before: [], + lines: ['label2: 20'], + after: [] + }]); + }); + + it('should return correct tooltip string for a multiline label', function() { + var config = Chart.defaults.doughnut; + var chart = window.acquireChart({ + type: 'doughnut', + data: { + labels: ['label1', ['row1', 'row2', 'row3'], 'label3'], + datasets: [{ + data: [10, 20, 30], + }] + }, + options: config + }); + + // fake out the tooltip hover and force the tooltip to update + chart.tooltip._active = [chart.getDatasetMeta(0).data[1]]; + chart.tooltip.update(); + + // Title is always blank + expect(chart.tooltip._model.title).toEqual([]); + expect(chart.tooltip._model.body).toEqual([{ + before: [], + lines: [ + 'row1: 20', + 'row2', + 'row3' + ], + after: [] + }]); + }); + + it('should return the correct html legend', function() { + var config = Chart.defaults.doughnut; + var chart = window.acquireChart({ + type: 'doughnut', + data: { + labels: ['label1', 'label2'], + datasets: [{ + data: [10, 20], + backgroundColor: ['red', 'green'] + }] + }, + options: config + }); + + var expectedLegend = ''; + expect(chart.generateLegend()).toBe(expectedLegend); + }); + + it('should return correct legend label objects', function() { + var config = Chart.defaults.doughnut; + var chart = window.acquireChart({ + type: 'doughnut', + data: { + labels: ['label1', 'label2', 'label3'], + datasets: [{ + data: [10, 20, NaN], + backgroundColor: ['red', 'green', 'blue'], borderWidth: 2, borderColor: '#000' - } - } - } - }; - expect(config.legend.labels.generateLabels.call({ chart: chart }, data)).toEqual(expected); - }); - - it('should hide the correct arc when a legend item is clicked', function() { - var config = Chart.defaults.doughnut; - - var legendItem = { - text: 'label1', - fillStyle: 'red', - hidden: false, - index: 0 - }; - - var chart = { - data: { - labels: ['label1', 'label2', 'label3'], - datasets: [{ - data: [10, 20, NaN], - backgroundColor: ['red', 'green', 'blue'] - }] - }, - update: function() {} - }; - - spyOn(chart, 'update'); - var scope = { - chart: chart - }; - - config.legend.onClick.call(scope, null, legendItem); - - expect(chart.data.datasets[0].metaHiddenData).toEqual([10]); - expect(chart.data.datasets[0].data).toEqual([NaN, 20, NaN]); - - expect(chart.update).toHaveBeenCalled(); - - config.legend.onClick.call(scope, null, legendItem); - expect(chart.data.datasets[0].data).toEqual([10, 20, NaN]); - - // Should not toggle index 2 since there was never data for it - legendItem.index = 2; - config.legend.onClick.call(scope, null, legendItem); - expect(chart.data.datasets[0].data).toEqual([10, 20, NaN]); - }); -}); - -describe('Test the polar area chart default config', function() { - it('should return correct tooltip strings', function() { - var config = Chart.defaults.polarArea; - - // Title is always blank - expect(config.tooltips.callbacks.title()).toBe(''); - - // Item label - var data = { - labels: ['label1', 'label2', 'label3'], - datasets: [{ - data: [10, 20, 30], - }] - }; - - var tooltipItem = { - datasetIndex: 0, - index: 1, - yLabel: 20 - }; + }] + }, + options: config + }); + + var expected = [{ + text: 'label1', + fillStyle: 'red', + hidden: false, + index: 0, + strokeStyle: '#000', + lineWidth: 2 + }, { + text: 'label2', + fillStyle: 'green', + hidden: false, + index: 1, + strokeStyle: '#000', + lineWidth: 2 + }, { + text: 'label3', + fillStyle: 'blue', + hidden: true, + index: 2, + strokeStyle: '#000', + lineWidth: 2 + }]; + expect(chart.legend.legendItems).toEqual(expected); + }); + + it('should hide the correct arc when a legend item is clicked', function() { + var config = Chart.defaults.doughnut; + var chart = window.acquireChart({ + type: 'doughnut', + data: { + labels: ['label1', 'label2', 'label3'], + datasets: [{ + data: [10, 20, NaN], + backgroundColor: ['red', 'green', 'blue'], + borderWidth: 2, + borderColor: '#000' + }] + }, + options: config + }); + var meta = chart.getDatasetMeta(0); - expect(config.tooltips.callbacks.label(tooltipItem, data)).toBe('label2: 20'); - }); + spyOn(chart, 'update').and.callThrough(); - it('should return the correct html legend', function() { - var config = Chart.defaults.polarArea; + var legendItem = chart.legend.legendItems[0]; + config.legend.onClick.call(chart.legend, null, legendItem); - var chart = { - id: 'mychart', - data: { - labels: ['label1', 'label2'], - datasets: [{ - data: [10, 20], - backgroundColor: ['red', 'green'] - }] - } - }; - var expectedLegend = ''; + expect(meta.data[0].hidden).toBe(true); + expect(chart.update).toHaveBeenCalled(); - expect(config.legendCallback(chart)).toBe(expectedLegend); + config.legend.onClick.call(chart.legend, null, legendItem); + expect(meta.data[0].hidden).toBe(false); + }); }); - it('should return correct legend label objects', function() { - var config = Chart.defaults.polarArea; - var data = { - labels: ['label1', 'label2', 'label3'], - datasets: [{ - data: [10, 20, NaN], - backgroundColor: ['red', 'green', 'blue'], - metaData: [{}, {}, {}] - }] - }; - - var expected = [{ - text: 'label1', - fillStyle: 'red', - hidden: false, - index: 0, - strokeStyle: '#000', - lineWidth: 2 - }, { - text: 'label2', - fillStyle: 'green', - hidden: false, - index: 1, - strokeStyle: '#000', - lineWidth: 2 - }, { - text: 'label3', - fillStyle: 'blue', - hidden: true, - index: 2, - strokeStyle: '#000', - lineWidth: 2 - }]; - - var chart = { - data: data, - options: { - elements: { - arc: { + describe('Polar Area Chart', function() { + it('should return correct tooltip strings', function() { + var config = Chart.defaults.polarArea; + var chart = window.acquireChart({ + type: 'polarArea', + data: { + labels: ['label1', 'label2', 'label3'], + datasets: [{ + data: [10, 20, 30], + }] + }, + options: config + }); + + // fake out the tooltip hover and force the tooltip to update + chart.tooltip._active = [chart.getDatasetMeta(0).data[1]]; + chart.tooltip.update(); + + // Title is always blank + expect(chart.tooltip._model.title).toEqual([]); + expect(chart.tooltip._model.body).toEqual([{ + before: [], + lines: ['label2: 20'], + after: [] + }]); + }); + + it('should return the correct html legend', function() { + var config = Chart.defaults.polarArea; + var chart = window.acquireChart({ + type: 'polarArea', + data: { + labels: ['label1', 'label2'], + datasets: [{ + data: [10, 20], + backgroundColor: ['red', 'green'] + }] + }, + options: config + }); + + var expectedLegend = ''; + expect(chart.generateLegend()).toBe(expectedLegend); + }); + + it('should return correct legend label objects', function() { + var config = Chart.defaults.polarArea; + var chart = window.acquireChart({ + type: 'polarArea', + data: { + labels: ['label1', 'label2', 'label3'], + datasets: [{ + data: [10, 20, NaN], + backgroundColor: ['red', 'green', 'blue'], borderWidth: 2, borderColor: '#000' - } - } - } - }; - expect(config.legend.labels.generateLabels.call({ chart: chart }, data)).toEqual(expected); - }); - - it('should hide the correct arc when a legend item is clicked', function() { - var config = Chart.defaults.polarArea; - - var legendItem = { - text: 'label1', - fillStyle: 'red', - hidden: false, - index: 0 - }; - - var chart = { - data: { - labels: ['label1', 'label2', 'label3'], - datasets: [{ - data: [10, 20, NaN], - backgroundColor: ['red', 'green', 'blue'] - }] - }, - update: function() {} - }; - - spyOn(chart, 'update'); - var scope = { - chart: chart - }; - - config.legend.onClick.call(scope, null, legendItem); - - expect(chart.data.datasets[0].metaHiddenData).toEqual([10]); - expect(chart.data.datasets[0].data).toEqual([NaN, 20, NaN]); - - expect(chart.update).toHaveBeenCalled(); - - config.legend.onClick.call(scope, null, legendItem); - expect(chart.data.datasets[0].data).toEqual([10, 20, NaN]); - - // Should not toggle index 2 since there was never data for it - legendItem.index = 2; - config.legend.onClick.call(scope, null, legendItem); - expect(chart.data.datasets[0].data).toEqual([10, 20, NaN]); + }] + }, + options: config + }); + + var expected = [{ + text: 'label1', + fillStyle: 'red', + hidden: false, + index: 0, + strokeStyle: '#000', + lineWidth: 2 + }, { + text: 'label2', + fillStyle: 'green', + hidden: false, + index: 1, + strokeStyle: '#000', + lineWidth: 2 + }, { + text: 'label3', + fillStyle: 'blue', + hidden: true, + index: 2, + strokeStyle: '#000', + lineWidth: 2 + }]; + expect(chart.legend.legendItems).toEqual(expected); + }); + + it('should hide the correct arc when a legend item is clicked', function() { + var config = Chart.defaults.polarArea; + var chart = window.acquireChart({ + type: 'polarArea', + data: { + labels: ['label1', 'label2', 'label3'], + datasets: [{ + data: [10, 20, NaN], + backgroundColor: ['red', 'green', 'blue'], + borderWidth: 2, + borderColor: '#000' + }] + }, + options: config + }); + var meta = chart.getDatasetMeta(0); + + spyOn(chart, 'update').and.callThrough(); + + var legendItem = chart.legend.legendItems[0]; + config.legend.onClick.call(chart.legend, null, legendItem); + + expect(meta.data[0].hidden).toBe(true); + expect(chart.update).toHaveBeenCalled(); + + config.legend.onClick.call(chart.legend, null, legendItem); + expect(meta.data[0].hidden).toBe(false); + }); }); });