Update visual regression test with BackstopJS

dist/milligram.css

@@ -193,8 +193,7 @@ pre > code {
 hr {
   border: 0;
   border-top: 0.1rem solid #f4f5f6;
-  margin-bottom: 3.5rem;
+  margin: 3.0rem 0;
-  margin-top: 3.0rem;
 }
 
 input[type='email'],

package.json

@@ -64,10 +64,12 @@
 		"autoprefixer": "postcss -u autoprefixer --no-map.inline --autoprefixer.browsers 'last 1 versions' -r dist/*.css",
 		"sass": "node-sass --output-style expanded src/milligram.sass dist/milligram.css && node-sass --output-style compressed src/milligram.sass dist/milligram.min.css",
 		"lint": "sass-lint -c .sasslintrc 'src/*.sass' --verbose --no-exit",
-		"build": "npm-run-all sass autoprefixer banner",
+		"build": "run-s lint sass autoprefixer banner",
 		"watch": "onchange src -- npm run build",
 		"serve": "browser-sync start -s test --ss dist -f dist",
-		"start": "npm-run-all -p watch serve",
+		"start": "run-p watch serve",
-		"test": "cd node_modules/backstopjs && npm run test -- --configPath=../../test/visual/backstop.config.js && cd ../../"
+		"reference": "cd node_modules/backstopjs && npm run reference -- --configPath=../../test/visual/backstop.config.js && cd ../../",
+		"compare": "cd node_modules/backstopjs && npm run test -- --configPath=../../test/visual/backstop.config.js && cd ../../",
+		"test": "run-p serve compare"
 	}
 }

test/visual/backstop.config.js

@@ -1,9 +1,7 @@
 module.exports = {
 	viewports: [
 		{ name: 'phone', width: 320, height: 480 },
-		{ name: 'tablet', width: 768, height: 1024 },
+		{ name: 'laptop', width: 1280, height: 800 }
-		{ name: 'laptop', width: 1280, height: 800 },
-		{ name: 'desktop', width: 1920, height: 1080 }
 	],
 	scenarios: [{
 		label: 'Typography',
@@ -14,9 +12,9 @@ module.exports = {
 		readyEvent: null,
 		delay: 500,
 		misMatchThreshold: 0.1,
-    onBeforeScript: 'onBefore.js',
+		onReadyScript: null,
-    onReadyScript: 'onReady.js'
+		onBeforeScript: null
-  },{
+	}, {
 		label: 'Blockquotes',
 		url: 'http://localhost:3000',
 		hideSelectors: [],
@@ -25,8 +23,8 @@ module.exports = {
 		readyEvent: null,
 		delay: 500,
 		misMatchThreshold: 0.1,
-    onBeforeScript: 'onBefore.js',
+		onReadyScript: null,
-    onReadyScript: 'onReady.js'
+		onBeforeScript: null
 	}, {
 		label: 'Buttons',
 		url: 'http://localhost:3000',
@@ -36,8 +34,8 @@ module.exports = {
 		readyEvent: null,
 		delay: 500,
 		misMatchThreshold: 0.1,
-    onBeforeScript: 'onBefore.js',
+		onReadyScript: null,
-    onReadyScript: 'onReady.js'
+		onBeforeScript: null
 	}, {
 		label: 'Lists',
 		url: 'http://localhost:3000',
@@ -47,8 +45,8 @@ module.exports = {
 		readyEvent: null,
 		delay: 500,
 		misMatchThreshold: 0.1,
-    onBeforeScript: 'onBefore.js',
+		onReadyScript: null,
-    onReadyScript: 'onReady.js'
+		onBeforeScript: null
 	}, {
 		label: 'Forms',
 		url: 'http://localhost:3000',
@@ -58,8 +56,8 @@ module.exports = {
 		readyEvent: null,
 		delay: 500,
 		misMatchThreshold: 0.1,
-    onBeforeScript: 'onBefore.js',
+		onReadyScript: null,
-    onReadyScript: 'onReady.js'
+		onBeforeScript: null
 	}, {
 		label: 'Tables',
 		url: 'http://localhost:3000',
@@ -69,8 +67,8 @@ module.exports = {
 		readyEvent: null,
 		delay: 500,
 		misMatchThreshold: 0.1,
-    onBeforeScript: 'onBefore.js',
+		onReadyScript: null,
-    onReadyScript: 'onReady.js'
+		onBeforeScript: null
 	}, {
 		label: 'Grids',
 		url: 'http://localhost:3000',
@@ -80,8 +78,8 @@ module.exports = {
 		readyEvent: null,
 		delay: 500,
 		misMatchThreshold: 0.1,
-    onBeforeScript: 'onBefore.js',
+		onReadyScript: null,
-    onReadyScript: 'onReady.js'
+		onBeforeScript: null
 	}, {
 		label: 'Codes',
 		url: 'http://localhost:3000',
@@ -91,8 +89,8 @@ module.exports = {
 		readyEvent: null,
 		delay: 500,
 		misMatchThreshold: 0.1,
-    onBeforeScript: 'onBefore.js',
+		onReadyScript: null,
-    onReadyScript: 'onReady.js'
+		onBeforeScript: null
 	}, {
 		label: 'Utilities',
 		url: 'http://localhost:3000',
@@ -102,13 +100,13 @@ module.exports = {
 		readyEvent: null,
 		delay: 500,
 		misMatchThreshold: 0.1,
-    onBeforeScript: 'onBefore.js',
+		onReadyScript: null,
-    onReadyScript: 'onReady.js'
+		onBeforeScript: null
 	}],
 	paths: {
 		bitmaps_reference: '../../test/visual/reference',
 		bitmaps_test: '.tmp',
-		casper_scripts: '../../test/visual/fixtures',
+		casper_scripts: null,
 		compare_data: '.tmp/compare.json'
 	},
 	engine: 'phantomjs',

test/visual/fixtures/onBefore.js

@@ -1,4 +0,0 @@
-module.exports = function(casper, scenario, vp) {
-	casper.echo('onBeforeEach.js', 'INFO');
-	casper.wait(50);
-};

test/visual/fixtures/onReady.js

@@ -1,4 +0,0 @@
-module.exports = function(casper, scenario, vp) {
-	casper.echo('onReady.js', 'INFO');
-	casper.wait(50);
-};