結合テストを書いていく②

#はじめに
前回下記の投稿で結合テストを行うファイルを作成しました。

結合テストを書いていく①

続きから投稿します。

#記述方法

このように前回ではファイルを作成し、exampleを整理しました。
この記述を1つづつ解説します。

.users_spec.rb

require 'rails_helper'

RSpec.describe "新規登録", type: :system do
  before do
    @user = FactoryBot.build(:user)
  end
  context 'ユーザーが新規登録ができる時' do
    it '正しい情報を入力すればユーザー新規登録ができてトップページに移動する' do
      # トップページに移動する
      # トップページにサインアップページへ遷移するボタンがあることを確認する
      # 新規登録ページへ移動する
      # ユーザー情報を入力する
      # サインアップボタンを押すとユーザーモデルのカウントが1上がることを確認する
      # トップページへ遷移したことを確認する
      # ログアウトボタンが表示されることを確認する
      # サインアップページへ遷移するボタンや、ログインページへ遷移するボタンが表示されていないことを確認する
    end
  end
end

###トップページに移動する

.rb

# トップページに移動する

まずはトップページに移動するを確認します。
この時使うものは,visitです。

visit 〇〇_pathと記述すると、~~のページに遷移する表現になります。
なのでトップページに移動というテストコードはこのようになります。

.rb

# トップページに移動する
visit root_path

###ボタンがあることを確認する

.rb

# トップページにサインアップページへ遷移するボタンがあることを確認する

次はボタンの確認です。
よくログインしていないユーザーには表示されないなど条件分岐でボタンが出現しない設定があリます。
そのため訪れたページにそのボタンがあるかを確認するコードを記述します。

page
visitで訪れた先のページの見える情報が格納されています。
しかしカーソルを合わせなければ見れない文字列は含まれません。

have_content
expect(page).to have_content('X')と記述すると、visitで訪れたpageの中に、Xという文字列があるかどうかを判断します。

have_no_content
have_contentの逆で、文字列が存在しないことを確かめる事ができます。

これで新規登録ボタンがあるかを判断します。

.rb

# トップページにサインアップページへ遷移するボタンがあることを確認する
expect(page).to have_content('新規登録')

###新規登録ページへ移動する

これは先程のvisitを使います。

.rb

# 新規登録ページへ移動する
  visit new_user_registration_path

###ユーザー情報を入力する

.rb

# ユーザー情報を入力する

テストコードで自動的にブラウザ上に文字列を入力する必要があります。
再現するためにはfill_inを使います。

fill_in
fill_in 'フォームの名前', with: '入力する文字列'と記述する事でフォームへの入力することができます。
しかし入力するためには入力する場所を指定しなければなりません。
そのとき検証ツールで確認します。

.rb

# ユーザー情報を入力する
fill_in 'Nickname', with: @user.nickname
  fill_in 'Email', with: @user.email
  fill_in 'Password', with: @user.password
  fill_in 'Password confirmation', with: @user.password_confirmation

入力する文字列に関しては事前にfactorybotでランダムに内容を作っておきます。

###クリックして新規登録
入力が終了すると登録ボタンをクリックします。その動作はfind('クリックしたい要素').clickで実施にクリックする事ができます。

###サインアップボタンを押すとユーザーモデルのカウントが1上がることを確認する
ボタンクリック後新規登録が完了します。するとuserモデルのレコードが1つ増えます。
ボタンクリック後にちゃんと増えているかの確認をchangeで記述します。

change
expect{ 何かしらの動作 }.to change { モデル名.count }.by(1)と記述することによって、モデルのレコードの数がいくつ変動するのかを確認できます。changeマッチャでモデルのカウントをする場合のみ、expect()ではなくexpect{}となります。

この何かしらの動作の中には登録ボタンをクリックした時が入ります。

.rb

# サインアップボタンを押すとユーザーモデルのカウントが1上がることを確認する
  expect{
    find('input[name="commit"]').click
  }.to change { User.count }.by(1)

トップページへ遷移したことを確認する

新規登録が終了すると自動的にトップページに遷移するようにしました。
なので今いるページがトップページである事を確認します。
そこで使うのがcurrent_pathです。

現在のページのパスを示します。
expect(current_path).to eq(root_path)と記述すれば、今いるページがroot_pathであることを確認できます。

.rb

# トップページへ遷移したことを確認する
  expect(current_path).to eq(root_path)

###ログアウトボタンが表示されることを確認する
これは最初に確認したhave_contentです。

.rb

# ログアウトボタンが表示されることを確認する
  expect(page).to have_content('ログアウト')

###サインアップページへ遷移するボタンや、ログインページへ遷移するボタンが表示されていないことを確認する

すでにログインしているため、新規登録ボタンやログインボタンは表示されません。その確認をします。

.rb

# サインアップページへ遷移するボタンや、ログインページへ遷移するボタンが表示されていないことを確認する
  expect(page).to have_no_content('新規登録')
  expect(page).to have_no_content('ログイン')

#最後に
テストコードを実行します。

ターミナル

% bundle exec rspec spec/system/users_spec.rb