test: capture screenshots with capture-chrome, and diff them with resemble

.babelrc

@@ -0,0 +1,5 @@
+{
+  "presets": [
+    "es2015"
+  ]
+}

.gitignore

@@ -1,3 +1,4 @@
 coverage
+.idea
 node_modules
-.DS_Store
+.DS_Store

package.json

@@ -4,14 +4,17 @@
   "license": "Apache-2.0",
   "scripts": {
     "start": "webpack-dev-server --config test/screenshot/webpack.config.js --content-base test/screenshot",
+    "stop": "./test/screenshot/stop.sh",
+    "capture": "./node_modules/.bin/mocha --compilers js:babel-core/register --ui tdd test/screenshot/capture-suite.js",
     "commitmsg": "validate-commit-msg",
     "fix": "eslint --fix packages test",
     "lint": "eslint packages test",
-    "pretest": "npm run lint",
-    "test": "npm run test:unit",
-    "posttest": "istanbul report --root coverage text-summary && istanbul check-coverage --lines 95 --statements 95 --branches 95 --functions 95",
+    "pretest": "npm run lint && npm stop && ./test/screenshot/start.sh",
+    "test": "npm run test:unit && npm run test:image-diff",
+    "posttest": "npm stop && istanbul report --root coverage text-summary && istanbul check-coverage --lines 95 --statements 95 --branches 95 --functions 95",
     "test:watch": "karma start --auto-watch",
-    "test:unit": "karma start --single-run"
+    "test:unit": "karma start --single-run",
+    "test:image-diff": "./node_modules/.bin/mocha --compilers js:babel-core/register --ui tdd --timeout 15000 test/screenshot/diff-suite.js"
   },
   "config": {
     "validate-commit-msg": {
@@ -28,12 +31,14 @@
     "babel-loader": "^7.1.4",
     "babel-preset-es2015": "^6.24.1",
     "babel-preset-react": "^6.24.1",
+    "capture-chrome": "^2.0.0",
     "chai": "^4.1.2",
     "css-loader": "^0.28.10",
     "eslint": "^3.19.0",
     "eslint-config-google": "^0.9.1",
     "eslint-plugin-react": "^7.7.0",
     "extract-text-webpack-plugin": "^3.0.2",
+    "fs-readfile-promise": "^3.0.1",
     "husky": "^0.14.3",
     "istanbul": "^0.4.5",
     "istanbul-instrumenter-loader": "^3.0.0",
@@ -43,6 +48,7 @@
     "karma-mocha": "^1.3.0",
     "karma-webpack": "^2.0.13",
     "mocha": "^5.0.2",
+    "node-resemble-js": "^0.2.0",
     "node-sass": "^4.7.2",
     "optimize-css-assets-webpack-plugin": "^3.2.0",
     "react": "^16.2.0",

test/screenshot/capture-suite.js

@@ -0,0 +1,5 @@
+import fullSuite from './full-suite';
+
+fullSuite.forEach((screenshotSuite) => {
+  screenshotSuite.capture();
+});

test/screenshot/diff-suite.js

@@ -0,0 +1,5 @@
+import fullSuite from './full-suite';
+
+fullSuite.forEach((screenshotSuite) => {
+  screenshotSuite.diff();
+});

test/screenshot/full-suite.js

@@ -0,0 +1,7 @@
+import temporaryPackageSuite from './temporary-package/screenshot-suite';
+
+const fullSuite = [
+  temporaryPackageSuite,
+];
+
+export default fullSuite;

test/screenshot/screenshot-suite.js

@@ -0,0 +1,22 @@
+export default class ScreenshotSuite {
+  constructor(name, screenshots) {
+    this.name_ = name;
+    this.screenshots_ = screenshots;
+  }
+
+  capture() {
+    suite(this.name_, () => {});
+
+    this.screenshots_.forEach((screenshot) => {
+      screenshot.capture();
+    });
+  }
+
+  diff() {
+    suite(this.name_, () => {});
+
+    this.screenshots_.forEach((screenshot) => {
+      screenshot.diff();
+    });
+  }
+}