正確使用sinon的假XMLHttpRequest

我正在創建XMLHttpRequest javascript模塊以從服務器獲取JSON數據。這裏是代碼：正確使用sinon的假XMLHttpRequest

(function() { 
    var makeRequest = function(url,callback,opt) { 
    var xhr; 
    if (XMLHttpRequest) { // Mozilla, Safari, ... 
     xhr = new XMLHttpRequest(); 
    } else if (ActiveXObject) { // IE 
     try { 
     xhr = new ActiveXObject("Msxml2.XMLHTTP"); 
     } 
     catch (e) { 
     try { 
      xhr = new ActiveXObject("Microsoft.XMLHTTP"); 
     } 
     catch (e) {} 
     } 
    } 

    if (!xhr) { 
     callback.call(this, 
     'Giving up :(Cannot create an XMLHTTP instance', 
     null); 
     return false; 
    } 
    xhr.onreadystatechange = function() { 
     if (xhr.readyState === 4) { 
     if (xhr.status === 200) { 
      var data = xhr.responseText; 
      if(opt && !opt.raw) { 
      try { 
       data = JSON.parse(data); 
      } catch (e) { 
       callback.call(this, e,null); 
       return; 
      } 
      } 
      callback.call(this,null,data); 
     } else { 
      callback.call(this, 
      'There was a problem with the request.', 
      null); 
     } 
     } 
    }; 
    var params = ''; 
    if (opt && opt.params && typeof(opt.params) == 'object') { 
     for(var key in opt.params) { 
     params += encodeURIComponent(opt.params[key]); 
     } 
    } 
    var method = opt && opt.method ? opt.method : 'GET'; 
    if (method == 'GET') { 
     url = params.length > 0 ? url+'?'+params : url; 
     xhr.open('GET', url); 
     xhr.send(); 
    } else if (method == 'POST') { 
     var data = opt && opt.data ? opt.data : params; 
     xhr.open('POST', url); 
     xhr.send(JSON.stringify(data)); 
    } 
    return xhr; 
    } 

    if(typeof module !== 'undefined' && module.exports) { 
    module.exports = makeRequest; 
    } 
    if(typeof window!== 'undefined') { 
    window.getJSONData = makeRequest; 
    } 
})();

現在我正在爲Mocha和Sinon在nodejs上編寫測試用例。使用興農的fakeXMLHttpRequest測試模塊和測試代碼是在這裏：

var expect = require('chai').expect, 
    getJSON = require('../'), 
    sinon = require('sinon'); 

describe('get-json-data test the request', function() { 
    beforeEach(function() { 
    this.xhr = sinon.useFakeXMLHttpRequest(); 
    var requests = this.requests = []; 

    this.xhr.onCreate = function (xhr) { 
     requests.push(xhr); 
    }; 
    }); 
    afterEach(function() { 
    this.xhr.restore(); 
    }); 

    it('get json data', function() { 
    var callback = sinon.spy(); 
    getJSON('/some/json', callback); 
    expect(this.requests.length).to.equal(1); 
    this.requests[0].respond(200, 
     {"Content-Type": "application/json"}, 
     '{"id": 1, "name": "foo"}'); 
    sinon.assert.calledWith(callback, {"id": 1, "name": "foo"}); 
    }); 
});

在運行測試中，我得到錯誤：

ReferenceError: XMLHttpRequest is not defined

而且它似乎是正確的，因爲在沒有XMLHttpRequest類/功能的NodeJS。但Sinon的假XMLHttpRequest不應該這樣做。我想在Sinon的setUp（Mocha的beforeEach）中，我們用fakeXMLHttpRequest替換原生的XMLHttpRequest。請提出我做錯了什麼？或者，在nodejs上測試我的模塊的正確方法是什麼？

來源

2015-08-31 Gagan

因爲您在瀏覽器環境之外運行此對象沒有XMLHttpRequest對象。既然你用Sinon嘲笑你可以做的是在你的beforeEach調用中聲明一個假全局函數。

global.XMLHttpRequest = sinon.useFakeXMLHttpRequest();

來源

2015-11-29 00:40:49 cyberwombat

謝謝@yashua它解決了我的問題。 – Gagan

是的，我在一個node.js環境中測試。但隨着你暗示它的作品。謝謝@yashua。 – Reinhard

我這樣做是爲了覆蓋的XMLHttpRequest（見我的問題和回答here）：

var FakeXMLHTTPRequests = require('fakexmlhttprequest') 
var requests = [] 

XMLHttpRequest = function() { 
    var r = new FakeXMLHTTPRequests(arguments) 
    requests.push(r) 
    return r 
}

來源

2015-12-01 20:18:54 timhc22

謝謝@ timhc22更新，現在我正在使用Sinon，所以Sinon的useFakeXMLHttpRequest對我來說工作正常。 – Gagan

太棒了！可能會在某個時候嘗試 – timhc22

正確使用sinon的假XMLHttpRequest

回答

相關問題