jQuery Ajax 测试不起作用答案

【问题标题】：jQuery Ajax test does not workjQuery Ajax 测试不起作用
【发布时间】：2012-04-13 10:50:16
【问题描述】：

我正在尝试测试一个非常简单的 jQuery 插件，它只需调用 $.ajax 方法并将其内容放入一个元素中。对于测试，我使用 JsTestDriver 和 Sinon 进行模拟。

插件文件外观：

(function($) {
    $.fn.transfer = function() {

    $.ajax({
        url : 'friends',
    type : 'GET',
    contentType : 'application/json',
    dataType : 'json',
    success : function(html) {
        console.log("-"+html+"-");
        console.log($(this));
        $(this).html(html);
        console.log("+"+$(this).html()+"+")
    }
});
};
})(jQuery);

理论上很简单的插件。

然后我写了一个单元测试模拟成功函数：

TestCase("Ajax ", {
    'test response' : function () {
        /*:DOC divElement = <div id="container" style="height: 100px;"></div>*/
        sinon.stub(jQuery, "ajax").yieldsTo(
            "success", 'alex');
        $(this.divElement).transfer();
        console.log("*"+$(this.divElement).text()+"*");
    }
});

这似乎也正确。然后如果你执行这个测试，下一行会通过控制台打印出来：

[LOG] -alex-

[LOG] [object Object]

[LOG] +null+

[LOG] **

所以成功函数正确接收“alex”字符串。然后打印 $(this) 引用，使用 html() 函数设置消息，当我记录以前的设置值时，返回 null。最后一条日志消息在测试文件中，您可以看到没有设置 ajax 文本。

有人知道我做错了什么吗？因为我确信我错过了一些现在我看不到的东西。

【问题讨论】：

console.log($(this));将引用 ajax 对象 - 而不是传递给插件的元素
您在测试中将 json dataType 与字符串混合，很难遵循您想要的内容

标签： javascript jquery ajax js-test-driver sinon

【解决方案1】：

使用同步 AJAX

我所知道的 JS 测试驱动程序和大多数测试框架在处理异步 javascript 时都存在一些问题，基本上异步调用的脱节性质搞砸了测试执行的顺序（想想：测试 2 在测试 1 完成之前开始执行） .因此，通过将全局异步属性设置为 jQuery.ajaxSetup()，尝试在测试期间使用同步 ajax 调用。

// Use synchronous AJAX
jQuery.ajaxSetup({async: false});

TestCase("Ajax ", {
    'test1' : function () {
        // etc...
    }
});

// Revert to default
jQuery.ajaxSetup({async: true});

【讨论】：

我不同意。 js-test-driver 支持测试异步函数。这不是我所说的容易，但它是可能的和可以理解的。据我了解，线程所有者没有遇到多个测试用例不同步但为使用异步行为的方法编写一个测试用例的问题。

【解决方案2】：

我推荐你使用 js-test-driver 提供的AsyncTestCase。它很好地处理异步进程。

将您的模拟服务器方法添加到队列中的回调中，以便测试等待“服务器”被调用。像这样的：

var AjaxTest = AsyncTestCase('AjaxTest');

AjaxTest.prototype.testResponse = function(queue) {
    /*:DOC divElement = <div id="container" style="height: 100px;"></div>*/

    queue.call('Set up mocked server', function(callbacks) {        
        var serverStub = sinon.stub(jQuery, "ajax").yieldsTo("success", 'alex');
        callbacks.add(serverStub);

        $(this.divElement).transfer();
    });

    queue.call('Make assertions here', function() {
        console.log("*"+$(this.divElement).text()+"*");
    });
};

注意：我还没有尝试过代码。希望没有错别字。 ;)

【讨论】：