From 405fda6655ff07743a329312fe5c0d6f7537d38e Mon Sep 17 00:00:00 2001 From: Evert Timberg Date: Wed, 27 Apr 2016 19:03:52 -0400 Subject: [PATCH] Fix radar tests & reenable. support new lineTension attribute like line controller --- gulpfile.js | 1 - src/controllers/controller.radar.js | 8 +- test/controller.radar.tests.js | 684 ++++++++-------------------- 3 files changed, 208 insertions(+), 485 deletions(-) diff --git a/gulpfile.js b/gulpfile.js index a6dede35d..786f73fd5 100644 --- a/gulpfile.js +++ b/gulpfile.js @@ -45,7 +45,6 @@ var testFiles = [ // Disable tests which need to be rewritten based on changes introduced by // the following changes: https://github.com/chartjs/Chart.js/pull/2346 '!./test/controller.line.tests.js', - '!./test/controller.radar.tests.js', '!./test/core.layoutService.tests.js', '!./test/defaultConfig.tests.js', '!./test/scale.linear.tests.js', diff --git a/src/controllers/controller.radar.js b/src/controllers/controller.radar.js index 26268cba5..2c13fa817 100644 --- a/src/controllers/controller.radar.js +++ b/src/controllers/controller.radar.js @@ -74,6 +74,12 @@ module.exports = function(Chart) { scaleBase = scale.getPointPositionForValue(0, 0); } + // Compatibility: If the properties are defined with only the old name, use those values + if ((this.getDataset().tension !== undefined) && (this.getDataset().lineTension === undefined)) + { + this.getDataset().lineTension = this.getDataset().tension; + } + helpers.extend(meta.dataset, { // Utility _datasetIndex: this.index, @@ -82,7 +88,7 @@ module.exports = function(Chart) { // Model _model: { // Appearance - tension: line.custom && line.custom.tension ? line.custom.tension : helpers.getValueOrDefault(this.getDataset().tension, this.chart.options.elements.line.tension), + tension: line.custom && line.custom.tension ? line.custom.tension : helpers.getValueOrDefault(this.getDataset().lineTension, this.chart.options.elements.line.tension), backgroundColor: line.custom && line.custom.backgroundColor ? line.custom.backgroundColor : (this.getDataset().backgroundColor || this.chart.options.elements.line.backgroundColor), borderWidth: line.custom && line.custom.borderWidth ? line.custom.borderWidth : (this.getDataset().borderWidth || this.chart.options.elements.line.borderWidth), borderColor: line.custom && line.custom.borderColor ? line.custom.borderColor : (this.getDataset().borderColor || this.chart.options.elements.line.borderColor), diff --git a/test/controller.radar.tests.js b/test/controller.radar.tests.js index 417599c5b..f697bbfbc 100644 --- a/test/controller.radar.tests.js +++ b/test/controller.radar.tests.js @@ -1,119 +1,92 @@ // Test the polar area controller describe('Radar controller tests', function() { + beforeEach(function() { + window.addDefaultMatchers(jasmine); + }); + + afterEach(function() { + window.releaseAllCharts(); + }); + it('Should be constructed', function() { - var chart = { + var chart = window.acquireChart({ + type: 'radar', data: { datasets: [{ data: [] - }] + }], + labels: [] } - }; + }); - var controller = new Chart.controllers.radar(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('radar'); + 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 = { + var chart = window.acquireChart({ + type: 'radar', data: { datasets: [{ - data: [10, 15, 0, -4] + data: [10, 15, 0, 4] }], labels: ['label1', 'label2', 'label3', 'label4'] - }, - config: { - type: 'radar' - }, - options: { } - }; + }); var controller = new Chart.controllers.radar(chart, 0); - // Line element - expect(chart.data.datasets[0].metaDataset instanceof Chart.elements.Line).toBe(true); - - 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); + var meta = chart.getDatasetMeta(0); + expect(meta.dataset instanceof Chart.elements.Line).toBe(true); // line element + 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: 'radar', data: { datasets: [{ - data: [10, 15, 0, -4] - }] - }, - config: { - type: 'radar' - }, - options: { + data: [10, 15, 0, 4] + }], + labels: ['label1', 'label2', 'label3', 'label4'] } - }; + }); - var controller = new Chart.controllers.radar(chart, 0); + var meta = chart.getDatasetMeta(0); - spyOn(chart.data.datasets[0].metaDataset, 'draw'); - 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.dataset, '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].metaDataset.draw.calls.count()).toBe(1); - 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.dataset.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: [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.radar.scale); - var scale = new ScaleConstructor({ - ctx: mockContext, - options: scaleConfig, - chart: { - data: data - }, - }); - - // Update ticks & set physical dimensions - scale.top = 0; - scale.left = 0; - scale.right = 300; - scale.bottom = 300; - scale.update(300, 300); - - var chart = { - chartArea: { - bottom: 300, - left: 0, - right: 300, - top: 0 - }, - data: data, - config: { - type: 'radar' + var chart = window.acquireChart({ + type: 'radar', + data: { + datasets: [{ + data: [10, 15, 0, 4] + }], + labels: ['label1', 'label2', 'label3', 'label4'] }, options: { showLines: true, @@ -140,15 +113,19 @@ describe('Radar controller tests', function() { pointStyle: 'circle' } } - }, - scale: scale - }; + } + }); - var controller = new Chart.controllers.radar(chart, 0); - controller.update(); + var meta = chart.getDatasetMeta(0); + + meta.controller.reset(); // reset first // Line element - expect(chart.data.datasets[0].metaDataset._model).toEqual({ + expect(meta.dataset._model.scaleTop).toBeCloseToPixel(32); + expect(meta.dataset._model.scaleBottom).toBeCloseToPixel(512); + expect(meta.dataset._model.scaleZero.x).toBeCloseToPixel(256); + expect(meta.dataset._model.scaleZero.y).toBeCloseToPixel(272); + expect(meta.dataset._model).toEqual(jasmine.objectContaining({ backgroundColor: 'rgb(255, 0, 0)', borderCapStyle: 'round', borderColor: 'rgb(0, 255, 0)', @@ -158,97 +135,57 @@ describe('Radar controller tests', function() { borderWidth: 1.2, fill: true, tension: 0.1, - - scaleTop: 0, - scaleBottom: 300, - scaleZero: { - x: 150, - y: 133 - }, - }); - - expect(chart.data.datasets[0].metaData[0]._model).toEqual({ - backgroundColor: Chart.defaults.global.defaultColor, - borderWidth: 1, - borderColor: Chart.defaults.global.defaultColor, - hitRadius: 1, - radius: 3, - pointStyle: 'circle', - skip: false, - tension: 0.1, - - // Point - x: 150, - y: 91, - - // Control points - controlPointPreviousX: 146.99829997808834, - controlPointPreviousY: 91, - controlPointNextX: 155.09829997808833, - controlPointNextY: 91, + })); + + [ + { x: 256, y: 272, cppx: 256, cppy: 272, cpnx: 256, cpny: 272}, + { x: 256, y: 272, cppx: 256, cppy: 272, cpnx: 256, cpny: 272}, + { x: 256, y: 272, cppx: 256, cppy: 272, cpnx: 256, cpny: 272}, + { x: 256, y: 272, cppx: 256, cppy: 272, cpnx: 256, cpny: 272}, + ].forEach(function(expected, i) { + expect(meta.data[i]._model.x).toBeCloseToPixel(expected.x); + expect(meta.data[i]._model.y).toBeCloseToPixel(expected.y); + expect(meta.data[i]._model.controlPointPreviousX).toBeCloseToPixel(expected.cppx); + expect(meta.data[i]._model.controlPointPreviousY).toBeCloseToPixel(expected.cppy); + expect(meta.data[i]._model.controlPointNextX).toBeCloseToPixel(expected.cpnx); + expect(meta.data[i]._model.controlPointNextY).toBeCloseToPixel(expected.cpny); + expect(meta.data[i]._model).toEqual(jasmine.objectContaining({ + backgroundColor: Chart.defaults.global.defaultColor, + borderWidth: 1, + borderColor: Chart.defaults.global.defaultColor, + hitRadius: 1, + radius: 3, + pointStyle: 'circle', + skip: false, + tension: 0.1, + })); }); - expect(chart.data.datasets[0].metaData[1]._model).toEqual({ - backgroundColor: Chart.defaults.global.defaultColor, - borderWidth: 1, - borderColor: Chart.defaults.global.defaultColor, - hitRadius: 1, - radius: 3, - pointStyle: 'circle', - skip: false, - tension: 0.1, - - // Point - x: 231, - y: 150, - - // Control points - controlPointPreviousX: 231, - controlPointPreviousY: 145.8377025234528, - controlPointNextX: 231, - controlPointNextY: 153.4377025234528, - }); - - expect(chart.data.datasets[0].metaData[2]._model).toEqual({ - backgroundColor: Chart.defaults.global.defaultColor, - borderWidth: 1, - borderColor: Chart.defaults.global.defaultColor, - hitRadius: 1, - radius: 3, - pointStyle: 'circle', - skip: false, - tension: 0.1, - - // Point - x: 150, - y: 167, - - // Control points - controlPointPreviousX: 156.7197526476963, - controlPointPreviousY: 167, - controlPointNextX: 148.61975264769632, - controlPointNextY: 167, - }); - - expect(chart.data.datasets[0].metaData[3]._model).toEqual({ - backgroundColor: Chart.defaults.global.defaultColor, - borderWidth: 1, - borderColor: Chart.defaults.global.defaultColor, - hitRadius: 1, - radius: 3, - pointStyle: 'circle', - skip: false, - tension: 0.1, - - // Point - x: 150, - y: 150, - - // Control points - controlPointPreviousX: 150, - controlPointPreviousY: 151.7, - controlPointNextX: 150, - controlPointNextY: 144.1, + // Now update controller and ensure proper updates + meta.controller.update(); + + [ + { x: 256, y: 133, cppx: 246, cppy: 133, cpnx: 272, cpny: 133 }, + { x: 464, y: 272, cppx: 464, cppy: 264, cpnx: 464, cpny: 278 }, + { x: 256, y: 272, cppx: 276.9, cppy: 272, cpnx: 250.4, cpny: 272 }, + { x: 200, y: 272, cppx: 200, cppy: 275, cpnx: 200, cpny: 261 }, + ].forEach(function(expected, i) { + expect(meta.data[i]._model.x).toBeCloseToPixel(expected.x); + expect(meta.data[i]._model.y).toBeCloseToPixel(expected.y); + expect(meta.data[i]._model.controlPointPreviousX).toBeCloseToPixel(expected.cppx); + expect(meta.data[i]._model.controlPointPreviousY).toBeCloseToPixel(expected.cppy); + expect(meta.data[i]._model.controlPointNextX).toBeCloseToPixel(expected.cpnx); + expect(meta.data[i]._model.controlPointNextY).toBeCloseToPixel(expected.cpny); + expect(meta.data[i]._model).toEqual(jasmine.objectContaining({ + backgroundColor: Chart.defaults.global.defaultColor, + borderWidth: 1, + borderColor: Chart.defaults.global.defaultColor, + hitRadius: 1, + radius: 3, + pointStyle: 'circle', + skip: false, + tension: 0.1, + })); }); // Use dataset level styles for lines & points @@ -269,9 +206,13 @@ describe('Radar controller tests', function() { chart.data.datasets[0].pointBorderColor = 'rgb(56, 57, 58)'; chart.data.datasets[0].pointBorderWidth = 1.123; - controller.update(); + meta.controller.update(); - expect(chart.data.datasets[0].metaDataset._model).toEqual({ + expect(meta.dataset._model.scaleTop).toBeCloseToPixel(32); + expect(meta.dataset._model.scaleBottom).toBeCloseToPixel(512); + expect(meta.dataset._model.scaleZero.x).toBeCloseToPixel(256); + expect(meta.dataset._model.scaleZero.y).toBeCloseToPixel(272); + expect(meta.dataset._model).toEqual(jasmine.objectContaining({ backgroundColor: 'rgb(98, 98, 98)', borderCapStyle: 'butt', borderColor: 'rgb(8, 8, 8)', @@ -281,101 +222,32 @@ describe('Radar controller tests', function() { borderWidth: 0.55, fill: false, tension: 0, - - scaleTop: 0, - scaleBottom: 300, - scaleZero: { - x: 150, - y: 133 - } - }); - - expect(chart.data.datasets[0].metaData[0]._model).toEqual({ - backgroundColor: 'rgb(128, 129, 130)', - borderWidth: 1.123, - borderColor: 'rgb(56, 57, 58)', - hitRadius: 3.3, - radius: 22, - pointStyle: 'circle', - skip: false, - tension: 0, - - // Point - x: 150, - y: 91, - - // Control points - controlPointPreviousX: 150, - controlPointPreviousY: 91, - controlPointNextX: 150, - controlPointNextY: 91, - }); - - expect(chart.data.datasets[0].metaData[1]._model).toEqual({ - backgroundColor: 'rgb(128, 129, 130)', - borderWidth: 1.123, - borderColor: 'rgb(56, 57, 58)', - hitRadius: 3.3, - radius: 22, - pointStyle: 'circle', - skip: false, - tension: 0, - - // Point - x: 231, - y: 150, - - // Control points - controlPointPreviousX: 231, - controlPointPreviousY: 150, - controlPointNextX: 231, - controlPointNextY: 150, - }); - - expect(chart.data.datasets[0].metaData[2]._model).toEqual({ - backgroundColor: 'rgb(128, 129, 130)', - borderWidth: 1.123, - borderColor: 'rgb(56, 57, 58)', - hitRadius: 3.3, - radius: 22, - pointStyle: 'circle', - skip: false, - tension: 0, - - // Point - x: 150, - y: 167, - - // Control points - controlPointPreviousX: 150, - controlPointPreviousY: 167, - controlPointNextX: 150, - controlPointNextY: 167, - }); - - expect(chart.data.datasets[0].metaData[3]._model).toEqual({ - backgroundColor: 'rgb(128, 129, 130)', - borderWidth: 1.123, - borderColor: 'rgb(56, 57, 58)', - hitRadius: 3.3, - radius: 22, - pointStyle: 'circle', - skip: false, - tension: 0, - - // Point - x: 150, - y: 150, - - // Control points - controlPointPreviousX: 150, - controlPointPreviousY: 150, - controlPointNextX: 150, - controlPointNextY: 150, + })); + + // Since tension is now 0, we don't care about the control points + [ + { x: 256, y: 133 }, + { x: 464, y: 272 }, + { x: 256, y: 272 }, + { x: 200, y: 272 }, + ].forEach(function(expected, i) { + 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: 'rgb(128, 129, 130)', + borderWidth: 1.123, + borderColor: 'rgb(56, 57, 58)', + hitRadius: 3.3, + radius: 22, + pointStyle: 'circle', + skip: false, + tension: 0, + })); }); + // Use custom styles for lines & first point - chart.data.datasets[0].metaDataset.custom = { + meta.dataset.custom = { tension: 0.25, backgroundColor: 'rgb(55, 55, 54)', borderColor: 'rgb(8, 7, 6)', @@ -388,7 +260,7 @@ describe('Radar controller tests', function() { }; // 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)', @@ -398,9 +270,13 @@ describe('Radar controller tests', function() { hitRadius: 5, }; - controller.update(); + meta.controller.update(); - expect(chart.data.datasets[0].metaDataset._model).toEqual({ + expect(meta.dataset._model.scaleTop).toBeCloseToPixel(32); + expect(meta.dataset._model.scaleBottom).toBeCloseToPixel(512); + expect(meta.dataset._model.scaleZero.x).toBeCloseToPixel(256); + expect(meta.dataset._model.scaleZero.y).toBeCloseToPixel(272); + expect(meta.dataset._model).toEqual(jasmine.objectContaining({ backgroundColor: 'rgb(55, 55, 54)', borderCapStyle: 'square', borderColor: 'rgb(8, 7, 6)', @@ -410,166 +286,36 @@ describe('Radar controller tests', function() { borderWidth: 0.3, fill: true, tension: 0.25, - - scaleTop: 0, - scaleBottom: 300, - scaleZero: { - x: 150, - y: 133 - }, - }); - - expect(chart.data.datasets[0].metaData[0]._model).toEqual({ + })); + + expect(meta.data[0]._model.x).toBeCloseToPixel(256); + expect(meta.data[0]._model.y).toBeCloseToPixel(133); + expect(meta.data[0]._model.controlPointPreviousX).toBeCloseToPixel(241); + expect(meta.data[0]._model.controlPointPreviousY).toBeCloseToPixel(133); + expect(meta.data[0]._model.controlPointNextX).toBeCloseToPixel(281); + expect(meta.data[0]._model.controlPointNextY).toBeCloseToPixel(133); + expect(meta.data[0]._model).toEqual(jasmine.objectContaining({ + radius: 2.2, backgroundColor: 'rgb(0, 1, 3)', - borderWidth: 0.787, borderColor: 'rgb(4, 6, 8)', - hitRadius: 5, - radius: 2.2, - pointStyle: 'circle', - skip: true, + borderWidth: 0.787, tension: 0.15, - - // Point - x: 150, - y: 91, - - // Control points - controlPointPreviousX: 145.4974499671325, - controlPointPreviousY: 91, - controlPointNextX: 157.6474499671325, - controlPointNextY: 91, - }); - }); - - 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.radar.scale); - var scale = new ScaleConstructor({ - ctx: mockContext, - options: scaleConfig, - chart: { - data: data - }, - }); - - // Update ticks & set physical dimensions - scale.top = 0; - scale.left = 0; - scale.right = 300; - scale.bottom = 300; - scale.update(300, 300); - - var chart = { - chartArea: { - bottom: 300, - left: 0, - right: 300, - top: 0 - }, - data: data, - config: { - type: 'radar' - }, - options: { - 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, - } - }, - }, - scale: scale - }; - - var controller = new Chart.controllers.radar(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.Point).toBe(true); - expect(chart.data.datasets[0].metaData[1] instanceof Chart.elements.Point).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.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); + skip: true, + hitRadius: 5, + })); }); it('should set point 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.radar.scale); - var scale = new ScaleConstructor({ - ctx: mockContext, - options: scaleConfig, - chart: { - data: data - }, - }); - - // Update ticks & set physical dimensions - scale.top = 0; - scale.left = 0; - scale.right = 300; - scale.bottom = 300; - scale.update(300, 300); - - - var chart = { - chartArea: { - bottom: 300, - left: 0, - right: 300, - top: 0 - }, - data: data, - config: { - type: 'radar' + var chart = window.acquireChart({ + type: 'radar', + data: { + datasets: [{ + data: [10, 15, 0, 4] + }], + labels: ['label1', 'label2', 'label3', 'label4'] }, options: { + showLines: true, elements: { line: { backgroundColor: 'rgb(255, 0, 0)', @@ -593,15 +339,16 @@ describe('Radar controller tests', function() { radius: 3, } } - }, - scale: scale - }; + } + }); - var controller = new Chart.controllers.radar(chart, 0); - controller.update(); - var point = chart.data.datasets[0].metaData[0]; + var meta = chart.getDatasetMeta(0); + + meta.controller.update(); // reset first - controller.setHoverStyle(point); + var point = meta.data[0]; + + 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); @@ -613,7 +360,7 @@ describe('Radar controller tests', function() { chart.data.datasets[0].pointHoverBorderColor = 'rgb(123, 125, 127)'; chart.data.datasets[0].pointHoverBorderWidth = 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); @@ -627,7 +374,7 @@ describe('Radar 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); @@ -636,46 +383,16 @@ describe('Radar controller tests', function() { 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.radar.scale); - var scale = new ScaleConstructor({ - ctx: mockContext, - options: scaleConfig, - chart: { - data: data - }, - }); - - // Update ticks & set physical dimensions - scale.top = 0; - scale.left = 0; - scale.right = 300; - scale.bottom = 300; - scale.update(300, 300); - - - var chart = { - chartArea: { - bottom: 300, - left: 0, - right: 300, - top: 0 - }, - data: data, - config: { - type: 'radar' + var chart = window.acquireChart({ + type: 'radar', + data: { + datasets: [{ + data: [10, 15, 0, 4] + }], + labels: ['label1', 'label2', 'label3', 'label4'] }, options: { + showLines: true, elements: { line: { backgroundColor: 'rgb(255, 0, 0)', @@ -699,20 +416,21 @@ describe('Radar controller tests', function() { radius: 3, } } - }, - scale: scale - }; + } + }); - var controller = new Chart.controllers.radar(chart, 0); - controller.update(); - var point = chart.data.datasets[0].metaData[0]; + var meta = chart.getDatasetMeta(0); + + meta.controller.update(); // reset first + + 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); @@ -724,7 +442,7 @@ describe('Radar controller tests', function() { chart.data.datasets[0].pointBorderColor = 'rgb(123, 125, 127)'; chart.data.datasets[0].pointBorderWidth = 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); @@ -738,7 +456,7 @@ describe('Radar 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); -- 2.47.3