20200916_アウトプット

学習した内容（大まか）

結合コードについて　4時間45分

自分の言葉で説明すると・・

今日は、結合コードのテストコードについて学びました。

結合コードとは、ユーザーがたどる一連の流れを再現し、ターミナル上でエラーがないか確認できるものです。（実際に画面が勝手に動くので、面白いです。）

結合コードを行うには「system spec」という仕組みを使います。「system spec」を使うには、「Capybara(カピバラ)」というgemを使います。

しかし、Railsにはデフォルトで導入されているため、インストールする必要はありません。

rails g rspec:system users 

上記を入力して、必要なディレクトリとファイルを作成します。

新しい発見

1. Railsで、テストコードを書くには「rspec」も「Capybara」も両方必要。カピバラだけ単体で使用はできないため、カピバラ使うには、「rspec」を導入する必要がある。（その他、よりよくするgemとしてFactoryBotやFakerなど）
2. これから、記載していくが、「ユーザーが新規登録できた時・できなかった時」のテストだったため、１ユーザーがたどる流れなのに、なぜ複数形なのか疑問に感じた。結果としては、今回は１ユーザーがたどる流れだが、結合テストなので、様々な場面を想定して入力していくため複数形なのだと理解。

さて、今回は「ユーザーが登録できた時・できなかった時」を想定して（exampleを整理して）テストコードを書きます。

 

ユーザー新規登録ができるとき

正しい情報を入力すればユーザー新規登録ができてトップページに移動する

トップページに移動する

カピバラでは「ページを遷移すること」を「visit」で表現します。

visit root_path

トップページにサインアップページへ遷移するボタンがある

トップページ対し「新規登録」というボタンがページ内にきちんと見える状況にあるか確認します。

expect(page).to have_content('新規登録')

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

ルートパスと同じく、遷移する時は「visit」を使い、ターミナルで「rails routes」を実行したときにでた「新規登録ページ」のプレフィックスを使用します。

visit new_user_registration_path

ユーザー情報を入力する

入力していることを再現するには「fill_in(フィルイン)」を使います。

fill_in'フォームの名前', with:'入力する文字列'で表現します。

今回、入力する文字列には、FactoryBotとその中にFakerを使用しています。

fill_in 'Nickname', with: @user.nickname

※今回作っている入力フォームと同じように、Eメールやパスワード、パスワードの確認を入力します。（割愛）

サインアップボタンを押すとユーザーモデルのカウントが1上がる

ここで重要な考え方は、必要項目を入力した後に、「サインアップボタン」を押すと、同時にユーザーモデルがカウントされるということです。

カウントするマッチャは「change」です。波括弧を使います。

また、押すときには「find(”クリックしたい要素”).click」で表現します。

expect{find('input[name="commit"]').click

}.to change { User.count }.by(1)

トップページへ遷移する

今いるページが「トップページか」という場合には「current_path」を使います。

expect(current_path).to eq root_path

カーソルを合わせるとログアウトボタンが表示される

カーソルを合わせたときを表現するには「find("ブラウザ上の要素").hover」を使用します。

expect(

find(".user_nav").find("span").

).to have_content('ログアウト')hover

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

現在「ログイン中でサインイン」している状況なので、そこに「新規登録」「ログイン」が見える状況にあってはおかしいため確認します。

expect(page).to have_no_content('新規登録')

expect(page).to have_no_content('ログイン')

ユーザー新規登録ができないとき

誤った情報ではユーザー新規登録ができずに新規登録ページへ戻ってくる

トップページに移動する

割愛します（できた時と同様）

トップページにサインアップページへ遷移するボタンがある

割愛します（できた時と同様）

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

割愛します（できた時と同様）

ユーザー情報を入力する

ここでは「入力情報が空欄だった時」を表現します。

fill_in 'Nickname', with:””

※今回作っている入力フォームと同じように、Eメールやパスワード、パスワードの確認を入力します。（割愛）

サインアップボタンを押してもユーザーモデルのカウントは上がらない

先ほどと違うところはカウントされないため、「０」になるということです。

expect{find('input[name="commit"]').click

}.to change { User.count }.by(０)

 
新規登録ページへ戻される

最後に今回は登録できなかったので「サインインページ」にとどまります。（登録できていないのに、ログイン中ページなどに行かないか確認）

expect(current_path).to eq user_registration_path

新しい発見

ターミナルの「rails routes」 についてです。

「プレフィックス」が空白のものは「プレフィックスがない」と思っていました。

そうしたら、「上のと同じなので省略して書いていないだけ」ということを学びました。

最後に実行

 bundle exec rspec spec/system/users_spec.rb

 

挙動を開始し、ターミナル上で「緑」であれば、完了です。

わからないこと（積み残し）

• なし 

最近の学習法

最近は、徒歩通勤なので朝インプットして、話しながら歩いています（笑）

意外と、意味や役割について理解できない部分だけでてこないので、

その部分を帰宅してから、また学んでいます。

以上です！

誤っていた時は、ぜひコメントで教えてください！