Rails:如何编写一个测试，以确保几个字段在关闭时隐藏，但在打开时显示，并且具有正确的值

我如何编写一个测试，以确保一对字段隐藏时，切换关闭，但可见时切换打开?

我目前的测试通过了他们不应该通过的地方。正如您在下面看到的，我尝试了用Capybara测试have_field和xpath变体。(也尝试了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>