Жасмин светильников и jQuery .on()

Question

У меня проблема с моей комплектом жасминов и с использованием нового метода регистрации событий jQuery .on().

Вот упрощенная версия моего fixuture:

<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> 

Вот CoffeeScript (который прекрасно работает на фактической странице, что его используется на):

$ -> 
    $('#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() 

Итак, моя догадка, что это что-то делать с заказом или скорости таким образом, что жасмин загружает прибор, а затем проходит испытания, но я не могу быть уверен. Может ли кто-нибудь указать мне в правильном направлении, почему это происходит и как я могу это исправить?

Answer 1

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

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