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()

麻烦编写capybara / poltergeist测试“全部检查”复选框

2 个答案: