Cleanup and upgrade unit tests environment

gulpfile.js

@@ -12,12 +12,13 @@ var uglify = require('gulp-uglify');
 var util = require('gulp-util');
 var zip = require('gulp-zip');
 var exec = require('child_process').exec;
-var karma = require('gulp-karma');
+var karma = require('karma');
 var browserify = require('browserify');
 var source = require('vinyl-source-stream');
 var merge = require('merge-stream');
 var collapse = require('bundle-collapser/plugin');
 var argv  = require('yargs').argv
+var path = require('path');
 var package = require('./package.json');
 
 var srcDir = './src/';
@@ -34,14 +35,6 @@ var header = "/*!\n" +
   " * https://github.com/chartjs/Chart.js/blob/master/LICENSE.md\n" +
   " */\n";
 
-var preTestFiles = [
-  './node_modules/moment/min/moment.min.js'
-];
-
-var testFiles = [
-  './test/*.js'
-];
-
 gulp.task('bower', bowerTask);
 gulp.task('build', buildTask);
 gulp.task('package', packageTask);
@@ -53,7 +46,6 @@ gulp.task('size', ['library-size', 'module-sizes']);
 gulp.task('server', serverTask);
 gulp.task('validHTML', validHTMLTask);
 gulp.task('unittest', unittestTask);
-gulp.task('unittestWatch', unittestWatchTask);
 gulp.task('library-size', librarySizeTask);
 gulp.task('module-sizes', moduleSizesTask);
 gulp.task('_open', _openTask);
@@ -157,6 +149,7 @@ function lintTask() {
       'beforeEach',
       'describe',
       'expect',
+      'fail',
       'it',
       'jasmine',
       'moment',
@@ -177,37 +170,31 @@ function validHTMLTask() {
 }
 
 function startTest() {
-  return [].concat(preTestFiles).concat([
-      './src/**/*.js',
-      './test/mockContext.js'
-    ]).concat(
-      argv.inputs?
-        argv.inputs.split(';'):
-        testFiles);
+  return [
+    './node_modules/moment/min/moment.min.js',
+    './test/jasmine.index.js',
+    './src/**/*.js',
+  ].concat(
+    argv.inputs?
+      argv.inputs.split(';'):
+      ['./test/specs/**/*.js']
+  );
 }
 
-function unittestTask() {
-  return gulp.src(startTest())
-    .pipe(karma({
-      configFile: 'karma.conf.ci.js',
-      action: 'run'
-    }));
+function unittestTask(done) {
+  new karma.Server({
+    configFile: path.join(__dirname, 'karma.conf.js'),
+    singleRun: !argv.watch,
+    files: startTest(),
+  }, done).start();
 }
 
-function unittestWatchTask() {
-  return gulp.src(startTest())
-    .pipe(karma({
-      configFile: 'karma.conf.js',
-      action: 'watch'
-    }));
-}
-
-function coverageTask() {
-  return gulp.src(startTest())
-    .pipe(karma({
-      configFile: 'karma.coverage.conf.js',
-      action: 'run'
-    }));
+function coverageTask(done) {
+  new karma.Server({
+    configFile: path.join(__dirname, 'karma.coverage.conf.js'),
+    files: startTest(),
+    singleRun: true,
+  }, done).start();
 }
 
 function librarySizeTask() {

karma.conf.js

@@ -1,14 +1,33 @@
-module.exports = function(config) {
-	config.set({
-		browsers: ['Chrome', 'Firefox'],
+/* eslint camelcase: 0 */
+
+module.exports = function(karma) {
+	var config = {
+		browsers: ['Firefox'],
 		frameworks: ['browserify', 'jasmine'],
-		reporters: ['progress', 'html'],
+		reporters: ['progress', 'kjhtml'],
 
 		preprocessors: {
-			'src/**/*.js': ['browserify']
+			'./test/jasmine.index.js': ['browserify'],
+			'./src/**/*.js': ['browserify']
 		},
+
 		browserify: {
 			debug: true
 		}
-	});
-};
+	};
+
+	// https://swizec.com/blog/how-to-run-javascript-tests-in-chrome-on-travis/swizec/6647
+	if (process.env.TRAVIS) {
+		config.browsers.push('chrome_travis_ci');
+		config.customLaunchers = {
+			chrome_travis_ci: {
+				base: 'Chrome',
+				flags: ['--no-sandbox']
+			}
+		};
+	} else {
+		config.browsers.push('Chrome');
+	}
+
+	karma.set(config);
+};

karma.coverage.conf.js

@@ -1,12 +1,14 @@
 module.exports = function(config) {
 	var configuration = {
 		browsers: ['Firefox'],
-
 		frameworks: ['browserify', 'jasmine'],
+		reporters: ['progress', 'coverage'],
 
 		preprocessors: {
-			'src/**/*.js': ['browserify']
+			'./test/jasmine.index.js': ['browserify'],
+			'./src/**/*.js': ['browserify']
 		},
+
 		browserify: {
 			debug: true,
 			transform: [['browserify-istanbul', {
@@ -15,8 +17,7 @@ module.exports = function(config) {
 				}
 			}]]
 		},
-
-		reporters: ['progress', 'coverage'],
+
 		coverageReporter: {
 			dir: 'coverage/',
 			reporters: [

package.json

@@ -21,22 +21,21 @@
     "gulp-file": "^0.3.0",
     "gulp-html-validator": "^0.0.2",
     "gulp-insert": "~0.5.0",
-    "gulp-karma": "0.0.4",
     "gulp-replace": "^0.5.4",
     "gulp-size": "~0.4.0",
     "gulp-streamify": "^1.0.2",
     "gulp-uglify": "~2.0.x",
     "gulp-util": "~2.2.x",
     "gulp-zip": "~3.2.0",
-    "jasmine": "^2.3.2",
-    "jasmine-core": "^2.3.4",
-    "karma": "^0.12.37",
-    "karma-browserify": "^5.0.1",
-    "karma-chrome-launcher": "^0.2.0",
-    "karma-coverage": "^0.5.1",
-    "karma-firefox-launcher": "^0.1.6",
-    "karma-jasmine": "^0.3.6",
-    "karma-jasmine-html-reporter": "^0.1.8",
+    "jasmine": "^2.5.0",
+    "jasmine-core": "^2.5.0",
+    "karma": "^1.5.0",
+    "karma-browserify": "^5.1.0",
+    "karma-chrome-launcher": "^2.0.0",
+    "karma-coverage": "^1.1.0",
+    "karma-firefox-launcher": "^1.0.0",
+    "karma-jasmine": "^1.1.0",
+    "karma-jasmine-html-reporter": "^0.2.2",
     "merge-stream": "^1.0.0",
     "vinyl-source-stream": "^1.1.0",
     "watchify": "^3.7.0",

test/jasmine.context.js

@@ -0,0 +1,125 @@
+// Code from http://stackoverflow.com/questions/4406864/html-canvas-unit-testing
+var Context = function() {
+	this._calls = []; // names/args of recorded calls
+	this._initMethods();
+
+	this._fillStyle = null;
+	this._lineCap = null;
+	this._lineDashOffset = null;
+	this._lineJoin = null;
+	this._lineWidth = null;
+	this._strokeStyle = null;
+
+	// Define properties here so that we can record each time they are set
+	Object.defineProperties(this, {
+		fillStyle: {
+			get: function() {
+				return this._fillStyle;
+			},
+			set: function(style) {
+				this._fillStyle = style;
+				this.record('setFillStyle', [style]);
+			}
+		},
+		lineCap: {
+			get: function() {
+				return this._lineCap;
+			},
+			set: function(cap) {
+				this._lineCap = cap;
+				this.record('setLineCap', [cap]);
+			}
+		},
+		lineDashOffset: {
+			get: function() {
+				return this._lineDashOffset;
+			},
+			set: function(offset) {
+				this._lineDashOffset = offset;
+				this.record('setLineDashOffset', [offset]);
+			}
+		},
+		lineJoin: {
+			get: function() {
+				return this._lineJoin;
+			},
+			set: function(join) {
+				this._lineJoin = join;
+				this.record('setLineJoin', [join]);
+			}
+		},
+		lineWidth: {
+			get: function() {
+				return this._lineWidth;
+			},
+			set: function(width) {
+				this._lineWidth = width;
+				this.record('setLineWidth', [width]);
+			}
+		},
+		strokeStyle: {
+			get: function() {
+				return this._strokeStyle;
+			},
+			set: function(style) {
+				this._strokeStyle = style;
+				this.record('setStrokeStyle', [style]);
+			}
+		},
+	});
+};
+
+Context.prototype._initMethods = function() {
+	// define methods to test here
+	// no way to introspect so we have to do some extra work :(
+	var me = this;
+	var methods = {
+		arc: function() {},
+		beginPath: function() {},
+		bezierCurveTo: function() {},
+		clearRect: function() {},
+		closePath: function() {},
+		fill: function() {},
+		fillRect: function() {},
+		fillText: function() {},
+		lineTo: function() {},
+		measureText: function(text) {
+			// return the number of characters * fixed size
+			return text ? {width: text.length * 10} : {width: 0};
+		},
+		moveTo: function() {},
+		quadraticCurveTo: function() {},
+		restore: function() {},
+		rotate: function() {},
+		save: function() {},
+		setLineDash: function() {},
+		stroke: function() {},
+		strokeRect: function() {},
+		setTransform: function() {},
+		translate: function() {},
+	};
+
+	Object.keys(methods).forEach(function(name) {
+		me[name] = function() {
+			me.record(name, arguments);
+			return methods[name].apply(me, arguments);
+		};
+	});
+};
+
+Context.prototype.record = function(methodName, args) {
+	this._calls.push({
+		name: methodName,
+		args: Array.prototype.slice.call(args)
+	});
+};
+
+Context.prototype.getCalls = function() {
+	return this._calls;
+};
+
+Context.prototype.resetCalls = function() {
+	this._calls = [];
+};
+
+module.exports = Context;