0

ジャスミンを使用してクリックイベントの後に 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>
4

2 に答える 2

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
于 2013-08-21T18:44:58.080 に答える
0

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>
于 2013-08-22T01:56:27.383 に答える