Rails Tutorialの知識から【ポートフォリオ】を作って勉強する話 #4 System spec導入編

# こんな人におすすめ
* プログラミング初心者でポートフォリオの作り方が分からない
* Rails Tutorialをやってみたが理解することが難しい

前回：[#3 Bootstrap4, jQueryプラグイン導入編](https://qiita.com/aokyo17/items/34ac84b75176d1df37b0)
次回：[#5 Userモデル編](https://qiita.com/aokyo17/items/48137ccb982f936d035f)

# 今回の流れ
1. 完成のイメージを理解する
2. System specを導入する
3. トップページのブラウザテストを書く

※ この記事は、ポートフォリオを作る理由を**web系自社開発企業に転職するため**とします。
※ 2020年3月30日、記事を大幅に更新しました。

# 完成のイメージを理解する
[#3](https://qiita.com/aokyo17/items/34ac84b75176d1df37b0)では、トップページを仕上げました。
今回は、トップページのブラウザテストを行います。
その際、System specを使うのでいくつか設定を変更します。
設定後、ブラウザテストの処理を書きます。

以上です。

# System specを導入する
[#2](https://qiita.com/aokyo17/items/02d107214ca6de846018)でちらっと紹介した、System specを導入します。
はじめに、必要なGemを追加します。

```diff:Gemfile
group :test do
  gem 'capybara', '>= 2.15'
- gem 'selenium-webdriver'
- gem 'chromedriver-helper'
+ gem 'webdrivers'
end
```

```shell:shell
$ bundle install
```

古い記事では、chromedriver-helperを追加するように書かれています。
しかしchromedriver-helperがサポート終了のため、webdriversを使います。
webdriversを使う際、selenium-webdriverも不要です。

次に、RSpecの設定を変更します。
これにより、ブラウザテストが機能します。

```rb:spec/rails_helper.rb
# 中略
RSpec.configure do |config|
# 中略
# 一番下の直前に追加
  config.before(:each) do |example|
    if example.metadata[:type] == :system
      driven_by :selenium, using: :headless_chrome, screen_size: [1400, 1400]
    end
  end
end
```

参考になりました↓
[サポートが終了したchromedriver-helperからwebdrivers gemに移行する手順](https://qiita.com/jnchito/items/f9c3be449fd164176efa)
[【Rails】『RSpec + FactoryBot + Capybara + Webdrivers』の導入＆初期設定からテストの書き方まで](http://vdeep.net/rubyonrails-rspec-factorybot-capybara)
[rspec-rails 3.7の新機能！System Specを使ってみた](https://qiita.com/jnchito/items/c7e6e7abf83598a6516d)

# トップページのブラウザテストを書く
[Rails Tutorial 5.3.4 リンクのテスト](https://railstutorial.jp/chapters/filling_in_the_layout?version=5.1#sec-layout_link_tests)にならって、テストを作ります。
まずはファイルを作ります。ジェネレーターがないので手動で作ります。

```shell:shell
$ mkdir ./spec/systems/
$ touch ./spec/systems/site_layout_spec.rb
```

テストする内容は以下の通りです。

* ロゴ画像とロゴテキストに、root_pathのリンクが2つある
* Loginボタンに、login_pathのリンクが1つある

ポートフォリオのトップページについては[#3](https://qiita.com/aokyo17/items/34ac84b75176d1df37b0)をご覧ください。
Rails Tutorialとの差分も載せておきます。
（一部改変）

```rb:spec/systems/site_layout_spec.rb（RSpec：ポートフォリオ）
require 'rails_helper'

RSpec.describe "SiteLayouts", type: :system do  
  describe "home layout" do    
    it "contains root link" do
      visit root_path
      expect(page).to have_link nil, href: root_path, count: 2
    end
    
    it "contains login link" do
      visit root_path
      expect(page).to have_link 'Login', href: login_path
    end
    # 中略
  end
end
```

```rb:test/integration/site_layout_test.rb（Minitest：Tutorial）
require 'test_helper'

class SiteLayoutTest < ActionDispatch::IntegrationTest

  test "layout links" do
    get root_path
    assert_template 'static_pages/home'
    assert_select "a[href=?]", root_path, count: 2
    assert_select "a[href=?]", login_path
  end
end
```

System specの構文がわからない方はこちらをご覧ください↓
[使えるRSpec入門・その4「どんなブラウザ操作も自由自在！逆引きCapybara大辞典」](https://qiita.com/jnchito/items/607f956263c38a5fec24)

コードの記述は以上です。あとはテストを走らせます。
テストを走らせるには、以下のようにします。

```shell:shell
$ rails spec
```

無事テストが成功したら、今回は以上です。

---
前回：[#3 Bootstrap4, jQueryプラグイン導入編](https://qiita.com/aokyo17/items/34ac84b75176d1df37b0)
次回：[#5 Userモデル編](https://qiita.com/aokyo17/items/48137ccb982f936d035f)