Add visual diffing proof-of-concept.

.gitignore

@@ -12,7 +12,12 @@ target
 .idea
 *.iml
 *.log
-/test/output
+/test/screenshots/diff/**/*
+!/test/screenshots/diff/.empty
+/test/screenshots/failure/**/*
+!/test/screenshots/failure/.empty
+/test/screenshots/session/**/*
+!/test/screenshots/session/.empty
 /esvm
 .htpasswd
 .eslintcache

package.json

@@ -158,6 +158,7 @@
     "event-stream": "3.3.2",
     "expect.js": "0.3.1",
     "faker": "1.1.0",
+    "gm": "1.22.0",
     "grunt": "0.4.5",
     "grunt-babel": "5.0.1",
     "grunt-cli": "0.1.13",

scripts/compareScreenshots.js

@@ -0,0 +1,32 @@
+
+const fs = require('fs');
+const gm = require('gm').subClass({imageMagick: true});
+const path = require('path');
+
+function compareScreenshots() {
+  const BASELINE_SCREENSHOTS_DIR = path.resolve('test','screenshots','baseline');
+  const DIFF_SCREENSHOTS_DIR = path.resolve('test','screenshots','diff');
+  const SESSION_SCREENSHOTS_DIR = path.resolve('test','screenshots','session');
+
+  fs.readdir(SESSION_SCREENSHOTS_DIR, (readDirError, files) => {
+    const screenshots = files.filter(file => file.indexOf('.png') !== -1);
+    screenshots.forEach(screenshot => {
+      gm().compare(
+        `${SESSION_SCREENSHOTS_DIR}/${screenshot}`,
+        `${BASELINE_SCREENSHOTS_DIR}/${screenshot}`,
+        {
+          file: `${DIFF_SCREENSHOTS_DIR}/${screenshot}`
+        },
+        (comparisonError, isEqual, change, raw) => {
+          if (comparisonError) {
+            return console.log(comparisonError);
+          }
+          const changePercentage = (change * 100).toFixed(2);
+          console.log(`${screenshot} has changed by ${changePercentage}%`)
+        }
+      );
+    });
+  });
+}
+
+compareScreenshots();

src/ui/public/chrome/directives/app_switcher/app_switcher.less

@@ -70,7 +70,7 @@ body { overflow-x: hidden; }
 
   .app-link {
     width: @as-open-width;
-    height: @app-icon-height;
+    height: 100px;
     line-height:  @app-line-height;
 
 

test/support/pages/common.js

@@ -252,20 +252,21 @@ export default (function () {
         var now = Date.now();
         var filename = ['failure', now, testName].join('_') + '.png';
 
-        return self.saveScreenshot(filename)
+        return self.saveScreenshot(filename, true)
         .finally(function () {
           throw reason;
         });
       };
     },
 
-    saveScreenshot: function saveScreenshot(filename) {
-      var self = this;
-      var outDir = path.resolve('test', 'output');
+    saveScreenshot: function saveScreenshot(filename, isFailure = false) {
+      const self = this;
+      const directoryName = isFailure ? 'failure' : 'session';
+      const outDir = path.resolve('test', 'screenshots', directoryName);
 
       return self.remote.takeScreenshot()
       .then(function writeScreenshot(data) {
-        var filepath = path.resolve(outDir, filename);
+        const filepath = path.resolve(outDir, filename);
         self.debug('Taking screenshot "' + filepath + '"');
         fs.writeFileSync(filepath, data);
       })