Rspec / jQuery オートコンプリートをテストする

UIにいろいろJavascript使うわけですが、やっぱりテストがね。しにくいよね。
タイプした時に候補を提案してくれるUIをテストするマクロです。
オートコンプリートとか自動補完とか呼ぶのかな。

spec/supports/fill_in_macros.rb

module FillInMacros
  def fill_autocomplete(field, options = {})
    page.execute_script %Q{ $("#{field}").trigger('focus') }
    page.execute_script %Q{ $("#{field}").val("#{options[:with]}") }
    page.execute_script %Q{ $("#{field}").trigger('keydown') }
    expect(page).to have_selector('ul.ui-autocomplete li.ui-menu-item')
    all("ul.ui-autocomplete li.ui-menu-item", text: options[:with]).first.click
  end

なぜか ui-menu-item が複数見つかる時があったので、ひとまず first で横着しました。

  
rails_helper.rb

RSpec.configure do |config|
  Dir[Rails.root.join("spec/supports/**/*.rb")].each{ |f| require f }
  config.include FillInMacros
end

  
autocomplete_spec.rb

feature "Autocomplete"
    scenario "fill in country", js: true do
      fill_autocomplete "#country", with: "オーストラリア"
    end
end

  

タグ付けするUI

で、これを利用してタグを設定する時によくある、
リターンを押したらinputフィールドの中でラベルっぽくなるUIのテストもやってみた。
tag-label はラベルデザインのCSSクラスという想定です。
Javascript側では、エンターを離したタイミングでタグを確定させています。

spec/supports/fill_in_macros.rb

module FillInMacros
  def fill_tag_and_enter(field, options = {})
    page.execute_script %{ $("#{field}").trigger('focus') }
    page.execute_script %{ $("#{field}").val("#{options[:with]}") }
    page.execute_script %{ $("#{field}").trigger($.Event('keyup', {keyCode: 13})) }
    expect(page).to have_css(".tag-label", text: options[:with])
  end
end

  
なかなかいいです。

何かありましたらコメントをどうぞ

comments powered by Disqus

人気の記事

950 Points チリ出身のギタリストが弾くドラゴンボールZがむちゃくちゃかっこいい…
774 Points Wordpress + Heroku + PostgreSQL + Amazon S3 = ¥0 / 無料でサイト運営
700 Points Rubyのチートシート 変数 / クラス / モジュール
524 Points Rubyのチートシート / アクティブサポート
451 Points 紙のデザイナーがウェブ開発できるようになるまでに必要なこと
435 Points Rails / Google Analyticsのデータを使って分析や管理画面のためのグラフをつくる
323 Points RailsとHerokuでノーティフィケーションをプッシュする / PusherとTurbolinksの兼ね合い
222 Points Rails / RSpec テスト書いたことない メンドクサイ(n´Д`)という時のチートシート
193 Points Rails / Ajaxを使って画面遷移しない一時保存機能をつける
193 Points Protractorでスクレイピングしてみた