Fix visual tests (#5130)

* fix code in filter to clear less * test rewrite * missing parrot-blend
fabricjs · Aug 5, 2018 · 74fa4f1 · 74fa4f1
1 parent 5ee8935
commit 74fa4f1
Show file tree

Hide file tree

Showing 10 changed files with 94 additions and 120 deletions.
diff --git a/.travis.yml b/.travis.yml
@@ -12,6 +12,7 @@ addons:
     - libgif-dev
     - libpng-dev
     - libpango1.0-dev
+    - libjpeg-dev
 # libcairo2-dev is preinstalled
 stages:
   - Linting and Building
@@ -72,7 +73,7 @@ jobs:
       node_js: "4"
     - stage: Visual Tests
       node_js: "8"
-      script: npm run test:visual
+      script: npm run build:fast && npm run test:visual
     - stage: Visual Tests
       env: LAUNCHER=Chrome
       install: npm install [email protected] [email protected]

diff --git a/package.json b/package.json
@@ -51,7 +51,7 @@
     "lint": "eslint --config .eslintrc.json src",
     "lint_tests": "eslint test/unit --config .eslintrc_tests",
     "export_dist_to_site": "cp dist/fabric.js ../fabricjs.com/lib/fabric.js && cp package.json ../fabricjs.com/lib/package.json && cp -r src HEADER.js lib ../fabricjs.com/build/files/",
-    "export_tests_to_site": "cp test/unit/*.js ../fabricjs.com/test/unit",
+    "export_tests_to_site": "cp test/unit/*.js ../fabricjs.com/test/unit && cp -r test/visual/* ../fabricjs.com/test/visual && cp -r test/fixtures/* ../fabricjs.com/test/fixtures",
     "all": "npm run build && npm run test && npm run lint && npm run lint_tests && npm run export_dist_to_site && npm run export_tests_to_site",
     "testem": "testem .",
     "testem:visual": "testem --file testem-visual.json",

diff --git a/src/filters/blendimage_filter.class.js b/src/filters/blendimage_filter.class.js
@@ -42,7 +42,8 @@
     mode: 'multiply',
 
     /**
-     * alpha value. represent the strength of the blend color operation.
+     * alpha value. represent the strength of the blend image operation.
+     * not implemented.
      **/
     alpha: 1,
 
@@ -141,8 +142,8 @@
       var imageData = options.imageData,
           resources = options.filterBackend.resources,
           data = imageData.data, iLen = data.length,
-          width = options.imageData.width,
-          height = options.imageData.height,
+          width = imageData.width,
+          height = imageData.height,
           tr, tg, tb, ta,
           r, g, b, a,
           canvas1, context, image = this.image, blendData;
@@ -151,15 +152,17 @@
         resources.blendImage = fabric.util.createCanvasElement();
       }
       canvas1 = resources.blendImage;
+      context = canvas1.getContext('2d');
       if (canvas1.width !== width || canvas1.height !== height) {
         canvas1.width = width;
         canvas1.height = height;
       }
-      context = canvas1.getContext('2d');
+      else {
+        context.clearRect(0, 0, width, height);
+      }
       context.setTransform(image.scaleX, 0, 0, image.scaleY, image.left, image.top);
       context.drawImage(image._element, 0, 0, width, height);
       blendData = context.getImageData(0, 0, width, height).data;
-      context.clearRect(0, 0, width, height);
       for (var i = 0; i < iLen; i += 4) {
 
         r = data[i];

diff --git a/test/fixtures/greyfloral_partial_transparent.png b/test/fixtures/greyfloral_partial_transparent.png
diff --git a/test/node_test_setup.js b/test/node_test_setup.js
@@ -3,6 +3,6 @@ global.fabric = require('../dist/fabric').fabric;
 global.pixelmatch = require('pixelmatch');
 global.fs = require('fs');
 
-QUnit.config.testTimeout = 10000;
+QUnit.config.testTimeout = 15000;
 QUnit.config.noglobals = true;
 QUnit.config.hidePassed = true;
diff --git a/test/visual/blendimage_filter.js b/test/visual/blendimage_filter.js
diff --git a/test/visual/golden/parrotblend.png b/test/visual/golden/parrotblend.png
diff --git a/test/visual/golden/parrotblend2.png b/test/visual/golden/parrotblend2.png
diff --git a/test/visual/resize_filter.js b/test/visual/resize_filter.js
@@ -1,5 +1,6 @@
 (function() {
   fabric.enableGLFiltering = false;
+  fabric.isWebglSupported = false;
   var _pixelMatch = pixelmatch;
   if (fabric.isLikelyNode) {
     var fs = global.fs;
@@ -23,13 +24,13 @@
   }
 
   function getFixtureName(filename) {
-    var finalName = '/../fixtures/' + filename;
-    return fabric.isLikelyNode ? (__dirname + finalName) : getAbsolutePath('test/fixtures/' + filename);
+    var finalName = '/fixtures/' + filename;
+    return fabric.isLikelyNode ? (__dirname + '/..' + finalName) : getAbsolutePath('/test' + finalName);
   }
 
   function getGoldeName(filename) {
     var finalName = '/golden/' + filename;
-    return fabric.isLikelyNode ? (__dirname + finalName) : getAbsolutePath('test/visual/golden/' + filename);
+    return fabric.isLikelyNode ? (__dirname + finalName) : getAbsolutePath('/test/visual' + finalName);
   }
 
   function getImage(filename, original, callback) {
@@ -53,17 +54,15 @@
     img.src = filename;
   }
 
-  QUnit.module('Image resize filter test', {
-    afterEach: function() {
-      fabricCanvas.setZoom(1);
-      fabricCanvas.setDimensions({
-        width: 300,
-        height: 150,
-      });
-      fabricCanvas.clear();
-      fabricCanvas.renderAll();
-    }
-  });
+  function afterEachHandler() {
+    fabricCanvas.setZoom(1);
+    fabricCanvas.setDimensions({
+      width: 300,
+      height: 150,
+    });
+    fabricCanvas.clear();
+    fabricCanvas.renderAll();
+  }
 
   var tests = [];
 
@@ -80,6 +79,7 @@
       image.scaleToWidth(canvas.width / zoom);
       canvas.add(image);
       canvas.renderAll();
+      image.dispose();
       callback(canvas.lowerCanvasEl);
     });
   }
@@ -88,6 +88,7 @@
     test: 'Image resize with canvas zoom',
     code: imageResizeTest,
     golden: 'parrot.png',
+    newModule: 'Image resize filter test',
     percentage: 0.06,
   });
 
@@ -102,6 +103,7 @@
       image.scaleToWidth(canvas.width);
       canvas.add(image);
       canvas.renderAll();
+      image.dispose();
       callback(canvas.lowerCanvasEl);
     });
   }
@@ -126,6 +128,7 @@
       group.scaleToWidth(canvas.width);
       canvas.add(group);
       canvas.renderAll();
+      image.dispose();
       callback(canvas.lowerCanvasEl);
     });
   }
@@ -137,11 +140,72 @@
     percentage: 0.06,
   });
 
+  function blendImageTest2(canvas, callback) {
+    getImage(getFixtureName('parrot.png'), false, function(img) {
+      var image = new fabric.Image(img);
+      var backdropImage = new fabric.Image(img);
+      backdropImage.left = backdropImage.width;
+      backdropImage.scaleX = -1;
+      image.filters.push(new fabric.Image.filters.BlendImage({ image: backdropImage }));
+      image.applyFilters();
+      image.scaleToWidth(400);
+      canvas.setDimensions({
+        width: 400,
+        height: 400,
+      });
+      canvas.add(image);
+      canvas.renderAll();
+      image.dispose();
+      backdropImage.dispose();
+      callback(canvas.lowerCanvasEl);
+    });
+  }
+
+  tests.push({
+    test: 'Blend image test with flip',
+    code: blendImageTest2,
+    golden: 'parrotblend2.png',
+    newModule: 'Image Blend test',
+    percentage: 0.06,
+  });
+
+  function blendImageTest(canvas, callback) {
+    getImage(getFixtureName('parrot.png'), false, function(img) {
+      getImage(getFixtureName('very_large_image.jpg'), false, function(backdrop) {
+        var image = new fabric.Image(img);
+        var backdropImage = new fabric.Image(backdrop);
+        image.filters.push(new fabric.Image.filters.BlendImage({image: backdropImage, alpha: 0.5 }));
+        image.scaleToWidth(400);
+        image.applyFilters();
+        canvas.setDimensions({
+          width: 400,
+          height: 400,
+        });
+        canvas.add(image);
+        canvas.renderAll();
+        callback(canvas.lowerCanvasEl);
+      });
+    });
+  }
+
+  tests.push({
+    test: 'Blend image test',
+    code: blendImageTest,
+    golden: 'parrotblend.png',
+    percentage: 0.06,
+  });
+
   tests.forEach(function(testObj) {
     var testName = testObj.test;
     var code = testObj.code;
     var percentage = testObj.percentage;
     var golden = testObj.golden;
+    var newModule = testObj.newModule;
+    if (newModule) {
+      QUnit.module(newModule, {
+        afterEach: afterEachHandler,
+      });
+    }
     QUnit.test(testName, function(assert) {
       var done = assert.async();
       code(fabricCanvas, function(renderedCanvas) {
@@ -154,8 +218,8 @@
         canvas.height = height;
         var ctx = canvas.getContext('2d');
         var output = ctx.getImageData(0, 0, width, height).data;
-        getImage(getGoldeName(golden), renderedCanvas, function(golden) {
-          ctx.drawImage(golden, 0, 0);
+        getImage(getGoldeName(golden), renderedCanvas, function(goldenImage) {
+          ctx.drawImage(goldenImage, 0, 0);
           var imageDataGolden = ctx.getImageData(0, 0, width, height).data;
           var differentPixels = _pixelMatch(imageDataCanvas, imageDataGolden, output, width, height, pixelmatchOptions);
           var percDiff = differentPixels / totalPixels * 100;

diff --git a/test/visual/svg_import.js b/test/visual/svg_import.js
@@ -27,7 +27,7 @@
       return fs.readFile(path, { encoding: 'utf8' }, callback);
     }
     else {
-      var path = getAbsolutePath('test/visual' + finalName);
+      var path = getAbsolutePath('/test/visual' + finalName);
       fabric.util.request(path, {
         onComplete: function(xhr) {
           callback(null, xhr.responseText);
@@ -38,7 +38,7 @@
 
   function getGolden(filename) {
     var finalName = '/golden/' + filename + '.png';
-    return fabric.isLikelyNode ? (__dirname + finalName) : getAbsolutePath('test/visual' + finalName);
+    return fabric.isLikelyNode ? (__dirname + finalName) : getAbsolutePath('/test/visual' + finalName);
   }
 
   function getGoldenImage(filename, callback) {