1

まず、以下のコードが実際に機能していると言いたかっただけです。ジャスミン仕様で失敗しているだけです。機能はとてもシンプルです。IDが「check_all」のチェックボックスが選択されている場合は、他のすべてのチェックボックスも選択します。

テストを実行すると、＃check_allがtrueであると期待するまでのすべてが、期待どおりに合格します。しかし、なぜ私の期待がすべて通っていないのか理解するのに苦労しています。何かアドバイス？

働き：

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>ます。$そうすれば、ラッパーを使用する必要はまったくありません。

3番目のオプションは、代わりchangeにの祖先にイベントハンドラーをバインドすることです。#check_all例えば、

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

（jQuery 1.7より前では、live代わりにを使用していましonた。）そうすれば、スクリプトがから実行された場合でも、ラッパー<head>は必要ありません。$

于 2012-03-24T13:32:23.150 に答える