jquery - Jasmine 在 click() 之后测试 ajax 请求

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

问题是您将事件绑定(bind)到脚本运行时不存在的元素，因为它将在 setUpHTMLFixture 可以创建 html 之前运行。您必须重构您的代码，以便您可以在测试中调用一个函数，该函数将在创建夹具后添加绑定(bind)。

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