【rails】system spec（Capybaraを使いこなす）

※本サイトで紹介している商品・サービス等の外部リンクには、アフィリエイト広告が含まれる場合があります。

目次表示

テストをより正確にする

目次へ

テストをより正確にする

前回、have_contentだけでは不十分にな可能性があるとわかった

【rails】system spec

テストが「偶然」通ってしまったなんてことにならないよう、より正確にしていく

have_cssでより正確に

have_contentをhave_cssに書き換える

  it '記事一覧が表示される' do
    visit root_path
    articles.each do |article|
      expect(page).to have_css(article.title)
    end
  end

have_css　検証できること

cssが存在しているか
cssのクラスが持っているタグのテキストがarticle.titleと一致するか

実際にテストを書いてみる

例）commons/_article.html.hamlを見てみる

「card_title」クラスのテキストが「article.title」ならばok

コードを書き換える

  it '記事一覧が表示される' do
    visit root_path
    articles.each do |article|
      expect(page).to have_css('.card_title', text: article.title)
    end
  end

'.card_title'に対して、textがarticle.titleかどうかテストする

テストを実行してみる

bundle exec rspec spec/system/article_spec.rb

成功！

ページ内に指定した文字があるかどうか（have_content）より、

指定したクラスに指定した文字があるか（heve_css）のほうが正確なテストができる

click_onでクリック後の動作をテストする

記事をクリックしたら、記事詳細が表示されるかを検証する

click_onは、文字列を指定すると、合致する文字列のaタグをクリックしてくれる

  it '記事詳細を表示できる' do
    visit root_path

    article = articles.first
    click_on article.title
  end

ブラウザのトップ画面を立ち上げる（visit）
articles.firstをarticleと定義する
立ち上げたトップ画面内でarticle.titleを探し、クリックする（click_on）

urlを指定しなくていいので便利だけど、aタグ以外には使えないので注意

実際にテストを書いてみる

articles/show.html.hamlを見てみる

「article_title」クラスのテキストが「article_title」ならok

  it '記事詳細を表示できる' do
    visit root_path

    article = articles.first
    click_on article.title

    expect(page).to have_css('.article_title', text: article.title)
    expect(page).to have_css('.article_content', text: article.content.to_plain_text)
  end

titleだけじゃなくてcontentも必要なので書き足しておく

contentはインスタンスで取得してしまうので、.to_plain_textを忘れないこと

テストを実行してみる

require 'rails_helper'

RSpec.describe 'Article',type: :system do
  let!(:user) { create(:user) }
  let!(:articles) { create_list(:article, 3, user: user) }

  it '記事一覧が表示される' do
    visit root_path
    articles.each do |article|
      expect(page).to have_css('.card_title', text: article.title)
    end
  end

  it '記事詳細を表示できる' do
    visit root_path

    article = articles.first
    click_on article.title

    expect(page).to have_css('.article_title', text: article.title)
    expect(page).to have_css('.article_content', text: article.content.to_plain_text)
  end
end

↓ターミナル画面で実行してみる

bundle exec rspec spec/system/article_spec.rb

前述したテストと合わせて、ふたつとも成功！

Capybaraのチートシート

講座でおすすめされていたチートシート

参考

Capybaraチートシート – Qiita

Qiita

Capybaraはできることがたくさんある

#DAY15