Jasmine在点击后测试ajax请求（）

Question

我想在使用茉莉花发生单击事件后测试ajax调用。我尝试了一堆不同的东西来获得点击被识别，但无法设法让ajax发射。

这里是我的测试文件：

# use require to load any .js file available to the asset pipeline 
#= require jquery 
#= require jquery_ujs 
#= require jquery.ui.all 
#= require jquery.scrollTo.min 
#= require application/save_search 

setUpHTMLFixture = -> 
    loadFixtures "home_page" 

describe "save_search", -> 
    beforeEach -> 
    setUpHTMLFixture() 

    it "should get the list of friends and insert it in the page", -> 
    print $("#save-search") 
    spyOn jQuery, "ajax" 
    $("#save-search").click() 
    print $("#save-search") 
    jQuery.ajax.mostRecentCall.args[0].success "Something" 
    expect($("#save-search").length).toBe 2 

我的代码：

jQuery -> 

    $("#save-search").click -> 
    draggables = undefined 
    draggables = {} 
    jQuery.each jQuery(".ui-draggable"), (index, draggable) -> 
     child = undefined 
     parentId = undefined 
     classes = undefined 
     left = undefined 
     offset = undefined 
     top = undefined 
     value = undefined 
     draggable = jQuery(this) 
     parentId = draggable.parent().attr("id") 
     child = draggable.children() 
     value = child.val() 
     classes = draggable.attr("class").replace(/ui-draggable|down|cloner|\s/g, "") 
     key = classes + index 
     offset = draggable.offset() 
     left = offset.left 
     top = offset.top 
     draggables[key] = 
     value: value 
     left: left 
     top: top 
     parent_id: parentId 

    draggables["name"] = $("#search-name").val() 

    $.ajax 
     type: "POST" 
     url: "/searches/save_search" 
     data: 
     draggables: JSON.stringify(draggables) 

     dataType: "json" 
     success: (msg) -> 
     alert "Data Saved: " + msg 

     false 

我的灯具：

<a id="save-search">Save Search</a> 

<div class="ui-draggable">some stuff</div> 

<div class="ui-draggable">some stuff</div> 

Answer 1

由于安德烈亚斯Koberle的答案，我得到它的工作。

下面是代码：

window.addEvent = -> 
    $("#save-search").click -> 
    # Do stuff like define value here... 

    $.ajax 
     type: "POST" 
     url: "/your/url/here" 
     data: 
     key: value 

     dataType: "json" 
     success: (msg) -> 
     alert "Your message here" 

     false 

jQuery -> addEvent() 

下面是测试：

setUpHTMLFixture = -> 
    loadFixtures "your_fixture" 

describe "save_search", -> 
    beforeEach -> 
    setUpHTMLFixture() 

    it "should call ajax with your url", -> 
    addEvent() 
    spyOn jQuery, "ajax" 
    $("#save-search").click() 
    expect($.ajax.mostRecentCall.args[0]["url"]).toEqual("/your/url/here") 

夹具：your_fixture.html

<a id="save-search">Save Search</a> 

<div class="ui-draggable">some stuff</div> 

<div class="ui-draggable">some stuff</div> 

Answer 2

的问题是，你的事件绑定到做一个元素当脚本运行时不存在，因为它将在setUpHTMLFixture可以创建html之前运行。你必须重构你的代码，这样你就可以在测试中调用一个函数，在创建灯具后添加绑定。

window.addEvent = -> 
    $("#save-search").click -> 
    draggables = undefined 
    draggables = {} 
    jQuery.each jQuery(".ui-draggable"), (index, draggable) -> 
     child = undefined 
     parentId = undefined 
     classes = undefined 
     left = undefined 
     offset = undefined 
     top = undefined 
     value = undefined 
     draggable = jQuery(this) 
     parentId = draggable.parent().attr("id") 
     child = draggable.children() 
     value = child.val() 
     classes = draggable.attr("class").replace(/ui-draggable|down|cloner|\s/g, "") 
     key = classes + index 
     offset = draggable.offset() 
     left = offset.left 
     top = offset.top 
     draggables[key] = 
     value: value 
     left: left 
     top: top 
     parent_id: parentId 

    draggables["name"] = $("#search-name").val() 

    $.ajax 
     type: "POST" 
     url: "/searches/save_search" 
     data: 
     draggables: JSON.stringify(draggables) 

     dataType: "json" 
     success: (msg) -> 
     alert "Data Saved: " + msg 

     false 

jQuery -> addEvent 

并在测试

setUpHTMLFixture = -> 
    loadFixtures "home_page" 

describe "save_search", -> 
    beforeEach -> 
    setUpHTMLFixture() 

    it "should get the list of friends and insert it in the page", -> 
    addEvent() 
    print $("#save-search") 
    spyOn jQuery, "ajax" 
    $("#save-search").click() 
    print $("#save-search") 
    jQuery.ajax.mostRecentCall.args[0].success "Something" 
    expect($("#save-search").length).toBe 2