feat(fetch): patch the fetch API

fixes #108

Author: vicb

Diff for: karma-browserify.conf.js

@@ -6,7 +6,7 @@ module.exports = function (config) {
     files: [
       'test/util.js',
       'test/commonjs.spec.js',
-      {pattern: 'test/assets/**/*.html', watched: true, served: true, included: false},
+      {pattern: 'test/assets/**/*.*', watched: true, served: true, included: false},
       {pattern: 'lib/**/*.js', watched: true, served: false, included: false}
     ],
 

Diff for: karma-microtasks.conf.js

@@ -8,7 +8,7 @@ module.exports = function (config) {
       'test/setup-microtask.js',
       'dist/*-zone.js',
       'test/**/*.spec.js',
-      {pattern: 'test/assets/**/*.html', watched: true, served: true, included: false},
+      {pattern: 'test/assets/**/*.*', watched: true, served: true, included: false},
       {pattern: 'lib/**/*.js', watched: true, served: false, included: false}
     ],
 

Diff for: karma.conf.js

@@ -9,7 +9,7 @@ module.exports = function (config) {
       'dist/*-zone.js',
       //'test/lib/brick.js',
       'test/**/*.spec.js',
-      {pattern: 'test/assets/**/*.html', watched: true, served: true, included: false},
+      {pattern: 'test/assets/**/*.*', watched: true, served: true, included: false},
       {pattern: 'lib/**/*.js', watched: true, served: false, included: false}
     ],
 

Diff for: lib/patch/promise.js

@@ -47,6 +47,27 @@ if (global.Promise) {
   };
 }
 
+
+function _patchPromiseFnsOnObject(objectPath, fnNames) {
+  var obj = global;
+
+  var exists = objectPath.every(function (segment) {
+    obj = obj[segment];
+    return obj;
+  });
+
+  if (!exists) {
+    return;
+  }
+
+  fnNames.forEach(function (name) {
+    var fn = obj[name];
+    if (fn) {
+      obj[name] = bindPromiseFn(fn);
+    }
+  });
+}
+
 function _patchThenable(thenable) {
   var then = thenable.then;
   thenable.then = function () {
@@ -67,11 +88,24 @@ function _patchThenable(thenable) {
 
 
 function apply() {
+  // Patch .then() and .catch() on native Promises to execute callbacks in the zone where
+  // those functions are called.
   if (global.Promise) {
     utils.patchPrototype(Promise.prototype, [
       'then',
       'catch'
     ]);
+
+    // Patch browser APIs that return a Promise
+    var patchFns = [
+      // fetch
+      [[], ['fetch']],
+      [['Response', 'prototype'], ['arrayBuffer', 'blob', 'json', 'text']]
+    ];
+
+    patchFns.forEach(function(objPathAndFns) {
+      _patchPromiseFnsOnObject(objPathAndFns[0], objPathAndFns[1]);
+    });
   }
 }
 

Diff for: test/assets/sample.json

@@ -0,0 +1 @@
+{"hello": "world"}

Diff for: test/patch/Promise.spec.js

@@ -3,34 +3,98 @@
 describe('Promise', ifEnvSupports('Promise', function () {
   var testZone = window.zone.fork();
 
-  it('should work with .then', function (done) {
-    var resolve;
-
-    testZone.run(function() {
-      new Promise(function (resolveFn) {
-        resolve = resolveFn;
-      }).then(function () {
-        expect(window.zone).toBeDirectChildOf(testZone);
-        done();
+  describe('Promise API', function () {
+    it('should work with .then', function (done) {
+      var resolve;
+
+      testZone.run(function() {
+        new Promise(function (resolveFn) {
+          resolve = resolveFn;
+        }).then(function () {
+          expect(window.zone).toBeDirectChildOf(testZone);
+          done();
+        });
       });
+
+      resolve();
     });
 
-    resolve();
+    it('should work with .catch', function (done) {
+      var reject;
+
+      testZone.run(function() {
+        new Promise(function (resolveFn, rejectFn) {
+          reject = rejectFn;
+        }).catch(function () {
+          expect(window.zone).toBeDirectChildOf(testZone);
+          done();
+        });
+      });
+
+      reject();
+    });
   });
 
-  it('should work with .catch', function (done) {
-    var reject;
+  describe('fetch', ifEnvSupports('fetch', function () {
+    it('should work for text response', function(done) {
+      testZone.run(function() {
+        fetch('/base/test/assets/sample.json').then(function(response) {
+          var fetchZone = zone;
+          expect(fetchZone).toBeDirectChildOf(testZone);
 
-    testZone.run(function() {
-      new Promise(function (resolveFn, rejectFn) {
-        reject = rejectFn;
-      }).catch(function () {
-        expect(window.zone).toBeDirectChildOf(testZone);
-        done();
+          response.text().then(function(text) {
+            expect(zone).toBeDirectChildOf(fetchZone);
+            expect(text.trim()).toEqual('{"hello": "world"}');
+            done();
+          });
+        });
       });
     });
 
-    reject();
-  });
+    it('should work for json response', function(done) {
+      testZone.run(function() {
+        fetch('/base/test/assets/sample.json').then(function(response) {
+          var fetchZone = zone;
+          expect(fetchZone).toBeDirectChildOf(testZone);
+
+          response.json().then(function(obj) {
+            expect(zone).toBeDirectChildOf(fetchZone);
+            expect(obj.hello).toEqual('world');
+            done();
+          });
+        });
+      });
+    });
+
+    it('should work for blob response', function(done) {
+      testZone.run(function() {
+        fetch('/base/test/assets/sample.json').then(function(response) {
+          var fetchZone = zone;
+          expect(fetchZone).toBeDirectChildOf(testZone);
+
+          response.blob().then(function(blob) {
+            expect(zone).toBeDirectChildOf(fetchZone);
+            expect(blob instanceof Blob).toEqual(true);
+            done();
+          });
+        });
+      });
+    });
+
+    it('should work for arrayBuffer response', function(done) {
+      testZone.run(function() {
+        fetch('/base/test/assets/sample.json').then(function(response) {
+          var fetchZone = zone;
+          expect(fetchZone).toBeDirectChildOf(testZone);
+
+          response.arrayBuffer().then(function(blob) {
+            expect(zone).toBeDirectChildOf(fetchZone);
+            expect(blob instanceof ArrayBuffer).toEqual(true);
+            done();
+          });
+        });
+      });
+    });
+  }));
 
 }));