RSpec（ユーザー新規登録の結合テスト）

結合テストコードを書く方針

結合テストコードを書く方針は、ユーザーがたどる一連の流れを確認することです。

今回は、以下の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は文字列が存在しないことを確かめるマッチャです。