Rspec / jQuery オートコンプリートをテストする
UIにいろいろJavascript使うわけですが、やっぱりテストがね。しにくいよね。
タイプした時に候補を提案してくれるUIをテストするマクロです。
オートコンプリートとか自動補完とか呼ぶのかな。
spec/supports/fill_in_macros.rb
ruby
1
2
3
4
5
6
7
8
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
ruby
1
2
3
4
RSpec.configure do |config|
Dir[Rails.root.join("spec/supports/**/*.rb")].each{ |f| require f }
config.include FillInMacros
end
autocomplete_spec.rb
ruby
1
2
3
4
5
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
ruby
1
2
3
4
5
6
7
8
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
なかなかいいです。