编写capybara/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

我想出来了-测试正常！我使用的是过滤器链接，它在ajax中呈现页面-因此，当我切换筛选器时，我编写的js将不再工作。我在测试中也换了过滤器。因此，我需要使用$(document).on("click", "#email-all", function()而不是$('#email-all').click(function()

Answer 2

我经历了一段时间以这样的方式设置checked。你看过像这里提到的那些建议吗：http://api.jquery.com/prop/

基本上，this.checked = true并不能在所有浏览器上可靠地设置“检查”状态。我记得，尤其是在IE7和IE8中，这方面有很大的问题。