0

Working on an admin panel for an app I'm building, I built an option to "check all" of the check boxes in a particular column. On my localhost it is 100% working as intended; but when I went back to fix up my integration tests, I ran into a load of trouble getting it to work.

The 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>

The script:

$(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;
      });
    }
  });
});

And my attempt at the test:

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

Right now the test is failing on checkbox2.checked?.should == true. The syntax I'm using for this test is different than what I normally use, but it has been the only way I've been able to get it to properly check and uncheck. I'm certainly no expert at testing script like this - but I can't figure out what I'm doing wrong.

Any suggestions? Thanks!

Conner Smith
  • 383
  • 4
  • 7

2 Answers2

0

I've had a heck of a time setting checked in such a way. Have you looked at recommendations like those mentioned here: http://api.jquery.com/prop/

Basically this.checked = true does not reliably set the "checked" state across all browsers. I remember, in particular having big issues with this in IE7 and IE8.

danpickett
  • 2,046
  • 14
  • 18
  • I figured it out - the test was working correctly! I was using filter links which rendered in ajax - so when I switched my filter the js I had written would no longer work. I had switched filters in the test as well. As such I needed to use `$(document).on("click", "#email-all", function()` instead of `$('#email-all').click(function()`... – Conner Smith Dec 16 '13 at 20:35
0

I figured it out - the test was working correctly! I was using filter links which rendered the page in ajax - so when I switched my filter the js I had written would no longer work. I had switched filters in the test as well. As such I needed to use $(document).on("click", "#email-all", function() instead of $('#email-all').click(function()

Conner Smith
  • 383
  • 4
  • 7