CapybaraによるSystem specで使用したコマンド振り返り

この記事について

私が作成したテストを元に、使用したCapybaraのメソッドを解説します。
Capybaraの機能一覧を知りたい場合は下記を参考にすると良いと思います

Capybaraチートシート

rubydoc Module: Capybara::DSL

環境

Ruby 2.6.5
Rails 6.0.3.5
devise
Capybara

Capybaraとは？

統合テストを行う際に用いられるWeb上の操作を簡単に実行できるDSLを提供してくれるGemです。

実装内容

context 'コメントを削除できるとき' do
  it 'ログインしておりコメントを投稿したユーザーだと削除できる' do
    visit new_user_session_path                            #1
    fill_in 'user_email', with: comment_user.email         #2
    fill_in 'user_password', with: comment_user.password
    find('input[name="commit"]').click                     #3
    expect(current_path).to eq(root_path)
    click_link 'テストタイトル', href: article_path(article)   #4
    expect(current_path).to eq(article_path(article))
    expect(page).to have_link '削除', href: article_comment_path(article, comment)
    page.accept_confirm('本当に削除しますか？') do              #5
      click_link '削除', href: article_comment_path(article, comment)
    end
    expect(current_path).to eq(article_path(comment.article))
    expect(page).to have_content('コメントを削除しました')       
  end
end

#1 visit

visit以降に設定したパスへ移動し、この際のリクエストは必ずGETになります。
今回はgemのdeviseを導入して作成されたログインページへアクセスしています。

#2 fill_in

これはtext_fieldやtext_areaなどの入力を必要とする要素に指定した値を挿入するメソッドです
今回の例では**'user_email'**という属性値を持った要素に、事前に準備したユーザのEメールアドレスを指定しています。
**with:**はStringであれば良いので以下の様に直接打ち込んでも問題ありません。

 fill_in 'user_email', with: '[e-mail]'

#3 find, click

まずfindですがこれは指定した要素を見つけるメソッドです
そしてclickは文字通りクリックを行うメソッドです
findで要素を探して、clickでクリックするという動作になります

#4 click_link

これは指定した要素を持つリンクをクリックするメソッドです。
今回はテストタイトルという要素を持ったリンク要素をクリックしています。
linkと指定しているだけあってリンクでなければクリックできません。
リンクかボタンか判断に困ったらclick_onを使うのも手です。
これはどちらの要素であってもクリックを行なってくれます。

#5 accept_confirm

大トリです。これはHTML5のHTMLに独自にデータを持たせるデータ属性の一つであるdata-confirm属性の判定に用います。
まずdata-confirm属性ですが、これはaタグやformタグのsubmitボタンの属性に追加することでダイアログを表示してくれるものです

accept_confirmですがこれはダイアログを認可つまりOKという判定を行なってくれるメソッドです。
又引数にダイアログに表示される文字を入力する事で、data-confirmで指定した文言と、テストで判定したい文言を照らし合わせて判定してくれます。
記述は以下の様にaccept_confirmに引数を渡し、又ブロック変数でdata-confirmを発生させる要素を指定します。

page.accept_confirm('本当に削除しますか？') do              #5
  click_link '削除', href: article_comment_path(article, comment) # <-data-confirmを持った要素
end

まとめ

便利なGemですがその分覚えることも増えるため、自分のアプリ作成での計画性に合わせて学習していきたいところです。
テストも時間をかけ過ぎて他が疎かになったら、本末転倒ですからね。勿論テストは重要な部分ではありますが。