結合テストコードを書く方針
結合テストコードを書く方針は、ユーザーがたどる一連の流れを確認することです。
今回は、以下のexampleについてテストしました。
-
ユーザー新規登録できるとき
- 正しい情報を入力すればユーザー新規登録できてトップページに移動する
- トップページに移動する
- トップページにサインアップページへ遷移するボタンがあることを確認する
- 新規登録ページへ移動する
- ユーザー情報を入力する
- サインアップボタンを押すとユーザーモデルのカウントが1上がることを確認する
- トップページへ遷移したことを確認する
- カーソルを合わせるとログアウトボタンが表示されることを確認する
- サインアップページへ遷移するボタンや、ログインページへ遷移するボタンが表示されていないことを確認する
- 正しい情報を入力すればユーザー新規登録できてトップページに移動する
RSpec.describe 'ユーザー新規登録', type: :system do
before do
@user = FactoryBot.build(:user)
end
context 'ユーザー新規登録ができるとき' do
it '正しい情報を入力すればユーザー新規登録ができてトップページに移動する' do
visit root_path
expect(page).to have_content('新規登録')
visit new_user_registration_path
fill_in 'ニックネーム', with: @user.nickname
fill_in 'Eメール', with: @user.email
fill_in 'パスワード', with: @user.password
fill_in 'パスワード(確認用)', with: @user.password_confirmation
expect{
find('input[name="commit"]').click
}.to change { User.count }.by(1)
expect(current_path).to eq(root_path)
expect(
find('.user_nav').find('span').hover
).to have_content('ログアウト')
expect(page).to have_no_content('新規登録')
expect(page).to have_no_content('ログイン')
end
end
end
以下にコードの説明をしました
- ルートパスに実際に遷移することを表現している
visit root_path
- visitで訪れたページの中に、'新規登録'という文字列があるかを判断してる
expect(page).to have_content('新規登録')
- 新規登録ページへ移動
visit new_user_registration_path
- ユーザー情報を入力
fill_in 'ニックネーム', with: @user.nickname
fill_in 'Eメール', with: @user.email
fill_in 'パスワード', with: @user.password
fill_in 'パスワード(確認用)', with: @user.password_confirmation
fill_in 'フォームの名前', with: '入力する文字列'のように記述することで、フォームへの入力を行うことができます。'フォームの名前'は検証ツールにて確認しました→<label for="user_nickname>ニックネーム</label>
- サインアップボタンを押すとユーザーモデルのカウントが1上がることを確認する
expect{
find('input[name="commit"]').click
}.to change { User.count }.by(1)
find('クリックしたい要素').clickと記述することで、実際にクリックができます。
expect{ 何かしらの動作 }.to change { モデル名.count }.by(1)と記述することによって、モデルのレコードの数がいくつ変動するのかを確認できます。
- トップページへ遷移したことを確認する
expect(current_path).to eq(root_path)
- カーソルを合わせるとログアウトボタンが表示されることを確認する
expect(
find('.user_nav').find('span').hover
).to have_content('ログアウト')
find('ブラウザ上の要素').hoverとすることで、特定の要素にカーソルをあわせたときの動作を再現できます。今回、span要素は他でも使われているため、その親要素のuser_navクラスもあわせて指定しました。
- サインアップページへ遷移するボタンや、ログインページへ遷移するボタンが表示されていないことを確認する
expect(page).to have_no_content('新規登録')
expect(page).to have_no_content('ログイン')
have_no_contentは文字列が存在しないことを確かめるマッチャです。