Make favicon tests more fault resistentleipert-make-canvas-more-tolerant

It seems like every new version of Chrome renders the favicon canvas
differently. This reduces the problems with it by creating a more fault
tolerant check, which compares the color values in the pixels and is
okay if they are within a certain threshold.

4 files changed, 38 insertions, 10 deletions

diff --git a/package.json b/package.json
index 380f44946dc..c40f3dbc406 100644
--- a/package.json
+++ b/package.json
@@ -126,6 +126,7 @@
     "eslint-plugin-jasmine": "^2.10.1",
     "gettext-extractor": "^3.3.2",
     "gettext-extractor-vue": "^4.0.1",
+    "imagediff": "git+https://gitlab.com/leipert-projects/gitlab-imagediff#v2.0.0-1",
     "istanbul": "^0.4.5",
     "jasmine-core": "^2.9.0",
     "jasmine-diff": "^0.1.3",
diff --git a/spec/javascripts/lib/utils/common_utils_spec.js b/spec/javascripts/lib/utils/common_utils_spec.js
index 1c7691f865a..51aed3ac7be 100644
--- a/spec/javascripts/lib/utils/common_utils_spec.js
+++ b/spec/javascripts/lib/utils/common_utils_spec.js
@@ -3,6 +3,17 @@ import * as commonUtils from '~/lib/utils/common_utils';
 import MockAdapter from 'axios-mock-adapter';
 import { faviconDataUrl, overlayDataUrl, faviconWithOverlayDataUrl } from './mock_data';
 
+const PIXEL_TOLERANCE = 5;
+
+const toImageData = url =>
+  new Promise(resolve => {
+    const img = new Image();
+    img.onload = function() {
+      resolve(img);
+    };
+    img.src = url;
+  });
+
 describe('common_utils', () => {
   describe('parseUrl', () => {
     it('returns an anchor tag with url', () => {
@@ -484,8 +495,9 @@ describe('common_utils', () => {
     it('should return the favicon with the overlay', done => {
       commonUtils
         .createOverlayIcon(faviconDataUrl, overlayDataUrl)
-        .then(url => {
-          expect(url).toEqual(faviconWithOverlayDataUrl);
+        .then(url => Promise.all([toImageData(url), toImageData(faviconWithOverlayDataUrl)]))
+        .then(([actual, expected]) => {
+          expect(actual).toImageDiffEqual(expected, PIXEL_TOLERANCE);
           done();
         })
         .catch(done.fail);
@@ -507,10 +519,10 @@ describe('common_utils', () => {
     it('should set page favicon to provided favicon overlay', done => {
       commonUtils
         .setFaviconOverlay(overlayDataUrl)
-        .then(() => {
-          expect(document.getElementById('favicon').getAttribute('href')).toEqual(
-            faviconWithOverlayDataUrl,
-          );
+        .then(() => document.getElementById('favicon').getAttribute('href'))
+        .then(url => Promise.all([toImageData(url), toImageData(faviconWithOverlayDataUrl)]))
+        .then(([actual, expected]) => {
+          expect(actual).toImageDiffEqual(expected, PIXEL_TOLERANCE);
           done();
         })
         .catch(done.fail);
@@ -553,10 +565,10 @@ describe('common_utils', () => {
 
       commonUtils
         .setCiStatusFavicon(BUILD_URL)
-        .then(() => {
-          const favicon = document.getElementById('favicon');
-
-          expect(favicon.getAttribute('href')).toEqual(faviconWithOverlayDataUrl);
+        .then(() => document.getElementById('favicon').getAttribute('href'))
+        .then(url => Promise.all([toImageData(url), toImageData(faviconWithOverlayDataUrl)]))
+        .then(([actual, expected]) => {
+          expect(actual).toImageDiffEqual(expected, PIXEL_TOLERANCE);
           done();
         })
         .catch(done.fail);
diff --git a/spec/javascripts/matchers.js b/spec/javascripts/matchers.js
index 0d465510fd3..7d85b5ab5e5 100644
--- a/spec/javascripts/matchers.js
+++ b/spec/javascripts/matchers.js
@@ -1,3 +1,5 @@
+import imagediff from 'imagediff';
+
 export default {
   toContainText: () => ({
     compare(vm, text) {
@@ -54,4 +56,13 @@ export default {
       return result;
     },
   }),
+  toImageDiffEqual() {
+    return {
+      compare(actual, expected, tolerance) {
+        return {
+          pass: imagediff.equal(actual, expected, tolerance),
+        };
+      },
+    };
+  },
 };
diff --git a/yarn.lock b/yarn.lock
index 62335ba5e59..d746c2cd479 100644
--- a/yarn.lock
+++ b/yarn.lock
@@ -4276,6 +4276,10 @@ ignore@^4.0.6:
   resolved "https://registry.yarnpkg.com/ignore/-/ignore-4.0.6.tgz#750e3db5862087b4737ebac8207ffd1ef27b25fc"
   integrity sha512-cyFDKrqc/YdcWFniJhzI42+AzS+gNwmUzOSFcRCQYwySuBBBy/KjuxWLZ/FHEH6Moq1NizMOBWyTcv8O4OZIMg==
 
+"imagediff@git+https://gitlab.com/leipert-projects/gitlab-imagediff#v2.0.0-1":
+  version "2.0.0-1"
+  resolved "git+https://gitlab.com/leipert-projects/gitlab-imagediff#3a707ad3441a1cce41757a900d638283214b3a2b"
+
 immediate@~3.0.5:
   version "3.0.6"
   resolved "https://registry.yarnpkg.com/immediate/-/immediate-3.0.6.tgz#9db1dbd0faf8de6fbe0f5dd5e56bb606280de69b"