如何编写测试以确保在切换时隐藏几个字段但在切换时可见?
我目前的测试正在通过他们不应该的地方。正如您在下面看到的,我已经尝试过使用has_field和xpath变体来测试Capybara。 (也试过have_css,也没有运气。我也试图测试可见性,似乎没有测试,因为测试只是继续通过。)
我正在做TDD,所以在我通过之前需要我的测试失败,所以我想指出JavaScript尚未完成。完成后,需要将“结束时间”字段中显示的时间调整为开始时间+ 2小时(@default_finish_time)。目前它只显示与开始时间相同的时间。
因此,“结束时间”字段是否显示@default_finish_time的测试应该失败,但不是。有人知道发生了什么事吗?
非常感激,它目前正在努力。
describe "toggling the 'Add finish time?' toggle on", :js => true do
before {
@default_finish_time = starts.change(:hour => 2)
click_link "Add finish time?"
}
# Tests to ensure that toggling this on, with only a start date entered, means the
# finish date field inherits whatever's in the start date field and the finish time
# field inherits whatever's in the start time field + 2 hours (default event length).
it { should have_css("#end_datetime_fields",
visible: true) }
it { should have_field("End dates",
with: "#{starts.to_formatted_s(:formfield_date)}") }
it { should have_field("End time",
with: "#{starts.to_formatted_s(:formfield_time)}") }
it { should have_field("End time",
with: "#{@default_finish_time.to_formatted_s(:formfield_time)}",
visible: true) }
it { should have_xpath("//input[@value='#{starts.to_formatted_s(:formfield_time)}']") }
it { should have_xpath("//input[@value='#{starts.change(:hour => 2).to_formatted_s(:formfield_time)}']") }
我的观点:
<div class="control-group">
<div class="controls span12">
<% # If JS is enabled, end date & time fields are hidden for progressive-disclosure
# purposes and we need a toggle to display them upon user request.
%>
<%= link_to("Add finish time?", {}, id: "specify_end_time") %>
</div>
</div>
<div class="control-group" id="end_datetime_fields">
<div class="controls span2">
<%= f.input :end_date_text, as: :string,
:default => @event.end_date_text,
:input_html => { class: "date-field" },
:label => "End date" %>
</div>
<div class="controls span2">
<%= f.input :end_time_text, as: :string,
:default => @event.end_time_text,
:input_html => { class: "time-field" },
:label => "End time" %>
</div>
<div class="controls span2">
<%= link_to("Remove finish time", {}, id: "remove_end_time") %>
</div>
</div>
我的JavaScript:
<script>
$(document).ready(function(){
// Hide end date/time fields by default and display them
// only on user's request (when an end date or time need to be recorded).
if ( $("#event_end_date_text").val == "" ) {
$("#end_datetime_fields").hide();
}
$("#specify_end_time").click(function(){
// Load up fields using data from start date/time fields (if filled out)
$('#event_end_date_text').val(
$('#event_start_date_text').val()
);
$('#event_end_time_text').val(
// TODO: Add two hours to it before assigning the value to the field
$('#event_start_time_text').val()
);
// Show fields (ie., show the container they're in)
$("div#end_datetime_fields").show();
// Hide toggle
$("#specify_end_time").hide();
return false;
});
$("#remove_end_time").click(function(){
// Empty field contents
$("#event_end_date_text").val("");
$("#event_end_time_text").val("");
// Hide fields (ie., hide the container they're in)
$("div#end_datetime_fields").hide();
// Show toggle
$("#specify_end_time").show();
return false;
});
});
</script>
答案 0 :(得分:1)
因为更改受到Javascript的影响,Capybara / RSpec将无法接收它们。
如果你想测试Javascript逻辑,你会想要调查像Selenium或Jasime这样的东西