2

ジャスミンスイートと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()

ですから、これはジャスミンがフィクスチャをロードしてからテストを実行する方法の順序または速度と関係があると思いますが、確信が持てません。なぜこれが起こるのか、そしてどうすればそれを修正できるのかについて、誰かが私を正しい方向に向けることができますか？

4

1 に答える 1

3

私の推測では、spec runner と一緒にスクリプトをロードしていると思います。スクリプトは、DOM の準備ができたときに実行されます。ただし、フィクスチャはその時点でまだロードされています。その結果、$('#rent_payment_schedule_container')は要素を選択しません。おそらく自分で確認できます。

いずれにせよ、テストで呼び出すことができる関数でスクリプトをラップすることで、それを回避できるはずです。

于 2012-05-20T20:57:40.850 に答える