0

オフにするといくつかのフィールドが非表示になり、オンにすると表示されるようにするテストを作成するにはどうすればよいですか?

私の現在のテストは、あるべきではないところに合格しています。以下に示すように、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>
4

1 に答える 1

1

変更は Javascript によって行われるため、Capybara/RSpec はそれらを取得できません。

Javascript ロジックをテストする場合は、Selenium や Jasime などを調査する必要があります。

于 2013-03-29T14:36:28.137 に答える