【rails】widthではなくデバイス判定の時のRspec

Ruby on Rails

browser gem

ボタンの表示・非表示の制御をcssのwidthでやることも可能だが、gemを使って判別させることも可能。
そこで使うのがbrowserというgem。

gem 'browser'

コレでPCかスマホかの判別はもちろん、使用しているブラウザが何かも判別できる。

# スマホかどうかの確認。
browser.device.mobile?

# ieか確認
browser.ie?

最近はchromをメインに開発しているのが、ieやedgeは挙動が異なることもあるのでコレを使うことで挙動の制御をしやすくなる。

Rspecをどうかくか問題

cssのwidthで制御しているのであればfeatureスペックを書くときにはサイズの変更をする必要がある。

Capybara.current_session.driver.browser.manage.window.resize_to(1200, 500)
# 1200がwidth, 500がheght

ところが、browserを使っているとサイズを変更したところでテストしているブラウザがPCだと変更する事ができない。 なので、User Agentを上書きする必要がある。

context 'ボタンの表示' do
  before do
    # 今回はひとまずiPhoneで設定
    user_agent = 'Mozilla/5.0 (iPhone; CPU iPhone OS 8_1 like Mac OS X) AppleWebKit/600.1.4 (KHTML, like Gecko) CriOS/38.0.2125.67 Mobile/12B411 Safari/600.1.4'
    Capybara.current_session.driver.header('User-Agent', user_agent)
  end

  context 'ボタンの表示' do
    ブラウザによって出し分ける確認
  end
end

まとめ

最近はレスポンシブデザインが基本になってきているからブラウザ判断はあまり必要ないかもしれないけど、写真撮影のボタン出し分けとかはスマホ特有の機能だったりするのでfeatureスペックを書くときには必要になるかも。