PC用とスマートフォン用のRspecを書き分ける
概要
今時のwebサイトってPC用とスマートフォン用にUI作り分ける感じですよね？
ジョブメドレーでもjpmobile/jpmobile · GitHubを使って、PC用とスマートフォン用の画面を作り分けている。
そんな時に、featureテストを書くとしたら画面要素がそれぞれ違うので、テスト別々に書く必要がありますよね？
設定も含めて、どうやってPC用とスマートフォン用のテストをかき分けるかというお話です。
前提
gem 'jpmobile'を入れていることinclude Jpmobile::ViewSelectorを読み込んでること- PC用とスマートフォン用のテンプレートを用意していること
Rspecの設定
まずは、スマートフォン用画面へ切り替えるため、user agentを偽装する関数を用意する
# spec/features/sample_spec.rb
module FeatureHelpers
def switch_to_mobile
user_agent = 'Mozilla/5.0 (iPhone; CPU iPhone OS 8_1 like Mac OS X) AppleWebKit/600.1.4 (KHTML, like Gecko)'
user_agent += ' CriOS/38.0.2125.67 Mobile/12B411 Safari/600.1.4'
page.driver.header('User-Agent', user_agent)
end
end
これをrails_helperで読み込む（featureテストなのでtypeをfeatureにする）
# spec/features/sample_spec.rb config.include FeatureSpecHelpers, type: :feature
肝心のfeatureテストの書き方
# spec/features/sample_spec.rb
require 'rails_helper'
RSpec.feature 'サンプルページ', type: :feature do
context 'PC用' do
it 'トップページ' do
visit '/'
expect(page).to have_content 'PC'
end
end
context 'スマートフォン用' do
before(:each) do
switch_to_mobile
end
it 'トップページ' do
visit '/'
expect(page).to have_content 'スマートフォンー'
end
end
end
まとめ
下記のQiita記事のように他にも方法はあるっぽいが、 自分としては上記の方法が一番しっくりきたので、これで。
