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

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

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

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

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

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

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

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

接下來，我們將創(chuàng)建一個(gè)基礎(chǔ)的模塊，該模塊將會發(fā)送一些Ajax請求。我們將用它來向你們展示如何對Ajax進(jìn)行單元測試。
我們將該文件命名為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));
    }
};

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

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

chai.should();

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

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

我們的示例模塊中有一個(gè)get函數(shù)，該函數(shù)可以被用來加載服務(wù)器傳送過來的數(shù)據(jù)。我們將會創(chuàng)建一個(gè)測試函數(shù)來證明由服務(wù)器取到數(shù)據(jù)是一個(gè)JSON數(shù)據(jù)。但是該GET請求是由XMLHttpRequest發(fā)出的，由于我們測試的時(shí)候并沒有服務(wù)器接收我們的數(shù)據(jù)，所以我們不能真的發(fā)出一個(gè) Http 請求，那么我們?nèi)绾尾拍鼙苊庹娴陌l(fā)出請求呢？又如何能得到返回的數(shù)據(jù)呢？
別著急，這個(gè)時(shí)候就到了 Sinon 出場了。我們一開始在就在test.html中引用了 Sinon 的庫，有了 Sinon，我們就可以模擬服務(wù)器響應(yīng)。我們可以將XMLHttpRequest用一個(gè)替身來代替，我們稱之為 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)用。在每一個(gè)測試之前，我們實(shí)例化了一個(gè) fake XMLHttpRequest 并且將每一個(gè)被創(chuàng)建的 fake request 放入了一個(gè)數(shù)組中，這些值被存儲在this.xhr和this.request中，這樣我們就可以在該測試中的其他函數(shù)中使用了。

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

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

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);
});

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

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

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

在我們的示例中還有一個(gè)向服務(wù)器發(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);
});

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

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

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

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

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

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