Работая над панелью администратора для приложения, которое я создаю, я построил опцию "проверить все" флажков в определенном столбце. На моем localhost он работает на 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="✓" /><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=>"btn btn-success"}">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=>"btn btn-success"}">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
. Синтаксис, который я использую для этого теста, отличается от того, что я обычно использую, но это был единственный способ, которым я смог его правильно проверить и снять. Я, конечно, не специалист по тестированию сценария, как это, но я не могу понять, что я делаю неправильно.
Какие-либо предложения? Благодарю!
Я понял это - тест работал правильно! Я использовал ссылки на фильтры, которые отображали страницу в ajax - поэтому, когда я переключил свой фильтр, js, который я написал, больше не будет работать. Я также включил фильтры в тест. В качестве такового мне нужно было использовать $(document).on("click", "#email-all", function()
вместо $('#email-all').click(function()
У меня была checked
времени, checked
таким образом. Вы рассмотрели рекомендации, подобные тем, которые упомянуты здесь: http://api.jquery.com/prop/
В основном this.checked = true
не надежно устанавливает "проверенное" состояние во всех браузерах. Я помню, в частности, имея большие проблемы с этим в IE7 и IE8.
$(document).on("click", "#email-all", function()
мне нужно было использовать$(document).on("click", "#email-all", function()
вместо$('#email-all').click(function()
...