Use Headless Chrome over PhantomJS for (QUnit) tests

docs/Coding_Guidelines.md

@@ -93,12 +93,12 @@ It is highly recommended to integrate ESLint with your IDE. Instructions can be
 
 ```js
 // Scroll
-$(document).on(estatico.events.scroll, function(event, originalEvent) {
+$(document).on(estatico.events.throttledscroll, function(event, originalEvent) {
 	console.log(originalEvent);
 }.bind(this));
 
 // Resize
-$(document).on(estatico.events.resize, function(event, originalEvent) {
+$(document).on(estatico.events.debouncedresize, function(event, originalEvent) {
 	console.log(originalEvent);
 }.bind(this));
 ```

docs/Tasks.md

@@ -17,7 +17,7 @@ Create static webserver with livereload functionality, serve build directory on
 ### `gulp build`
 Create build by running every HTML, CSS, JavaScript and media task.
 
-* Prompts whether the `js:qunit` task should run in the end (default: yes).
+* Prompts whether the `js:test` task should run in the end (default: yes).
 * For non-interactive mode: `gulp --interactive=false --skipTests`
 
 ### `gulp clean`
@@ -75,8 +75,8 @@ Create static JSON data mocks
 ### `gulp js:modernizr`
 Generate customized Modernizr build (using `Customizr`, crawling through files and gathering up references to Modernizr tests).
 
-### `gulp js:qunit`
-Run QUnit tests (using PhantomJS).
+### `gulp js:test`
+Open built HTML files in headless Chrome, report console errors and run QUnit tests.
 
 ### `gulp media:copy`
 Copy specific media files to build directory.

gulp/build.js

@@ -4,7 +4,7 @@
  * @function `gulp build`
  * @desc Create build by running every HTML, CSS, JavaScript and media task.
  *
- * * Prompts whether the `js:qunit` task should run in the end (default: yes).
+ * * Prompts whether the `js:test` task should run in the end (default: yes).
  * * For non-interactive mode: `gulp --interactive=false --skipTests`
  */
 
@@ -43,7 +43,7 @@ gulp.task(taskName, function(cb) {
 						'media:copy',
 						'media:imageversions'
 					],
-					'js:qunit',
+					'js:test',
 					function(err) {
 						if (err) {
 							helpers.errors(err);
@@ -54,7 +54,7 @@ gulp.task(taskName, function(cb) {
 				];
 
 			if (skipTests) {
-				runTasks = _.without(runTasks, 'js:qunit');
+				runTasks = _.without(runTasks, 'js:test');
 			}
 
 			runSequence.apply(this, runTasks);

gulp/js/default.js

@@ -12,12 +12,16 @@ var taskName = 'js',
 	taskConfig = {
 		src: [
 			'./source/assets/js/main.js',
-			'./source/assets/js/head.js'
+			'./source/assets/js/head.js',
+			'./source/preview/assets/js/test.js',
+			'./source/demo/modules/**/*.test.js'
 		],
 		devSrc: [
 			'./source/assets/js/dev.js'
 		],
 		srcBase: './source/assets/js/',
+		testSrcRoot: './source/',
+		testSrcBase: './source/preview/assets/js/',
 		dest: './build/assets/js/',
 		destBase: './build/',
 		destAsyncSuffix: 'async/',
@@ -42,10 +46,17 @@ var taskName = 'js',
 		var helpers = require('require-dir')('../../helpers'),
 			_ = require('lodash'),
 			path = require('path'),
+			glob = require('glob'),
 			webpack = require('webpack'),
 			livereload = require('gulp-livereload');
 
-		var src = config.src,
+		var src = taskConfig.src.reduce(function(paths, pathGlob) {
+				var resolvedGlob = glob.sync(pathGlob).map(function(file) {
+						return path.resolve(file);
+					});
+
+				return paths.concat(resolvedGlob);
+			}, []),
 			compiler;
 
 		// Optionally build dev scripts
@@ -55,7 +66,14 @@ var taskName = 'js',
 
 		compiler = webpack({
 			// Create a map of entries, i.e. {'assets/js/main': './source/assets/js/main.js'}
-			entry: helpers.webpack.getEntries(src, config.srcBase),
+			entry: helpers.webpack.getEntries(src, config.srcBase, function(key, srcBase, file) {
+				// Move test files into 'preview/assets/js'
+				if (path.extname(key) === '.test') {
+					key = path.join(path.relative(config.srcBase, config.testSrcBase), path.relative(config.testSrcRoot, file)).replace(path.extname(file), '');
+				}
+
+				return key;
+			}),
 			module: {
 				loaders: [
 					{
@@ -85,9 +103,28 @@ var taskName = 'js',
 								}]
 							]
 						}
+					},
+					{
+						test: /qunit\.js$/,
+						loader: 'expose?QUnit'
+					},
+					{
+						test: /\.css$/,
+						loader: 'style-loader!css-loader'
 					}
 				]
 			},
+			externals: function(context, request, callback) {
+				// Do not include jQuery in test-related files
+				if (request === 'jquery' && /(\/preview\/assets\/js|\/modules\/)/.test(context)) {
+					return callback(null, 'jQuery');
+				// Do not include QUnit in every single test file
+				} else if (request === 'qunitjs' && /\/modules\//.test(context)) {
+					return callback(null, 'QUnit');
+				}
+
+				callback();
+			},
 
 			// Minifiy in prod mode
 			plugins: [