無法為“檢查所有”復選框編寫水豚/ poltergeist測試

Question

在正在構建的應用程序的管理面板上，我構建了一個選項來“選中所有”特定列中的復選框。 在我的本地主機上，它按預期工作100％； 但是當我回去修復集成測試時，卻遇到了很多麻煩，無法正常工作。

HTML：

<table class="table">
   <tr>
    <th>Account Name</th>
    <th>Status</th>
    <th>Email</th>
    <th>Approve</th>
    <th></th>
  </tr>
  <form accept-charset="UTF-8" action="/cpanel/client_actions" method="post"><div style="margin:0;padding:0;display:inline"><input name="utf8" type="hidden" value="&#x2713;" /><input name="_method" type="hidden" value="put" /><input name="authenticity_token" type="hidden" value="IhSJHcXcODzyrboTsk1i8AZIw23XEIQdTCod/UKqNws=" /></div>

        <tr>
          <td>Test Account</td>
          <td>Email not sent</td>
          <td><input class="email-client" id="email-client1" name="send_emails[]" type="checkbox" value="1" /></td>
            <td><input class="approve-client" id="approve-client1" name="approve_clients[]" type="checkbox" value="1" /></td>
          <td><a href="/cpanel/account_infos/1/edit" html="{:class=&gt;&quot;btn btn-success&quot;}">Edit</a></td>
        </tr>

        <tr>
          <td>Test Account4</td>
          <td>Email not sent</td>
          <td><input class="email-client" id="email-client3" name="send_emails[]" type="checkbox" value="3" /></td>
            <td><input class="approve-client" id="approve-client3" name="approve_clients[]" type="checkbox" value="3" /></td>
          <td><a href="/cpanel/account_infos/3/edit" html="{:class=&gt;&quot;btn btn-success&quot;}">Edit</a></td>
        </tr>
  <tr>
    <td></td>
    <td></td>
    <td>
      <p><input id="email-all" name="email-all" type="checkbox" value="1" /></p>
      <p>Select/Deselect All</p>
    </td>
    <td>
      <input id="approve-all" name="approve-all" type="checkbox" value="1" />
      <p>Select/Deselect All</p>
    </td>
    <td><input name="commit" type="submit" value="Save changes" /></td>
  </tr>
</form></table>

劇本：

$(function() {
  $('#email-all').click(function() {
    if (this.checked) {
      $('input[type="checkbox"].email-client').each(function() {
        this.checked = true;
      });
    } else {
      $('input[type="checkbox"].email-client').each(function() {
        this.checked = false;
      });
    }
  });
  $('#approve-all').click(function() {
    if (this.checked) {
      $('input[type="checkbox"].approve-client').each(function() {
        this.checked = true;
      });
    } else {
      $('input[type="checkbox"].approve-client').each(function() {
        this.checked = false;
      });
    }
  });
});

我在測試中的嘗試：

it "check all email box checks box for all records", :js => true, :focus => true do
  click_on "Approved"
  checkbox = find(:css, "#email-all")
  checkbox2 = find(:css, "#email-client#{client_approved.id}")
  checkbox.checked?.should == false
  check("email-all")
  checkbox.checked?.should == true
  checkbox2.checked?.should == true
  uncheck "email-all"
  checkbox.checked?.should == false
  checkbox2.checked?.should == false
end

現在測試在checkbox2.checked?.should == true上失敗。 我用於此測試的語法與我通常使用的語法不同，但這是我能夠對其進行正確檢查和取消檢查的唯一方法。 我當然不是測試這樣的腳本的專家-但是我不知道自己在做什么錯。

有什么建議么？ 謝謝！

Answer 1

我已經用這種方式checked了時間設置。 您是否看過像這里提到的建議： http : //api.jquery.com/prop/

基本上， this.checked = true不能在所有瀏覽器中可靠地設置“檢查”狀態。 我記得，尤其是在IE7和IE8中存在重大問題。

Answer 2

我知道了-測試工作正常！ 我使用的過濾器鏈接以ajax呈現頁面-因此，當我切換過濾器時，我編寫的js將不再起作用。 我也在測試中更換了過濾器。 因此，我需要使用$(document).on("click", "#email-all", function()而不是$('#email-all').click(function()