Add visual diffing proof-of-concept.

- Add scripts/compareScreenshots.js.
- Add gm dependency.
- Temporarily introduce error to app-link.
- Rename test/output to test/screenshots.

.gitignore

@@ -12,7 +12,9 @@ target
 .idea
 *.iml
 *.log
-/test/output
+/test/screenshots/diff
+/test/screenshots/failure
+/test/screenshots/session
 /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,31 @@
+var fs = require('fs');
+var gm = require('gm').subClass({imageMagick: true});
+
+function compareScreenshots() {
+  const BASELINE_SCREENSHOTS_DIR = 'test/screenshots/baseline';
+  const DIFF_SCREENSHOTS_DIR = 'test/screenshots/diff';
+  const SESSION_SCREENSHOTS_DIR = 'test/screenshots/session';
+
+  fs.readdir(SESSION_SCREENSHOTS_DIR, (err, 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}`
+        },
+        (err, isEqual, change, raw) => {
+          if (err) return handle(err);
+          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,16 +252,17 @@ 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) {
+    saveScreenshot: function saveScreenshot(filename, isFailure = false) {
       var self = this;
-      var outDir = path.resolve('test', 'output');
+      const directoryName = isFailure ? 'failure' : 'session';
+      const outDir = path.resolve('test', `/screenshots/${directoryName}`);
 
       return self.remote.takeScreenshot()
       .then(function writeScreenshot(data) {