Class XSpy

example

xspy.clearAll();
// xspy.getRequestListeners().length === 0
// xspy.getResponseListeners().length === 0

example

xspy.clearRequestHandler();
// xspy.getRequestListeners().length === 0

example

xspy.clearResponseHandler();
// xspy.getResponseListeners().length === 0

example

xspy.disable(); // XMLHttpRequest and fetch are set back to original modules.

Note: This does not polyfill window.fetch for Internet Explorer which does not originally implement window.fetch.

example

xspy.enable(); // XMLHttpRequest and fetch are replaced by spying modules.

example

var listeners = xspy.getRequestListeners();

example

var listeners = xspy.getResponseListeners();

example

if(xspy.isEnabled()){
  // then `window.XMLHttpRequest !== xspy.OriginalXHR`
}

example

var listener = function(request){...};
xspy.onRequest(listener);  // xspy.getRequestListeners().length === 1
xspy.offRequest(listener); // xspy.getRequestListeners().length === 0

example

var listener = function(request){...};
xspy.onResponse(listener);  // xspy.getResponseListeners().length === 1
xspy.offResponse(listener); // xspy.getResponseListeners().length === 0

This listener will be called just before web request by window.fetch() or xhr.sent() departs from browser. You can modify the request object(i.e. headers, body) before it is sent.

Note that when you supplies listener as 2 parameters function(request and callback), request will not be dispatched until you manually run callback() function in handler.

If you run callback() without any arguments or with non-object value like false, request processing goes forward without generating fake response.

If you run callback(res) with a fake response object, it immediately returns the fake response after all onRequest listeners finishes. In this case, real request never flies to any external network.

example

Modify request before dispatched

xspy.onRequest(function (request){
  request.method = "POST";
  request.url = "...";
  ...
  return;
});

example

Return fake response after waiting 3000ms

xspy.onRequest(function listenerForRequest(request, sendResponse){
  setTimeout(function(){
    var response = {
      status: 200,
      statusText: "OK",
      headers: {"content-type": "application/json"},
    };

    if(request.ajaxType === "xhr"){
      response = {
        ajaxType: "xhr",
        response: {result: 3},
        responseType: "json",
        responseText: "{'result':3}",
      };
    }
    else{ // ajaxType === "fetch"
      response = {
        ajaxType: "fetch",
        ok: true,
        redirected: false,
        type: "basic",
        body: "{'result':3}",
        url: "https://..."
      };
    }

    sendResponse(response); // after 3000ms elapses, send fake response.
  }, 3000);
});

example

Return fake response after awaited async operation

xspy.onRequest(async (request, sendResponse) => {
  var result = await someAsyncOperation();

  var response = {...};
  sendResponse(response);
});

This listener will be called just before API response is available at window.fetch().then(res => ...) or xhr.onreadystatechange, and so on. You can modify the response object before it is available to the original requester.

Note that when you supplies listener as 3 parameters function(request, response and callback), response will not be returned to the original requester until you manually run callback() function in handler.

example

Modify response before it is available to user scripts

xspy.onResponse(function (request, response){
  response.status = 400;
  response.statusText = "Bad Request";
  response.body = "";
  ...
});

example

Return response after waiting 3000ms

xspy.onResponse(function listenerForResponse(request, response, next){
  setTimeout(function(){
    var modifiedResponse = {...response, status: 200, statusText: "OK"};
    if(response.ajaxType === "fetch"){
      modifiedResponse.ok = true;
    }
    next(modifiedResponse); // after 3000ms elapses, send the response.
  }, 3000);
});

example

Return response after awaited async operation

xspy.onResponse(async (request, response, next) => {
  var result = await someAsyncOperation();

  var response = {...};
  next(response);
});