Ajax单元测试傻瓜教程

原文出处：AJAX单元测试傻瓜教程

Ajax 请求经常容易发生错误，客户端发送的数据出问题，服务器端返回的数据有误都会导致 Ajax 请求错误。你不能保证与服务器的连接总是工作正常。Ajax请求需要将用户的输入发送给服务器并返回服务器响应，因此，对于数据的正确处理至关重要。
但是由于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这两个文件，这两个文件作为我的实例模块和测试用例，我将会在接下来逐一介绍它们。

实例模块

接下来，我们将创建一个基础的模块，该模块将会发送一些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方法向服务器发送数据，这些都是最普通的 Ajax请求。我们在这里使用了@L_403_1@，它是一个免费的在线REST服务，你可以使用它提供的模拟数据，非常适合快速测试。

测试用例框架

之后我们需要创建一个框架，在里面添加每个情景的测试集。该文件被命名为test.js。

chai.should();

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

Mocha中使用describe来创建一个测试用例，该测试用例便是我们添加测试代码的地方。
chai.should()将允许我们使用 "should style" 断言。这意味着我们可以轻松的验证我们的测试结果，如：someValue.should.equal(12345)。

测试GET请求

我们的示例模块中有一个get函数，该函数可以被用来加载服务器传送过来的数据。我们将会创建一个测试函数来证明由服务器取到数据是一个JSON数据。但是该GET请求是由XMLHttpRequest发出的，由于我们测试的时候并没有服务器接收我们的数据，所以我们不能真的发出一个 Http 请求，那么我们如何才能避免真的发出请求呢？又如何能得到返回的数据呢？
别着急，这个时候就到了 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 并且将每一个被创建的 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时，它创建了一个请求。这个请求被存入了this.requests这个数组中，this.requests[0]就代表了这个请求。
通常来说，XMLHttpRequest 没有respond函数，这里的respond用来响应一个 fake request。我们在该响应中设置状态码为200，意思是成功响应。同时，我们将响应头中的Content-Type设置为text/json，这是因为我们传递的是 JSON 数据。respond函数中的最后一个参数表示响应体，我们将其设置为之前创建好的dataJson变量。
fake XMLHttpRequest 模拟了一个 GET 请求的响应，在得到响应之后，testApi.get中的回掉函数将会被调用。该回调函数中，我们将响应中得到的结果与data变量做对比：

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

因为之前我们创建了data和dataJson变量来代表传递的数据，所以如果响应正确，响应的数据应该被解析成一个对象。
现在，我们可以在浏览器中运行我们的测试了，打开test.html文件，你应该可以看到关于测试通过的信息。

测试POST请求

在我们的示例中还有一个向服务器发送数据的post函数，发送的数据是 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 请求不一样的地方是，这一次我们只需要验证要被发送的数据是否被正确的转换成了 JSON 格式，因为我们只需要保证 POST 请求中发出的数据是正确的，因此我们的回掉函数是空的。
该段代码中最后一行使用了一个断言来确定发送数据的正确性。与之前一样，我们使用了 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 发送了一个内部服务器错误的状态码 500 来触发错误处理程序。

总结

Ajax请求的测试是很重要的，如果你能证明每一次请求都是正确的，那么你应用程序中的其他部分就能完全相信每一次 Ajax 请求得到的数据。假如你正在使用 JQuery Ajax，测试的方法与例子的方法是一模一样的。你同样可以使用 Sinon 中的 fake XMLHttpRequests。当然，Sinon 中并不只有 fake XMLHttpRequest，它还有 fake Server 用来模拟服务器响应，感兴趣的话可以去 Sinon 的官网了解。

原文链接：https://www.f2er.com/ajax/162710.html