RSpecを使ってメモアプリのテストを書いてみました ~RSpec入門~

はじめに

現在、『現場で使える Ruby on Rails 5速習実践ガイド』を手を動かしながら進めている最中ですが、今日テストの章に入りました。

紹介されているRSpecに感動しました🤩短い時間で、パパッと不具合がわかるなんて素晴らしい‼️

そこで、今回は学んだRSpecを使ってみたいと思い、『現場で使える Ruby on Rails 5速習実践ガイド』を参考にさせていただきながら、先日作成したメモアプリのテストを書いてみました。

環境

Mac OS Catalina 10.15

Ruby 2.6.3

Ruby on Rails 6.0.0

RSpec 3.7

Capybara 2.15

流れ

RSpecのインストール
Capybaraの準備
テストを考える
テストを書いてみる
テストを実行してみる

1. RSpecのインストール

まず、昨日作成したメモアプリに移動します。そして、Gemfile(アプリケーションフォルダ直下)に、以下の新しく記述と書かれているところを記述し、bundleを実行します(40行目周辺にあると思います)。

group :test do
  # Adds support for Capybara system testing and selenium driver
  gem 'capybara', '>= 2.15'
  gem 'selenium-webdriver'
  # Easy installation and use of web drivers to run system tests with browsers
  gem 'webdrivers'
  gem "rspec-rails", "~> 3.7" # ここを新しく記述
end

bundle

そして、以下のコマンドでRSpecに必要なファイル群を作成します。

❯ rs g rspec:install

Running via Spring preloader in process 17290
      create  .rspec
      create  spec
      create  spec/spec_helper.rb
      create  spec/rails_helper.rb

ここまで成功したら、次に進みます。

2. Capybaraの準備

Capybara本体はインストールされているので、spec/spec_helper.rbファイルの15行目周辺に以下のように記述します。

# See http://rubydoc.info/gems/rspec-core/RSpec/Core/Configuration

require "capybara/rspec" # 新しく記述

RSpec.configure do |config|
  config.before(:each, type: :system) do　# 新しく記述
    driven_by :selenium_chrome_headless　# 新しく記述
  end  # 新しく記述
  # rspec-expectations config goes here. You can use an alternate

そしたら、次に進みます。

3. テストを考える

それでは、ここで一旦テストの設計をしてみましょう。

今回のテストは、「メモアプリのcreateとdestroy機能が正常に動作しているか」をチェックすることとします。

そのためには、以下のような動作が必要になります。

トップページで「New Memo」をクリック
Title、Body にそれぞれテキストを入力
「Create　Memo」をクリック
メモが作成されているか確認
「destroy」をクリック
メモが削除されているか確認

4. テストを書いてみる

上記で考えたテストの内容を、specディレクトリ直下に、memos_spec.rbを作成し、記述してみます。私は以下のように記述してみました。

spec/memos_spec.rb

# frozen_string_literal: true

require "rails_helper"

describe "メモ管理機能", type: :system do
  before do
    visit memos_path
    # トップページで「New Memo」をクリック
    click_on "New Memo" 

    # Title、Body にそれぞれテキストを入力
    fill_in "Title", with: "明日の晩ご飯" 
    fill_in "Body", with: "お好み焼き、たこ焼き、ホットケーキ"

    # 「Create　Memo」をクリック
    click_button "Create Memo"
  end

  describe "メモ新規作成機能" do
  # メモが作成されているか確認
    it "作成されたメモが表示される" do
      expect(page).to have_content "明日の晩ご飯", "お好み焼き、たこ焼き、ホットケーキ"
    end
  end

  describe "メモ削除機能" do
    it "メモ削除機能" do
      click_on "Back"
      #「destroy」をクリック
      click_on "Destroy" 
      page.driver.browser.switch_to.alert.accept
      # メモが削除されているか確認
      expect(page).to have_no_content "明日の晩ご飯", "お好み焼き、たこ焼き、ホットケーキ"
    end
  end
end

5. テストを実行してみる

それでは実際に以下のコマンドで実行してみましょう‼️ 以下のように表示されればテストが通ったことになります‼️

❯ bundle exec ./spec/system/memos_spec.rb

Capybara starting Puma...
* Version 3.12.1 , codename: Llamas in Pajamas
* Min threads: 0, max threads: 4
* Listening on tcp://127.0.0.1:52928
..

Finished in 3.96 seconds (files took 5.78 seconds to load)
2 examples, 0 failures

最後に

今回は、前回の記事で、scaffoldコマンドを使って作成したメモアプリのテストを書いてみました。

ブログをまとめるにあたって、どのようなテストにしようか、どうテストを書けば良いのかについて結構悩んでしまいました💦

それでも、今回このようにまとめたことで、ごく簡単なテストなら書くことができるレベルにはなったと思います。

今後の自分のコードでもテストを書いていきたいです💪

参考

【10日間でポートフォリオ作成に挑戦】6日目：テストコードの実装 - Qiita

使えるRSpec入門・その4「どんなブラウザ操作も自由自在！逆引きCapybara大辞典」 - Qiita

使えるRSpec入門・その1「RSpecの基本的な構文や便利な機能を理解する」 - Qiita

Rspec + Capybara : How to click on alert box - Stack Overflow

koheitakahashiのブログ

2020.07.01にプログラマーとして生を受けた私が学んだことや、日常について徒然に書いていきます。