Тестирование изменения jquery для простой функции флажка

Во-первых, я просто хотел сказать, что приведенный ниже код работает на самом деле. Это только терпит неудачу в спецификации жасмина. Функция очень проста. Когда установлен флажок с идентификатором «check_all», также установите все остальные флажки.

Когда я запускаю тест, все, включая ожидание, что #check_all будет истинным, проходит, как и ожидалось. Однако мне трудно понять, почему все мои ожидания не оправдываются. Любой совет?

Функция:

window.check_all = () ->
  $('#check_all').change(->
    if $('#check_all').is(':checked')
      $('.checkbox').attr('checked', 'checked')
    else
      $('.checkbox').removeAttr('checked')
  )
$(check_all)

Контрольная работа:

describe 'checkbox', ->
  beforeEach ->
    loadFixtures 'checkbox'
  describe 'check_all', ->
    it 'checks all the checkboxes if check_all is checked', ->
      expect($('#check_all').is(':checked')).toBeFalsy()
      expect($('#question_1').is(':checked')).toBeFalsy()
      expect($('#question_2').is(':checked')).toBeFalsy()
      expect($('#question_3').is(':checked')).toBeFalsy()
      expect($('#question_4').is(':checked')).toBeFalsy()
      expect($('#question_5').is(':checked')).toBeFalsy()

      $('#check_all').attr('checked', 'checked')
      $('#check_all').change()

      expect($('#check_all').is(':checked')).toBeTruthy()
      expect($('#question_1').is(':checked')).toBeTruthy()
      expect($('#question_2').is(':checked')).toBeTruthy()
      expect($('#question_3').is(':checked')).toBeTruthy()
      expect($('#question_4').is(':checked')).toBeTruthy()
      expect($('#question_5').is(':checked')).toBeTruthy()

Светильник:

<p class="small gray"><input type="checkbox" name="check_all" id="check_all"> Select All</p>
<form accept-charset="UTF-8" action="" method="post">
    <ul class="library_questions">
        <li>
            <input class="checkbox" id="question_1" name="question[]" type="checkbox" value="1"/>
            Template Q1
        </li>
        <li>
            <input class="checkbox" id="question_2" name="question[]" type="checkbox" value="2"/>
            Template Q2
        </li>
        <li>
            <input class="checkbox" id="question_3" name="question[]" type="checkbox" value="3"/>
            Template Q3
        </li>
        <li>
            <input class="checkbox" id="question_4" name="question[]" type="checkbox" value="4"/>
            Template Q4
        </li>
        <li>
            <input class="checkbox" id="question_5" name="question[]" type="checkbox" value="5"/>
            Instructions
        </li>
    </ul>
    <input class="purple submit_button" name="commit" type="submit" value="Submit"/>
</form>

person John    schedule 23.03.2012    source источник
comment
Можете ли вы jsFiddle некоторые из них. Может быть, расширить этот. Я начал получать check_all для правильной работы и лучше использовать jQuery, чем я вижу в вашем примере.   -  person SpYk3HH    schedule 24.03.2012


Ответы (1)


Вы запускаете check_all из функции $, что означает, что она запускается после события готовности документа. Я предполагаю, что ваш тест запускается раньше, поэтому запуск события change не влияет на флажки. Итак, либо:

  1. Поместите свои тесты в оболочку $ или
  2. Поместите скрипт, который определяет check_all на вашей странице, в конце <body>. Тогда вам вообще не нужно использовать обертку $.

Третьим вариантом может быть привязка обработчика событий change к предку #check_all. Например,

$(document).on('change', '#check_all', -> ...)

(До jQuery 1.7 вы должны были использовать live вместо on.) Таким образом, даже если ваш скрипт запускается из <head>, вам все равно не понадобится оболочка $.

person Trevor Burnham    schedule 24.03.2012
comment
Спасибо за ответ, но ни один из этих вариантов не привел к прохождению теста. Любые другие идеи? - person John; 26.03.2012
comment
Я почти уверен, что проблема именно в этом... попробуйте запустить window.checkAll() с начала describe 'check_all', ->. - person Trevor Burnham; 26.03.2012