Use pixelmatch instead of resemble.js

package.json

@@ -75,8 +75,8 @@
     "mocha-phantomjs-core": "^2.1.0",
     "mustache": "2.3.0",
     "phantomjs-prebuilt": "2.1.15",
+    "pixelmatch": "^4.0.2",
     "proj4": "2.4.4",
-    "resemblejs": "2.2.4",
     "serve-files": "1.0.1",
     "sinon": "3.2.0",
     "slimerjs": "0.10.3"

test/.eslintrc

@@ -14,7 +14,7 @@
     "expect": false,
     "expectResemble": false,
     "proj4": false,
-    "resemble": false,
+    "pixelmatch": false,
     "resembleCanvas": false,
     "sinon": false,
     "where": false

test/README.md

@@ -29,7 +29,7 @@ in Chrome by default).
 # Rendering tests
 
 The `test/rendering` directory contains rendering tests which compare a rendered map with a
-reference image using [resemble.js](http://huddle.github.io/Resemble.js/).
+reference image using [pixelmatch](https://github.com/mapbox/pixelmatch).
 
 To run the tests in the browser, make sure the development server is running
 (`make serve`) and open the URL

test/karma.config.js

@@ -19,6 +19,9 @@ module.exports = function(karma) {
     },
     files: [
       {
+        pattern: 'module-global.js',
+        watched: false
+      }, {
         pattern: path.resolve(__dirname, require.resolve('jquery/dist/jquery.js')),
         watched: false
       }, {
@@ -31,7 +34,7 @@ module.exports = function(karma) {
         pattern: path.resolve(__dirname, require.resolve('proj4/dist/proj4.js')),
         watched: false
       }, {
-        pattern: path.resolve(__dirname, require.resolve('resemblejs/resemble.js')),
+        pattern: path.resolve(__dirname, require.resolve('pixelmatch/index.js')),
         watched: false
       }, {
         pattern: path.resolve(__dirname, './test-extensions.js')

test/module-global.js

@@ -0,0 +1 @@
+window.module = {};

test/test-extensions.js

@@ -386,35 +386,47 @@ goog.require('ol.renderer.webgl.Map');
   };
 
   function resembleCanvas(canvas, referenceImage, tolerance, done) {
-    if (showMap) {
+    var width = canvas.width;
-      var wrapper = document.createElement('div');
+    var height = canvas.height;
-      wrapper.style.width = canvas.width + 'px';
+    var image = new Image();
-      wrapper.style.height = canvas.height + 'px';
+    image.addEventListener('load', function() {
-      wrapper.appendChild(canvas);
+      expect(image.width).to.be(width);
-      document.body.appendChild(wrapper);
+      expect(image.height).to.be(height);
-      document.body.appendChild(document.createTextNode(referenceImage));
+      var referenceCanvas = document.createElement('CANVAS');
-    }
+      referenceCanvas.width = image.width;
-
+      referenceCanvas.height = image.height;
-    resemble(referenceImage)
+      var referenceContext = referenceCanvas.getContext('2d');
-        .compareTo(canvas.getContext('2d').getImageData(
+      referenceContext.drawImage(image, 0, 0, image.width, image.height);
-            0, 0, canvas.width, canvas.height))
+      if (showMap) {
-        .onComplete(function(data) {
+        var wrapper = document.createElement('div');
-          if (!data.isSameDimensions) {
+        wrapper.style.width = canvas.width + 'px';
-            expect().fail(
+        wrapper.style.height = canvas.height + 'px';
-                'The dimensions of the reference image and ' +
+        wrapper.appendChild(canvas);
-            'the test canvas are not the same.');
+        document.body.appendChild(wrapper);
-          }
+        document.body.appendChild(document.createTextNode(referenceImage));
-
+      }
-          if (data.misMatchPercentage > tolerance) {
+      var context = canvas.getContext('2d');
-            if (showDiff) {
+      var output = context.createImageData(canvas.width, canvas.height);
-              var diffImage = new Image();
+      var mismatchPx = pixelmatch(
-              diffImage.src = data.getImageDataUrl();
+          context.getImageData(0, 0, width, height).data,
-              document.body.appendChild(diffImage);
+          referenceContext.getImageData(0, 0, width, height).data,
-            }
+          output.data, width, height);
-            expect(data.misMatchPercentage).to.be.below(tolerance);
+      var mismatchPct = mismatchPx / (width * height) * 100;
-          }
+      if (showDiff && mismatchPct > tolerance) {
-          done();
+        var diffCanvas = document.createElement('canvas');
-        });
+        diffCanvas.width = width;
+        diffCanvas.height = height;
+        diffCanvas.getContext('2d').putImageData(output, 0, 0);
+        document.body.appendChild(diffCanvas);
+      }
+      expect(mismatchPct).to.be.below(tolerance);
+      done();
+    });
+    image.addEventListener('error', function() {
+      expect().fail('Reference image could not be loaded');
+      done();
+    });
+    image.src = referenceImage;
   }
   global.resembleCanvas = resembleCanvas;