1

首先，我只想说下面的代码在现实中是有效的。它只是在茉莉花规格中失败。功能非常简单。When the check box with id "check_all" is selected, select all the other check boxes as well.

当我运行测试时，包括期望 #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>
4

1 回答 1

4

您正在check_all从该$函数运行，这意味着它在文档就绪事件之后运行。我猜您的测试运行得更快，这就是触发change事件不会影响复选框的原因。所以，要么：

  1. 将您的测试放在$包装器中，或者
  2. check_all将在页面中定义的脚本放在<body>. 然后你根本不需要使用$包装器。

第三种选择是将change事件处理程序绑定到的祖先上#check_all。例如，

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

（在 jQuery 1.7 之前，您将使用live而不是on。）这样，即使您的脚本从 运行<head>，您仍然不需要$包装器。

于 2012-03-24T13:32:23.150 回答