Fix radar tests & reenable. support new lineTension attribute like line controller

diff --git a/gulpfile.js b/gulpfile.js
index a6dede35d99a669af9d7dad266bd189aabaf2b5b..786f73fd58b840947a7681f71901ce179495aa41 100644 (file)
--- 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 26268cba59fb696b8dd8b2a6557276064bb8b8c3..2c13fa817fa0408ed0945ba6b26a728f26d3c3ae 100644 (file)
--- 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 417599c5b713032e2b20931e8be6d71e80fe98b7..f697bbfbc4ede3362fa5ed6f94846a2bb0831e0e 100644 (file)
--- 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);