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-top: 3.0rem;
+  margin: 3.0rem 0;
 }
 
 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",
-		"test": "cd node_modules/backstopjs && npm run test -- --configPath=../../test/visual/backstop.config.js && cd ../../"
+		"start": "run-p watch serve",
+		"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,114 +1,112 @@
 module.exports = {
 	viewports: [
 		{ name: 'phone', width: 320, height: 480 },
-		{ name: 'tablet', width: 768, height: 1024 },
-		{ name: 'laptop', width: 1280, height: 800 },
-		{ name: 'desktop', width: 1920, height: 1080 }
+		{ name: 'laptop', width: 1280, height: 800 }
 	],
 	scenarios: [{
-    label: 'Typography',
-    url: 'http://localhost:3000',
-    hideSelectors: [],
-    removeSelectors: ['#__bs_notify__'],
-    selectors: ['#typography'],
-    readyEvent: null,
-    delay: 500,
-    misMatchThreshold: 0.1,
-    onBeforeScript: 'onBefore.js',
-    onReadyScript: 'onReady.js'
-  },{
-    label: 'Blockquotes',
-    url: 'http://localhost:3000',
-    hideSelectors: [],
-    removeSelectors: ['#__bs_notify__'],
-    selectors: ['#blockquotes'],
-    readyEvent: null,
-    delay: 500,
-    misMatchThreshold: 0.1,
-    onBeforeScript: 'onBefore.js',
-    onReadyScript: 'onReady.js'
-  }, {
-    label: 'Buttons',
-    url: 'http://localhost:3000',
-    hideSelectors: [],
-    removeSelectors: ['#__bs_notify__'],
-    selectors: ['#buttons'],
-    readyEvent: null,
-    delay: 500,
-    misMatchThreshold: 0.1,
-    onBeforeScript: 'onBefore.js',
-    onReadyScript: 'onReady.js'
-  }, {
-    label: 'Lists',
-    url: 'http://localhost:3000',
-    hideSelectors: [],
-    removeSelectors: ['#__bs_notify__'],
-    selectors: ['#lists'],
-    readyEvent: null,
-    delay: 500,
-    misMatchThreshold: 0.1,
-    onBeforeScript: 'onBefore.js',
-    onReadyScript: 'onReady.js'
-  }, {
-    label: 'Forms',
-    url: 'http://localhost:3000',
-    hideSelectors: [],
-    removeSelectors: ['#__bs_notify__'],
-    selectors: ['#forms'],
-    readyEvent: null,
-    delay: 500,
-    misMatchThreshold: 0.1,
-    onBeforeScript: 'onBefore.js',
-    onReadyScript: 'onReady.js'
-  }, {
-    label: 'Tables',
-    url: 'http://localhost:3000',
-    hideSelectors: [],
-    removeSelectors: ['#__bs_notify__'],
-    selectors: ['#tables'],
-    readyEvent: null,
-    delay: 500,
-    misMatchThreshold: 0.1,
-    onBeforeScript: 'onBefore.js',
-    onReadyScript: 'onReady.js'
-  }, {
-    label: 'Grids',
-    url: 'http://localhost:3000',
-    hideSelectors: [],
-    removeSelectors: ['#__bs_notify__'],
-    selectors: ['#grids'],
-    readyEvent: null,
-    delay: 500,
-    misMatchThreshold: 0.1,
-    onBeforeScript: 'onBefore.js',
-    onReadyScript: 'onReady.js'
-  }, {
-    label: 'Codes',
-    url: 'http://localhost:3000',
-    hideSelectors: [],
-    removeSelectors: ['#__bs_notify__'],
-    selectors: ['#codes'],
-    readyEvent: null,
-    delay: 500,
-    misMatchThreshold: 0.1,
-    onBeforeScript: 'onBefore.js',
-    onReadyScript: 'onReady.js'
-  }, {
-    label: 'Utilities',
-    url: 'http://localhost:3000',
-    hideSelectors: [],
-    removeSelectors: ['#__bs_notify__'],
-    selectors: ['#utilities'],
-    readyEvent: null,
-    delay: 500,
-    misMatchThreshold: 0.1,
-    onBeforeScript: 'onBefore.js',
-    onReadyScript: 'onReady.js'
-  }],
+		label: 'Typography',
+		url: 'http://localhost:3000',
+		hideSelectors: [],
+		removeSelectors: ['#__bs_notify__'],
+		selectors: ['#typography'],
+		readyEvent: null,
+		delay: 500,
+		misMatchThreshold: 0.1,
+		onReadyScript: null,
+		onBeforeScript: null
+	}, {
+		label: 'Blockquotes',
+		url: 'http://localhost:3000',
+		hideSelectors: [],
+		removeSelectors: ['#__bs_notify__'],
+		selectors: ['#blockquotes'],
+		readyEvent: null,
+		delay: 500,
+		misMatchThreshold: 0.1,
+		onReadyScript: null,
+		onBeforeScript: null
+	}, {
+		label: 'Buttons',
+		url: 'http://localhost:3000',
+		hideSelectors: [],
+		removeSelectors: ['#__bs_notify__'],
+		selectors: ['#buttons'],
+		readyEvent: null,
+		delay: 500,
+		misMatchThreshold: 0.1,
+		onReadyScript: null,
+		onBeforeScript: null
+	}, {
+		label: 'Lists',
+		url: 'http://localhost:3000',
+		hideSelectors: [],
+		removeSelectors: ['#__bs_notify__'],
+		selectors: ['#lists'],
+		readyEvent: null,
+		delay: 500,
+		misMatchThreshold: 0.1,
+		onReadyScript: null,
+		onBeforeScript: null
+	}, {
+		label: 'Forms',
+		url: 'http://localhost:3000',
+		hideSelectors: [],
+		removeSelectors: ['#__bs_notify__'],
+		selectors: ['#forms'],
+		readyEvent: null,
+		delay: 500,
+		misMatchThreshold: 0.1,
+		onReadyScript: null,
+		onBeforeScript: null
+	}, {
+		label: 'Tables',
+		url: 'http://localhost:3000',
+		hideSelectors: [],
+		removeSelectors: ['#__bs_notify__'],
+		selectors: ['#tables'],
+		readyEvent: null,
+		delay: 500,
+		misMatchThreshold: 0.1,
+		onReadyScript: null,
+		onBeforeScript: null
+	}, {
+		label: 'Grids',
+		url: 'http://localhost:3000',
+		hideSelectors: [],
+		removeSelectors: ['#__bs_notify__'],
+		selectors: ['#grids'],
+		readyEvent: null,
+		delay: 500,
+		misMatchThreshold: 0.1,
+		onReadyScript: null,
+		onBeforeScript: null
+	}, {
+		label: 'Codes',
+		url: 'http://localhost:3000',
+		hideSelectors: [],
+		removeSelectors: ['#__bs_notify__'],
+		selectors: ['#codes'],
+		readyEvent: null,
+		delay: 500,
+		misMatchThreshold: 0.1,
+		onReadyScript: null,
+		onBeforeScript: null
+	}, {
+		label: 'Utilities',
+		url: 'http://localhost:3000',
+		hideSelectors: [],
+		removeSelectors: ['#__bs_notify__'],
+		selectors: ['#utilities'],
+		readyEvent: null,
+		delay: 500,
+		misMatchThreshold: 0.1,
+		onReadyScript: null,
+		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);
-};