feat(patch): fix #696, patch HTMLCanvasElement.toBlob as MacroTask (#788)

Author: JiaLiPassion

Diff for: lib/browser/browser.ts

@@ -7,7 +7,7 @@
  */
 
 import {patchTimer} from '../common/timers';
-import {findEventTask, patchClass, patchEventTargetMethods, patchMethod, patchOnProperties, patchPrototype, zoneSymbol} from '../common/utils';
+import {findEventTask, patchClass, patchEventTargetMethods, patchMacroTask, patchMethod, patchOnProperties, patchPrototype, zoneSymbol} from '../common/utils';
 
 import {propertyPatch} from './define-property';
 import {eventTargetPatch} from './event-target';
@@ -55,6 +55,16 @@ Zone.__load_patch('on_property', (global: any, Zone: ZoneType, api: _ZonePrivate
   registerElementPatch(global);
 });
 
+Zone.__load_patch('canvas', (global: any, Zone: ZoneType, api: _ZonePrivate) => {
+  const HTMLCanvasElement = global['HTMLCanvasElement'];
+  if (typeof HTMLCanvasElement !== 'undefined' && HTMLCanvasElement.prototype &&
+      HTMLCanvasElement.prototype.toBlob) {
+    patchMacroTask(HTMLCanvasElement.prototype, 'toBlob', (self: any, args: any[]) => {
+      return {name: 'HTMLCanvasElement.toBlob', target: self, callbackIndex: 0, args: args};
+    });
+  }
+});
+
 Zone.__load_patch('XHR', (global: any, Zone: ZoneType, api: _ZonePrivate) => {
   // Treat XMLHTTPRequest as a macrotask.
   patchXHR(global);

Diff for: test/browser/browser.spec.ts

@@ -7,7 +7,7 @@
  */
 
 import {isBrowser, isMix, zoneSymbol} from '../../lib/common/utils';
-import {ifEnvSupports} from '../test-util';
+import {ifEnvSupports, ifEnvSupportsWithDone} from '../test-util';
 
 import Spy = jasmine.Spy;
 declare const global: any;
@@ -54,6 +54,17 @@ function supportEventListenerOptions() {
 
 (supportEventListenerOptions as any).message = 'supportsEventListenerOptions';
 
+function supportCanvasTest() {
+  const HTMLCanvasElement = (window as any)['HTMLCanvasElement'];
+  const supportCanvas = typeof HTMLCanvasElement !== 'undefined' && HTMLCanvasElement.prototype &&
+      HTMLCanvasElement.prototype.toBlob;
+  const FileReader = (window as any)['FileReader'];
+  const supportFileReader = typeof FileReader !== 'undefined';
+  return supportCanvas && supportFileReader;
+}
+
+(supportCanvasTest as any).message = 'supportCanvasTest';
+
 describe('Zone', function() {
   const rootZone = Zone.current;
   (Zone as any)[zoneSymbol('ignoreConsoleErrorUncaughtError')] = true;
@@ -666,5 +677,45 @@ describe('Zone', function() {
            });
          }));
     });
+
+    it('HTMLCanvasElement.toBlob should be a ZoneAware MacroTask',
+       ifEnvSupportsWithDone(supportCanvasTest, (done: Function) => {
+         const canvas = document.createElement('canvas');
+         const d = canvas.width;
+         const ctx = canvas.getContext('2d');
+         ctx.beginPath();
+         ctx.moveTo(d / 2, 0);
+         ctx.lineTo(d, d);
+         ctx.lineTo(0, d);
+         ctx.closePath();
+         ctx.fillStyle = 'yellow';
+         ctx.fill();
+
+         const scheduleSpy = jasmine.createSpy('scheduleSpy');
+         const zone: Zone = Zone.current.fork({
+           name: 'canvas',
+           onScheduleTask:
+               (delegate: ZoneDelegate, currentZone: Zone, targetZone: Zone, task: Task) => {
+                 scheduleSpy();
+                 return delegate.scheduleTask(targetZone, task);
+               }
+         });
+
+         zone.run(() => {
+           const canvasData = canvas.toDataURL();
+           canvas.toBlob(function(blob) {
+             expect(Zone.current.name).toEqual('canvas');
+             expect(scheduleSpy).toHaveBeenCalled();
+
+             const reader = new FileReader();
+             reader.readAsDataURL(blob);
+             reader.onloadend = function() {
+               const base64data = reader.result;
+               expect(base64data).toEqual(canvasData);
+               done();
+             };
+           });
+         });
+       }));
   });
 });

Diff for: test/test-util.ts

@@ -22,15 +22,38 @@
  *  ifEnvSupports(supportsOnClick, function() { ... });
  */
 declare const global: any;
-export function ifEnvSupports(test: any, block: Function) {
-  return function() {
-    const message = (test.message || test.name || test);
-    if (typeof test === 'string' ? !!global[test] : test()) {
-      block();
+export function ifEnvSupports(test: any, block: Function): () => void {
+  return _ifEnvSupports(test, block);
+}
+
+export function ifEnvSupportsWithDone(test: any, block: Function): (done: Function) => void {
+  return _ifEnvSupports(test, block, true);
+}
+
+function _ifEnvSupports(test: any, block: Function, withDone = false) {
+  if (withDone) {
+    return function(done?: Function) {
+      _runTest(test, block, done);
+    };
+  } else {
+    return function() {
+      _runTest(test, block, undefined);
+    };
+  }
+}
+
+function _runTest(test: any, block: Function, done: Function) {
+  const message = (test.message || test.name || test);
+  if (typeof test === 'string' ? !!global[test] : test()) {
+    if (done) {
+      block(done);
     } else {
-      it('should skip the test if the API does not exist', function() {
-        console.log('WARNING: skipping ' + message + ' tests (missing this API)');
-      });
+      block();
     }
-  };
+  } else {
+    done && done();
+    it('should skip the test if the API does not exist', function() {
+      console.log('WARNING: skipping ' + message + ' tests (missing this API)');
+    });
+  }
 }