Rails:如何编写一个测试,确保切换时可以隐藏一些字段但是可见,并且在切换时具有正确的值?

时间:2013-03-29 14:19:03

标签: javascript ruby-on-rails rspec capybara

如何编写测试以确保在切换时隐藏几个字段但在切换时可见?

我目前的测试正在通过他们不应该的地方。正如您在下面看到的,我已经尝试过使用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>

1 个答案:

答案 0 :(得分:1)

因为更改受到Javascript的影响,Capybara / RSpec将无法接收它们。

如果你想测试Javascript逻辑,你会想要调查像Selenium或Jasime这样的东西