日韩性视频-久久久蜜桃-www中文字幕-在线中文字幕av-亚洲欧美一区二区三区四区-撸久久-香蕉视频一区-久久无码精品丰满人妻-国产高潮av-激情福利社-日韩av网址大全-国产精品久久999-日本五十路在线-性欧美在线-久久99精品波多结衣一区-男女午夜免费视频-黑人极品ⅴideos精品欧美棵-人人妻人人澡人人爽精品欧美一区-日韩一区在线看-欧美a级在线免费观看

歡迎訪問 生活随笔！

生活随笔

當前位置： 首頁 > 编程资源 > 编程问答 >内容正文

编程问答

Ajax单元测试傻瓜教程

發(fā)布時間：2025/4/16 编程问答 25 豆豆
生活随笔 收集整理的這篇文章主要介紹了 Ajax单元测试傻瓜教程 小編覺得挺不錯的,現在分享給大家,幫大家做個參考.

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

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

設置

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

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

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

測試運行器

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

<!DOCTYPE html> <html><head><title>Mocha Tests</title><link rel="stylesheet" href="node_modules/mocha/mocha.css"></head><body><div id="mocha"></div><script src="node_modules/mocha/mocha.js"></script><script src="node_modules/sinon/pkg/sinon-1.12.2.js"></script><script src="node_modules/chai/chai.js"></script><script>mocha.setup('bdd')</script><script src="testApi.js"></script><script src="test.js"></script><script>mocha.run();</script></body> </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));} };

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

測試用例框架

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

chai.should();describe('TestAPI', function() {//Tests etc. go here });

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

測試GET請求

我們的示例模塊中有一個get函數，該函數可以被用來加載服務器傳送過來的數據。我們將會創(chuàng)建一個測試函數來證明由服務器取到數據是一個JSON數據。但是該GET請求是由XMLHttpRequest發(fā)出的，由于我們測試的時候并沒有服務器接收我們的數據，所以我們不能真的發(fā)出一個 Http 請求，那么我們如何才能避免真的發(fā)出請求呢？又如何能得到返回的數據呢？
別著急，這個時候就到了 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就像他們的名字一樣，將會在每一次的測試前和測試后被調用。在每一個測試之前，我們實例化了一個 fake XMLHttpRequest 并且將每一個被創(chuàng)建的 fake request 放入了一個數組中，這些值被存儲在this.xhr和this.request中，這樣我們就可以在該測試中的其他函數中使用了。

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

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

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

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

測試POST請求

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

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

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

錯誤測試

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

it('should return error into callback', function(done) {testApi.get(function(err, result) {err.should.exist;done();});this.requests[0].respond(500); });

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

總結

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

總結

以上是生活随笔為你收集整理的Ajax单元测试傻瓜教程的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。