Ajax单元测试傻瓜教程
原文出处 :AJAX单元测试傻瓜教程 Ajax 请求经常容易发生错误,客户端发送的数据出问题,服务器端返回的数据有误都会导致 Ajax 请求错误。你不能保证与服务器的连接总是工作正常。Ajax请求需要将用户的输入发送给服务器并返回服务器响应,因此,对于数据的正确处理至关重要。 设置在我们开始单元测试之前,我们需要安装几个必须的工具。
测试运行器为了使事情简单,我们将直接在浏览器中运行测试。如果你更喜欢基于命令行的测试的话,测试运行的结果也将会和浏览器中的结果完全一致。 <!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> 注意 实例模块接下来,我们将创建一个基础的模块,该模块将会发送一些Ajax请求。我们将用它来向你们展示如何对Ajax进行单元测试。 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)); } }; 这段代码开起来应该很熟悉,我们写了两个函数,一个函数中使用 测试用例框架之后我们需要创建一个框架,在里面添加每个情景的测试集。该文件被命名为 chai.should(); describe('TestAPI',function() { //Tests etc. go here });
测试GET请求我们的示例模块中有一个 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 });
在每一次测试之后,我们使用了 现在,我们可以开始在 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); }); 我们定义了一个对象 testApi.get(function(err,result) { result.should.deep.equal(data); done(); }); 因为之前我们创建了 测试POST请求在我们的示例中还有一个向服务器发送数据的 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); }); 就和之前一样,我们首先定义了一个测试数据 错误测试作为最后一个示例,让我们来是测试一个失败的请求。因为网络连接中可能出现很多问题,同时服务器也可能出现问题,并且我们不应该让我们网站的用户对具体的错误信息感到疑惑,所以错误测试非常重要。 it('should return error into callback',function(done) { testApi.get(function(err,result) { err.should.exist; done(); }); this.requests[0].respond(500); }); 由于是错误测试,所以这一次我们不需要任何数据。我们调用了 总结Ajax请求的测试是很重要的,如果你能证明每一次请求都是正确的,那么你应用程序中的其他部分就能完全相信每一次 Ajax 请求得到的数据。假如你正在使用 JQuery Ajax,测试的方法与例子的方法是一模一样的。你同样可以使用 Sinon 中的 fake XMLHttpRequests。当然,Sinon 中并不只有 fake XMLHttpRequest, 它还有 fake Server 用来模拟服务器响应,感兴趣的话可以去 Sinon 的官网了解。 (编辑:李大同) 【声明】本站内容均来自网络,其相关言论仅代表作者个人观点,不代表本站立场。若无意侵犯到您的权利,请及时与联系站长删除相关内容! |