Приспособления Jasmine и jQuery .on()

У меня проблема с моим комплектом жасмин и использованием нового метода регистрации событий 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 загружает прибор, а затем запускает тесты, но я не могу быть уверен. Может ли кто-нибудь указать мне в правильном направлении, почему это происходит и как я могу это исправить?


person TheDelChop    schedule 18.05.2012    source источник


Ответы (1)


Я предполагаю, что вы загружаете свой скрипт вместе с исполнителем спецификаций. Ваш скрипт выполняется, когда ваш DOM готов. Прибор еще загружен в этот момент. В результате $('#rent_payment_schedule_container') не выберет ни одного элемента, в чем вы, вероятно, можете убедиться сами.

В любом случае вы сможете обойти это, завернув свой скрипт в функцию, которую вы можете вызывать в своих тестах.

person ggozad    schedule 20.05.2012