Adds visual regression testing to Fuel UX

.travis.yml

@@ -2,9 +2,15 @@ language: node_js
 node_js:
 - 6.8.1
 sudo: false
+addons:
+  apt:
+    packages:
+      - xvfb
 install:
 - time npm install
 - time ./node_modules/bower/bin/bower update
+- export DISPLAY=':99.0'
+- Xvfb :99 -screen 0 1024x768x24 > /dev/null 2>&1 &
 env:
   global:
   - secure: |-

dist/js/fuelux.js

@@ -1,5 +1,6 @@
 /*!
- * Fuel UX v3.16.0 
+ * Fuel UX EDGE - Built 2017/06/09, 4:48:45 PM 
+ * Previous release: v3.16.0 
  * Copyright 2012-2017 ExactTarget
  * Licensed under the BSD-3-Clause license (https://github.com/ExactTarget/fuelux/blob/master/LICENSE)
  */

grunt/config/connect.js

@@ -27,6 +27,5 @@ module.exports = function (grunt) {
 				useAvailablePort: true
 			}
 		}
-	}
-
-};
+	};
+};

grunt/config/jshint.js

@@ -3,6 +3,5 @@ module.exports = {
 		jshintrc: '.jshintrc', // use project defined jshint settings which can be shared with IDEs etc
 		ignores: ['test/data/*.js']
 	},
-	sourceAndDist: ['Gruntfile.js', 'js/*.js', 'dist/fuelux.js'],
-	tests: ['test/**/*.js', '!test/commonjs-bundle.js'],
+	sourceAndDist: ['Gruntfile.js', 'js/*.js', 'dist/fuelux.js']
 };

grunt/config/shell.js

@@ -113,6 +113,28 @@ module.exports = function (grunt) {
 				grunt.log.write(command);
 				return command;
 			}
+		},
+		copyToReference: {
+			command: function copyDistToRef() {
+				var moveDist = [
+					'rm -rf reference/dist',
+					'mkdir reference/dist',
+					'cp -R dist/* reference/dist'
+				].join(' && ');
+				grunt.log.write('Copying dist into reference/dist for use in visual regression testing.\n');
+				grunt.log.write(moveDist);
+
+				var deleteFluff = [
+					'rm reference/dist/css/fuelux.css.map',
+					'rm reference/dist/css/fuelux.min.css',
+					'rm reference/dist/fuelux.zip',
+					'rm reference/dist/js/fuelux.min.js'
+				].join(' && ');
+				grunt.log.write('\nRemovine .zip and .min files to save space in repo');
+				grunt.log.write(deleteFluff);
+
+				return moveDist + ' && ' + deleteFluff;
+			}
 		}
 	};
 };

grunt/config/watch.js

@@ -43,7 +43,7 @@ module.exports = {
 		]
 	},
 	less: {
-		files: ['fonts/**', 
+		files: ['fonts/**',
 			'less/**'],
 		options: {
 			livereload: true
@@ -65,9 +65,9 @@ module.exports = {
 		tasks: ['distcssdev']
 	},
 	dist: {
-		files: ['fonts/**', 
+		files: ['fonts/**',
 			'grunt/**',
-			'js/**', 
+			'js/**',
 			'less/**'],
 		options: {
 			livereload: true
@@ -81,4 +81,4 @@ module.exports = {
 		},
 		tasks: []
 	}
-};
+};

grunt/tasks/release.js

@@ -77,9 +77,22 @@ module.exports = function (grunt) {
 		grunt.config('banner', '<%= bannerRelease %>');
 
 		// Run dist again to grab the latest version numbers. Yeah, we're running it twice... ¯\_(ツ)_/¯
-		grunt.task.run(['bump-only:' + grunt.config('release.buildSemVerType'), 'replace:readme', 'replace:packageJs', 'dist',
-			'shell:addReleaseFiles', 'prompt:commit', 'prompt:tag', 'prompt:pushLocalBranchToUpstream',
-			'prompt:pushTagToUpstream', 'prompt:uploadToCDN', 'prompt:pushLocalBranchToUpstreamMaster', 'shell:publishToNPM', 'prompt:generatelogs']);
+		grunt.task.run([
+			'bump-only:' + grunt.config('release.buildSemVerType'),
+			'replace:readme',
+			'replace:packageJs',
+			'dist',
+			'shell:addReleaseFiles',
+			'prompt:commit',
+			'prompt:tag',
+			'prompt:pushLocalBranchToUpstream',
+			'prompt:pushTagToUpstream',
+			'prompt:uploadToCDN',
+			'prompt:pushLocalBranchToUpstreamMaster',
+			'shell:publishToNPM',
+			'shell:copyToReference',
+			'prompt:generatelogs'
+		]);
 	});
 };
 

grunt/tasks/serve.js

@@ -1,22 +1,18 @@
-module.exports = function(grunt) {
-
-	/* -------------
-		SERVE
-	------------- */
-	// default serve task that runs tests and builds and tests dist by default.
-	grunt.registerTask('serve', 'Test, build, serve files. (~20s)', function () {
+module.exports = function serveTasks (grunt) {
+	// runs tests and builds and tests dist by default.
+	grunt.registerTask('serve', 'Test, build, serve files. (~20s)', function serve () {
 		var tasks = ['test', 'servedist'];
 		grunt.task.run(tasks);
 	});
 
 	// serve task that runs tests and builds and tests dist by default (~20s).
-	grunt.registerTask('serveslow', 'Serve files. Run all tests. Does not build. (~20s)', function () {
+	grunt.registerTask('serveslow', 'Serve files. Run all tests. Does not build. (~20s)', function serveslow () {
 		var tasks = ['connect:server', 'test', 'watch:source'];
 		grunt.task.run(tasks);
 	});
 
-	//Fastest serve command for freely slinging code (no tests will run by default).
-	grunt.registerTask('servefast', 'Serve the files (no watch), --test to run minimal tests. (~0s)', function () {
+	// Fastest serve command for freely slinging code (no tests will run by default).
+	grunt.registerTask('servefast', 'Serve the files (no watch), --test to run minimal tests. (~0s)', function servefast () {
 		grunt.task.run(['connect:server']);
 
 		if (grunt.option('test')) {
@@ -27,7 +23,7 @@ module.exports = function(grunt) {
 	});
 
 	// Fastest serve command when you're working on LESS
-	grunt.registerTask('serveless', 'Compile LESS and serve the files. pass --tests to run test. (~3s)', function () {
+	grunt.registerTask('serveless', 'Compile LESS and serve the files. pass --tests to run test. (~3s)', function serveless () {
 		grunt.task.run(['distcss']);
 
 		if (grunt.option('test')) {
@@ -46,27 +42,25 @@ module.exports = function(grunt) {
 	});
 
 	// Complies the less files into the -dev versions, does not overwrite the main css files.
-	grunt.registerTask('servedev', 'Serve the files with no "dist" build or tests. Optional --no-less to also disable compiling less into css.', function() {
-		if (! grunt.option('no-less') ) {
+	grunt.registerTask('servedev', 'Serve the files with no "dist" build or tests. Optional --no-less to also disable compiling less into css.', function servedev () {
+		if ( !grunt.option('no-less') ) {
 			grunt.task.run(['distcssdev']);
 		}
 		grunt.task.run(['connect:server', 'watch:cssdev']);
 	});
 
 	// same as `grunt serve` but tests default to being off
-	grunt.registerTask('servedist', 'Compile and serve everything, pass --test to run tests. (~7s)', function () {
+	grunt.registerTask('servedist', 'Compile and serve everything, pass --test to run tests. (~7s)', function servedist () {
 		grunt.task.run(['dist']);
 
-		//start up the servers here so we can run tests if appropriate
+		// start up the servers here so we can run tests if appropriate
 		grunt.task.run(['connect:server']);
 		grunt.task.run(['connect:testServer']);
 
 		if (grunt.option('test')) {
-			grunt.task.run(['browserify:commonjs','qunit:dist', 'watch:full']);
+			grunt.task.run(['browserify:commonjs', 'qunit:dist', 'watch:full']);
 		} else {
 			grunt.task.run(['watch:dist']);
 		}
 	});
-
-
-};
+};

index.html

@@ -57,53 +57,6 @@
 			<section id="checkboxes">
 				<h2>Checkboxes</h2>
 				<div class="thin-box">
-					<section id="checkboxes-block">
-						<div id="myCheckbox1Wrapper" style="width: 300px;"></div>
-						<div class="checkbox" id="myCheckbox">
-							<label class="checkbox-custom" data-initialize="checkbox" id="myCustomCheckbox1">
-								<input class="sr-only" type="checkbox" value="" />
-								<span class="checkbox-label">Custom checkbox unchecked on page load</span>
-							</label>
-						</div>
-						<div class="checkbox" id="myCheckbox2">
-							<label class="checkbox-custom checked" data-initialize="checkbox" id="myCustomCheckbox2">
-								<input class="sr-only" checked="checked" type="checkbox" value="" />
-								<span class="checkbox-label">Custom checkbox checked on page load</span>
-							</label>
-						</div>
-						<div class="checkbox" id="myCheckbox3">
-							<label class="checkbox-custom" data-initialize="checkbox" id="myCustomCheckbox3">
-								<input class="sr-only" disabled="disabled" type="checkbox" value="" />
-								<span class="checkbox-label">Disabled custom checkbox unchecked on page load</span>
-							</label>
-						</div>
-						<div class="checkbox" id="myCheckbox4">
-							<label class="checkbox-custom checked disabled" data-initialize="checkbox" id="myCustomCheckbox4">
-								<input class="sr-only" checked="checked" disabled="disabled" type="checkbox" value="" />
-								<span class="checkbox-label">Disabled custom checkbox checked on page load</span>
-							</label>
-						</div>
-					</section>
-
-					<section id="checkboxes-inline">
-						<label class="checkbox-custom checkbox-inline" data-initialize="checkbox" id="myCustomInlineCheckbox1">
-							<input type="checkbox" class="sr-only" checked="checked" />
-							<span class="checkbox-label">1, 2, buckle my shoe</span>
-						</label>
-						<label class="checkbox-custom checkbox-inline" data-initialize="checkbox" id="myCustomInlineCheckbox2">
-							<input type="checkbox" class="sr-only" />
-							<span class="checkbox-label">3, 4, shut the door</span>
-						</label>
-						<label class="checkbox-custom checkbox-inline" data-initialize="checkbox" id="myCustomInlineCheckbox3">
-							<input type="checkbox" class="sr-only" disabled="disabled" />
-							<span class="checkbox-label">5, 6, pick up sticks</span>
-						</label>
-						<label class="checkbox-custom checkbox-inline" data-initialize="checkbox" id="myCustomInlineCheckbox4">
-							<input type="checkbox" class="checked sr-only" checked="checked" disabled="disabled" />
-							<span class="checkbox-label">7, 8, lay them straight</span>
-						</label>
-					</section>
-
 					<section id="checkboxes-toggling">
 						<div class="checkbox">
 							<label class="checkbox-custom" data-initialize="checkbox" id="myCustomTogglingCheckbox1">

package.json

@@ -7,6 +7,18 @@
   "bugs": {
     "url": "https://github.com/ExactTarget/fuelux/issues"
   },
+  "scripts": {
+    "build": "grunt dist",
+    "setup": "npm install && bower install",
+    "start": "grunt serve",
+    "postinstall": "node postinstall.js",
+    "local": "grunt servefast",
+    "release": "grunt release",
+    "test": "xvfb-maybe mocha test/mocha.js && grunt travisci --verbose",
+    "regressionservers": "node test/regression/app.js",
+    "regression": "mocha test/mocha.js",
+    "updatereferences": "grunt shell:copyToReference"
+  },
   "dependencies": {
     "bootstrap": "3.3.7",
     "jquery": "3.2.1",
@@ -15,10 +27,14 @@
   "description": "Base Fuel UX styles and controls",
   "devDependencies": {
     "bower": "1.8.0",
+    "chai": "^4.0.1",
+    "co-mocha": "^1.2.0",
     "connect": "3.6.2",
     "eslint": "^3.5.0",
     "eslint-config-airbnb-es5": "^1.0.9",
     "eslint-plugin-requirejs": "^3.0.0",
+    "express": "^4.15.3",
+    "express-handlebars": "^3.0.0",
     "grunt": "^1.0.1",
     "grunt-banner": "0.6.0",
     "grunt-blanket-qunit": "^0.2.0",
@@ -45,8 +61,12 @@
     "grunt-zip": "0.17.1",
     "load-grunt-config": "0.19.2",
     "load-grunt-tasks": "3.5.2",
+    "mocha": "^3.4.2",
+    "niffy": "^0.2.0",
+    "nightmare": "^2.10.0",
     "semver": "5.3.0",
-    "serve-static": "1.12.3"
+    "serve-static": "1.12.3",
+    "xvfb-maybe": "^0.2.1"
   },
   "engines": {
     "node": ">=5.8.x"
@@ -78,15 +98,6 @@
     "type": "git",
     "url": "git://github.com/ExactTarget/fuelux.git"
   },
-  "scripts": {
-    "build": "grunt dist",
-    "setup": "npm install && bower install",
-    "start": "grunt serve",
-    "test": "grunt travisci --verbose",
-    "postinstall": "node postinstall.js",
-    "local": "grunt servefast",
-    "release": "grunt release"
-  },
   "title": "Fuel UX",
   "version": "3.16.0",
   "volo": {