From: Simon Brunel Date: Mon, 25 Apr 2016 17:59:32 +0000 (+0200) Subject: Fix bar, bubble, doughnut, and polarArea tests X-Git-Tag: 2.1.0~13^2~2 X-Git-Url: http://git.ipfire.org/cgi-bin/gitweb.cgi?a=commitdiff_plain;h=e0353dac984719dcd7a7d04b760c74cabff932a5;p=thirdparty%2FChart.js.git Fix bar, bubble, doughnut, and polarArea tests Also replace the 2 spaces indentation in controller.bar.tests.js by tabs to match the overall code style. --- diff --git a/test/controller.bar.tests.js b/test/controller.bar.tests.js index 2564258a6..9c10bbbe5 100644 --- a/test/controller.bar.tests.js +++ b/test/controller.bar.tests.js @@ -1,856 +1,440 @@ // Test the bar controller describe('Bar controller tests', function() { - it('Should be constructed', function() { - var chart = { - data: { - datasets: [{ - - }, { - xAxisID: 'myXAxis', - yAxisID: 'myYAxis', - data: [] - }] - } - }; - - var controller = new Chart.controllers.bar(chart, 1); - expect(controller).not.toBe(undefined); - expect(controller.index).toBe(1); - expect(chart.data.datasets[1].metaData).toEqual([]); - - controller.updateIndex(0); - expect(controller.index).toBe(0); - }); - - it('Should use the first scale IDs if the dataset does not specify them', function() { - var chart = { - data: { - datasets: [{ - - }, { - data: [] - }] - }, - options: { - scales: { - xAxes: [{ - id: 'firstXScaleID' - }], - yAxes: [{ - id: 'firstYScaleID' - }] - } - } - }; - - var controller = new Chart.controllers.bar(chart, 1); - expect(chart.data.datasets[1].xAxisID).toBe('firstXScaleID'); - expect(chart.data.datasets[1].yAxisID).toBe('firstYScaleID'); - }); - - it('should correctly count the number of bar datasets', function() { - var chart = { - data: { - datasets: [{}, { - bar: true - }, { - bar: true - }] - }, - config: { - type: 'bar' - }, - options: { - scales: { - xAxes: [{ - id: 'firstXScaleID' - }], - yAxes: [{ - id: 'firstYScaleID' - }] - } - } - }; - - var controller = new Chart.controllers.bar(chart, 1); - expect(controller.getBarCount()).toBe(2); - }); - - it('should correctly get the bar index accounting for hidden datasets', function() { - var chart = { - data: { - datasets: [{ - bar: true, - }, { - bar: true, - hidden: true - }, {}, { - bar: true, - }] - }, - config: { - type: 'bar' - }, - options: { - scales: { - xAxes: [{ - id: 'firstXScaleID' - }], - yAxes: [{ - id: 'firstYScaleID' - }] - } - } - }; - - var controller = new Chart.controllers.bar(chart, 1); - expect(controller.getBarIndex(0)).toBe(0); - expect(controller.getBarIndex(3)).toBe(1); - }); - - it('Should create rectangle elements for each data item during initialization', function() { - var chart = { - data: { - datasets: [{}, { - data: [10, 15, 0, -4] - }] - }, - config: { - type: 'bar' - }, - options: { - scales: { - xAxes: [{ - id: 'firstXScaleID' - }], - yAxes: [{ - id: 'firstYScaleID' - }] - } - } - }; - - var controller = new Chart.controllers.bar(chart, 1); - - expect(chart.data.datasets[1].metaData.length).toBe(4); // 4 rectangles created - expect(chart.data.datasets[1].metaData[0] instanceof Chart.elements.Rectangle).toBe(true); - expect(chart.data.datasets[1].metaData[1] instanceof Chart.elements.Rectangle).toBe(true); - expect(chart.data.datasets[1].metaData[2] instanceof Chart.elements.Rectangle).toBe(true); - expect(chart.data.datasets[1].metaData[3] instanceof Chart.elements.Rectangle).toBe(true); - }); - - it('should update elements', function() { - var data = { - datasets: [{ - data: [1, 2], - label: 'dataset1', - xAxisID: 'firstXScaleID', - yAxisID: 'firstYScaleID', - bar: true - }, { - data: [10, 15, 0, -4], - label: 'dataset2' - }], - labels: ['label1', 'label2', 'label3', 'label4'] - }; - var mockContext = window.createMockContext(); - - var VerticalScaleConstructor = Chart.scaleService.getScaleConstructor('linear'); - var verticalScaleConfig = Chart.helpers.clone(Chart.scaleService.getScaleDefaults('linear')); - verticalScaleConfig = Chart.helpers.scaleMerge(verticalScaleConfig, Chart.defaults.bar.scales.yAxes[0]); - var yScale = new VerticalScaleConstructor({ - ctx: mockContext, - options: verticalScaleConfig, - chart: { - data: data - }, - id: 'firstYScaleID' - }); - - // Update ticks & set physical dimensions - var verticalSize = yScale.update(50, 200); - yScale.top = 0; - yScale.left = 0; - yScale.right = verticalSize.width; - yScale.bottom = verticalSize.height; - - var HorizontalScaleConstructor = Chart.scaleService.getScaleConstructor('category'); - var horizontalScaleConfig = Chart.helpers.clone(Chart.scaleService.getScaleDefaults('category')); - horizontalScaleConfig = Chart.helpers.scaleMerge(horizontalScaleConfig, Chart.defaults.bar.scales.xAxes[0]); - var xScale = new HorizontalScaleConstructor({ - ctx: mockContext, - options: horizontalScaleConfig, - chart: { - data: data - }, - id: 'firstXScaleID' - }); - - // Update ticks & set physical dimensions - var horizontalSize = xScale.update(200, 50); - xScale.left = yScale.right; - xScale.top = yScale.bottom; - xScale.right = horizontalSize.width + xScale.left; - xScale.bottom = horizontalSize.height + xScale.top; - - var chart = { - data: data, - config: { - type: 'bar' - }, - options: { - elements: { - rectangle: { - backgroundColor: 'rgb(255, 0, 0)', - borderSkipped: 'top', - borderColor: 'rgb(0, 0, 255)', - borderWidth: 2, - } - }, - scales: { - xAxes: [{ - id: 'firstXScaleID' - }], - yAxes: [{ - id: 'firstYScaleID' - }] - } - }, - scales: { - firstXScaleID: xScale, - firstYScaleID: yScale, - } - }; - - var controller = new Chart.controllers.bar(chart, 1); - - chart.data.datasets[1].data = [1, 2]; // remove 2 items - controller.buildOrUpdateElements(); - controller.update(); - - expect(chart.data.datasets[1].metaData.length).toBe(2); - - var bar1 = chart.data.datasets[1].metaData[0]; - var bar2 = chart.data.datasets[1].metaData[1]; - - expect(bar1._datasetIndex).toBe(1); - expect(bar1._index).toBe(0); - expect(bar1._xScale).toBe(chart.scales.firstXScaleID); - expect(bar1._yScale).toBe(chart.scales.firstYScaleID); - expect(bar1._model).toEqual({ - x: 117.9, - y: 194, - label: 'label1', - datasetLabel: 'dataset2', - base: 194, - width: 13.32, - backgroundColor: 'rgb(255, 0, 0)', - borderSkipped: 'top', - borderColor: 'rgb(0, 0, 255)', - borderWidth: 2 - }); - - expect(bar2._datasetIndex).toBe(1); - expect(bar2._index).toBe(1); - expect(bar2._xScale).toBe(chart.scales.firstXScaleID); - expect(bar2._yScale).toBe(chart.scales.firstYScaleID); - expect(bar2._model).toEqual({ - x: 154.89999999999998, - y: 6, - label: 'label2', - datasetLabel: 'dataset2', - base: 194, - width: 13.32, - backgroundColor: 'rgb(255, 0, 0)', - borderSkipped: 'top', - borderColor: 'rgb(0, 0, 255)', - borderWidth: 2 - }); - - chart.data.datasets[1].data = [1, 2, 3]; - controller.buildOrUpdateElements(); - controller.update(); - - expect(chart.data.datasets[1].metaData.length).toBe(3); // should add a new meta data item - }); - - it('should get the correct bar points when datasets of different types exist', function() { - var data = { - datasets: [{ - data: [1, 2], - label: 'dataset1', - xAxisID: 'firstXScaleID', - yAxisID: 'firstYScaleID', - bar: true, - }, { - data: [10, 15], - label: 'dataset2', - xAxisID: 'firstXScaleID', - yAxisID: 'firstYScaleID', - }, { - data: [30, 25], - label: 'dataset3', - xAxisID: 'firstXScaleID', - yAxisID: 'firstYScaleID', - bar: true - }], - labels: ['label1', 'label2'] - }; - var mockContext = window.createMockContext(); - - var VerticalScaleConstructor = Chart.scaleService.getScaleConstructor('linear'); - var verticalScaleConfig = Chart.helpers.clone(Chart.scaleService.getScaleDefaults('linear')); - verticalScaleConfig = Chart.helpers.scaleMerge(verticalScaleConfig, Chart.defaults.bar.scales.yAxes[0]); - var yScale = new VerticalScaleConstructor({ - ctx: mockContext, - options: verticalScaleConfig, - chart: { - data: data - }, - id: 'firstYScaleID' - }); - - // Update ticks & set physical dimensions - var verticalSize = yScale.update(50, 200); - yScale.top = 0; - yScale.left = 0; - yScale.right = verticalSize.width; - yScale.bottom = verticalSize.height; - - var HorizontalScaleConstructor = Chart.scaleService.getScaleConstructor('category'); - var horizontalScaleConfig = Chart.helpers.clone(Chart.scaleService.getScaleDefaults('category')); - horizontalScaleConfig = Chart.helpers.scaleMerge(horizontalScaleConfig, Chart.defaults.bar.scales.xAxes[0]); - var xScale = new HorizontalScaleConstructor({ - ctx: mockContext, - options: horizontalScaleConfig, - chart: { - data: data - }, - id: 'firstXScaleID' - }); - - // Update ticks & set physical dimensions - var horizontalSize = xScale.update(200, 50); - xScale.left = yScale.right; - xScale.top = yScale.bottom; - xScale.right = horizontalSize.width + xScale.left; - xScale.bottom = horizontalSize.height + xScale.top; - - var chart = { - data: data, - config: { - type: 'bar' - }, - options: { - elements: { - rectangle: { - backgroundColor: 'rgb(255, 0, 0)', - borderColor: 'rgb(0, 0, 255)', - borderWidth: 2, - } - }, - scales: { - xAxes: [{ - id: 'firstXScaleID' - }], - yAxes: [{ - id: 'firstYScaleID' - }] - } - }, - scales: { - firstXScaleID: xScale, - firstYScaleID: yScale, - } - }; - - var controller = new Chart.controllers.bar(chart, 2); - controller.buildOrUpdateElements(); - controller.update(); - - var bar1 = chart.data.datasets[2].metaData[0]; - var bar2 = chart.data.datasets[2].metaData[1]; - - expect(bar1._model.x).toBe(119.9); - expect(bar1._model.y).toBe(6); - expect(bar2._model.x).toBe(186.9); - expect(bar2._model.y).toBe(37); - }); - - it('should update elements when the scales are stacked', function() { - var data = { - datasets: [{ - data: [10, -10, 10, -10], - label: 'dataset1', - xAxisID: 'firstXScaleID', - yAxisID: 'firstYScaleID', - bar: true - }, { - data: [10, 15, 0, -4], - label: 'dataset2', - xAxisID: 'firstXScaleID', - yAxisID: 'firstYScaleID', - bar: true - }], - labels: ['label1', 'label2', 'label3', 'label4'] - }; - var mockContext = window.createMockContext(); - - var VerticalScaleConstructor = Chart.scaleService.getScaleConstructor('linear'); - var verticalScaleConfig = Chart.helpers.clone(Chart.scaleService.getScaleDefaults('linear')); - verticalScaleConfig = Chart.helpers.scaleMerge(verticalScaleConfig, Chart.defaults.bar.scales.yAxes[0]); - verticalScaleConfig.stacked = true; - var yScale = new VerticalScaleConstructor({ - ctx: mockContext, - options: verticalScaleConfig, - chart: { - data: data - }, - id: 'firstYScaleID' - }); - - // Update ticks & set physical dimensions - var verticalSize = yScale.update(50, 200); - yScale.top = 0; - yScale.left = 0; - yScale.right = verticalSize.width; - yScale.bottom = verticalSize.height; - - var HorizontalScaleConstructor = Chart.scaleService.getScaleConstructor('category'); - var horizontalScaleConfig = Chart.helpers.clone(Chart.scaleService.getScaleDefaults('category')); - horizontalScaleConfig = Chart.helpers.scaleMerge(horizontalScaleConfig, Chart.defaults.bar.scales.xAxes[0]); - horizontalScaleConfig.stacked = true; - var xScale = new HorizontalScaleConstructor({ - ctx: mockContext, - options: horizontalScaleConfig, - chart: { - data: data - }, - id: 'firstXScaleID' - }); - - // Update ticks & set physical dimensions - var horizontalSize = xScale.update(200, 50); - xScale.left = yScale.right; - xScale.top = yScale.bottom; - xScale.right = horizontalSize.width + xScale.left; - xScale.bottom = horizontalSize.height + xScale.top; - - var chart = { - data: data, - config: { - type: 'bar' - }, - options: { - elements: { - rectangle: { - backgroundColor: 'rgb(255, 0, 0)', - borderColor: 'rgb(0, 0, 255)', - borderWidth: 2, - } - }, - scales: { - xAxes: [{ - id: 'firstXScaleID' - }], - yAxes: [{ - id: 'firstYScaleID' - }] - } - }, - scales: { - firstXScaleID: xScale, - firstYScaleID: yScale, - } - }; - - var controller0 = new Chart.controllers.bar(chart, 0); - var controller1 = new Chart.controllers.bar(chart, 1); - - controller0.buildOrUpdateElements(); - controller0.update(); - controller1.buildOrUpdateElements(); - controller1.update(); - - expect(chart.data.datasets[0].metaData[0]._model).toEqual(jasmine.objectContaining({ - x: 110.5, - y: 60, - base: 113, - width: 29.6 - })); - expect(chart.data.datasets[0].metaData[1]._model).toEqual(jasmine.objectContaining({ - x: 147.5, - y: 167, - base: 113, - width: 29.6 - })); - expect(chart.data.datasets[0].metaData[2]._model).toEqual(jasmine.objectContaining({ - x: 185.5, - y: 60, - base: 113, - width: 29.6 - })); - expect(chart.data.datasets[0].metaData[3]._model).toEqual(jasmine.objectContaining({ - x: 223.5, - y: 167, - base: 113, - width: 29.6 - })); - - expect(chart.data.datasets[1].metaData[0]._model).toEqual(jasmine.objectContaining({ - x: 110.5, - y: 6, - base: 60, - width: 29.6 - })); - expect(chart.data.datasets[1].metaData[1]._model).toEqual(jasmine.objectContaining({ - x: 147.5, - y: 33, - base: 113, - width: 29.6 - })); - expect(chart.data.datasets[1].metaData[2]._model).toEqual(jasmine.objectContaining({ - x: 185.5, - y: 60, - base: 60, - width: 29.6 - })); - expect(chart.data.datasets[1].metaData[3]._model).toEqual(jasmine.objectContaining({ - x: 223.5, - y: 189, - base: 167, - width: 29.6 - })); - }); - - it('should draw all bars', function() { - var data = { - datasets: [{}, { - data: [10, 15, 0, -4], - label: 'dataset2', - xAxisID: 'firstXScaleID', - yAxisID: 'firstYScaleID' - }], - labels: ['label1', 'label2', 'label3', 'label4'] - }; - var mockContext = window.createMockContext(); - - var VerticalScaleConstructor = Chart.scaleService.getScaleConstructor('linear'); - var verticalScaleConfig = Chart.helpers.clone(Chart.scaleService.getScaleDefaults('linear')); - verticalScaleConfig = Chart.helpers.scaleMerge(verticalScaleConfig, Chart.defaults.bar.scales.yAxes[0]); - var yScale = new VerticalScaleConstructor({ - ctx: mockContext, - options: verticalScaleConfig, - chart: { - data: data - }, - id: 'firstYScaleID' - }); - - // Update ticks & set physical dimensions - var verticalSize = yScale.update(50, 200); - yScale.top = 0; - yScale.left = 0; - yScale.right = verticalSize.width; - yScale.bottom = verticalSize.height; - - var HorizontalScaleConstructor = Chart.scaleService.getScaleConstructor('category'); - var horizontalScaleConfig = Chart.helpers.clone(Chart.scaleService.getScaleDefaults('category')); - horizontalScaleConfig = Chart.helpers.scaleMerge(horizontalScaleConfig, Chart.defaults.bar.scales.xAxes[0]); - var xScale = new HorizontalScaleConstructor({ - ctx: mockContext, - options: horizontalScaleConfig, - chart: { - data: data - }, - id: 'firstXScaleID' - }); - - // Update ticks & set physical dimensions - var horizontalSize = xScale.update(200, 50); - xScale.left = yScale.right; - xScale.top = yScale.bottom; - xScale.right = horizontalSize.width + xScale.left; - xScale.bottom = horizontalSize.height + xScale.top; - - - var chart = { - data: data, - config: { - type: 'bar' - }, - options: { - scales: { - xAxes: [{ - id: 'firstXScaleID' - }], - yAxes: [{ - id: 'firstYScaleID' - }] - } - }, - scales: { - firstXScaleID: xScale, - firstYScaleID: yScale, - } - }; - - var controller = new Chart.controllers.bar(chart, 1); - - spyOn(chart.data.datasets[1].metaData[0], 'draw'); - spyOn(chart.data.datasets[1].metaData[1], 'draw'); - spyOn(chart.data.datasets[1].metaData[2], 'draw'); - spyOn(chart.data.datasets[1].metaData[3], 'draw'); - - controller.draw(); - - expect(chart.data.datasets[1].metaData[0].draw.calls.count()).toBe(1); - expect(chart.data.datasets[1].metaData[1].draw.calls.count()).toBe(1); - expect(chart.data.datasets[1].metaData[2].draw.calls.count()).toBe(1); - expect(chart.data.datasets[1].metaData[3].draw.calls.count()).toBe(1); - }); - - it('should set hover styles on rectangles', function() { - var data = { - datasets: [{}, { - data: [10, 15, 0, -4], - label: 'dataset2', - xAxisID: 'firstXScaleID', - yAxisID: 'firstYScaleID' - }], - labels: ['label1', 'label2', 'label3', 'label4'] - }; - var mockContext = window.createMockContext(); - - var VerticalScaleConstructor = Chart.scaleService.getScaleConstructor('linear'); - var verticalScaleConfig = Chart.helpers.clone(Chart.scaleService.getScaleDefaults('linear')); - verticalScaleConfig = Chart.helpers.scaleMerge(verticalScaleConfig, Chart.defaults.bar.scales.yAxes[0]); - var yScale = new VerticalScaleConstructor({ - ctx: mockContext, - options: verticalScaleConfig, - chart: { - data: data - }, - id: 'firstYScaleID' - }); - - // Update ticks & set physical dimensions - var verticalSize = yScale.update(50, 200); - yScale.top = 0; - yScale.left = 0; - yScale.right = verticalSize.width; - yScale.bottom = verticalSize.height; - - var HorizontalScaleConstructor = Chart.scaleService.getScaleConstructor('category'); - var horizontalScaleConfig = Chart.helpers.clone(Chart.scaleService.getScaleDefaults('category')); - horizontalScaleConfig = Chart.helpers.scaleMerge(horizontalScaleConfig, Chart.defaults.bar.scales.xAxes[0]); - var xScale = new HorizontalScaleConstructor({ - ctx: mockContext, - options: horizontalScaleConfig, - chart: { - data: data - }, - id: 'firstXScaleID' - }); - - // Update ticks & set physical dimensions - var horizontalSize = xScale.update(200, 50); - xScale.left = yScale.right; - xScale.top = yScale.bottom; - xScale.right = horizontalSize.width + xScale.left; - xScale.bottom = horizontalSize.height + xScale.top; - - - var chart = { - data: data, - config: { - type: 'bar' - }, - options: { - elements: { - rectangle: { - backgroundColor: 'rgb(255, 0, 0)', - borderColor: 'rgb(0, 0, 255)', - borderWidth: 2, - } - }, - scales: { - xAxes: [{ - id: 'firstXScaleID' - }], - yAxes: [{ - id: 'firstYScaleID' - }] - } - }, - scales: { - firstXScaleID: xScale, - firstYScaleID: yScale, - } - }; - - var controller = new Chart.controllers.bar(chart, 1); - controller.update(); - var bar = chart.data.datasets[1].metaData[0]; - controller.setHoverStyle(bar); - - expect(bar._model.backgroundColor).toBe('rgb(230, 0, 0)'); - expect(bar._model.borderColor).toBe('rgb(0, 0, 230)'); - expect(bar._model.borderWidth).toBe(2); - - // Set a dataset style - chart.data.datasets[1].hoverBackgroundColor = 'rgb(128, 128, 128)'; - chart.data.datasets[1].hoverBorderColor = 'rgb(0, 0, 0)'; - chart.data.datasets[1].hoverBorderWidth = 5; - - controller.setHoverStyle(bar); - - expect(bar._model.backgroundColor).toBe('rgb(128, 128, 128)'); - expect(bar._model.borderColor).toBe('rgb(0, 0, 0)'); - expect(bar._model.borderWidth).toBe(5); - - // Should work with array styles so that we can set per bar - chart.data.datasets[1].hoverBackgroundColor = ['rgb(255, 255, 255)', 'rgb(128, 128, 128)']; - chart.data.datasets[1].hoverBorderColor = ['rgb(9, 9, 9)', 'rgb(0, 0, 0)']; - chart.data.datasets[1].hoverBorderWidth = [2.5, 5]; - - controller.setHoverStyle(bar); - - expect(bar._model.backgroundColor).toBe('rgb(255, 255, 255)'); - expect(bar._model.borderColor).toBe('rgb(9, 9, 9)'); - expect(bar._model.borderWidth).toBe(2.5); - - // Should allow a custom style - bar.custom = { - hoverBackgroundColor: 'rgb(255, 0, 0)', - hoverBorderColor: 'rgb(0, 255, 0)', - hoverBorderWidth: 1.5 - }; - - controller.setHoverStyle(bar); - - expect(bar._model.backgroundColor).toBe('rgb(255, 0, 0)'); - expect(bar._model.borderColor).toBe('rgb(0, 255, 0)'); - expect(bar._model.borderWidth).toBe(1.5); - }); - - it('should remove a hover style from a bar', function() { - var data = { - datasets: [{}, { - data: [10, 15, 0, -4], - label: 'dataset2', - xAxisID: 'firstXScaleID', - yAxisID: 'firstYScaleID' - }], - labels: ['label1', 'label2', 'label3', 'label4'] - }; - var mockContext = window.createMockContext(); - - var VerticalScaleConstructor = Chart.scaleService.getScaleConstructor('linear'); - var verticalScaleConfig = Chart.helpers.clone(Chart.scaleService.getScaleDefaults('linear')); - verticalScaleConfig = Chart.helpers.scaleMerge(verticalScaleConfig, Chart.defaults.bar.scales.yAxes[0]); - var yScale = new VerticalScaleConstructor({ - ctx: mockContext, - options: verticalScaleConfig, - chart: { - data: data - }, - id: 'firstYScaleID' - }); - - // Update ticks & set physical dimensions - var verticalSize = yScale.update(50, 200); - yScale.top = 0; - yScale.left = 0; - yScale.right = verticalSize.width; - yScale.bottom = verticalSize.height; - - var HorizontalScaleConstructor = Chart.scaleService.getScaleConstructor('category'); - var horizontalScaleConfig = Chart.helpers.clone(Chart.scaleService.getScaleDefaults('category')); - horizontalScaleConfig = Chart.helpers.scaleMerge(horizontalScaleConfig, Chart.defaults.bar.scales.xAxes[0]); - var xScale = new HorizontalScaleConstructor({ - ctx: mockContext, - options: horizontalScaleConfig, - chart: { - data: data - }, - id: 'firstXScaleID' - }); - - // Update ticks & set physical dimensions - var horizontalSize = xScale.update(200, 50); - xScale.left = yScale.right; - xScale.top = yScale.bottom; - xScale.right = horizontalSize.width + xScale.left; - xScale.bottom = horizontalSize.height + xScale.top; - - - var chart = { - data: data, - config: { - type: 'bar' - }, - options: { - elements: { - rectangle: { - backgroundColor: 'rgb(255, 0, 0)', - borderColor: 'rgb(0, 0, 255)', - borderWidth: 2, - } - }, - scales: { - xAxes: [{ - id: 'firstXScaleID' - }], - yAxes: [{ - id: 'firstYScaleID' - }] - } - }, - scales: { - firstXScaleID: xScale, - firstYScaleID: yScale, - } - }; - - var controller = new Chart.controllers.bar(chart, 1); - controller.update(); - var bar = chart.data.datasets[1].metaData[0]; - - // Change default - chart.options.elements.rectangle.backgroundColor = 'rgb(128, 128, 128)'; - chart.options.elements.rectangle.borderColor = 'rgb(15, 15, 15)'; - chart.options.elements.rectangle.borderWidth = 3.14; - - // Remove to defaults - controller.removeHoverStyle(bar); - - expect(bar._model.backgroundColor).toBe('rgb(128, 128, 128)'); - expect(bar._model.borderColor).toBe('rgb(15, 15, 15)'); - expect(bar._model.borderWidth).toBe(3.14); - - // Should work with array styles so that we can set per bar - chart.data.datasets[1].backgroundColor = ['rgb(255, 255, 255)', 'rgb(128, 128, 128)']; - chart.data.datasets[1].borderColor = ['rgb(9, 9, 9)', 'rgb(0, 0, 0)']; - chart.data.datasets[1].borderWidth = [2.5, 5]; - - controller.removeHoverStyle(bar); - - expect(bar._model.backgroundColor).toBe('rgb(255, 255, 255)'); - expect(bar._model.borderColor).toBe('rgb(9, 9, 9)'); - expect(bar._model.borderWidth).toBe(2.5); - - // Should allow a custom style - bar.custom = { - backgroundColor: 'rgb(255, 0, 0)', - borderColor: 'rgb(0, 255, 0)', - borderWidth: 1.5 - }; - - controller.removeHoverStyle(bar); - - expect(bar._model.backgroundColor).toBe('rgb(255, 0, 0)'); - expect(bar._model.borderColor).toBe('rgb(0, 255, 0)'); - expect(bar._model.borderWidth).toBe(1.5); - }); + + beforeEach(function() { + window.addDefaultMatchers(jasmine); + }); + + afterEach(function() { + window.releaseAllCharts(); + }); + + it('should be constructed', function() { + var chart = window.acquireChart({ + type: 'bar', + data: { + datasets: [ + { data: [] }, + { data: [] } + ], + labels: [] + } + }); + + var meta = chart.getDatasetMeta(1); + expect(meta.type).toEqual('bar'); + expect(meta.data).toEqual([]); + expect(meta.hidden).toBe(null); + expect(meta.controller).not.toBe(undefined); + expect(meta.controller.index).toBe(1); + expect(meta.xAxisID).not.toBe(null); + expect(meta.yAxisID).not.toBe(null); + + meta.controller.updateIndex(0); + expect(meta.controller.index).toBe(0); + }); + + it('should use the first scale IDs if the dataset does not specify them', function() { + var chart = window.acquireChart({ + type: 'bar', + data: { + datasets: [ + { data: [] }, + { data: [] } + ], + labels: [] + }, + options: { + scales: { + xAxes: [{ + id: 'firstXScaleID' + }], + yAxes: [{ + id: 'firstYScaleID' + }] + } + } + }); + + var meta = chart.getDatasetMeta(1); + expect(meta.xAxisID).toBe('firstXScaleID'); + expect(meta.yAxisID).toBe('firstYScaleID'); + }); + + it('should correctly count the number of bar datasets', function() { + var chart = window.acquireChart({ + type: 'bar', + data: { + datasets: [ + { data: [], type: 'line' }, + { data: [], hidden: true }, + { data: [] }, + { data: [] } + ], + labels: [] + } + }); + + var meta = chart.getDatasetMeta(1); + expect(meta.controller.getBarCount()).toBe(2); + }); + + it('should correctly get the bar index accounting for hidden datasets', function() { + var chart = window.acquireChart({ + type: 'bar', + data: { + datasets: [ + { data: [] }, + { data: [], hidden: true }, + { data: [], type: 'line' }, + { data: [] } + ], + labels: [] + } + }); + + var meta = chart.getDatasetMeta(1); + expect(meta.controller.getBarIndex(0)).toBe(0); + expect(meta.controller.getBarIndex(3)).toBe(1); + }); + + it('should create rectangle elements for each data item during initialization', function() { + var chart = window.acquireChart({ + type: 'bar', + data: { + datasets: [ + { data: [] }, + { data: [10, 15, 0, -4] } + ], + labels: [] + } + }); + + var meta = chart.getDatasetMeta(1); + expect(meta.data.length).toBe(4); // 4 rectangles created + expect(meta.data[0] instanceof Chart.elements.Rectangle).toBe(true); + expect(meta.data[1] instanceof Chart.elements.Rectangle).toBe(true); + expect(meta.data[2] instanceof Chart.elements.Rectangle).toBe(true); + expect(meta.data[3] instanceof Chart.elements.Rectangle).toBe(true); + }); + + it('should update elements when modifying data', function() { + var chart = window.acquireChart({ + type: 'bar', + data: { + datasets: [{ + data: [1, 2], + label: 'dataset1' + }, { + data: [10, 15, 0, -4], + label: 'dataset2', + borderColor: 'blue' + }], + labels: ['label1', 'label2', 'label3', 'label4'] + }, + options: { + elements: { + rectangle: { + backgroundColor: 'red', + borderSkipped: 'top', + borderColor: 'green', + borderWidth: 2, + } + }, + scales: { + xAxes: [{ + id: 'firstXScaleID', + type: 'category' + }], + yAxes: [{ + id: 'firstYScaleID', + type: 'linear' + }] + } + } + }); + + var meta = chart.getDatasetMeta(1); + expect(meta.data.length).toBe(4); + + chart.data.datasets[1].data = [1, 2]; // remove 2 items + chart.data.datasets[1].borderWidth = 1; + chart.update(); + + expect(meta.data.length).toBe(2); + + [ { x: 122, y: 484 }, + { x: 234, y: 32 } + ].forEach(function(expected, i) { + expect(meta.data[i]._datasetIndex).toBe(1); + expect(meta.data[i]._index).toBe(i); + expect(meta.data[i]._xScale).toBe(chart.scales.firstXScaleID); + expect(meta.data[i]._yScale).toBe(chart.scales.firstYScaleID); + expect(meta.data[i]._model.x).toBeCloseToPixel(expected.x); + expect(meta.data[i]._model.y).toBeCloseToPixel(expected.y); + expect(meta.data[i]._model.base).toBeCloseToPixel(484); + expect(meta.data[i]._model.width).toBeCloseToPixel(40); + expect(meta.data[i]._model).toEqual(jasmine.objectContaining({ + datasetLabel: chart.config.data.datasets[1].label, + label: chart.config.data.labels[i], + backgroundColor: 'red', + borderSkipped: 'top', + borderColor: 'blue', + borderWidth: 1 + })); + }); + + chart.data.datasets[1].data = [1, 2, 3]; // add 1 items + chart.update(); + + expect(meta.data.length).toBe(3); // should add a new meta data item + }); + + it('should get the correct bar points when datasets of different types exist', function() { + var chart = window.acquireChart({ + type: 'bar', + data: { + datasets: [{ + data: [1, 2], + label: 'dataset1' + }, { + type: 'line', + data: [4, 6], + label: 'dataset2' + }, { + data: [8, 10], + label: 'dataset3' + }], + labels: ['label1', 'label2'] + }, + options: { + scales: { + xAxes: [{ + type: 'category' + }], + yAxes: [{ + type: 'linear' + }] + } + } + }); + + var meta = chart.getDatasetMeta(2); + expect(meta.data.length).toBe(2); + + var bar1 = meta.data[0]; + var bar2 = meta.data[1]; + + expect(bar1._model.x).toBeCloseToPixel(194); + expect(bar1._model.y).toBeCloseToPixel(132); + expect(bar2._model.x).toBeCloseToPixel(424); + expect(bar2._model.y).toBeCloseToPixel(32); + }); + + it('should update elements when the scales are stacked', function() { + var chart = window.acquireChart({ + type: 'bar', + data: { + datasets: [{ + data: [10, -10, 10, -10], + label: 'dataset1' + }, { + data: [10, 15, 0, -4], + label: 'dataset2' + }], + labels: ['label1', 'label2', 'label3', 'label4'] + }, + options: { + scales: { + xAxes: [{ + type: 'category', + stacked: true + }], + yAxes: [{ + type: 'linear', + stacked: true + }] + } + } + }); + + var meta0 = chart.getDatasetMeta(0); + + [ { b: 290, w: 91, x: 95, y: 161 }, + { b: 290, w: 91, x: 209, y: 419 }, + { b: 290, w: 91, x: 322, y: 161 }, + { b: 290, w: 91, x: 436, y: 419 } + ].forEach(function(values, i) { + expect(meta0.data[i]._model.base).toBeCloseToPixel(values.b); + expect(meta0.data[i]._model.width).toBeCloseToPixel(values.w); + expect(meta0.data[i]._model.x).toBeCloseToPixel(values.x); + expect(meta0.data[i]._model.y).toBeCloseToPixel(values.y); + }); + + var meta1 = chart.getDatasetMeta(1); + + [ { b: 161, w: 91, x: 95, y: 32 }, + { b: 290, w: 91, x: 209, y: 97 }, + { b: 161, w: 91, x: 322, y: 161 }, + { b: 419, w: 91, x: 436, y: 471 } + ].forEach(function(values, i) { + expect(meta1.data[i]._model.base).toBeCloseToPixel(values.b); + expect(meta1.data[i]._model.width).toBeCloseToPixel(values.w); + expect(meta1.data[i]._model.x).toBeCloseToPixel(values.x); + expect(meta1.data[i]._model.y).toBeCloseToPixel(values.y); + }); + }); + + it('should draw all bars', function() { + var chart = window.acquireChart({ + type: 'bar', + data: { + datasets: [{ + data: [], + }, { + data: [10, 15, 0, -4], + label: 'dataset2' + }], + labels: ['label1', 'label2', 'label3', 'label4'] + } + }); + + var meta = chart.getDatasetMeta(1); + + spyOn(meta.data[0], 'draw'); + spyOn(meta.data[1], 'draw'); + spyOn(meta.data[2], 'draw'); + spyOn(meta.data[3], 'draw'); + + chart.update(); + + expect(meta.data[0].draw.calls.count()).toBe(1); + expect(meta.data[1].draw.calls.count()).toBe(1); + expect(meta.data[2].draw.calls.count()).toBe(1); + expect(meta.data[3].draw.calls.count()).toBe(1); + }); + + it('should set hover styles on rectangles', function() { + var chart = window.acquireChart({ + type: 'bar', + data: { + datasets: [{ + data: [], + }, { + data: [10, 15, 0, -4], + label: 'dataset2' + }], + labels: ['label1', 'label2', 'label3', 'label4'] + }, + options: { + elements: { + rectangle: { + backgroundColor: 'rgb(255, 0, 0)', + borderColor: 'rgb(0, 0, 255)', + borderWidth: 2, + } + } + } + }); + + var meta = chart.getDatasetMeta(1); + var bar = meta.data[0]; + + meta.controller.setHoverStyle(bar); + expect(bar._model.backgroundColor).toBe('rgb(230, 0, 0)'); + expect(bar._model.borderColor).toBe('rgb(0, 0, 230)'); + expect(bar._model.borderWidth).toBe(2); + + // Set a dataset style + chart.data.datasets[1].hoverBackgroundColor = 'rgb(128, 128, 128)'; + chart.data.datasets[1].hoverBorderColor = 'rgb(0, 0, 0)'; + chart.data.datasets[1].hoverBorderWidth = 5; + + meta.controller.setHoverStyle(bar); + expect(bar._model.backgroundColor).toBe('rgb(128, 128, 128)'); + expect(bar._model.borderColor).toBe('rgb(0, 0, 0)'); + expect(bar._model.borderWidth).toBe(5); + + // Should work with array styles so that we can set per bar + chart.data.datasets[1].hoverBackgroundColor = ['rgb(255, 255, 255)', 'rgb(128, 128, 128)']; + chart.data.datasets[1].hoverBorderColor = ['rgb(9, 9, 9)', 'rgb(0, 0, 0)']; + chart.data.datasets[1].hoverBorderWidth = [2.5, 5]; + + meta.controller.setHoverStyle(bar); + expect(bar._model.backgroundColor).toBe('rgb(255, 255, 255)'); + expect(bar._model.borderColor).toBe('rgb(9, 9, 9)'); + expect(bar._model.borderWidth).toBe(2.5); + + // Should allow a custom style + bar.custom = { + hoverBackgroundColor: 'rgb(255, 0, 0)', + hoverBorderColor: 'rgb(0, 255, 0)', + hoverBorderWidth: 1.5 + }; + + meta.controller.setHoverStyle(bar); + expect(bar._model.backgroundColor).toBe('rgb(255, 0, 0)'); + expect(bar._model.borderColor).toBe('rgb(0, 255, 0)'); + expect(bar._model.borderWidth).toBe(1.5); + }); + + it('should remove a hover style from a bar', function() { + var chart = window.acquireChart({ + type: 'bar', + data: { + datasets: [{ + data: [], + }, { + data: [10, 15, 0, -4], + label: 'dataset2' + }], + labels: ['label1', 'label2', 'label3', 'label4'] + }, + options: { + elements: { + rectangle: { + backgroundColor: 'rgb(255, 0, 0)', + borderColor: 'rgb(0, 0, 255)', + borderWidth: 2, + } + } + } + }); + + var meta = chart.getDatasetMeta(1); + var bar = meta.data[0]; + + // Change default + chart.options.elements.rectangle.backgroundColor = 'rgb(128, 128, 128)'; + chart.options.elements.rectangle.borderColor = 'rgb(15, 15, 15)'; + chart.options.elements.rectangle.borderWidth = 3.14; + + // Remove to defaults + meta.controller.removeHoverStyle(bar); + expect(bar._model.backgroundColor).toBe('rgb(128, 128, 128)'); + expect(bar._model.borderColor).toBe('rgb(15, 15, 15)'); + expect(bar._model.borderWidth).toBe(3.14); + + // Should work with array styles so that we can set per bar + chart.data.datasets[1].backgroundColor = ['rgb(255, 255, 255)', 'rgb(128, 128, 128)']; + chart.data.datasets[1].borderColor = ['rgb(9, 9, 9)', 'rgb(0, 0, 0)']; + chart.data.datasets[1].borderWidth = [2.5, 5]; + + meta.controller.removeHoverStyle(bar); + expect(bar._model.backgroundColor).toBe('rgb(255, 255, 255)'); + expect(bar._model.borderColor).toBe('rgb(9, 9, 9)'); + expect(bar._model.borderWidth).toBe(2.5); + + // Should allow a custom style + bar.custom = { + backgroundColor: 'rgb(255, 0, 0)', + borderColor: 'rgb(0, 255, 0)', + borderWidth: 1.5 + }; + + meta.controller.removeHoverStyle(bar); + expect(bar._model.backgroundColor).toBe('rgb(255, 0, 0)'); + expect(bar._model.borderColor).toBe('rgb(0, 255, 0)'); + expect(bar._model.borderWidth).toBe(1.5); + }); }); diff --git a/test/controller.bubble.tests.js b/test/controller.bubble.tests.js index 3a204ae27..294528c62 100644 --- a/test/controller.bubble.tests.js +++ b/test/controller.bubble.tests.js @@ -1,27 +1,37 @@ // Test the bubble controller describe('Bubble controller tests', function() { - it('Should be constructed', function() { - var chart = { + + beforeEach(function() { + window.addDefaultMatchers(jasmine); + }); + + afterEach(function() { + window.releaseAllCharts(); + }); + + it('should be constructed', function() { + var chart = window.acquireChart({ + type: 'bubble', data: { datasets: [{ - xAxisID: 'myXAxis', - yAxisID: 'myYAxis', data: [] }] } - }; + }); - var controller = new Chart.controllers.bubble(chart, 0); - expect(controller).not.toBe(undefined); - expect(controller.index).toBe(0); - expect(chart.data.datasets[0].metaData).toEqual([]); + var meta = chart.getDatasetMeta(0); + expect(meta.type).toBe('bubble'); + expect(meta.controller).not.toBe(undefined); + expect(meta.controller.index).toBe(0); + expect(meta.data).toEqual([]); - controller.updateIndex(1); - expect(controller.index).toBe(1); + meta.controller.updateIndex(1); + expect(meta.controller.index).toBe(1); }); - it('Should use the first scale IDs if the dataset does not specify them', function() { - var chart = { + it('should use the first scale IDs if the dataset does not specify them', function() { + var chart = window.acquireChart({ + type: 'bubble', data: { datasets: [{ data: [] @@ -37,255 +47,116 @@ describe('Bubble controller tests', function() { }] } } - }; + }); + + var meta = chart.getDatasetMeta(0); - var controller = new Chart.controllers.bubble(chart, 0); - expect(chart.data.datasets[0].xAxisID).toBe('firstXScaleID'); - expect(chart.data.datasets[0].yAxisID).toBe('firstYScaleID'); + expect(meta.xAxisID).toBe('firstXScaleID'); + expect(meta.yAxisID).toBe('firstYScaleID'); }); - it('Should create point elements for each data item during initialization', function() { - var chart = { + it('should create point elements for each data item during initialization', function() { + var chart = window.acquireChart({ + type: 'bubble', data: { datasets: [{ data: [10, 15, 0, -4] }] - }, - config: { - type: 'bubble' - }, - options: { - scales: { - xAxes: [{ - id: 'firstXScaleID' - }], - yAxes: [{ - id: 'firstYScaleID' - }] - } } - }; + }); - var controller = new Chart.controllers.bubble(chart, 0); + var meta = chart.getDatasetMeta(0); - expect(chart.data.datasets[0].metaData.length).toBe(4); // 4 points created - expect(chart.data.datasets[0].metaData[0] instanceof Chart.elements.Point).toBe(true); - expect(chart.data.datasets[0].metaData[1] instanceof Chart.elements.Point).toBe(true); - expect(chart.data.datasets[0].metaData[2] instanceof Chart.elements.Point).toBe(true); - expect(chart.data.datasets[0].metaData[3] instanceof Chart.elements.Point).toBe(true); + expect(meta.data.length).toBe(4); // 4 points created + expect(meta.data[0] instanceof Chart.elements.Point).toBe(true); + expect(meta.data[1] instanceof Chart.elements.Point).toBe(true); + expect(meta.data[2] instanceof Chart.elements.Point).toBe(true); + expect(meta.data[3] instanceof Chart.elements.Point).toBe(true); }); it('should draw all elements', function() { - var chart = { + var chart = window.acquireChart({ + type: 'bubble', data: { datasets: [{ data: [10, 15, 0, -4] }] }, - config: { - type: 'bubble' - }, options: { - showLines: true, - scales: { - xAxes: [{ - id: 'firstXScaleID' - }], - yAxes: [{ - id: 'firstYScaleID' - }] - } + animation: false, + showLines: true } - }; + }); - var controller = new Chart.controllers.bubble(chart, 0); + var meta = chart.getDatasetMeta(0); - spyOn(chart.data.datasets[0].metaData[0], 'draw'); - spyOn(chart.data.datasets[0].metaData[1], 'draw'); - spyOn(chart.data.datasets[0].metaData[2], 'draw'); - spyOn(chart.data.datasets[0].metaData[3], 'draw'); + spyOn(meta.data[0], 'draw'); + spyOn(meta.data[1], 'draw'); + spyOn(meta.data[2], 'draw'); + spyOn(meta.data[3], 'draw'); - controller.draw(); + chart.update(); - expect(chart.data.datasets[0].metaData[0].draw.calls.count()).toBe(1); - expect(chart.data.datasets[0].metaData[1].draw.calls.count()).toBe(1); - expect(chart.data.datasets[0].metaData[2].draw.calls.count()).toBe(1); - expect(chart.data.datasets[0].metaData[3].draw.calls.count()).toBe(1); + expect(meta.data[0].draw.calls.count()).toBe(1); + expect(meta.data[1].draw.calls.count()).toBe(1); + expect(meta.data[2].draw.calls.count()).toBe(1); + expect(meta.data[3].draw.calls.count()).toBe(1); }); - it('should update elements', function() { - var data = { - datasets: [{ - data: [{ - x: 10, - y: 10, - r: 5 - }, { - x: -15, - y: -10, - r: 1 - }, { - x: 0, - y: -9, - r: 2 - }, { - x: -4, - y: 10, - r: 1 + it('should update elements when modifying style', function() { + var chart = window.acquireChart({ + type: 'bubble', + data: { + datasets: [{ + data: [{ + x: 10, + y: 10, + r: 5 + }, { + x: -15, + y: -10, + r: 1 + }, { + x: 0, + y: -9, + r: 2 + }, { + x: -4, + y: 10, + r: 1 + }] }], - label: 'dataset2', - xAxisID: 'firstXScaleID', - yAxisID: 'firstYScaleID' - }], - labels: ['label1', 'label2', 'label3', 'label4'] - }; - var mockContext = window.createMockContext(); - - var VerticalScaleConstructor = Chart.scaleService.getScaleConstructor('linear'); - var verticalScaleConfig = Chart.helpers.clone(Chart.scaleService.getScaleDefaults('linear')); - verticalScaleConfig = Chart.helpers.scaleMerge(verticalScaleConfig, Chart.defaults.bubble.scales.yAxes[0]); - var yScale = new VerticalScaleConstructor({ - ctx: mockContext, - options: verticalScaleConfig, - chart: { - data: data - }, - id: 'firstYScaleID' - }); - - // Update ticks & set physical dimensions - var verticalSize = yScale.update(50, 200); - yScale.top = 0; - yScale.left = 0; - yScale.right = verticalSize.width; - yScale.bottom = verticalSize.height; - - var HorizontalScaleConstructor = Chart.scaleService.getScaleConstructor('linear'); - var horizontalScaleConfig = Chart.helpers.clone(Chart.scaleService.getScaleDefaults('linear')); - horizontalScaleConfig = Chart.helpers.scaleMerge(horizontalScaleConfig, Chart.defaults.bubble.scales.xAxes[0]); - horizontalScaleConfig.position = 'bottom'; - var xScale = new HorizontalScaleConstructor({ - ctx: mockContext, - options: horizontalScaleConfig, - chart: { - data: data - }, - id: 'firstXScaleID' - }); - - // Update ticks & set physical dimensions - var horizontalSize = xScale.update(200, 50); - xScale.left = yScale.right; - xScale.top = yScale.bottom; - xScale.right = horizontalSize.width + xScale.left; - xScale.bottom = horizontalSize.height + xScale.top; - - - var chart = { - chartArea: { - bottom: 200, - left: xScale.left, - right: xScale.left + 200, - top: 0 - }, - data: data, - config: { - type: 'bubble' + labels: ['label1', 'label2', 'label3', 'label4'] }, options: { - showLines: true, - elements: { - line: { - backgroundColor: 'rgb(255, 0, 0)', - borderCapStyle: 'round', - borderColor: 'rgb(0, 255, 0)', - borderDash: [], - borderDashOffset: 0.1, - borderJoinStyle: 'bevel', - borderWidth: 1.2, - fill: true, - tension: 0.1, - }, - point: { - backgroundColor: Chart.defaults.global.defaultColor, - borderWidth: 1, - borderColor: Chart.defaults.global.defaultColor, - hitRadius: 1, - hoverRadius: 4, - hoverBorderWidth: 1, - radius: 3, - pointStyle: 'circle' - } - }, scales: { xAxes: [{ - id: 'firstXScaleID' + type: 'category' }], yAxes: [{ - id: 'firstYScaleID' + type: 'linear' }] } - }, - scales: { - firstXScaleID: xScale, - firstYScaleID: yScale, } - }; - - var controller = new Chart.controllers.bubble(chart, 0); - controller.update(); - - expect(chart.data.datasets[0].metaData[0]._model).toEqual({ - backgroundColor: Chart.defaults.global.defaultColor, - borderWidth: 1, - borderColor: Chart.defaults.global.defaultColor, - hitRadius: 1, - radius: 5, - skip: false, - - // Point - x: 195, - y: 6, - - }); - - expect(chart.data.datasets[0].metaData[1]._model).toEqual({ - backgroundColor: Chart.defaults.global.defaultColor, - borderWidth: 1, - borderColor: Chart.defaults.global.defaultColor, - hitRadius: 1, - radius: 1, - skip: false, - - // Point - x: 89, - y: 194, - }); - - expect(chart.data.datasets[0].metaData[2]._model).toEqual({ - backgroundColor: Chart.defaults.global.defaultColor, - borderWidth: 1, - borderColor: Chart.defaults.global.defaultColor, - hitRadius: 1, - radius: 2, - skip: false, - - // Point - x: 153, - y: 185, }); - expect(chart.data.datasets[0].metaData[3]._model).toEqual({ - backgroundColor: Chart.defaults.global.defaultColor, - borderWidth: 1, - borderColor: Chart.defaults.global.defaultColor, - hitRadius: 1, - radius: 1, - skip: false, - - // Point - x: 136, - y: 6, + var meta = chart.getDatasetMeta(0); + + [ { r: 5, x: 38, y: 32 }, + { r: 1, x: 189, y: 484 }, + { r: 2, x: 341, y: 461 }, + { r: 1, x: 492, y: 32 } + ].forEach(function(expected, i) { + expect(meta.data[i]._model.radius).toBe(expected.r); + expect(meta.data[i]._model.x).toBeCloseToPixel(expected.x); + expect(meta.data[i]._model.y).toBeCloseToPixel(expected.y); + expect(meta.data[i]._model).toEqual(jasmine.objectContaining({ + backgroundColor: Chart.defaults.global.defaultColor, + borderColor: Chart.defaults.global.defaultColor, + borderWidth: 1, + hitRadius: 1, + skip: false + })); }); // Use dataset level styles for lines & points @@ -297,198 +168,71 @@ describe('Bubble controller tests', function() { chart.data.datasets[0].radius = 22; chart.data.datasets[0].hitRadius = 3.3; - controller.update(); - - expect(chart.data.datasets[0].metaData[0]._model).toEqual({ - backgroundColor: 'rgb(98, 98, 98)', - borderWidth: 0.55, - borderColor: 'rgb(8, 8, 8)', - hitRadius: 3.3, - radius: 5, - skip: false, - - // Point - x: 195, - y: 6, - }); - - expect(chart.data.datasets[0].metaData[1]._model).toEqual({ - backgroundColor: 'rgb(98, 98, 98)', - borderWidth: 0.55, - borderColor: 'rgb(8, 8, 8)', - hitRadius: 3.3, - radius: 1, - skip: false, - - // Point - x: 89, - y: 194, - }); + chart.update(); - expect(chart.data.datasets[0].metaData[2]._model).toEqual({ - backgroundColor: 'rgb(98, 98, 98)', - borderWidth: 0.55, - borderColor: 'rgb(8, 8, 8)', - hitRadius: 3.3, - radius: 2, - skip: false, - - // Point - x: 153, - y: 185, - }); - - expect(chart.data.datasets[0].metaData[3]._model).toEqual({ - backgroundColor: 'rgb(98, 98, 98)', - borderWidth: 0.55, - borderColor: 'rgb(8, 8, 8)', - hitRadius: 3.3, - radius: 1, - skip: false, - - // Point - x: 136, - y: 6, - }); + for (var i=0; i<4; ++i) { + expect(meta.data[i]._model).toEqual(jasmine.objectContaining({ + backgroundColor: 'rgb(98, 98, 98)', + borderColor: 'rgb(8, 8, 8)', + borderWidth: 0.55, + hitRadius: 3.3, + skip: false + })); + } // point styles - chart.data.datasets[0].metaData[0].custom = { + meta.data[0].custom = { radius: 2.2, backgroundColor: 'rgb(0, 1, 3)', borderColor: 'rgb(4, 6, 8)', borderWidth: 0.787, tension: 0.15, - skip: true, hitRadius: 5, + skip: true }; - controller.update(); + chart.update(); - expect(chart.data.datasets[0].metaData[0]._model).toEqual({ + expect(meta.data[0]._model).toEqual(jasmine.objectContaining({ backgroundColor: 'rgb(0, 1, 3)', - borderWidth: 0.787, borderColor: 'rgb(4, 6, 8)', + borderWidth: 0.787, hitRadius: 5, - radius: 2.2, - skip: true, - - // Point - x: 195, - y: 6, - }); + skip: true + })); }); it('should handle number of data point changes in update', function() { - var data = { - datasets: [{ - data: [{ - x: 10, - y: 10, - r: 5 - }, { - x: -15, - y: -10, - r: 1 - }, { - x: 0, - y: -9, - r: 2 - }, { - x: -4, - y: 10, - r: 1 + var chart = window.acquireChart({ + type: 'bubble', + data: { + datasets: [{ + data: [{ + x: 10, + y: 10, + r: 5 + }, { + x: -15, + y: -10, + r: 1 + }, { + x: 0, + y: -9, + r: 2 + }, { + x: -4, + y: 10, + r: 1 + }] }], - label: 'dataset2', - xAxisID: 'firstXScaleID', - yAxisID: 'firstYScaleID' - }], - labels: ['label1', 'label2', 'label3', 'label4'] - }; - var mockContext = window.createMockContext(); - - var VerticalScaleConstructor = Chart.scaleService.getScaleConstructor('linear'); - var verticalScaleConfig = Chart.helpers.clone(Chart.scaleService.getScaleDefaults('linear')); - verticalScaleConfig = Chart.helpers.scaleMerge(verticalScaleConfig, Chart.defaults.bubble.scales.yAxes[0]); - var yScale = new VerticalScaleConstructor({ - ctx: mockContext, - options: verticalScaleConfig, - chart: { - data: data - }, - id: 'firstYScaleID' - }); - - // Update ticks & set physical dimensions - var verticalSize = yScale.update(50, 200); - yScale.top = 0; - yScale.left = 0; - yScale.right = verticalSize.width; - yScale.bottom = verticalSize.height; - - var HorizontalScaleConstructor = Chart.scaleService.getScaleConstructor('linear'); - var horizontalScaleConfig = Chart.helpers.clone(Chart.scaleService.getScaleDefaults('linear')); - horizontalScaleConfig = Chart.helpers.scaleMerge(horizontalScaleConfig, Chart.defaults.bubble.scales.xAxes[0]); - var xScale = new HorizontalScaleConstructor({ - ctx: mockContext, - options: horizontalScaleConfig, - chart: { - data: data - }, - id: 'firstXScaleID' + labels: ['label1', 'label2', 'label3', 'label4'] + } }); - // Update ticks & set physical dimensions - var horizontalSize = xScale.update(200, 50); - xScale.left = yScale.right; - xScale.top = yScale.bottom; - xScale.right = horizontalSize.width + xScale.left; - xScale.bottom = horizontalSize.height + xScale.top; + var meta = chart.getDatasetMeta(0); + expect(meta.data.length).toBe(4); - var chart = { - chartArea: { - bottom: 200, - left: xScale.left, - right: 200, - top: 0 - }, - data: data, - config: { - type: 'line' - }, - options: { - elements: { - line: { - backgroundColor: 'rgb(255, 0, 0)', - borderColor: 'rgb(0, 255, 0)', - borderWidth: 1.2, - }, - point: { - backgroundColor: Chart.defaults.global.defaultColor, - borderWidth: 1, - borderColor: Chart.defaults.global.defaultColor, - hitRadius: 1, - hoverRadius: 4, - hoverBorderWidth: 1, - radius: 3, - } - }, - scales: { - xAxes: [{ - id: 'firstXScaleID' - }], - yAxes: [{ - id: 'firstYScaleID' - }] - } - }, - scales: { - firstXScaleID: xScale, - firstYScaleID: yScale, - } - }; - - var controller = new Chart.controllers.bubble(chart, 0); chart.data.datasets[0].data = [{ x: 1, y: 1, @@ -498,10 +242,12 @@ describe('Bubble controller tests', function() { y: 5, r: 2 }]; // remove 2 items - controller.buildOrUpdateElements(); - controller.update(); - expect(chart.data.datasets[0].metaData[0] instanceof Chart.elements.Point).toBe(true); - expect(chart.data.datasets[0].metaData[1] instanceof Chart.elements.Point).toBe(true); + + chart.update(); + + expect(meta.data.length).toBe(2); + expect(meta.data[0] instanceof Chart.elements.Point).toBe(true); + expect(meta.data[1] instanceof Chart.elements.Point).toBe(true); chart.data.datasets[0].data = [{ x: 10, @@ -524,100 +270,44 @@ describe('Bubble controller tests', function() { y: 0, r: 3 }]; // add 3 items - controller.buildOrUpdateElements(); - controller.update(); - expect(chart.data.datasets[0].metaData[0] instanceof Chart.elements.Point).toBe(true); - expect(chart.data.datasets[0].metaData[1] instanceof Chart.elements.Point).toBe(true); - expect(chart.data.datasets[0].metaData[2] instanceof Chart.elements.Point).toBe(true); - expect(chart.data.datasets[0].metaData[3] instanceof Chart.elements.Point).toBe(true); - expect(chart.data.datasets[0].metaData[4] instanceof Chart.elements.Point).toBe(true); + + chart.update(); + + expect(meta.data.length).toBe(5); + expect(meta.data[0] instanceof Chart.elements.Point).toBe(true); + expect(meta.data[1] instanceof Chart.elements.Point).toBe(true); + expect(meta.data[2] instanceof Chart.elements.Point).toBe(true); + expect(meta.data[3] instanceof Chart.elements.Point).toBe(true); + expect(meta.data[4] instanceof Chart.elements.Point).toBe(true); }); it('should set hover styles', function() { - var data = { - datasets: [{ - data: [{ - x: 10, - y: 10, - r: 5 - }, { - x: -15, - y: -10, - r: 1 - }, { - x: 0, - y: -9, - r: 2 - }, { - x: -4, - y: 10, - r: 1 + var chart = window.acquireChart({ + type: 'bubble', + data: { + datasets: [{ + data: [{ + x: 10, + y: 10, + r: 5 + }, { + x: -15, + y: -10, + r: 1 + }, { + x: 0, + y: -9, + r: 2 + }, { + x: -4, + y: 10, + r: 1 + }] }], - label: 'dataset2', - xAxisID: 'firstXScaleID', - yAxisID: 'firstYScaleID' - }], - labels: ['label1', 'label2', 'label3', 'label4'] - }; - var mockContext = window.createMockContext(); - - var VerticalScaleConstructor = Chart.scaleService.getScaleConstructor('linear'); - var verticalScaleConfig = Chart.helpers.clone(Chart.scaleService.getScaleDefaults('linear')); - verticalScaleConfig = Chart.helpers.scaleMerge(verticalScaleConfig, Chart.defaults.bubble.scales.yAxes[0]); - var yScale = new VerticalScaleConstructor({ - ctx: mockContext, - options: verticalScaleConfig, - chart: { - data: data - }, - id: 'firstYScaleID' - }); - - // Update ticks & set physical dimensions - var verticalSize = yScale.update(50, 200); - yScale.top = 0; - yScale.left = 0; - yScale.right = verticalSize.width; - yScale.bottom = verticalSize.height; - - var HorizontalScaleConstructor = Chart.scaleService.getScaleConstructor('linear'); - var horizontalScaleConfig = Chart.helpers.clone(Chart.scaleService.getScaleDefaults('linear')); - horizontalScaleConfig = Chart.helpers.scaleMerge(horizontalScaleConfig, Chart.defaults.bubble.scales.xAxes[0]); - var xScale = new HorizontalScaleConstructor({ - ctx: mockContext, - options: horizontalScaleConfig, - chart: { - data: data - }, - id: 'firstXScaleID' - }); - - // Update ticks & set physical dimensions - var horizontalSize = xScale.update(200, 50); - xScale.left = yScale.right; - xScale.top = yScale.bottom; - xScale.right = horizontalSize.width + xScale.left; - xScale.bottom = horizontalSize.height + xScale.top; - - - var chart = { - chartArea: { - bottom: 200, - left: xScale.left, - right: 200, - top: 0 - }, - data: data, - config: { - type: 'line' + labels: ['label1', 'label2', 'label3', 'label4'] }, options: { elements: { - line: { - backgroundColor: 'rgb(255, 0, 0)', - borderColor: 'rgb(0, 255, 0)', - borderWidth: 1.2, - }, point: { backgroundColor: 'rgb(255, 255, 0)', borderWidth: 1, @@ -625,29 +315,16 @@ describe('Bubble controller tests', function() { hitRadius: 1, hoverRadius: 4, hoverBorderWidth: 1, - radius: 3, + radius: 3 } - }, - scales: { - xAxes: [{ - id: 'firstXScaleID' - }], - yAxes: [{ - id: 'firstYScaleID' - }] } - }, - scales: { - firstXScaleID: xScale, - firstYScaleID: yScale, } - }; + }); - var controller = new Chart.controllers.bubble(chart, 0); - controller.update(); - var point = chart.data.datasets[0].metaData[0]; + var meta = chart.getDatasetMeta(0); + var point = meta.data[0]; - controller.setHoverStyle(point); + meta.controller.setHoverStyle(point); expect(point._model.backgroundColor).toBe('rgb(229, 230, 0)'); expect(point._model.borderColor).toBe('rgb(230, 230, 230)'); expect(point._model.borderWidth).toBe(1); @@ -659,7 +336,7 @@ describe('Bubble controller tests', function() { chart.data.datasets[0].hoverBorderColor = 'rgb(123, 125, 127)'; chart.data.datasets[0].hoverBorderWidth = 2.1; - controller.setHoverStyle(point); + meta.controller.setHoverStyle(point); expect(point._model.backgroundColor).toBe('rgb(77, 79, 81)'); expect(point._model.borderColor).toBe('rgb(123, 125, 127)'); expect(point._model.borderWidth).toBe(2.1); @@ -673,7 +350,7 @@ describe('Bubble controller tests', function() { hoverBorderColor: 'rgb(10, 10, 10)' }; - controller.setHoverStyle(point); + meta.controller.setHoverStyle(point); expect(point._model.backgroundColor).toBe('rgb(0, 0, 0)'); expect(point._model.borderColor).toBe('rgb(10, 10, 10)'); expect(point._model.borderWidth).toBe(5.5); @@ -681,92 +358,32 @@ describe('Bubble controller tests', function() { }); it('should remove hover styles', function() { - var data = { - datasets: [{ - data: [{ - x: 10, - y: 10, - r: 5 - }, { - x: -15, - y: -10, - r: 1 - }, { - x: 0, - y: -9, - r: 2 - }, { - x: -4, - y: 10, - r: 1 + var chart = window.acquireChart({ + type: 'bubble', + data: { + datasets: [{ + data: [{ + x: 10, + y: 10, + r: 5 + }, { + x: -15, + y: -10, + r: 1 + }, { + x: 0, + y: -9, + r: 2 + }, { + x: -4, + y: 10, + r: 1 + }] }], - label: 'dataset2', - xAxisID: 'firstXScaleID', - yAxisID: 'firstYScaleID' - }], - labels: ['label1', 'label2', 'label3', 'label4'] - }; - var mockContext = window.createMockContext(); - - var VerticalScaleConstructor = Chart.scaleService.getScaleConstructor('linear'); - var verticalScaleConfig = Chart.helpers.clone(Chart.scaleService.getScaleDefaults('linear')); - verticalScaleConfig = Chart.helpers.scaleMerge(verticalScaleConfig, Chart.defaults.bubble.scales.yAxes[0]); - var yScale = new VerticalScaleConstructor({ - ctx: mockContext, - options: verticalScaleConfig, - chart: { - data: data - }, - id: 'firstYScaleID' - }); - - // Update ticks & set physical dimensions - var verticalSize = yScale.update(50, 200); - yScale.top = 0; - yScale.left = 0; - yScale.right = verticalSize.width; - yScale.bottom = verticalSize.height; - - var HorizontalScaleConstructor = Chart.scaleService.getScaleConstructor('linear'); - var horizontalScaleConfig = Chart.helpers.clone(Chart.scaleService.getScaleDefaults('linear')); - horizontalScaleConfig = Chart.helpers.scaleMerge(horizontalScaleConfig, Chart.defaults.bubble.scales.xAxes[0]); - var xScale = new HorizontalScaleConstructor({ - ctx: mockContext, - options: horizontalScaleConfig, - chart: { - data: data - }, - id: 'firstXScaleID' - }); - - // Update ticks & set physical dimensions - var horizontalSize = xScale.update(200, 50); - xScale.left = yScale.right; - xScale.top = yScale.bottom; - xScale.right = horizontalSize.width + xScale.left; - xScale.bottom = horizontalSize.height + xScale.top; - - - var chart = { - chartArea: { - bottom: 200, - left: xScale.left, - right: 200, - top: 0 - }, - data: data, - config: { - type: 'line' + labels: ['label1', 'label2', 'label3', 'label4'] }, options: { elements: { - line: { - backgroundColor: 'rgb(255, 0, 0)', - borderColor: 'rgb(0, 255, 0)', - borderWidth: 1.2, - fill: true, - tension: 0.1, - }, point: { backgroundColor: 'rgb(255, 255, 0)', borderWidth: 1, @@ -774,34 +391,21 @@ describe('Bubble controller tests', function() { hitRadius: 1, hoverRadius: 4, hoverBorderWidth: 1, - radius: 3, + radius: 3 } - }, - scales: { - xAxes: [{ - id: 'firstXScaleID' - }], - yAxes: [{ - id: 'firstYScaleID' - }] } - }, - scales: { - firstXScaleID: xScale, - firstYScaleID: yScale, } - }; + }); - var controller = new Chart.controllers.bubble(chart, 0); - controller.update(); - var point = chart.data.datasets[0].metaData[0]; + var meta = chart.getDatasetMeta(0); + var point = meta.data[0]; chart.options.elements.point.backgroundColor = 'rgb(45, 46, 47)'; chart.options.elements.point.borderColor = 'rgb(50, 51, 52)'; chart.options.elements.point.borderWidth = 10.1; chart.options.elements.point.radius = 1.01; - controller.removeHoverStyle(point); + meta.controller.removeHoverStyle(point); expect(point._model.backgroundColor).toBe('rgb(45, 46, 47)'); expect(point._model.borderColor).toBe('rgb(50, 51, 52)'); expect(point._model.borderWidth).toBe(10.1); @@ -813,7 +417,7 @@ describe('Bubble controller tests', function() { chart.data.datasets[0].borderColor = 'rgb(123, 125, 127)'; chart.data.datasets[0].borderWidth = 2.1; - controller.removeHoverStyle(point); + meta.controller.removeHoverStyle(point); expect(point._model.backgroundColor).toBe('rgb(77, 79, 81)'); expect(point._model.borderColor).toBe('rgb(123, 125, 127)'); expect(point._model.borderWidth).toBe(2.1); @@ -827,10 +431,10 @@ describe('Bubble controller tests', function() { borderColor: 'rgb(10, 10, 10)' }; - controller.removeHoverStyle(point); + meta.controller.removeHoverStyle(point); expect(point._model.backgroundColor).toBe('rgb(0, 0, 0)'); expect(point._model.borderColor).toBe('rgb(10, 10, 10)'); expect(point._model.borderWidth).toBe(5.5); expect(point._model.radius).toBe(4.4); }); -}); \ No newline at end of file +}); diff --git a/test/controller.doughnut.tests.js b/test/controller.doughnut.tests.js index e22620f82..c9885fdbf 100644 --- a/test/controller.doughnut.tests.js +++ b/test/controller.doughnut.tests.js @@ -1,72 +1,69 @@ // Test the bar controller describe('Doughnut controller tests', function() { - it('Should be constructed', function() { - var chart = { + + beforeEach(function() { + window.addDefaultMatchers(jasmine); + }); + + afterEach(function() { + window.releaseAllCharts(); + }); + + it('should be constructed', function() { + var chart = window.acquireChart({ + type: 'doughnut', data: { datasets: [{ data: [] - }] + }], + labels: [] } - }; + }); - var controller = new Chart.controllers.doughnut(chart, 0); - expect(controller).not.toBe(undefined); - expect(controller.index).toBe(0); - expect(chart.data.datasets[0].metaData).toEqual([]); + var meta = chart.getDatasetMeta(0); + expect(meta.type).toBe('doughnut'); + expect(meta.controller).not.toBe(undefined); + expect(meta.controller.index).toBe(0); + expect(meta.data).toEqual([]); - controller.updateIndex(1); - expect(controller.index).toBe(1); + meta.controller.updateIndex(1); + expect(meta.controller.index).toBe(1); }); - it('Should create arc elements for each data item during initialization', function() { - var chart = { + it('should create arc elements for each data item during initialization', function() { + var chart = window.acquireChart({ + type: 'doughnut', data: { datasets: [{ data: [10, 15, 0, 4] - }] - }, - config: { - type: 'doughnut' - }, - options: { + }], + labels: [] } - }; - - var controller = new Chart.controllers.doughnut(chart, 0); - - expect(chart.data.datasets[0].metaData.length).toBe(4); // 4 rectangles created - expect(chart.data.datasets[0].metaData[0] instanceof Chart.elements.Arc).toBe(true); - expect(chart.data.datasets[0].metaData[1] instanceof Chart.elements.Arc).toBe(true); - expect(chart.data.datasets[0].metaData[2] instanceof Chart.elements.Arc).toBe(true); - expect(chart.data.datasets[0].metaData[3] instanceof Chart.elements.Arc).toBe(true); + }); + + var meta = chart.getDatasetMeta(0); + expect(meta.data.length).toBe(4); // 4 rectangles created + expect(meta.data[0] instanceof Chart.elements.Arc).toBe(true); + expect(meta.data[1] instanceof Chart.elements.Arc).toBe(true); + expect(meta.data[2] instanceof Chart.elements.Arc).toBe(true); + expect(meta.data[3] instanceof Chart.elements.Arc).toBe(true); }); - it ('Should reset and update elements', function() { - var chart = { - chartArea: { - left: 0, - top: 0, - right: 100, - bottom: 200, - }, + it ('should reset and update elements', function() { + var chart = window.acquireChart({ + type: 'doughnut', data: { datasets: [{ + data: [1, 2, 3, 4], hidden: true }, { - data: [10, 15, 0, 4] + data: [5, 6, 0, 7] }, { - data: [1] + data: [8, 9, 10, 11] }], labels: ['label0', 'label1', 'label2', 'label3'] }, - config: { - type: 'doughnut' - }, options: { - animation: { - animateRotate: false, - animateScale: false - }, cutoutPercentage: 50, rotation: Math.PI * -0.5, circumference: Math.PI * 2.0, @@ -79,168 +76,92 @@ describe('Doughnut controller tests', function() { } } } - }; - - var controller = new Chart.controllers.doughnut(chart, 1); - controller.reset(); // reset first - - expect(chart.data.datasets[1].metaData[0]._model).toEqual(jasmine.objectContaining({ - x: 50, - y: 100, - startAngle: Math.PI * -0.5, - endAngle: Math.PI * -0.5, - circumference: 2.1666156231653746, - outerRadius: 49, - innerRadius: 36.75 - })); - - expect(chart.data.datasets[1].metaData[1]._model).toEqual(jasmine.objectContaining({ - x: 50, - y: 100, - startAngle: Math.PI * -0.5, - endAngle: Math.PI * -0.5, - circumference: 3.249923434748062, - outerRadius: 49, - innerRadius: 36.75 - })); - - expect(chart.data.datasets[1].metaData[2]._model).toEqual(jasmine.objectContaining({ - x: 50, - y: 100, - startAngle: Math.PI * -0.5, - endAngle: Math.PI * -0.5, - circumference: 0, - outerRadius: 49, - innerRadius: 36.75 - })); - - expect(chart.data.datasets[1].metaData[3]._model).toEqual(jasmine.objectContaining({ - x: 50, - y: 100, - startAngle: Math.PI * -0.5, - endAngle: Math.PI * -0.5, - circumference: 0.8666462492661499, - outerRadius: 49, - innerRadius: 36.75 - })); - - controller.update(); - - expect(chart.data.datasets[1].metaData[0]._model).toEqual(jasmine.objectContaining({ - x: 50, - y: 100, - startAngle: Math.PI * -0.5, - endAngle: 0.595819296370478, - circumference: 2.1666156231653746, - outerRadius: 49, - innerRadius: 36.75, - - backgroundColor: 'rgb(255, 0, 0)', - borderColor: 'rgb(0, 0, 255)', - borderWidth: 2, - hoverBackgroundColor: 'rgb(255, 255, 255)', - - label: 'label0', - })); - - expect(chart.data.datasets[1].metaData[1]._model).toEqual(jasmine.objectContaining({ - x: 50, - y: 100, - startAngle: 0.595819296370478, - endAngle: 3.84574273111854, - circumference: 3.249923434748062, - outerRadius: 49, - innerRadius: 36.75, - - backgroundColor: 'rgb(255, 0, 0)', - borderColor: 'rgb(0, 0, 255)', - borderWidth: 2, - hoverBackgroundColor: 'rgb(255, 255, 255)', - - label: 'label1' - })); - - expect(chart.data.datasets[1].metaData[2]._model).toEqual(jasmine.objectContaining({ - x: 50, - y: 100, - startAngle: 3.84574273111854, - endAngle: 3.84574273111854, - circumference: 0, - outerRadius: 49, - innerRadius: 36.75, - - backgroundColor: 'rgb(255, 0, 0)', - borderColor: 'rgb(0, 0, 255)', - borderWidth: 2, - hoverBackgroundColor: 'rgb(255, 255, 255)', - - label: 'label2' - })); - - expect(chart.data.datasets[1].metaData[3]._model).toEqual(jasmine.objectContaining({ - x: 50, - y: 100, - startAngle: 3.84574273111854, - endAngle: 4.71238898038469, - circumference: 0.8666462492661499, - outerRadius: 49, - innerRadius: 36.75, - - backgroundColor: 'rgb(255, 0, 0)', - borderColor: 'rgb(0, 0, 255)', - borderWidth: 2, - hoverBackgroundColor: 'rgb(255, 255, 255)', - - label: 'label3' - })); + }); + + var meta = chart.getDatasetMeta(1); + + meta.controller.reset(); // reset first + + expect(meta.data.length).toBe(4); + + [ { c: 1.7453292519 }, + { c: 2.0943951023 }, + { c: 0, }, + { c: 2.4434609527 } + ].forEach(function(expected, i) { + expect(meta.data[i]._model.x).toBeCloseToPixel(256); + expect(meta.data[i]._model.y).toBeCloseToPixel(272); + expect(meta.data[i]._model.outerRadius).toBeCloseToPixel(239); + expect(meta.data[i]._model.innerRadius).toBeCloseToPixel(179); + expect(meta.data[i]._model.circumference).toBeCloseTo(expected.c, 8); + expect(meta.data[i]._model).toEqual(jasmine.objectContaining({ + startAngle: Math.PI * -0.5, + endAngle: Math.PI * -0.5, + label: chart.data.labels[i], + hoverBackgroundColor: 'rgb(255, 255, 255)', + backgroundColor: 'rgb(255, 0, 0)', + borderColor: 'rgb(0, 0, 255)', + borderWidth: 2 + })); + }) + + chart.update(); + + [ { c: 1.7453292519, s: -1.5707963267, e: 0.1745329251 }, + { c: 2.0943951023, s: 0.1745329251, e: 2.2689280275 }, + { c: 0, s: 2.2689280275, e: 2.2689280275 }, + { c: 2.4434609527, s: 2.2689280275, e: 4.7123889803 } + ].forEach(function(expected, i) { + expect(meta.data[i]._model.x).toBeCloseToPixel(256); + expect(meta.data[i]._model.y).toBeCloseToPixel(272); + expect(meta.data[i]._model.outerRadius).toBeCloseToPixel(239); + expect(meta.data[i]._model.innerRadius).toBeCloseToPixel(179); + expect(meta.data[i]._model.circumference).toBeCloseTo(expected.c, 8); + expect(meta.data[i]._model.startAngle).toBeCloseTo(expected.s, 8); + expect(meta.data[i]._model.endAngle).toBeCloseTo(expected.e, 8); + expect(meta.data[i]._model).toEqual(jasmine.objectContaining({ + label: chart.data.labels[i], + hoverBackgroundColor: 'rgb(255, 255, 255)', + backgroundColor: 'rgb(255, 0, 0)', + borderColor: 'rgb(0, 0, 255)', + borderWidth: 2 + })); + }) // Change the amount of data and ensure that arcs are updated accordingly chart.data.datasets[1].data = [1, 2]; // remove 2 elements from dataset 0 - controller.buildOrUpdateElements(); - controller.update(); + chart.update(); - expect(chart.data.datasets[1].metaData.length).toBe(2); - expect(chart.data.datasets[1].metaData[0] instanceof Chart.elements.Arc).toBe(true); - expect(chart.data.datasets[1].metaData[1] instanceof Chart.elements.Arc).toBe(true); + expect(meta.data.length).toBe(2); + expect(meta.data[0] instanceof Chart.elements.Arc).toBe(true); + expect(meta.data[1] instanceof Chart.elements.Arc).toBe(true); // Add data chart.data.datasets[1].data = [1, 2, 3, 4]; - controller.buildOrUpdateElements(); - controller.update(); - - expect(chart.data.datasets[1].metaData.length).toBe(4); - expect(chart.data.datasets[1].metaData[0] instanceof Chart.elements.Arc).toBe(true); - expect(chart.data.datasets[1].metaData[1] instanceof Chart.elements.Arc).toBe(true); - expect(chart.data.datasets[1].metaData[2] instanceof Chart.elements.Arc).toBe(true); - expect(chart.data.datasets[1].metaData[3] instanceof Chart.elements.Arc).toBe(true); + chart.update(); + + expect(meta.data.length).toBe(4); + expect(meta.data[0] instanceof Chart.elements.Arc).toBe(true); + expect(meta.data[1] instanceof Chart.elements.Arc).toBe(true); + expect(meta.data[2] instanceof Chart.elements.Arc).toBe(true); + expect(meta.data[3] instanceof Chart.elements.Arc).toBe(true); }); - it ('Should rotate and limit circumference', function() { - var chart = { - chartArea: { - left: 0, - top: 0, - right: 200, - bottom: 100, - }, + it ('should rotate and limit circumference', function() { + var chart = window.acquireChart({ + type: 'doughnut', data: { datasets: [{ + data: [2, 4], hidden: true }, { data: [1, 3] }, { - data: [1] + data: [1, 0] }], labels: ['label0', 'label1'] }, - config: { - type: 'doughnut' - }, options: { - animation: { - animateRotate: false, - animateScale: false - }, cutoutPercentage: 50, rotation: Math.PI, circumference: Math.PI * 0.5, @@ -253,100 +174,62 @@ describe('Doughnut controller tests', function() { } } } - }; - - var controller = new Chart.controllers.doughnut(chart, 1); - controller.update(); - - expect(chart.data.datasets[1].metaData[0]._model.x).toEqual(149); - expect(chart.data.datasets[1].metaData[0]._model.y).toEqual(99); - expect(chart.data.datasets[1].metaData[0]._model.startAngle).toBeCloseTo(Math.PI, 10); - expect(chart.data.datasets[1].metaData[0]._model.endAngle).toBeCloseTo(Math.PI + Math.PI / 8, 10); - expect(chart.data.datasets[1].metaData[0]._model.circumference).toBeCloseTo(Math.PI / 8, 10); - expect(chart.data.datasets[1].metaData[0]._model.outerRadius).toBeCloseTo(98, 10); - expect(chart.data.datasets[1].metaData[0]._model.innerRadius).toBeCloseTo(73.5, 10); - - expect(chart.data.datasets[1].metaData[1]._model.x).toEqual(149); - expect(chart.data.datasets[1].metaData[1]._model.y).toEqual(99); - expect(chart.data.datasets[1].metaData[1]._model.startAngle).toBeCloseTo(Math.PI + Math.PI / 8, 10); - expect(chart.data.datasets[1].metaData[1]._model.endAngle).toBeCloseTo(Math.PI + Math.PI / 2, 10); - expect(chart.data.datasets[1].metaData[1]._model.circumference).toBeCloseTo(3 * Math.PI / 8, 10); - expect(chart.data.datasets[1].metaData[1]._model.outerRadius).toBeCloseTo(98, 10); - expect(chart.data.datasets[1].metaData[1]._model.innerRadius).toBeCloseTo(73.5, 10); + }); + + var meta = chart.getDatasetMeta(1); + + expect(meta.data.length).toBe(2); + + // Only startAngle, endAngle and circumference should be different. + [ { c: Math.PI / 8, s: Math.PI, e: Math.PI + Math.PI / 8 }, + { c: 3 * Math.PI / 8, s: Math.PI + Math.PI / 8, e: Math.PI + Math.PI / 2 } + ].forEach(function(expected, i) { + expect(meta.data[i]._model.x).toBeCloseToPixel(495); + expect(meta.data[i]._model.y).toBeCloseToPixel(511); + expect(meta.data[i]._model.outerRadius).toBeCloseToPixel(478); + expect(meta.data[i]._model.innerRadius).toBeCloseToPixel(359); + expect(meta.data[i]._model.circumference).toBeCloseTo(expected.c,8); + expect(meta.data[i]._model.startAngle).toBeCloseTo(expected.s, 8); + expect(meta.data[i]._model.endAngle).toBeCloseTo(expected.e, 8); + }) }); it ('should draw all arcs', function() { - var chart = { - chartArea: { - left: 0, - top: 0, - right: 100, - bottom: 200, - }, + var chart = window.acquireChart({ + type: 'doughnut', data: { datasets: [{ data: [10, 15, 0, 4] }], labels: ['label0', 'label1', 'label2', 'label3'] - }, - config: { - type: 'doughnut' - }, - options: { - animation: { - animateRotate: false, - animateScale: false - }, - cutoutPercentage: 50, - elements: { - arc: { - backgroundColor: 'rgb(255, 0, 0)', - borderColor: 'rgb(0, 0, 255)', - borderWidth: 2, - hoverBackgroundColor: 'rgb(255, 255, 255)' - } - } } - }; + }); - var controller = new Chart.controllers.doughnut(chart, 0); + var meta = chart.getDatasetMeta(0); - spyOn(chart.data.datasets[0].metaData[0], 'draw'); - spyOn(chart.data.datasets[0].metaData[1], 'draw'); - spyOn(chart.data.datasets[0].metaData[2], 'draw'); - spyOn(chart.data.datasets[0].metaData[3], 'draw'); + spyOn(meta.data[0], 'draw'); + spyOn(meta.data[1], 'draw'); + spyOn(meta.data[2], 'draw'); + spyOn(meta.data[3], 'draw'); - controller.draw(); + chart.update(); - expect(chart.data.datasets[0].metaData[0].draw.calls.count()).toBe(1); - expect(chart.data.datasets[0].metaData[1].draw.calls.count()).toBe(1); - expect(chart.data.datasets[0].metaData[2].draw.calls.count()).toBe(1); - expect(chart.data.datasets[0].metaData[3].draw.calls.count()).toBe(1); + expect(meta.data[0].draw.calls.count()).toBe(1); + expect(meta.data[1].draw.calls.count()).toBe(1); + expect(meta.data[2].draw.calls.count()).toBe(1); + expect(meta.data[3].draw.calls.count()).toBe(1); }); it ('should set the hover style of an arc', function() { - var chart = { - chartArea: { - left: 0, - top: 0, - right: 100, - bottom: 200, - }, + var chart = window.acquireChart({ + type: 'doughnut', data: { datasets: [{ data: [10, 15, 0, 4] }], labels: ['label0', 'label1', 'label2', 'label3'] }, - config: { - type: 'doughnut' - }, options: { - animation: { - animateRotate: false, - animateScale: false - }, - cutoutPercentage: 50, elements: { arc: { backgroundColor: 'rgb(255, 0, 0)', @@ -355,16 +238,12 @@ describe('Doughnut controller tests', function() { } } } - }; + }); - var controller = new Chart.controllers.doughnut(chart, 0); - controller.reset(); // reset first - controller.update(); - - var arc = chart.data.datasets[0].metaData[0]; - - controller.setHoverStyle(arc); + var meta = chart.getDatasetMeta(0); + var arc = meta.data[0]; + meta.controller.setHoverStyle(arc); expect(arc._model.backgroundColor).toBe('rgb(230, 0, 0)'); expect(arc._model.borderColor).toBe('rgb(0, 0, 230)'); expect(arc._model.borderWidth).toBe(2); @@ -374,8 +253,7 @@ describe('Doughnut controller tests', function() { chart.data.datasets[0].hoverBorderColor = 'rgb(18, 18, 18)'; chart.data.datasets[0].hoverBorderWidth = 1.56; - controller.setHoverStyle(arc); - + meta.controller.setHoverStyle(arc); expect(arc._model.backgroundColor).toBe('rgb(9, 9, 9)'); expect(arc._model.borderColor).toBe('rgb(18, 18, 18)'); expect(arc._model.borderWidth).toBe(1.56); @@ -385,8 +263,7 @@ describe('Doughnut controller tests', function() { chart.data.datasets[0].hoverBorderColor = ['rgb(18, 18, 18)']; chart.data.datasets[0].hoverBorderWidth = [0.1, 1.56]; - controller.setHoverStyle(arc); - + meta.controller.setHoverStyle(arc); expect(arc._model.backgroundColor).toBe('rgb(255, 255, 255)'); expect(arc._model.borderColor).toBe('rgb(18, 18, 18)'); expect(arc._model.borderWidth).toBe(0.1); @@ -398,36 +275,22 @@ describe('Doughnut controller tests', function() { hoverBorderWidth: 3.14159, }; - controller.setHoverStyle(arc); - + meta.controller.setHoverStyle(arc); expect(arc._model.backgroundColor).toBe('rgb(7, 7, 7)'); expect(arc._model.borderColor).toBe('rgb(17, 17, 17)'); expect(arc._model.borderWidth).toBe(3.14159); }); it ('should unset the hover style of an arc', function() { - var chart = { - chartArea: { - left: 0, - top: 0, - right: 100, - bottom: 200, - }, + var chart = window.acquireChart({ + type: 'doughnut', data: { datasets: [{ data: [10, 15, 0, 4] }], labels: ['label0', 'label1', 'label2', 'label3'] }, - config: { - type: 'doughnut' - }, options: { - animation: { - animateRotate: false, - animateScale: false - }, - cutoutPercentage: 50, elements: { arc: { backgroundColor: 'rgb(255, 0, 0)', @@ -436,16 +299,12 @@ describe('Doughnut controller tests', function() { } } } - }; - - var controller = new Chart.controllers.doughnut(chart, 0); - controller.reset(); // reset first - controller.update(); - - var arc = chart.data.datasets[0].metaData[0]; + }); - controller.removeHoverStyle(arc); + var meta = chart.getDatasetMeta(0); + var arc = meta.data[0]; + meta.controller.removeHoverStyle(arc); expect(arc._model.backgroundColor).toBe('rgb(255, 0, 0)'); expect(arc._model.borderColor).toBe('rgb(0, 0, 255)'); expect(arc._model.borderWidth).toBe(2); @@ -455,8 +314,7 @@ describe('Doughnut controller tests', function() { chart.data.datasets[0].borderColor = 'rgb(18, 18, 18)'; chart.data.datasets[0].borderWidth = 1.56; - controller.removeHoverStyle(arc); - + meta.controller.removeHoverStyle(arc); expect(arc._model.backgroundColor).toBe('rgb(9, 9, 9)'); expect(arc._model.borderColor).toBe('rgb(18, 18, 18)'); expect(arc._model.borderWidth).toBe(1.56); @@ -466,8 +324,7 @@ describe('Doughnut controller tests', function() { chart.data.datasets[0].borderColor = ['rgb(18, 18, 18)']; chart.data.datasets[0].borderWidth = [0.1, 1.56]; - controller.removeHoverStyle(arc); - + meta.controller.removeHoverStyle(arc); expect(arc._model.backgroundColor).toBe('rgb(255, 255, 255)'); expect(arc._model.borderColor).toBe('rgb(18, 18, 18)'); expect(arc._model.borderWidth).toBe(0.1); @@ -479,10 +336,9 @@ describe('Doughnut controller tests', function() { borderWidth: 3.14159, }; - controller.removeHoverStyle(arc); - + meta.controller.removeHoverStyle(arc); expect(arc._model.backgroundColor).toBe('rgb(7, 7, 7)'); expect(arc._model.borderColor).toBe('rgb(17, 17, 17)'); expect(arc._model.borderWidth).toBe(3.14159); }); -}); \ No newline at end of file +}); diff --git a/test/controller.polarArea.tests.js b/test/controller.polarArea.tests.js index 1a92a6249..9d9b08812 100644 --- a/test/controller.polarArea.tests.js +++ b/test/controller.polarArea.tests.js @@ -1,113 +1,93 @@ // Test the polar area controller describe('Polar area controller tests', function() { - it('Should be constructed', function() { - var chart = { - data: { - datasets: [{ - data: [] - }] - } - }; - var controller = new Chart.controllers.polarArea(chart, 0); - expect(controller).not.toBe(undefined); - expect(controller.index).toBe(0); - expect(chart.data.datasets[0].metaData).toEqual([]); + beforeEach(function() { + window.addDefaultMatchers(jasmine); + }); - controller.updateIndex(1); - expect(controller.index).toBe(1); + afterEach(function() { + window.releaseAllCharts(); }); - it('Should create arc elements for each data item during initialization', function() { - var chart = { - data: { - datasets: [{ - data: [10, 15, 0, -4] - }] - }, - config: { - type: 'polarArea' - }, - options: { - } - }; + it('should be constructed', function() { + var chart = window.acquireChart({ + type: 'polarArea', + data: { + datasets: [ + { data: [] }, + { data: [] } + ], + labels: [] + } + }); - var controller = new Chart.controllers.polarArea(chart, 0); + var meta = chart.getDatasetMeta(1); + expect(meta.type).toEqual('polarArea'); + expect(meta.data).toEqual([]); + expect(meta.hidden).toBe(null); + expect(meta.controller).not.toBe(undefined); + expect(meta.controller.index).toBe(1); - expect(chart.data.datasets[0].metaData.length).toBe(4); // 4 arcs created - expect(chart.data.datasets[0].metaData[0] instanceof Chart.elements.Arc).toBe(true); - expect(chart.data.datasets[0].metaData[1] instanceof Chart.elements.Arc).toBe(true); - expect(chart.data.datasets[0].metaData[2] instanceof Chart.elements.Arc).toBe(true); - expect(chart.data.datasets[0].metaData[3] instanceof Chart.elements.Arc).toBe(true); + meta.controller.updateIndex(0); + expect(meta.controller.index).toBe(0); }); - it('should draw all elements', function() { - var chart = { + it('should create arc elements for each data item during initialization', function() { + var chart = window.acquireChart({ + type: 'polarArea', data: { - datasets: [{ - data: [10, 15, 0, -4] - }] - }, - config: { - type: 'polarArea' - }, - options: { + datasets: [ + { data: [] }, + { data: [10, 15, 0, -4] } + ], + labels: [] } - }; - - var controller = new Chart.controllers.polarArea(chart, 0); - - spyOn(chart.data.datasets[0].metaData[0], 'draw'); - spyOn(chart.data.datasets[0].metaData[1], 'draw'); - spyOn(chart.data.datasets[0].metaData[2], 'draw'); - spyOn(chart.data.datasets[0].metaData[3], 'draw'); - - controller.draw(); + }); - expect(chart.data.datasets[0].metaData[0].draw.calls.count()).toBe(1); - expect(chart.data.datasets[0].metaData[1].draw.calls.count()).toBe(1); - expect(chart.data.datasets[0].metaData[2].draw.calls.count()).toBe(1); - expect(chart.data.datasets[0].metaData[3].draw.calls.count()).toBe(1); + var meta = chart.getDatasetMeta(1); + expect(meta.data.length).toBe(4); // 4 arcs created + expect(meta.data[0] instanceof Chart.elements.Arc).toBe(true); + expect(meta.data[1] instanceof Chart.elements.Arc).toBe(true); + expect(meta.data[2] instanceof Chart.elements.Arc).toBe(true); + expect(meta.data[3] instanceof Chart.elements.Arc).toBe(true); }); - it('should update elements', function() { - var data = { + it('should draw all elements', function() { + var chart = window.acquireChart({ + type: 'polarArea', + data: { datasets: [{ data: [10, 15, 0, -4], - label: 'dataset2', + label: 'dataset2' }], labels: ['label1', 'label2', 'label3', 'label4'] - }; - var mockContext = window.createMockContext(); - - var ScaleConstructor = Chart.scaleService.getScaleConstructor('radialLinear'); - var scaleConfig = Chart.helpers.clone(Chart.scaleService.getScaleDefaults('radialLinear')); - scaleConfig = Chart.helpers.scaleMerge(scaleConfig, Chart.defaults.polarArea.scale); - var scale = new ScaleConstructor({ - ctx: mockContext, - options: scaleConfig, - chart: { - data: data - }, + } }); - // Update ticks & set physical dimensions - scale.update(300, 300); - scale.top = 0; - scale.left = 0; - scale.right = 300; - scale.bottom = 300; - - var chart = { - chartArea: { - bottom: 300, - left: 0, - right: 300, - top: 0 - }, - data: data, - config: { - type: 'line' + var meta = chart.getDatasetMeta(0); + + spyOn(meta.data[0], 'draw'); + spyOn(meta.data[1], 'draw'); + spyOn(meta.data[2], 'draw'); + spyOn(meta.data[3], 'draw'); + + chart.update(); + + expect(meta.data[0].draw.calls.count()).toBe(1); + expect(meta.data[1].draw.calls.count()).toBe(1); + expect(meta.data[2].draw.calls.count()).toBe(1); + expect(meta.data[3].draw.calls.count()).toBe(1); + }); + + it('should update elements when modifying data', function() { + var chart = window.acquireChart({ + type: 'polarArea', + data: { + datasets: [{ + data: [10, 15, 0, -4], + label: 'dataset2' + }], + labels: ['label1', 'label2', 'label3', 'label4'] }, options: { showLines: true, @@ -115,66 +95,32 @@ describe('Polar area controller tests', function() { arc: { backgroundColor: 'rgb(255, 0, 0)', borderColor: 'rgb(0, 255, 0)', - borderWidth: 1.2, - }, - }, - }, - scale: scale - }; - - var controller = new Chart.controllers.polarArea(chart, 0); - controller.update(); - - expect(chart.data.datasets[0].metaData[0]._model).toEqual({ - x: 150, - y: 150, - innerRadius: 0, - outerRadius: 59.5, - startAngle: -0.5 * Math.PI, - endAngle: 0, - backgroundColor: 'rgb(255, 0, 0)', - borderColor: 'rgb(0, 255, 0)', - borderWidth: 1.2, - label: 'label1' - }); - - expect(chart.data.datasets[0].metaData[1]._model).toEqual({ - x: 150, - y: 150, - innerRadius: 0, - outerRadius: 80.75, - startAngle: 0, - endAngle: 0.5 * Math.PI, - backgroundColor: 'rgb(255, 0, 0)', - borderColor: 'rgb(0, 255, 0)', - borderWidth: 1.2, - label: 'label2' - }); - - expect(chart.data.datasets[0].metaData[2]._model).toEqual({ - x: 150, - y: 150, - innerRadius: 0, - outerRadius: 17, - startAngle: 0.5 * Math.PI, - endAngle: Math.PI, - backgroundColor: 'rgb(255, 0, 0)', - borderColor: 'rgb(0, 255, 0)', - borderWidth: 1.2, - label: 'label3' + borderWidth: 1.2 + } + } + } }); - expect(chart.data.datasets[0].metaData[3]._model).toEqual({ - x: 150, - y: 150, - innerRadius: 0, - outerRadius: 0, - startAngle: Math.PI, - endAngle: 1.5 * Math.PI, - backgroundColor: 'rgb(255, 0, 0)', - borderColor: 'rgb(0, 255, 0)', - borderWidth: 1.2, - label: 'label4' + var meta = chart.getDatasetMeta(0); + expect(meta.data.length).toBe(4); + + [ { o: 156, s: -0.5 * Math.PI, e: 0 }, + { o: 211, s: 0, e: 0.5 * Math.PI }, + { o: 45, s: 0.5 * Math.PI, e: Math.PI }, + { o: 0, s: Math.PI, e: 1.5 * Math.PI } + ].forEach(function(expected, i) { + expect(meta.data[i]._model.x).toBeCloseToPixel(256); + expect(meta.data[i]._model.y).toBeCloseToPixel(272); + expect(meta.data[i]._model.innerRadius).toBeCloseToPixel(0); + expect(meta.data[i]._model.outerRadius).toBeCloseToPixel(expected.o); + expect(meta.data[i]._model.startAngle).toBe(expected.s); + expect(meta.data[i]._model.endAngle).toBe(expected.e); + expect(meta.data[i]._model).toEqual(jasmine.objectContaining({ + backgroundColor: 'rgb(255, 0, 0)', + borderColor: 'rgb(0, 255, 0)', + borderWidth: 1.2, + label: chart.data.labels[i] + })); }); // arc styles @@ -182,122 +128,46 @@ describe('Polar area controller tests', function() { chart.data.datasets[0].borderColor = 'rgb(56, 57, 58)'; chart.data.datasets[0].borderWidth = 1.123; - controller.update(); - - expect(chart.data.datasets[0].metaData[0]._model).toEqual({ - x: 150, - y: 150, - innerRadius: 0, - outerRadius: 59.5, - startAngle: -0.5 * Math.PI, - endAngle: 0, - backgroundColor: 'rgb(128, 129, 130)', - borderWidth: 1.123, - borderColor: 'rgb(56, 57, 58)', - label: 'label1' - }); - - expect(chart.data.datasets[0].metaData[1]._model).toEqual({ - x: 150, - y: 150, - innerRadius: 0, - outerRadius: 80.75, - startAngle: 0, - endAngle: 0.5 * Math.PI, - backgroundColor: 'rgb(128, 129, 130)', - borderWidth: 1.123, - borderColor: 'rgb(56, 57, 58)', - label: 'label2' - }); - - expect(chart.data.datasets[0].metaData[2]._model).toEqual({ - x: 150, - y: 150, - innerRadius: 0, - outerRadius: 17, - startAngle: 0.5 * Math.PI, - endAngle: Math.PI, - backgroundColor: 'rgb(128, 129, 130)', - borderWidth: 1.123, - borderColor: 'rgb(56, 57, 58)', - label: 'label3' - }); + chart.update(); - expect(chart.data.datasets[0].metaData[3]._model).toEqual({ - x: 150, - y: 150, - innerRadius: 0, - outerRadius: 0, - startAngle: Math.PI, - endAngle: 1.5 * Math.PI, - backgroundColor: 'rgb(128, 129, 130)', - borderWidth: 1.123, - borderColor: 'rgb(56, 57, 58)', - label: 'label4' - }); + for (var i = 0; i < 4; ++i) { + expect(meta.data[i]._model.backgroundColor).toBe('rgb(128, 129, 130)'); + expect(meta.data[i]._model.borderColor).toBe('rgb(56, 57, 58)'); + expect(meta.data[i]._model.borderWidth).toBe(1.123); + } // arc styles - chart.data.datasets[0].metaData[0].custom = { + meta.data[0].custom = { backgroundColor: 'rgb(0, 1, 3)', borderColor: 'rgb(4, 6, 8)', - borderWidth: 0.787, - + borderWidth: 0.787 }; - controller.update(); + chart.update(); - expect(chart.data.datasets[0].metaData[0]._model).toEqual({ - x: 150, - y: 150, - innerRadius: 0, - outerRadius: 59.5, + expect(meta.data[0]._model.x).toBeCloseToPixel(256); + expect(meta.data[0]._model.y).toBeCloseToPixel(272); + expect(meta.data[0]._model.innerRadius).toBeCloseToPixel(0); + expect(meta.data[0]._model.outerRadius).toBeCloseToPixel(156); + expect(meta.data[0]._model).toEqual(jasmine.objectContaining({ startAngle: -0.5 * Math.PI, endAngle: 0, backgroundColor: 'rgb(0, 1, 3)', borderWidth: 0.787, borderColor: 'rgb(4, 6, 8)', label: 'label1' - }); + })); }); it('should handle number of data point changes in update', function() { - var data = { - datasets: [{ - data: [10, 15, 0, -4], - label: 'dataset2', - }], - labels: ['label1', 'label2', 'label3', 'label4'] - }; - var mockContext = window.createMockContext(); - - var ScaleConstructor = Chart.scaleService.getScaleConstructor('radialLinear'); - var scaleConfig = Chart.helpers.clone(Chart.scaleService.getScaleDefaults('radialLinear')); - scaleConfig = Chart.helpers.scaleMerge(scaleConfig, Chart.defaults.polarArea.scale); - var scale = new ScaleConstructor({ - ctx: mockContext, - options: scaleConfig, - chart: { - data: data - }, - }); - - // Update ticks & set physical dimensions - scale.update(300, 300); - scale.top = 0; - scale.left = 0; - scale.right = 300; - scale.bottom = 300; - - var chart = { - chartArea: { - bottom: 300, - left: 0, - right: 300, - top: 0 - }, - data: data, - config: { - type: 'line' + var chart = window.acquireChart({ + type: 'polarArea', + data: { + datasets: [{ + data: [10, 15, 0, -4], + label: 'dataset2' + }], + labels: ['label1', 'label2', 'label3', 'label4'] }, options: { showLines: true, @@ -305,73 +175,46 @@ describe('Polar area controller tests', function() { arc: { backgroundColor: 'rgb(255, 0, 0)', borderColor: 'rgb(0, 255, 0)', - borderWidth: 1.2, - }, - }, - }, - scale: scale - }; + borderWidth: 1.2 + } + } + } + }); - var controller = new Chart.controllers.polarArea(chart, 0); - controller.update(); - expect(chart.data.datasets[0].metaData.length).toBe(4); - - chart.data.datasets[0].data = [1, 2]; // remove 2 items - controller.buildOrUpdateElements(); - controller.update(); - expect(chart.data.datasets[0].metaData.length).toBe(2); - expect(chart.data.datasets[0].metaData[0] instanceof Chart.elements.Arc).toBe(true); - expect(chart.data.datasets[0].metaData[1] instanceof Chart.elements.Arc).toBe(true); - - chart.data.datasets[0].data = [1, 2, 3, 4, 5]; // add 3 items - controller.buildOrUpdateElements(); - controller.update(); - expect(chart.data.datasets[0].metaData.length).toBe(5); - expect(chart.data.datasets[0].metaData[0] instanceof Chart.elements.Arc).toBe(true); - expect(chart.data.datasets[0].metaData[1] instanceof Chart.elements.Arc).toBe(true); - expect(chart.data.datasets[0].metaData[2] instanceof Chart.elements.Arc).toBe(true); - expect(chart.data.datasets[0].metaData[3] instanceof Chart.elements.Arc).toBe(true); - expect(chart.data.datasets[0].metaData[4] instanceof Chart.elements.Arc).toBe(true); + var meta = chart.getDatasetMeta(0); + expect(meta.data.length).toBe(4); + + // remove 2 items + chart.data.labels = ['label1', 'label2']; + chart.data.datasets[0].data = [1, 2]; + chart.update(); + + expect(meta.data.length).toBe(2); + expect(meta.data[0] instanceof Chart.elements.Arc).toBe(true); + expect(meta.data[1] instanceof Chart.elements.Arc).toBe(true); + + // add 3 items + chart.data.labels = ['label1', 'label2', 'label3', 'label4', 'label5']; + chart.data.datasets[0].data = [1, 2, 3, 4, 5]; + chart.update(); + + expect(meta.data.length).toBe(5); + expect(meta.data[0] instanceof Chart.elements.Arc).toBe(true); + expect(meta.data[1] instanceof Chart.elements.Arc).toBe(true); + expect(meta.data[2] instanceof Chart.elements.Arc).toBe(true); + expect(meta.data[3] instanceof Chart.elements.Arc).toBe(true); + expect(meta.data[4] instanceof Chart.elements.Arc).toBe(true); }); it('should set arc hover styles', function() { - var data = { - datasets: [{ - data: [10, 15, 0, -4], - label: 'dataset2', - }], - labels: ['label1', 'label2', 'label3', 'label4'] - }; - var mockContext = window.createMockContext(); - - var ScaleConstructor = Chart.scaleService.getScaleConstructor('radialLinear'); - var scaleConfig = Chart.helpers.clone(Chart.scaleService.getScaleDefaults('radialLinear')); - scaleConfig = Chart.helpers.scaleMerge(scaleConfig, Chart.defaults.polarArea.scale); - var scale = new ScaleConstructor({ - ctx: mockContext, - options: scaleConfig, - chart: { - data: data - }, - }); - - // Update ticks & set physical dimensions - scale.update(300, 300); - scale.top = 0; - scale.left = 0; - scale.right = 300; - scale.bottom = 300; - - var chart = { - chartArea: { - bottom: 300, - left: 0, - right: 300, - top: 0 - }, - data: data, - config: { - type: 'line' + var chart = window.acquireChart({ + type: 'polarArea', + data: { + datasets: [{ + data: [10, 15, 0, -4], + label: 'dataset2' + }], + labels: ['label1', 'label2', 'label3', 'label4'] }, options: { showLines: true, @@ -379,18 +222,16 @@ describe('Polar area controller tests', function() { arc: { backgroundColor: 'rgb(255, 0, 0)', borderColor: 'rgb(0, 255, 0)', - borderWidth: 1.2, - }, - }, - }, - scale: scale - }; + borderWidth: 1.2 + } + } + } + }); - var controller = new Chart.controllers.polarArea(chart, 0); - controller.update(); - var arc = chart.data.datasets[0].metaData[0]; + var meta = chart.getDatasetMeta(0); + var arc = meta.data[0]; - controller.setHoverStyle(arc); + meta.controller.setHoverStyle(arc); expect(arc._model.backgroundColor).toBe('rgb(230, 0, 0)'); expect(arc._model.borderColor).toBe('rgb(0, 230, 0)'); expect(arc._model.borderWidth).toBe(1.2); @@ -400,7 +241,7 @@ describe('Polar area controller tests', function() { chart.data.datasets[0].hoverBorderColor = 'rgb(123, 125, 127)'; chart.data.datasets[0].hoverBorderWidth = 2.1; - controller.setHoverStyle(arc); + meta.controller.setHoverStyle(arc); expect(arc._model.backgroundColor).toBe('rgb(77, 79, 81)'); expect(arc._model.borderColor).toBe('rgb(123, 125, 127)'); expect(arc._model.borderWidth).toBe(2.1); @@ -412,50 +253,21 @@ describe('Polar area controller tests', function() { hoverBorderColor: 'rgb(10, 10, 10)' }; - controller.setHoverStyle(arc); + meta.controller.setHoverStyle(arc); expect(arc._model.backgroundColor).toBe('rgb(0, 0, 0)'); expect(arc._model.borderColor).toBe('rgb(10, 10, 10)'); expect(arc._model.borderWidth).toBe(5.5); }); it('should remove hover styles', function() { - var data = { - datasets: [{ - data: [10, 15, 0, -4], - label: 'dataset2', - }], - labels: ['label1', 'label2', 'label3', 'label4'] - }; - var mockContext = window.createMockContext(); - - var ScaleConstructor = Chart.scaleService.getScaleConstructor('radialLinear'); - var scaleConfig = Chart.helpers.clone(Chart.scaleService.getScaleDefaults('radialLinear')); - scaleConfig = Chart.helpers.scaleMerge(scaleConfig, Chart.defaults.polarArea.scale); - var scale = new ScaleConstructor({ - ctx: mockContext, - options: scaleConfig, - chart: { - data: data - }, - }); - - // Update ticks & set physical dimensions - scale.update(300, 300); - scale.top = 0; - scale.left = 0; - scale.right = 300; - scale.bottom = 300; - - var chart = { - chartArea: { - bottom: 300, - left: 0, - right: 300, - top: 0 - }, - data: data, - config: { - type: 'line' + var chart = window.acquireChart({ + type: 'polarArea', + data: { + datasets: [{ + data: [10, 15, 0, -4], + label: 'dataset2' + }], + labels: ['label1', 'label2', 'label3', 'label4'] }, options: { showLines: true, @@ -463,22 +275,20 @@ describe('Polar area controller tests', function() { arc: { backgroundColor: 'rgb(255, 0, 0)', borderColor: 'rgb(0, 255, 0)', - borderWidth: 1.2, - }, - }, - }, - scale: scale - }; + borderWidth: 1.2 + } + } + } + }); - var controller = new Chart.controllers.polarArea(chart, 0); - controller.update(); - var arc = chart.data.datasets[0].metaData[0]; + var meta = chart.getDatasetMeta(0); + var arc = meta.data[0]; chart.options.elements.arc.backgroundColor = 'rgb(45, 46, 47)'; chart.options.elements.arc.borderColor = 'rgb(50, 51, 52)'; chart.options.elements.arc.borderWidth = 10.1; - controller.removeHoverStyle(arc); + meta.controller.removeHoverStyle(arc); expect(arc._model.backgroundColor).toBe('rgb(45, 46, 47)'); expect(arc._model.borderColor).toBe('rgb(50, 51, 52)'); expect(arc._model.borderWidth).toBe(10.1); @@ -488,7 +298,7 @@ describe('Polar area controller tests', function() { chart.data.datasets[0].borderColor = 'rgb(123, 125, 127)'; chart.data.datasets[0].borderWidth = 2.1; - controller.removeHoverStyle(arc); + meta.controller.removeHoverStyle(arc); expect(arc._model.backgroundColor).toBe('rgb(77, 79, 81)'); expect(arc._model.borderColor).toBe('rgb(123, 125, 127)'); expect(arc._model.borderWidth).toBe(2.1); @@ -500,9 +310,9 @@ describe('Polar area controller tests', function() { borderColor: 'rgb(10, 10, 10)' }; - controller.removeHoverStyle(arc); + meta.controller.removeHoverStyle(arc); expect(arc._model.backgroundColor).toBe('rgb(0, 0, 0)'); expect(arc._model.borderColor).toBe('rgb(10, 10, 10)'); expect(arc._model.borderWidth).toBe(5.5); }); -}); \ No newline at end of file +});