Question

我正在尝试使用jasmine在单击事件后测试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

问题是您将事件绑定到脚本运行时不存在的元素，因为它将在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

Answer 2

感谢Andreas 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>

茉莉花点击（）后测试ajax请求

2 个答案: