摘要：原文出處單元測試傻瓜教程請求經(jīng)常容易發(fā)生錯誤，客戶端發(fā)送的數(shù)據(jù)出問題，服務器端返回的數(shù)據(jù)有誤都會導致請求錯誤。設置在我們開始單元測試之前，我們需要安裝幾個必須的工具。我們將用它來向你們展示如何對進行單元測試。

原文出處 ：AJAX單元測試傻瓜教程

Ajax 請求經(jīng)常容易發(fā)生錯誤，客戶端發(fā)送的數(shù)據(jù)出問題，服務器端返回的數(shù)據(jù)有誤都會導致 Ajax 請求錯誤。你不能保證與服務器的連接總是工作正常。Ajax請求需要將用戶的輸入發(fā)送給服務器并返回服務器響應，因此，對于數(shù)據(jù)的正確處理至關重要。
但是由于Ajax是異步的，測試它的同時必須保證獨立性，我們?nèi)绾尾拍茉贏jax與服務器進行通信的時候?qū)ζ溥M行單元測試呢？
不要怕，讓我們看一看接下來的例子，學習一下如何對Ajax請求進行單元測試。

在我們開始單元測試之前，我們需要安裝幾個必須的工具。

新建一個目錄，用來存放必要的文件

使用 npm install mocha chai sinon 安裝 Mocha, Chai, Sinon

為了使事情簡單，我們將直接在瀏覽器中運行測試。如果你更喜歡基于命令行的測試的話，測試運行的結(jié)果也將會和瀏覽器中的結(jié)果完全一致。
我們將會使用以下的文件作為測試運行器。我將其命名為test.html。

注意mocha.js,mocha.css,sinon-1.17.1.js,chai.js的文件路徑。因為我是用npm安裝它們的，所以它們都在node_modules目錄下。對于 Sinon，你可能需要更改文件名來匹配安裝的版本，我在這里使用的是版本是1.17.1。同時也注意testApi.js,test.js這兩個文件，這兩個文件作為我的實例模塊和測試用例，我將會在接下來逐一介紹它們。

接下來，我們將創(chuàng)建一個基礎的模塊，該模塊將會發(fā)送一些Ajax請求。我們將用它來向你們展示如何對Ajax進行單元測試。
我們將該文件命名為testApi.js。

var testApi = {
    get: function(callback) {
        var xhr = new XMLHttpRequest();
        xhr.open("GET", "http://jsonplaceholder.typicode.com/posts/1", true);

        xhr.onreadystatechange = function() {
            if(xhr.readyState == 4) {
                if(xhr.status == 200) {
                    callback(null, JSON.parse(xhr.responseText));
                }
                else {
                    callback(xhr.status);
                }
            }
        };

        xhr.send();
    },

    post: function(data, callback) {
        var xhr = new XMLHttpRequest();
        xhr.open("POST", "http://jsonplaceholder.typicode.com/posts", true);

        xhr.onreadystatechange = function() {
            if(xhr.readyState == 4) {
                callback();
            }
        };

        xhr.send(JSON.stringify(data));
    }
};

這段代碼開起來應該很熟悉，我們寫了兩個函數(shù)，一個函數(shù)中使用GET方法獲取數(shù)據(jù)，另一個函數(shù)中使用POST方法向服務器發(fā)送數(shù)據(jù)，這些都是最普通的 Ajax請求。我們在這里使用了JSONPlaceholder API，它是一個免費的在線REST服務，你可以使用它提供的模擬數(shù)據(jù)，非常適合快速測試。

之后我們需要創(chuàng)建一個框架，在里面添加每個情景的測試集。該文件被命名為test.js。

chai.should();

describe("TestAPI", function() {
  //Tests etc. go here
});

Mocha中使用describe來創(chuàng)建一個測試用例，該測試用例便是我們添加測試代碼的地方。
chai.should()將允許我們使用 "should style" 斷言。這意味著我們可以輕松的驗證我們的測試結(jié)果，如：someValue.should.equal(12345)。

我們的示例模塊中有一個get函數(shù)，該函數(shù)可以被用來加載服務器傳送過來的數(shù)據(jù)。我們將會創(chuàng)建一個測試函數(shù)來證明由服務器取到數(shù)據(jù)是一個JSON數(shù)據(jù)。但是該GET請求是由XMLHttpRequest發(fā)出的，由于我們測試的時候并沒有服務器接收我們的數(shù)據(jù)，所以我們不能真的發(fā)出一個 Http 請求，那么我們?nèi)绾尾拍鼙苊庹娴陌l(fā)出請求呢？又如何能得到返回的數(shù)據(jù)呢？
別著急，這個時候就到了 Sinon 出場了。我們一開始在就在test.html中引用了 Sinon 的庫，有了 Sinon，我們就可以模擬服務器響應。我們可以將XMLHttpRequest用一個替身來代替，我們稱之為 fake XMLHttpRequest，這樣我們就能在測試中輕松控制Ajax請求了。
我們需要稍微更新一下我們的測試用例框架，以下是更改之后的test.js文件。

chai.should();

describe("TestAPI", function() {
    beforeEach(function() {
        this.xhr = sinon.useFakeXMLHttpRequest();

        this.requests = [];
        this.xhr.onCreate = function(xhr) {
            this.requests.push(xhr);
        }.bind(this);
    });

    afterEach(function() {
        this.xhr.restore();
    });


    //Tests etc. go here
});

beforeEach和afterEach就像他們的名字一樣，將會在每一次的測試前和測試后被調(diào)用。在每一個測試之前，我們實例化了一個 fake XMLHttpRequest 并且將每一個被創(chuàng)建的 fake request 放入了一個數(shù)組中，這些值被存儲在this.xhr和this.request中，這樣我們就可以在該測試中的其他函數(shù)中使用了。

在每一次測試之后，我們使用了this.xhr.restore來恢復初始的XMLHttpRequest對象。

現(xiàn)在，我們可以開始在test.js中寫下我們的第一個測試集：

it("should parse fetched data as JSON", function(done) {
    var data = { foo: "bar" };
    var dataJson = JSON.stringify(data);

    testApi.get(function(err, result) {
        result.should.deep.equal(data);
        done();
    });

    this.requests[0].respond(200, { "Content-Type": "text/json" }, dataJson);
});

我們定義了一個對象data和它的JSON版本dataJson作為我們將要傳遞的數(shù)據(jù)。下一步，我們調(diào)用了testApi.call,在它的回掉函數(shù)中我們使用了result.should.deep.equal來驗證結(jié)果是不是與我們所期望的數(shù)據(jù)一致。我們還調(diào)用了done()，它的作用是告訴 Mocha 該異步測試完成了。在這里，要注意done是測試函數(shù)中的一個參數(shù)。
最后，我們調(diào)用了this.requests[0].respond。你還記得之前的beforeEach函數(shù)么？它在每一次的測試開始之前，將所有的 fake XMLHttpRquest 放入了this.requests中。當我們的測試調(diào)用testApi.get時，它創(chuàng)建了一個請求。這個請求被存入了this.requests這個數(shù)組中，this.requests[0]就代表了這個請求。
通常來說，XMLHttpRequest 沒有respond函數(shù)，這里的respond用來響應一個 fake request。我們在該響應中設置狀態(tài)碼為200，意思是成功響應。同時，我們將響應頭中的Content-Type設置為text/json，這是因為我們傳遞的是 JSON 數(shù)據(jù)。respond函數(shù)中的最后一個參數(shù)表示響應體，我們將其設置為之前創(chuàng)建好的dataJson變量。
fake XMLHttpRequest 模擬了一個 GET 請求的響應，在得到響應之后，testApi.get中的回掉函數(shù)將會被調(diào)用。該回調(diào)函數(shù)中，我們將響應中得到的結(jié)果與data變量做對比：

testApi.get(function(err, result) {
    result.should.deep.equal(data);
    done();
});

因為之前我們創(chuàng)建了data和dataJson變量來代表傳遞的數(shù)據(jù)，所以如果響應正確，響應的數(shù)據(jù)應該被解析成一個對象。
現(xiàn)在，我們可以在瀏覽器中運行我們的測試了，打開test.html文件，你應該可以看到關于測試通過的信息。

在我們的示例中還有一個向服務器發(fā)送數(shù)據(jù)的post函數(shù)，發(fā)送的數(shù)據(jù)是 JSON 格式的。接下來我們就要完成對該函數(shù)的測試。

it("should send given data as JSON body", function() {
    var data = { hello: "world" };
    var dataJson = JSON.stringify(data);

    testApi.post(data, function() { });

    this.requests[0].requestBody.should.equal(dataJson);
});

就和之前一樣，我們首先定義了一個測試數(shù)據(jù)data和它的 JSON 格式的變量dataJson。之后我們調(diào)用了testApi.post。與之前測試 GET 請求不一樣的地方是，這一次我們只需要驗證要被發(fā)送的數(shù)據(jù)是否被正確的轉(zhuǎn)換成了 JSON 格式，因為我們只需要保證 POST 請求中發(fā)出的數(shù)據(jù)是正確的，因此我們的回掉函數(shù)是空的。
該段代碼中最后一行使用了一個斷言來確定發(fā)送數(shù)據(jù)的正確性。與之前一樣，我們使用了 fake XMLHttpRequest，但是這一次我們要證明它攜帶了正確的數(shù)據(jù)。POST 請求中攜帶的數(shù)據(jù)存放在 fake XMLHttpRequest 的 requestBody屬性中，我們將其與dataJson作比較來驗證我們的行為。

作為最后一個示例，讓我們來是測試一個失敗的請求。因為網(wǎng)絡連接中可能出現(xiàn)很多問題，同時服務器也可能出現(xiàn)問題，并且我們不應該讓我們網(wǎng)站的用戶對具體的錯誤信息感到疑惑，所以錯誤測試非常重要。
示例模塊中的回調(diào)函數(shù)中有兩個參數(shù)，第一個參數(shù)就是錯誤信息，第二個參數(shù)則是每一次 Http 請求響應得到的結(jié)果。代碼如下：

it("should return error into callback", function(done) {
    testApi.get(function(err, result) {
        err.should.exist;
        done();
    });

    this.requests[0].respond(500);
});

由于是錯誤測試，所以這一次我們不需要任何數(shù)據(jù)。我們調(diào)用了testApi.get，并在其回掉函數(shù)中來驗證 error 參數(shù)的存在。為了模擬響應錯誤，最后一行中的 fake XMLHttpRequest 發(fā)送了一個內(nèi)部服務器錯誤的狀態(tài)碼 500 來觸發(fā)錯誤處理程序。

Ajax請求的測試是很重要的，如果你能證明每一次請求都是正確的，那么你應用程序中的其他部分就能完全相信每一次 Ajax 請求得到的數(shù)據(jù)。
假如你正在使用 JQuery Ajax，測試的方法與例子的方法是一模一樣的。你同樣可以使用 Sinon 中的 fake XMLHttpRequests。
當然，Sinon 中并不只有 fake XMLHttpRequest， 它還有 fake Server 用來模擬服務器響應，感興趣的話可以去 Sinon 的官網(wǎng)了解。