Add support for *.js test fixture config (#5777)

JSON doesn't support functions which are needed to create scriptable options, so implement a very basic method to load a JavaScript file exporting the config in `module.exports`. Also rename test sources (remove the `jasmine.` prefix), cleanup `karma.conf.js` and add an example .js fixture config (bubble radius option).

gulpfile.js

@@ -198,27 +198,15 @@ function docsTask(done) {
   });
 }
 
-function startTest() {
-  return [
-    {pattern: './test/fixtures/**/*.json', included: false},
-    {pattern: './test/fixtures/**/*.png', included: false},
-    './node_modules/moment/min/moment.min.js',
-    './test/jasmine.index.js',
-    './src/**/*.js',
-  ].concat(
-    argv.inputs ?
-      argv.inputs.split(';') :
-      ['./test/specs/**/*.js']
-  );
-}
-
 function unittestTask(done) {
   new karma.Server({
     configFile: path.join(__dirname, 'karma.conf.js'),
     singleRun: !argv.watch,
-    files: startTest(),
     args: {
-      coverage: !!argv.coverage
+      coverage: !!argv.coverage,
+      inputs: argv.inputs
+        ? argv.inputs.split(';')
+        : ['./test/specs/**/*.js']
     }
   },
   // https://github.com/karma-runner/gulp-karma/issues/18

karma.conf.js

@@ -25,9 +25,18 @@ module.exports = function(karma) {
 			}
 		},
 
+		files: [
+			{pattern: 'test/fixtures/**/*.js', included: false},
+			{pattern: 'test/fixtures/**/*.json', included: false},
+			{pattern: 'test/fixtures/**/*.png', included: false},
+			'node_modules/moment/min/moment.min.js',
+			'test/index.js',
+			'src/**/*.js'
+		].concat(args.inputs),
+
 		preprocessors: {
-			'./test/jasmine.index.js': ['browserify'],
-			'./src/**/*.js': ['browserify']
+			'test/index.js': ['browserify'],
+			'src/**/*.js': ['browserify']
 		},
 
 		browserify: {

test/fixture.js

@@ -0,0 +1,85 @@
+/* global __karma__ */
+
+'use strict';
+
+var utils = require('./utils');
+
+function readFile(url, callback) {
+	var request = new XMLHttpRequest();
+	request.onreadystatechange = function() {
+		if (request.readyState === 4) {
+			return callback(request.responseText);
+		}
+	};
+
+	request.open('GET', url, false);
+	request.send(null);
+}
+
+function loadConfig(url, callback) {
+	var regex = /\.(json|js)$/i;
+	var matches = url.match(regex);
+	var type = matches ? matches[1] : 'json';
+	var cfg = null;
+
+	readFile(url, function(content) {
+		switch (type) {
+		case 'js':
+			// eslint-disable-next-line
+			cfg = new Function('"use strict"; var module = {};' + content + '; return module.exports;')();
+			break;
+		case 'json':
+			cfg = JSON.parse(content);
+			break;
+		default:
+		}
+
+		callback(cfg);
+	});
+}
+
+function specFromFixture(description, inputs) {
+	var input = inputs.js || inputs.json;
+	it(input, function(done) {
+		loadConfig(input, function(json) {
+			var chart = utils.acquireChart(json.config, json.options);
+			if (!inputs.png) {
+				fail('Missing PNG comparison file for ' + inputs.json);
+				done();
+			}
+
+			utils.readImageData(inputs.png, function(expected) {
+				expect(chart).toEqualImageData(expected, json);
+				utils.releaseChart(chart);
+				done();
+			});
+		});
+	});
+}
+
+function specsFromFixtures(path) {
+	var regex = new RegExp('(^/base/test/fixtures/' + path + '.+)\\.(png|json|js)');
+	var inputs = {};
+
+	Object.keys(__karma__.files || {}).forEach(function(file) {
+		var matches = file.match(regex);
+		var name = matches && matches[1];
+		var type = matches && matches[2];
+
+		if (name && type) {
+			inputs[name] = inputs[name] || {};
+			inputs[name][type] = file;
+		}
+	});
+
+	return function() {
+		Object.keys(inputs).forEach(function(key) {
+			specFromFixture(key, inputs[key]);
+		});
+	};
+}
+
+module.exports = {
+	specs: specsFromFixtures
+};
+

test/fixtures/controller.bubble/radius-scriptable.js

@@ -0,0 +1,45 @@
+module.exports = {
+	config: {
+		type: 'bubble',
+		data: {
+			datasets: [{
+				data: [
+					{x: 0, y: 0},
+					{x: 1, y: 0},
+					{x: 2, y: 0},
+					{x: 3, y: 0},
+					{x: 4, y: 0},
+					{x: 5, y: 0}
+				],
+				radius: function(ctx) {
+					return ctx.dataset.data[ctx.dataIndex].x * 4;
+				}
+			}]
+		},
+		options: {
+			legend: false,
+			title: false,
+			scales: {
+				xAxes: [{display: false}],
+				yAxes: [{display: false}]
+			},
+			elements: {
+				point: {
+					backgroundColor: '#444'
+				}
+			},
+			layout: {
+				padding: {
+					left: 24,
+					right: 24
+				}
+			}
+		}
+	},
+	options: {
+		canvas: {
+			height: 128,
+			width: 256
+		}
+	}
+};

test/jasmine.index.js → test/index.js

@@ -1,6 +1,9 @@
-var Context = require('./jasmine.context');
-var matchers = require('./jasmine.matchers');
-var utils = require('./jasmine.utils');
+'use strict';
+
+var fixture = require('./fixture');
+var Context = require('./context');
+var matchers = require('./matchers');
+var utils = require('./utils');
 
 (function() {
 
@@ -42,7 +45,7 @@ var utils = require('./jasmine.utils');
 			'position: absolute' +
 		'}');
 
-	jasmine.specsFromFixtures = utils.specsFromFixtures;
+	jasmine.fixture = fixture;
 	jasmine.triggerMouseEvent = utils.triggerMouseEvent;
 
 	beforeEach(function() {

test/jasmine.matchers.js → test/matchers.js

@@ -1,7 +1,7 @@
 'use strict';
 
 var pixelmatch = require('pixelmatch');
-var utils = require('./jasmine.utils');
+var utils = require('./utils');
 
 function toPercent(value) {
 	return Math.round(value * 10000) / 100;

test/specs/controller.bar.tests.js

@@ -1,5 +1,5 @@
 describe('Chart.controllers.bar', function() {
-	describe('auto', jasmine.specsFromFixtures('controller.bar'));
+	describe('auto', jasmine.fixture.specs('controller.bar'));
 
 	it('should be constructed', function() {
 		var chart = window.acquireChart({

test/specs/controller.bubble.tests.js

@@ -1,5 +1,5 @@
 describe('Chart.controllers.bubble', function() {
-	describe('auto', jasmine.specsFromFixtures('controller.bubble'));
+	describe('auto', jasmine.fixture.specs('controller.bubble'));
 
 	it('should be constructed', function() {
 		var chart = window.acquireChart({

test/specs/controller.line.tests.js

@@ -1,5 +1,5 @@
 describe('Chart.controllers.line', function() {
-	describe('auto', jasmine.specsFromFixtures('controller.line'));
+	describe('auto', jasmine.fixture.specs('controller.line'));
 
 	it('should be constructed', function() {
 		var chart = window.acquireChart({

test/specs/controller.polarArea.tests.js

@@ -1,4 +1,4 @@
-describe('auto', jasmine.specsFromFixtures('controller.polarArea'));
+describe('auto', jasmine.fixture.specs('controller.polarArea'));
 
 describe('Chart.controllers.polarArea', function() {
 	it('should be constructed', function() {

test/specs/controller.radar.tests.js

@@ -1,5 +1,5 @@
 describe('Chart.controllers.radar', function() {
-	describe('auto', jasmine.specsFromFixtures('controller.radar'));
+	describe('auto', jasmine.fixture.specs('controller.radar'));
 
 	it('Should be constructed', function() {
 		var chart = window.acquireChart({

test/specs/core.scale.tests.js

@@ -1,5 +1,5 @@
 describe('Core.scale', function() {
-	describe('auto', jasmine.specsFromFixtures('core.scale'));
+	describe('auto', jasmine.fixture.specs('core.scale'));
 
 	it('should provide default scale label options', function() {
 		expect(Chart.defaults.scale.scaleLabel).toEqual({

test/specs/element.point.tests.js

@@ -1,5 +1,5 @@
 describe('Chart.elements.Point', function() {
-	describe('auto', jasmine.specsFromFixtures('element.point'));
+	describe('auto', jasmine.fixture.specs('element.point'));
 
 	it ('Should be constructed', function() {
 		var point = new Chart.elements.Point({

test/specs/plugin.filler.tests.js

@@ -7,7 +7,7 @@ describe('Plugin.filler', function() {
 		});
 	}
 
-	describe('auto', jasmine.specsFromFixtures('plugin.filler'));
+	describe('auto', jasmine.fixture.specs('plugin.filler'));
 
 	describe('dataset.fill', function() {
 		it('should support boundaries', function() {

test/jasmine.utils.js → test/utils.js

@@ -1,18 +1,3 @@
-/* global __karma__ */
-
-function loadJSON(url, callback) {
-	var request = new XMLHttpRequest();
-	request.onreadystatechange = function() {
-		if (request.readyState === 4) {
-			return callback(JSON.parse(request.responseText));
-		}
-	};
-
-	request.overrideMimeType('application/json');
-	request.open('GET', url, true);
-	request.send(null);
-}
-
 function createCanvas(w, h) {
 	var canvas = document.createElement('canvas');
 	canvas.width = w;
@@ -112,46 +97,6 @@ function injectCSS(css) {
 	head.appendChild(style);
 }
 
-function specFromFixture(description, inputs) {
-	it(inputs.json, function(done) {
-		loadJSON(inputs.json, function(json) {
-			var chart = acquireChart(json.config, json.options);
-			if (!inputs.png) {
-				fail('Missing PNG comparison file for ' + inputs.json);
-				done();
-			}
-
-			readImageData(inputs.png, function(expected) {
-				expect(chart).toEqualImageData(expected, json);
-				releaseChart(chart);
-				done();
-			});
-		});
-	});
-}
-
-function specsFromFixtures(path) {
-	var regex = new RegExp('(^/base/test/fixtures/' + path + '.+)\\.(png|json)');
-	var inputs = {};
-
-	Object.keys(__karma__.files || {}).forEach(function(file) {
-		var matches = file.match(regex);
-		var name = matches && matches[1];
-		var type = matches && matches[2];
-
-		if (name && type) {
-			inputs[name] = inputs[name] || {};
-			inputs[name][type] = file;
-		}
-	});
-
-	return function() {
-		Object.keys(inputs).forEach(function(key) {
-			specFromFixture(key, inputs[key]);
-		});
-	};
-}
-
 function waitForResize(chart, callback) {
 	var override = chart.resize;
 	chart.resize = function() {
@@ -180,7 +125,7 @@ module.exports = {
 	createCanvas: createCanvas,
 	acquireChart: acquireChart,
 	releaseChart: releaseChart,
-	specsFromFixtures: specsFromFixtures,
+	readImageData: readImageData,
 	triggerMouseEvent: triggerMouseEvent,
 	waitForResize: waitForResize
 };