Jasmine 固定装置和 jQuery .on()答案

【问题标题】：Jasmine fixtures and jQuery .on()Jasmine 固定装置和 jQuery .on()
【发布时间】：2012-05-25 14:46:17
【问题描述】：

我的 jasmine 套件和我对 jQuery 的新事件注册方法 .on() 的使用有问题。

这是我的夹具的简化版本：

<div id='rent_payment_schedule_container'>
  <select class="select optional" id="frequency_select" name="payment_schedule[frequency]">
    <option value="0">Monthly</option>
    <option value="1">Weekly</option>
    <option value="2">Bi-Weekly</option>
  </select>

  <div class="control-group select optional start-day-select" id="monthly_select"></div>

  <div class="control-group select optional start-day-select" id="weekly_select" style="display: none;"></div>
</div>

这是咖啡脚本（在使用它的实际页面上运行良好）：

$ ->
  $('#rent_payment_schedule_container').on 'change', '#frequency_select', (event) ->
    $('.start-day-select').hide()

    switch $(event.target).val()
      when '0'
        $('#monthly_select').show()
      when '1'
        $('#weekly_select').show()
      when '2'
        $('#weekly_select').show()

这是规格：

describe 'The UI components on the payment schedule creation page', ->
  beforeEach ->
    loadFixtures 'payment_schedule'

  describe 'The toggling of the monthly and weekly day select options', ->

    it 'shows the weekly select div and hides the monthly select div when the weekly option is selected from the #frequency_select select box', ->
      $('#frequency_select option[value=1]').attr('selected', 'selected')
      $('#frequency_select').change()
      expect($("#weekly_select")).toBeVisible()

    it 'shows the weekly select div and hides the monthly select div when the bi-weekly option is selected from the #frequency_select select box', ->
      $('#frequency_select option[value=2]').attr('selected', 'selected')
      $('#frequency_select').change()
      expect($("#weekly_select")).toBeVisible()

    it 'shows the monthly select div and hides the weekly select div when the monthly option is selected from the #frequency_select select box', ->
      $('#frequency_select option[value=1]').attr('selected', 'selected')
      $('#frequency_select').change()
      $('#frequency_select option[value=0]').attr('selected', 'selected')
      $('#frequency_select').change()
      expect($("#monthly_select")).toBeVisible()

而且每次都失败得很惨。

但是，如果我不使用$('#rent_payment_schedule_container') 作为.on() 的接收者，而是使用$(document)，那么整个事情就很好了。

$ ->
  $(document).on 'change', '#frequency_select', (event) ->
    $('.start-day-select').hide()

    switch $(event.target).val()
      when '0'
        $('#monthly_select').show()
      when '1'
        $('#weekly_select').show()
      when '2'
        $('#weekly_select').show()

所以，我最好的猜测是，这与 jasmine 加载夹具然后运行测试的方式的顺序或速度有关，但我不能确定。谁能指出我正确的方向，为什么会发生这种情况以及我该如何解决？

【问题讨论】：

标签： javascript jquery coffeescript jasmine jasmine-jquery

【解决方案1】：

我的猜测是您将脚本与规范运行程序一起加载。当你的 DOM 准备好时，你的脚本就会执行。不过，此时夹具尚未加载。结果，$('#rent_payment_schedule_container') 将不选择任何元素，您可能可以自己验证。

无论如何，您应该能够通过将脚本包装在一个可以在测试中调用的函数中来解决这个问题。

【讨论】：