如何使用Jasmine验证jQueryAjax事件?

我试图使用Jasmine为基本的jQueryAjax请求编写一些BDD规范。我目前正在独立模式下使用Jasmine(即通过SpecRunner.html)。我已经将SpecRunner配置为加载jquery和其他.js文件。你知道为什么下面的方法不起作用吗?“你回来了”并没有成为现实,甚至认为“雅皮士!”警报显示的很好

description(“jQuery ajax请求应该能够获取…”),function(){
它(“来自文件系统的XML文件”,function()){
$.ajax\u get\u xml\u request={has\u returned:false};
//启动AJAX请求
$.ajax({type:“GET”,url:“addressbook_files/addressbookxml.xml”,数据类型:“xml”,
成功:函数(xml){alert(“yuppi!”);$.ajax\u get\u xml\u request.has\u returned=true;}});
//等待已返回为真(超时:3s)
waitsFor(function(){$.ajax\u get\u xml\u request.has\u returned;},“JQuery ajax get to return”,3000);
//TODO:其他测试可能会检查XML文件的大小,它是否是有效的XML
expect($.ajax\u get\u xml\u request.has\u返回);
}); 
});

如何测试回调是否已被调用?任何指向与使用Jasmine测试异步jQuery相关的博客/资料的指针都将不胜感激

我想你可以做两种类型的测试:

  1. 模拟AJAX请求的单元测试(使用Jasmine的spies),使您能够测试在AJAX请求之前运行的所有代码,以及在AJAX请求之后运行的所有代码。您甚至可以使用Jasmine来伪造服务器的响应。这些测试会更快,而且不需要处理异步行为,因为没有任何真正的AJAX
  2. 执行真实AJAX请求的集成测试。这些需要是异步的

茉莉花可以帮你做这两种测试

下面是一个示例,说明如何伪造AJAX请求,然后编写一个单元测试来验证伪造的AJAX请求是否指向正确的URL:

它(“应该向正确的URL发出AJAX请求”,函数(){
spyOn($,“ajax”);
getProduct(123);
expect($.ajax.mostRecentCall.args[0][“url”]).toEqual(“/products/123”);
});
函数getProduct(id){
$.ajax({
键入:“获取”,
url:“/products/”+id,
contentType:“应用程序/json;字符集=utf-8”,
数据类型:“json”
});
}

对于茉莉花2.0请改用:

expect($.ajax.calls.mostRecent().args[0][“url”]).toEqual(“/products/123”);

如本答复所述

下面是一个类似的单元测试,用于验证在AJAX请求成功完成时是否执行了回调:

它(“成功时应执行回调函数”,函数(){
spyOn($,“ajax”).andCallFake(函数(选项){
选项。成功();
});
var callback=jasmine.createSpy();
getProduct(123,回调);
expect(callback).toHaveBeenCalled();
});
函数getProduct(id,回调){
$.ajax({
键入:“获取”,
url:“/products/”+id,
contentType:“应用程序/json;字符集=utf-8”,
数据类型:“json”,
成功:回调
});
}

对于茉莉花2.0请改用:

spyOn($,“ajax”)和.callFake(函数(选项){

如本答复所述

最后,您在其他地方暗示,您可能希望编写生成真正AJAX请求的集成测试,以达到集成目的。这可以使用Jasmine的异步特性完成:waits()、waitsFor()和runs()

它(“应该发出真正的AJAX请求”,函数(){
var callback=jasmine.createSpy();
getProduct(123,回调);
waitsFor(函数(){
return callback.callCount>0;
});
运行(函数(){
expect(callback).toHaveBeenCalled();
});
});
函数getProduct(id,回调){
$.ajax({
键入:“获取”,
url:“data.json”,
contentType:“应用程序/json;字符集=utf-8”
数据类型:“json”,
成功:回调
});
}

发表评论