我正在尝试测试一个非常简单的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文本。
有人知道我做错了什么吗?因为我确信我错过了一些我现在看不到的东西。
答案 0 :(得分:0)
使用同步AJAX
JS Test驱动程序和我所知道的大多数测试框架在处理异步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});
答案 1 :(得分:0)
我建议您使用js-test-driver提供的AsyncTestCase。它很好地处理异步过程。
将模拟的服务器方法添加到队列中的回调中,以便测试等待,直到调用“server”。像这样:
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()+"*");
});
};
注意:我还没有尝试过代码。希望没有错别字。 ;)