fetch support

tl;dr
- This commit add support for fetch.
- pretender swap native fetch related API if exists
- pretender.shutdown() restore native fetch related API
- doesn't work with AbortController

Pretender has been working well with xhr, but doesn't handle fetch.
It's been 2 years since @rwjblue first open the
[issue](pretenderjs#60) for fetch
support. So people don't need to do extra work to polyfill for testing.

Include a fetch ponyfill and swap the native fetch during pretender
creation, then restore them when `shutdown`. Since fetch polyfill uses
xhr behind the scene, pretender will "just work".

Per Yetch homepage, the supplement set of yetch impl and spec include:
- Inability to [set the redirect mode](JakeChampion/fetch#137)
- Inability to [change the cache directive](JakeChampion/fetch#438 (comment))
- Inability to [disable same-origin cookies](JakeChampion/fetch#56 (comment))

- `xhr.abort()` first set state to done, finally response to a [network error](https://xhr.spec.whatwg.org/#the-abort()-method);
- [fetch](https://dom.spec.whatwg.org/#aborting-ongoing-activities) will reject promise with a new "AbortError" DOMException.

For `fake_xml_http_request` impl, the request is resolved once its state is changed to `DONE` so the `reject` is not cathed.

So the senario happens in pretender is:
1. state chagne to `DONE`, trigger resolve request
2. abort, trigger reject
3. xhr.onerror, trigger reject

The first resolve wins, error thus not rejected but an empty request is resolved.

Though polyfilled by xhr, fetch returns a Promise and is asynchronous by
nature.

Author: Thomas Wang

karma.conf.js

@@ -20,6 +20,8 @@ module.exports = function(config) {
       'bower_components/jquery-1/index.js',
       'bower_components/jquery/dist/jquery.js',
       'node_modules/es6-promise/dist/es6-promise.auto.js',
+      'node_modules/abortcontroller-polyfill/dist/abortcontroller-polyfill-only.js',
+      'node_modules/yetch/dist/yetch-ponyfill.js',
       'pretender.js',
       'test/**/*.js'
     ],

package.json

@@ -37,8 +37,10 @@
     "sinon": "^3.2.1"
   },
   "dependencies": {
+    "abortcontroller-polyfill": "^1.1.9",
     "fake-xml-http-request": "^2.0.0",
-    "route-recognizer": "^0.3.3"
+    "route-recognizer": "^0.3.3",
+    "yetch": "^0.0.1"
   },
   "jspm": {
     "shim": {

pretender.js

@@ -13,6 +13,9 @@ var RouteRecognizer = appearsBrowserified ? getModuleDefault(require('route-reco
 var FakeXMLHttpRequest = appearsBrowserified ? getModuleDefault(require('fake-xml-http-request')) :
   self.FakeXMLHttpRequest;
 
+// fetch related ponyfills
+var Yetch = appearsBrowserified ? getModuleDefault(require('yetch/dist/yetch-polyfill')) : self.Yetch;
+
 /**
  * parseURL - decompose a URL into its parts
  * @param  {String} url a URL
@@ -139,6 +142,14 @@ function Pretender(/* routeMap1, routeMap2, ..., options*/) {
   // the route map.
   self.XMLHttpRequest = interceptor(ctx);
 
+  // polyfill fetch when xhr is ready
+  // AbortController doesn't need restore
+  this._fetchProps = ['fetch', 'Headers', 'Request', 'Response'];
+  this._fetchProps.forEach(function(name) {
+    this['_native' + name] = self[name];
+    self[name] = Yetch[name];
+  }, this);
+
   // 'start' the server
   this.running = true;
 
@@ -471,6 +482,9 @@ Pretender.prototype = {
   },
   shutdown: function shutdown() {
     self.XMLHttpRequest = this._nativeXMLHttpRequest;
+    this._fetchProps.forEach(function(name) {
+      self[name] = this['_native' + name];
+    }, this);
     this.ctx.pretender = undefined;
     // 'stop' the server
     this.running = false;

test/fetch_test.js

@@ -0,0 +1,102 @@
+var describe = QUnit.module;
+var it = QUnit.test;
+var clock;
+
+describe('pretender invoking by fetch', function(config) {
+  config.beforeEach(function() {
+    this.pretender = new Pretender();
+  });
+
+  config.afterEach(function() {
+    if (clock) {
+      clock.restore();
+    }
+    this.pretender.shutdown();
+  });
+
+  it('fetch triggers pretender', function(assert) {
+    var wasCalled;
+
+    this.pretender.get('/some/path', function() {
+      wasCalled = true;
+    });
+
+    fetch('/some/path');
+    assert.ok(wasCalled);
+  });
+
+  it('is resolved asynchronously', function(assert) {
+    assert.expect(2);
+    var done = assert.async();
+    var val = 'unset';
+
+    this.pretender.get('/some/path', function(request) {
+      return [200, {}, ''];
+    });
+
+    fetch('/some/path').then(function() {
+      assert.equal(val, 'set');
+      done();
+    });
+
+    assert.equal(val, 'unset');
+    val = 'set';
+  });
+
+  it('can NOT be resolved synchronously', function(assert) {
+    assert.expect(1);
+    var val = 0;
+
+    this.pretender.get(
+      '/some/path',
+      function(request) {
+        return [200, {}, ''];
+      },
+      false
+    );
+
+    fetch('/some/path').then(function() {
+      // This won't be called
+      assert.equal(val, 0);
+      val++;
+    });
+    assert.equal(val, 0);
+  });
+
+  it('has NO Abortable fetch', function(assert) {
+    assert.expect(1);
+    var done = assert.async();
+    var wasCalled = false;
+    this.pretender.get(
+      '/downloads',
+      function(request) {
+        return [200, {}, 'FAIL'];
+      },
+      200
+    );
+
+    var controller = new AbortController();
+    var signal = controller.signal;
+    setTimeout(function() {
+      controller.abort();
+    }, 10);
+    fetch('/downloads', { signal: signal })
+      .then(function(data) {
+        assert.ok(data, 'AbortError was not rejected');
+        done();
+      })
+      .catch(function(err) {
+        // it should execute to here but won't due to FakeXmlHttpRequest limitation
+        //
+        // ### why it's not working for fetch
+        // For `fake_xml_http_request` impl, the request is resolved once its state
+        // is changed to `DONE` so the `reject` is not cathed.
+        // So the senario happens in pretender is:
+        // 1. state chagne to `DONE`, trigger resolve request
+        // 2. abort, trigger reject
+        // 3. xhr.onerror, trigger reject
+        // The first resolve wins, error thus not rejected but an empty request is resolved.
+        done();
+      });
+  });
+});