Fabric update new canvas, new jsdom (#5356)

.gitignore

@@ -1,5 +1,6 @@
 .DS_Store
 *.iml
+/.nyc_output/
 /node_modules/
 /npm-debug.log
 before_commit

.npmignore

@@ -1,4 +1,5 @@
 .github/
+.nyc_output/
 src/
 lib/
 coverage/

.travis.yml

@@ -52,47 +52,35 @@ jobs:
     - stage: Unit Tests
       env: LAUNCHER=Chrome
       script: npm run build:fast && testem ci --port 8080 -f testem.json -l $LAUNCHER
-      install: npm install [email protected] [email protected]
       addons:
         apt:
           packages: # avoid installing packages
     - stage: Unit Tests
       env: LAUNCHER=Firefox
       script: npm run build:fast && testem ci --port 8080 -f testem.json -l $LAUNCHER
-      install: npm install [email protected] [email protected]
       addons:
         apt:
           packages: # avoid installing packages
     - stage: Unit Tests
       env: LAUNCHER=Node
-      node_js: "10"
-    - stage: Unit Tests
-      node_js: "8"
+      node_js: "11"
     - stage: Unit Tests
-      node_js: "6"
-    - stage: Unit Tests
-      node_js: "4"
+      env: LAUNCHER=Node
+      node_js: "10"
     - stage: Unit Tests
-      env: CANVAS=canvas-prebuilt
       node_js: "8"
-      install: npm install && npm remove canvas && npm install canvas-prebuilt@^1.6.11 [email protected]
-      addons:
-        apt:
-          packages: # avoid installing packages
     - stage: Visual Tests
-      env: LAUNCHER=Node CANFAIL=TRUE
+      env: LAUNCHER=Node
       node_js: "8"
       script: npm run build:fast && npm run test:visual
     - stage: Visual Tests
       env: LAUNCHER=Chrome
-      install: npm install [email protected] [email protected]
       script: npm run build:fast && testem ci --port 8080 -f testem-visual.json -l $LAUNCHER
       addons:
         apt:
           packages: # avoid installing packages
     - stage: Visual Tests
       env: LAUNCHER=Firefox
-      install: npm install [email protected] [email protected]
       script: npm run build:fast && testem ci --port 8080 -f testem-visual.json -l $LAUNCHER
       addons:
         apt:

HEADER.js

@@ -20,17 +20,20 @@ if (typeof document !== 'undefined' && typeof window !== 'undefined') {
 }
 else {
   // assume we're running under node.js when document/window are not present
-  fabric.document = require('jsdom')
-    .jsdom(
-      decodeURIComponent('%3C!DOCTYPE%20html%3E%3Chtml%3E%3Chead%3E%3C%2Fhead%3E%3Cbody%3E%3C%2Fbody%3E%3C%2Fhtml%3E'),
-      { features: {
+  var jsdom = require('jsdom');
+  var virtualWindow = new jsdom.JSDOM(
+    decodeURIComponent('%3C!DOCTYPE%20html%3E%3Chtml%3E%3Chead%3E%3C%2Fhead%3E%3Cbody%3E%3C%2Fbody%3E%3C%2Fhtml%3E'),
+    {
+      features: {
         FetchExternalResources: ['img']
-      }
-      });
+      },
+      resources: 'usable'
+    }).window;
+  fabric.document = virtualWindow.document;
   fabric.jsdomImplForWrapper = require('jsdom/lib/jsdom/living/generated/utils').implForWrapper;
   fabric.nodeCanvas = require('jsdom/lib/jsdom/utils').Canvas;
-  fabric.window = fabric.document.defaultView;
-  DOMParser = require('xmldom').DOMParser;
+  fabric.window = virtualWindow;
+  DOMParser = fabric.window.DOMParser;
 }
 
 /**

package.json

@@ -45,10 +45,10 @@
     "build:watch": "onchange 'src/**/**' 'HEADER.js' 'lib/**/**' -- npm run build_export",
     "build_with_gestures": "node build.js modules=ALL exclude=accessors",
     "build_export": "npm run build:fast && npm run export_dist_to_site",
-    "test:single": "./node_modules/qunit/bin/qunit test/node_test_setup.js test/lib",
-    "test": "istanbul cover ./node_modules/qunit/bin/qunit test/node_test_setup.js test/lib test/unit",
-    "test:visual": "./node_modules/qunit/bin/qunit test/node_test_setup.js test/lib test/visual",
-    "test:visual:single": "./node_modules/qunit/bin/qunit test/node_test_setup.js test/lib",
+    "test:single": "quint test/node_test_setup.js test/lib",
+    "test": "nyc qunit test/node_test_setup.js test/lib test/unit",
+    "test:visual": "qunit test/node_test_setup.js test/lib test/visual",
+    "test:visual:single": "qunit test/node_test_setup.js test/lib",
     "test:all": "npm run test && npm run test:visual",
     "lint": "eslint --config .eslintrc.json src",
     "lint_tests": "eslint test/unit --config .eslintrc_tests && eslint test/visual --config .eslintrc_tests",
@@ -60,22 +60,21 @@
     "testem:ci": "testem ci"
   },
   "optionalDependencies": {
-    "canvas": "^1.6.13",
-    "jsdom": "^9.12.0",
-    "xmldom": "0.1.x"
+    "canvas": "^2.3.0",
+    "jsdom": "13.1.0"
   },
   "devDependencies": {
     "eslint": "4.18.x",
-    "istanbul": "0.4.x",
+    "nyc": "13.3.x",
     "onchange": "^3.x.x",
-    "qunit": "2.6.2",
+    "qunit": "2.9.2",
     "testem": "^1.18.4",
     "uglify-js": "3.3.x",
     "pixelmatch": "^4.0.2",
     "chalk": "^2.4.1"
   },
   "engines": {
-    "node": ">=4.0.0"
+    "node": ">=8.0.0"
   },
   "main": "./dist/fabric.js",
   "dependencies": {}

src/parser.js

@@ -1045,8 +1045,8 @@
     loadSVGFromString: function(string, callback, reviver, options) {
       string = string.trim();
       var doc;
-      if (typeof DOMParser !== 'undefined') {
-        var parser = new DOMParser();
+      if (typeof fabric.window.DOMParser !== 'undefined') {
+        var parser = new fabric.window.DOMParser();
         if (parser && parser.parseFromString) {
           doc = parser.parseFromString(string, 'text/xml');
         }

test/lib/visualTestLoop.js

@@ -7,7 +7,8 @@
   exports.getAsset = function(name, callback) {
     var finalName = getAssetName(name);
     if (fabric.isLikelyNode) {
-      return fs.readFile(finalName, { encoding: 'utf8' }, callback);
+      var plainFileName = finalName.replace('file://', '');
+      return fs.readFile(plainFileName, { encoding: 'utf8' }, callback);
     }
     else {
       fabric.util.request(finalName, {
@@ -18,6 +19,17 @@
     }
   };
 
+  function createCanvasForTest(width, height) {
+    var options = { enableRetinaScaling: false, renderOnAddRemove: false, width: 200, height: 200 };
+    if (width) {
+      options.width = width;
+    }
+    if (height) {
+      options.height = height;
+    }
+    return new fabric.StaticCanvas(null, options);
+  };
+
   function getAbsolutePath(path) {
     var isAbsolute = /^https?:/.test(path);
     if (isAbsolute) { return path; };
@@ -28,30 +40,35 @@
     return src;
   }
 
+  function localPath(path, filename) {
+    return 'file://' + require('path').join(__dirname, path, filename)
+  }
+
   function getAssetName(filename) {
     var finalName = '/assets/' + filename + '.svg';
-    return fabric.isLikelyNode ? (__dirname + '/../visual' + finalName) : getAbsolutePath('/test/visual' + finalName);
+    return fabric.isLikelyNode ? localPath('/../visual', finalName) : getAbsolutePath('/test/visual' + finalName);
   }
 
   function getGoldeName(filename) {
     var finalName = '/golden/' + filename;
-    return fabric.isLikelyNode ? (__dirname + '/../visual' + finalName) : getAbsolutePath('/test/visual' + finalName);
+    return fabric.isLikelyNode ? localPath('/../visual', finalName) : getAbsolutePath('/test/visual' + finalName);
   }
 
   function getFixtureName(filename) {
     var finalName = '/fixtures/' + filename;
-    return fabric.isLikelyNode ? (__dirname + '/..' + finalName) : getAbsolutePath('/test' + finalName);
+    return fabric.isLikelyNode ? localPath('/..', finalName) : getAbsolutePath('/test' + finalName);
   }
 
   function getImage(filename, original, callback) {
     if (fabric.isLikelyNode && original) {
+      var plainFileName = filename.replace('file://', '');
       try {
-        fs.statSync(filename);
+        fs.statSync(plainFileName);
       }
       catch (err) {
         var dataUrl = original.toDataURL().split(',')[1];
         console.log('creating original for ', filename);
-        fs.writeFileSync(filename, dataUrl, { encoding: 'base64' });
+        fs.writeFileSync(plainFileName, dataUrl, { encoding: 'base64' });
       }
     }
     var img = fabric.document.createElement('img');
@@ -67,7 +84,7 @@
     img.src = filename;
   }
 
-  exports.visualTestLoop = function(fabricCanvas, QUnit) {
+  exports.visualTestLoop = function(QUnit) {
     var _pixelMatch;
     var visualCallback;
     var imageDataToChalk;
@@ -90,16 +107,14 @@
     };
 
     function beforeEachHandler() {
-      fabricCanvas.clipPath = null;
-      fabricCanvas.viewportTransform = [1, 0, 0, 1, 0, 0];
-      fabricCanvas.clear();
-      fabricCanvas.renderAll();
+
     }
 
     return function testCallback(testObj) {
       if (testObj.disabled) {
         return;
       }
+      fabric.StaticCanvas.prototype.requestRenderAll = fabric.StaticCanvas.prototype.renderAll;
       var testName = testObj.test;
       var code = testObj.code;
       var percentage = testObj.percentage;
@@ -112,6 +127,7 @@
       }
       QUnit.test(testName, function(assert) {
         var done = assert.async();
+        var fabricCanvas = createCanvasForTest(testObj.width, testObj.height);
         code(fabricCanvas, function(renderedCanvas) {
           var width = renderedCanvas.width;
           var height = renderedCanvas.height;
@@ -144,6 +160,7 @@
               console.log(stringa);
             }
             done();
+            fabricCanvas.dispose();
           });
         });
       });

test/node_test_setup.js

@@ -30,3 +30,29 @@ global.imageDataToChalk = function(imageData) {
 QUnit.config.testTimeout = 15000;
 QUnit.config.noglobals = true;
 QUnit.config.hidePassed = true;
+
+var jsdom = require('jsdom');
+
+// make a jsdom version for tests that does not spam too much.
+class CustomResourceLoader extends jsdom.ResourceLoader {
+  fetch(url, options) {
+    return super.fetch(url, options).catch(e => {
+      throw new Error('JSDOM FETCH CATCHED');
+    });
+  }
+}
+
+var jsdom = require('jsdom');
+var virtualWindow = new jsdom.JSDOM(
+  decodeURIComponent('%3C!DOCTYPE%20html%3E%3Chtml%3E%3Chead%3E%3C%2Fhead%3E%3Cbody%3E%3C%2Fbody%3E%3C%2Fhtml%3E'),
+  {
+    features: {
+      FetchExternalResources: ['img']
+    },
+    resources: new CustomResourceLoader(),
+  }).window;
+fabric.document = virtualWindow.document;
+fabric.jsdomImplForWrapper = require('jsdom/lib/jsdom/living/generated/utils').implForWrapper;
+fabric.nodeCanvas = require('jsdom/lib/jsdom/utils').Canvas;
+fabric.window = virtualWindow;
+DOMParser = fabric.window.DOMParser;

test/unit/canvas.js

@@ -78,7 +78,7 @@
     return src;
   }
 
-  var IMG_SRC = fabric.isLikelyNode ? (__dirname + '/../fixtures/test_image.gif') : getAbsolutePath('../fixtures/test_image.gif');
+  var IMG_SRC = fabric.isLikelyNode ? ('file://' + __dirname + '/../fixtures/test_image.gif') : getAbsolutePath('../fixtures/test_image.gif');
 
   var canvas = this.canvas = new fabric.Canvas(null, {enableRetinaScaling: false, width: 600, height: 600});
   var upperCanvasEl = canvas.upperCanvasEl;