fix(Observable/Ajax): mount properties to origin readystatechange fn (#2025)

Author: Brooooooklyn

spec/helpers/ajax-helper.ts

@@ -135,6 +135,12 @@ export class MockXMLHttpRequest {
   requestHeaders: any = {};
   withCredentials: boolean = false;
 
+  onreadystatechange: (e: ProgressEvent) => any;
+  onerror: (e: ErrorEvent) => any;
+  onprogress: (e: ProgressEvent) => any;
+  ontimeout: (e: ProgressEvent) => any;
+  upload: XMLHttpRequestUpload;
+
   constructor() {
     this.previousRequest = MockXMLHttpRequest.recentRequest;
     MockXMLHttpRequest.recentRequest = this;

spec/observables/dom/ajax-spec.ts

@@ -598,4 +598,166 @@ describe('Observable.ajax', () => {
     });
 
   });
+
+  it('should work fine when XMLHttpRequest onreadystatechange property is monkey patched', function() {
+    Object.defineProperty(root.XMLHttpRequest.prototype, 'onreadystatechange', {
+      set: function (fn: (e: ProgressEvent) => any) {
+        const wrapFn = (ev: ProgressEvent) => {
+          const result = fn.call(this, ev);
+          if (result === false) {
+            ev.preventDefault();
+          }
+        };
+        this['_onreadystatechange'] = wrapFn;
+      },
+      get() {
+        return this['_onreadystatechange'];
+      },
+      configurable: true
+    });
+
+    Rx.Observable.ajax({
+      url: '/flibbertyJibbet'
+    })
+      .subscribe();
+
+    const request = MockXMLHttpRequest.mostRecent;
+    expect(() => {
+      request.onreadystatechange((<any>'onreadystatechange'));
+    }).not.throw();
+
+    delete root.XMLHttpRequest.prototype.onreadystatechange;
+  });
+
+  it('should work fine when XMLHttpRequest ontimeout property is monkey patched', function() {
+    Object.defineProperty(root.XMLHttpRequest.prototype, 'ontimeout', {
+      set: function (fn: (e: ProgressEvent) => any) {
+        const wrapFn = (ev: ProgressEvent) => {
+          const result = fn.call(this, ev);
+          if (result === false) {
+            ev.preventDefault();
+          }
+        };
+        this['_ontimeout'] = wrapFn;
+      },
+      get() {
+        return this['_ontimeout'];
+      },
+      configurable: true
+    });
+
+    const ajaxRequest = {
+      url: '/flibbertyJibbet'
+    };
+
+    Rx.Observable.ajax(ajaxRequest)
+      .subscribe();
+
+    const request = MockXMLHttpRequest.mostRecent;
+    try {
+      request.ontimeout((<any>'ontimeout'));
+    } catch (e) {
+      expect(e.message).to.equal(new Rx.AjaxTimeoutError((<any>request), ajaxRequest).message);
+    }
+    delete root.XMLHttpRequest.prototype.ontimeout;
+  });
+
+  it('should work fine when XMLHttpRequest onprogress property is monkey patched', function() {
+    Object.defineProperty(root.XMLHttpRequest.prototype, 'onprogress', {
+      set: function (fn: (e: ProgressEvent) => any) {
+        const wrapFn = (ev: ProgressEvent) => {
+          const result = fn.call(this, ev);
+          if (result === false) {
+            ev.preventDefault();
+          }
+        };
+        this['_onprogress'] = wrapFn;
+      },
+      get() {
+        return this['_onprogress'];
+      },
+      configurable: true
+    });
+
+    Object.defineProperty(root.XMLHttpRequest.prototype, 'upload', {
+      get() {
+        return true;
+      },
+      configurable: true
+    });
+
+    // mock for onprogress
+    root.XDomainRequest = true;
+
+    Rx.Observable.ajax({
+      url: '/flibbertyJibbet',
+      progressSubscriber: (<any>{
+        next: () => {
+          // noop
+        },
+        error: () => {
+          // noop
+        },
+        complete: () => {
+          // noop
+        }
+      })
+    })
+      .subscribe();
+
+    const request = MockXMLHttpRequest.mostRecent;
+
+    expect(() => {
+      request.onprogress((<any>'onprogress'));
+    }).not.throw();
+
+    delete root.XMLHttpRequest.prototype.onprogress;
+    delete root.XMLHttpRequest.prototype.upload;
+    delete root.XDomainRequest;
+  });
+
+  it('should work fine when XMLHttpRequest onerror property is monkey patched', function() {
+    Object.defineProperty(root.XMLHttpRequest.prototype, 'onerror', {
+      set: function (fn: (e: ProgressEvent) => any) {
+        const wrapFn = (ev: ProgressEvent) => {
+          const result = fn.call(this, ev);
+          if (result === false) {
+            ev.preventDefault();
+          }
+        };
+        this['_onerror'] = wrapFn;
+      },
+      get() {
+        return this['_onerror'];
+      },
+      configurable: true
+    });
+
+    Object.defineProperty(root.XMLHttpRequest.prototype, 'upload', {
+      get() {
+        return true;
+      },
+      configurable: true
+    });
+
+    // mock for onprogress
+    root.XDomainRequest = true;
+
+    Rx.Observable.ajax({
+      url: '/flibbertyJibbet'
+    })
+      .subscribe();
+
+    const request = MockXMLHttpRequest.mostRecent;
+
+    try {
+      request.onerror((<any>'onerror'));
+    } catch (e) {
+      expect(e.message).to.equal('ajax error');
+    }
+
+    delete root.XMLHttpRequest.prototype.onerror;
+    delete root.XMLHttpRequest.prototype.upload;
+    delete root.XDomainRequest;
+  });
 });

src/observable/dom/AjaxObservable.ts

@@ -293,39 +293,42 @@ export class AjaxSubscriber<T> extends Subscriber<Event> {
   private setupEvents(xhr: XMLHttpRequest, request: AjaxRequest) {
     const progressSubscriber = request.progressSubscriber;
 
-    xhr.ontimeout = function xhrTimeout(e) {
+    function xhrTimeout(e: ProgressEvent) {
       const {subscriber, progressSubscriber, request } = (<any>xhrTimeout);
       if (progressSubscriber) {
         progressSubscriber.error(e);
       }
       subscriber.error(new AjaxTimeoutError(this, request)); //TODO: Make betterer.
     };
-    (<any>xhr.ontimeout).request = request;
-    (<any>xhr.ontimeout).subscriber = this;
-    (<any>xhr.ontimeout).progressSubscriber = progressSubscriber;
-
+    xhr.ontimeout = xhrTimeout;
+    (<any>xhrTimeout).request = request;
+    (<any>xhrTimeout).subscriber = this;
+    (<any>xhrTimeout).progressSubscriber = progressSubscriber;
     if (xhr.upload && 'withCredentials' in xhr && root.XDomainRequest) {
       if (progressSubscriber) {
-        xhr.onprogress = function xhrProgress(e) {
+        let xhrProgress: (e: ProgressEvent) => void;
+        xhrProgress = function(e: ProgressEvent) {
           const { progressSubscriber } = (<any>xhrProgress);
           progressSubscriber.next(e);
         };
-        (<any>xhr.onprogress).progressSubscriber = progressSubscriber;
+        xhr.onprogress = xhrProgress;
+        (<any>xhrProgress).progressSubscriber = progressSubscriber;
       }
-
-      xhr.onerror = function xhrError(e) {
+      let xhrError: (e: ErrorEvent) => void;
+      xhrError = function(e: ErrorEvent) {
         const { progressSubscriber, subscriber, request } = (<any>xhrError);
         if (progressSubscriber) {
           progressSubscriber.error(e);
         }
         subscriber.error(new AjaxError('ajax error', this, request));
       };
-      (<any>xhr.onerror).request = request;
-      (<any>xhr.onerror).subscriber = this;
-      (<any>xhr.onerror).progressSubscriber = progressSubscriber;
+      xhr.onerror = xhrError;
+      (<any>xhrError).request = request;
+      (<any>xhrError).subscriber = this;
+      (<any>xhrError).progressSubscriber = progressSubscriber;
     }
 
-    xhr.onreadystatechange = function xhrReadyStateChange(e) {
+    function xhrReadyStateChange(e: ProgressEvent) {
       const { subscriber, progressSubscriber, request } = (<any>xhrReadyStateChange);
       if (this.readyState === 4) {
         // normalize IE9 bug (http://bugs.jquery.com/ticket/1450)
@@ -354,9 +357,10 @@ export class AjaxSubscriber<T> extends Subscriber<Event> {
         }
       }
     };
-    (<any>xhr.onreadystatechange).subscriber = this;
-    (<any>xhr.onreadystatechange).progressSubscriber = progressSubscriber;
-    (<any>xhr.onreadystatechange).request = request;
+    xhr.onreadystatechange = xhrReadyStateChange;
+    (<any>xhrReadyStateChange).subscriber = this;
+    (<any>xhrReadyStateChange).progressSubscriber = progressSubscriber;
+    (<any>xhrReadyStateChange).request = request;
   }
 
   unsubscribe() {