rails3-jquery-autocomplete：RSpecとCapybaraでテストする方法は？

Question

私はRailsのに

• 宝石 'jqueryのレール'、 '2.1.2'
• 宝石 'rails3-jqueryの - オートコンプリート'、 '1.0.9'
• 宝石と3.2.8を使用しています
'1.1.3'、宝石 'カピバラ'
'2.11.4'、 'レールRSpecの' 宝石 'カピバラ-webkitの'、 '0.12.1'

私は最近変換されましたオートコンプリートへの選択ドロップダウン（私たち私の要求仕様を更新してオートコンプリートを記入しようとしています。

this gistに示すように、私のアプローチは、ヘルパーを作成することであった

：

def fill_autocomplete(field, options = {}) 
    fill_in field, :with => options[:with] 

    selector = "ul.ui-autocomplete a:contains('#{options[:select]}')" 

    page.should have_selector selector 
    page.execute_script "$(\"#{selector}\").mouseenter().click()" 
end 

私はWebkitのと、テストがこのメッセージで失敗したことをテストする場合：

expected css "ul.ui-autocomplete a:contains('Firstname Lastname')" to return something. 

私はセレンをテストする場合私がFirefoxでテストを進めるのを見ると、私はではありません。のドロップダウンリストが表示されます。ドロップダウンを待つためにsleep 3を追加することは役に立ちません。

私はcapybara-webkitに関連しているものの、やや古い問題があることを知っています。フィールドが埋め込まれたときにはすぐにぼやけてしまい、自動完成ピックリストが表示されなくなります。しかし、これはこれを働かせている他の人たちには気にならないようです。

現在、RSpecとCapybaraでrails3-jquery-autocompleteフィールドを含むフォームをテストすることはできますか？どうやって？そうでない場合は、手動で対応する非表示のidフィールドを入力する方法があるので、フォームが正しいデータを作成することをまだテストできますか？

Answer 1

最後に、少なくともセレンドライバでオートコンプリートテストが行​​われました。

解決策は、フィールドにフォーカスを置き、keydownイベントを発行することです。

ブラウザでの手動テストでこれを最初に確認しました。検索語をオートコンプリートフィールドに貼り付けるためにマウスを使用すると（Ctrl-Vではなく）、何も起こりません。ドロップダウンの選択リストは表示されません。これは明らかに、Capybaraがfill_inコマンドを送信したときに起こることに相当します。しかし、用語がフィールドに入った後、フォーカスがフィールド上にある間に、私が任意のキーに触れると、例えば、 Shiftキーを押すと、選択リストが表示されます。だから明らかに、ピックリストはキーが押されたときにのみ現れる。

def fill_autocomplete(field, options = {}) 
    fill_in field, :with => options[:with] 

    page.execute_script %Q{ $('##{field}').trigger("focus") } 
    page.execute_script %Q{ $('##{field}').trigger("keydown") } 
    selector = "ul.ui-autocomplete a:contains('#{options[:select]}')" 

    page.should have_selector selector 
    page.execute_script "$(\"#{selector}\").mouseenter().click()" 
end 

をし、このようにそれを呼び出す：

オプション1

一つの解決策は、次のように元の質問からの機能を拡張することである

fill_autocomplete "to_contact_name", with: "Jone", select: "Bob Jones" 

オプション2

def choose_autocomplete_result(item_text, input_selector="input[data-autocomplete]") 
    page.execute_script %Q{ $('#{input_selector}').trigger("focus") } 
    page.execute_script %Q{ $('#{input_selector}').trigger("keydown") } 
    # Set up a selector, wait for it to appear on the page, then use it. 
    item_selector = "ul.ui-autocomplete li.ui-menu-item a:contains('#{item_text}')" 
    page.should have_selector item_selector 
    page.execute_script %Q{ $("#{item_selector}").trigger("mouseenter").trigger("click"); } 
end 

このように呼ばれる：

fill_in "to_contact_name", :with => "Jone" 
choose_autocomplete_result "Bob Jones", "#to_contact_name" 

同様のアプローチは、主rails3-jqueryの、オートコンプリートGEMにSteak testから適応、このchoose_autocomplete_result続く標準FILL_INを使用します私はテストのために第2のアプローチを採用しました。 Seleniumテストではかなり信頼性が高いようですが、Webkitでは動作しません.Seleniumテストは比較的遅いので、あまりにも悪いです。 Webkitの下で動作するソリューションは大歓迎です！

Answer 2

page.execute_scriptを使用する代わりに、入力後に空白を入力して、イベントが起動するようにしました。

fill_in("query", :with => "ma") 
fill_in("query", :with => "") 
# autocomplete suggestions will come up 
all('.autocomplete div').first.should have_content("mango") 
# other assertions 

Answer 3

私自身も同じ痛みの点に突き当たった。これに数時間を費やした後、セレンとポルスタゲジストの両方と、sleep()の使用法の両方で働く良いヘルパーがいます。次のコードは、カピバラ2.1.0でテストされています。

def fill_autocomplete(field, options = {}) 
    fill_in field, with: options[:with] 

    page.execute_script %Q{ $('##{field}').trigger('focus') } 
    page.execute_script %Q{ $('##{field}').trigger('keydown') } 
    selector = %Q{ul.ui-autocomplete li.ui-menu-item a:contains("#{options[:select]}")} 

    page.should have_selector('ul.ui-autocomplete li.ui-menu-item a') 
    page.execute_script %Q{ $('#{selector}').trigger('mouseenter').click() } 
    end 

は基本的に、私はオートコンプリートを有効にするには​​イベントをトリガするためにJSを使用して、入力欄に記入するカピバラを教えてください。ただし、sleep()の代わりに、ドロップダウンリストが表示されるまで待つpage.should have_selector('ul.ui-autocomplete li.ui-menu-item a')を利用します。次にJSを使用してmouseenterイベントをトリガーし、をクリックします。 JS evalでやっているよりも良い方法があることを願っていますが、これが私が思いつく最も信頼できる解決策です。

Answer 4

誰もが（でも、このスレッドを読んだ後、私にしばらく時間がかかった）インスピレーションのためのいくつかのコードを必要とする場合、これは動作します：

 context "with 5 items results" do 
     before do 
      5.times { FactoryGirl.create(:item, title: "chinese " + random_string(5)) } 
      page.execute_script("$('input#search_param').val('chinese')") 
      page.execute_script("$('input#search_param').trigger('focus')") 
      page.execute_script("$('input#search_param').trigger('keydown')") 
     end 
     specify { page.evaluate_script("$('input#search_param').val()").should == 'chinese' } 
     specify { page.should have_css "#autocomplete-menu li", count: 5 } 
     end 

おかげマーク・ベリーのインスピレーションを得るため。私は/フォーカス/のMouseEnterイベントをKeyDownイベント発射するJavaScriptを注入する上では、このオプションを好む

find('#my_object_id').send_keys 'bob'

：

Answer 5

別のオプションは、カピバラsend_keys方法です。