■

お疲れ様です！

昨日アウトプットするの忘れてしまった！

結構自分で決めたことをサボるとストレス感じる気がします。

前回の続きをアウトプットしようかと思います。

前回はvisit 〇〇_pathでトップページに遷移することを表現しました。

次は、ページ先にサインアップページへ遷移するボタンがあるか確認するコードです。

どういった記述をしたかというと

expect(page).to have_content('X')

と記述しました。

実際にvisitで訪れたpageのなかにXという文字列があるかどうか判断しています。

もちろんXの部分には"新規登録"を選択しています。

ちなみにpageはvisitで訪れた先のページの見える分だけの情報が格納されています。

次のステップは新規登録ページに移動するのとユーザー情報を入力するを考えます。

新規登録ページへは先程のvisitを使用して遷移先のパスを指定して表現します。

実際にブラウザに文字列を入力することを再現する必要があり、この時に使用するのがfill_inです。

fill_in 'フォームの名前', with: '入力する文字列'

のように記述することでフォームの入力を行うことができます。

ブラウザにて検証ツールを使い該当のidやフォームの名前を確認しコードを編集します。

続いてサインアップボタンを押すとユーザーモデルアカウントが1上がることを確認するために

find('クリックしたい要素').click

と記述します。

これで実際にクリックを表現できます。検証ツールを使い要素の確認をして編集します。

また、ユーザーモデルカウントが1上がるに対しては

expect{ 何かしらの動作 }.to change { モデル名.count }.by(1)

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

次にトップページへ遷移したことを確認するを取り組みます。

current_pathを使用して

expect(current_path).to eq(root_path)

と記述しました。

current_pathは現在いるページのパスを示してくれるものです。

次はカーソルを合わせるとログアウトボタンが表示されることを確認するテストコードです。

hoverを使って表現しました。

find('ブラウザ上の要素').hoverとすることで特定の要素にカーソルを合わせた時の動作を再現できます。

では最後にサインアップページへ遷移するボタンや、ログインページへ遷移するボタンが表示されていないことを確認するテストコードを記述していきます。

今回使うコードがhave_no_contentです。これは文字列が存在しないことを確かめるマッチャです。

なのでexpect(page).to have_no_content("存在して欲しくない文字列")と記述しました。

実際にターミナルに確認のためコマンドを打つと勝手にブラウザが起動して確認してくれる様子がわかります。

次回はできたら明日は、レスポンシブWebデザインについて学ぼうと思います。

ちなみに今転職活動中ですが面接ってやっぱり慣れなんですかね結構言いたいこと忘れてつまりながら話すとぎこちない気がして...。

恥ずかしくなってしまいます。

ではまた！