fix(): golden generation from browser

await all async tasks

test/lib/visualTestLoop.js

@@ -1,7 +1,7 @@
 (function(exports) {
 
-  exports.getFixture = function(name, original, callback) {
-    getImage(getFixtureName(name), original, callback);
+  exports.getFixture = async function(name, original, callback) {
+    callback(await getImage(getFixtureName(name), original));
   };
 
   exports.getAsset = function(name, callback) {
@@ -69,18 +69,30 @@
       fs.writeFileSync(plainFileName, dataUrl, { encoding: 'base64' });
     }
     else if (original) {
-      original.toBlob(blob => {
-        const formData = new FormData();        
-        formData.append('file', blob, filename);
-        formData.append('filename', filename);
-        const request = new XMLHttpRequest();
-        request.open('POST', '/goldens', true);
-        request.send(formData);
+      return new Promise((resolve, reject) => {
+        return original.toBlob(blob => {
+          const formData = new FormData();
+          formData.append('file', blob, filename);
+          formData.append('filename', filename);
+          const request = new XMLHttpRequest();
+          request.open('POST', '/goldens', true);
+          request.onreadystatechange = () => {
+            if (request.readyState === XMLHttpRequest.DONE) {
+              const status = request.status;
+              if (status === 0 || (status >= 200 && status < 400)) {
+                resolve();
+              } else {
+                reject();
+              }
+            }
+          };
+          request.send(formData);
+        });     
       }, 'image/png');
     }
   }
 
-  async function getImage(filename, original, callback) {
+  async function getImage(filename, original) {
     if (fabric.isLikelyNode && original) {
       var plainFileName = filename.replace('file://', '');
       if (!fs.existsSync(plainFileName)) {
@@ -90,21 +102,23 @@
     else if (original) {
       await fetch(`/goldens/${filename}`, { method: 'GET' })
         .then(res => res.json())
-        .then(res => {
-          !res.exists && generateGolden(filename, original);
-        });
+        .then(res => !res.exists && generateGolden(filename, original));
     }
-    var img = fabric.document.createElement('img');
-    img.onload = function() {
-      img.onload = null;
-      callback(img, false);
-    };
-    img.onerror = function(err) {
-      img.onerror = null;
-      callback(img, true);
-      console.log('Image loading errored', err);
-    };
-    img.src = filename;
+    return new Promise((resolve, reject) => {
+      const img = fabric.document.createElement('img');
+      img.onload = function () {
+        img.onerror = null;
+        img.onload = null;
+        resolve(img);
+      };
+      img.onerror = function (err) {
+        img.onerror = null;
+        img.onload = null;
+        reject(err);
+      };
+      img.src = filename;
+    });
+
   }
 
   exports.visualTestLoop = function(QUnit) {
@@ -147,7 +161,7 @@
       QUnit.test(testName, function(assert) {
         var done = assert.async();
         var fabricCanvas = createCanvasForTest(testObj);
-        code(fabricCanvas, function(renderedCanvas) {
+        code(fabricCanvas, async function (renderedCanvas) {
           var width = renderedCanvas.width;
           var height = renderedCanvas.height;
           var totalPixels = width * height;
@@ -157,34 +171,33 @@
           canvas.height = height;
           var ctx = canvas.getContext('2d');
           var output = ctx.getImageData(0, 0, width, height);
-          getImage(getGoldeName(golden), renderedCanvas, function (goldenImage) {
-            ctx.drawImage(goldenImage, 0, 0);
-            visualCallback.addArguments({
-              enabled: true,
-              golden: canvas,
-              fabric: imageDataCanvas,
-              diff: output,
-              goldenName: golden
-            });
-            var imageDataGolden = ctx.getImageData(0, 0, width, height).data;
-            var differentPixels = _pixelMatch(imageDataCanvas.data, imageDataGolden, output.data, width, height, pixelmatchOptions);
-            var percDiff = differentPixels / totalPixels * 100;
-            var okDiff = totalPixels * percentage;
-            var isOK = differentPixels <= okDiff;
-            assert.ok(
-              isOK,
-              testName + ' [' + golden + '] has too many different pixels ' + differentPixels + '(' + okDiff + ') representing ' + percDiff + '% (>' + (percentage * 100) + '%)'
-            );
-            if (!isOK) {
-              var stringa = imageDataToChalk(output);
-              console.log(stringa);
-            }
-            if ((!isOK && QUnit.debugVisual) || QUnit.recreateVisualRefs) {
-              generateGolden(getGoldeName(golden), renderedCanvas);
-            }
-            fabricCanvas.dispose();
-            done();
+          const goldenImage = await getImage(getGoldeName(golden), renderedCanvas);
+          ctx.drawImage(goldenImage, 0, 0);
+          visualCallback.addArguments({
+            enabled: true,
+            golden: canvas,
+            fabric: imageDataCanvas,
+            diff: output,
+            goldenName: golden
           });
+          var imageDataGolden = ctx.getImageData(0, 0, width, height).data;
+          var differentPixels = _pixelMatch(imageDataCanvas.data, imageDataGolden, output.data, width, height, pixelmatchOptions);
+          var percDiff = differentPixels / totalPixels * 100;
+          var okDiff = totalPixels * percentage;
+          var isOK = differentPixels <= okDiff;
+          assert.ok(
+            isOK,
+            testName + ' [' + golden + '] has too many different pixels ' + differentPixels + '(' + okDiff + ') representing ' + percDiff + '% (>' + (percentage * 100) + '%)'
+          );
+          if (!isOK) {
+            var stringa = imageDataToChalk(output);
+            console.log(stringa);
+          }
+          if ((!isOK && QUnit.debugVisual) || QUnit.recreateVisualRefs) {
+            generateGolden(getGoldeName(golden), renderedCanvas);
+          }
+          fabricCanvas.dispose();
+          done();          
         });
       });
     }