system_specでjqueryをテストする

導入

前回の記事で、:rack_test → :seluniumの以降が成功し、無事jqueryなどのDOM操作をrspecでテストできるようになった、わけではありませんでした。

今回はこちらの記事を参考に、正式にDOM操作をrspecでテストできるようになりました。（ありがとうございました！）

結論

結論としましては、前回の記事の設定でDOM操作をテストする為には、以下の3操作が必要でした。

1. chromedriverのDockerイメージを導入する　Dockerfile
2. テスト実行環境をchromedriverに設定　← 前回の記事の内容
3. system_spec.rbでjs: trueにする

補足：自分の場合はポート番号が重複するエラーが発生したので（多分そう）、テスト環境のポート番号を変更しました。　rails_helper.rb

Dockerfile
 RUN curl -sS https://dl.yarnpkg.com/debian/pubkey.gpg | apt-key add - \
     && curl -sL https://deb.nodesource.com/setup_10.x | bash - \
     && apt-get install -y nodejs \
     && mkdir /myapp
+RUN apt-get update && apt-get install -y unzip && \
+    CHROME_DRIVER_VERSION=`curl -sS chromedriver.storage.googleapis.com/LATEST_RELEASE` && \
+    wget -N http://chromedriver.storage.googleapis.com/$CHROME_DRIVER_VERSION/chromedriver_linux64.zip -P ~/ && \
+    unzip ~/chromedriver_linux64.zip -d ~/ && \
+    rm ~/chromedriver_linux64.zip && \
+    chown root:root ~/chromedriver && \
+    chmod 755 ~/chromedriver && \
+    mv ~/chromedriver /usr/bin/chromedriver && \
+    sh -c 'wget -q -O - https://dl-ssl.google.com/linux/linux_signing_key.pub | apt-key add -' && \
+    sh -c 'echo "deb [arch=amd64] http://dl.google.com/linux/chrome/deb/ stable main" >> /etc/apt/sources.list.d/google-chrome.list' && \
+    apt-get update && apt-get install -y google-chrome-stable
 WORKDIR /myapp
 COPY Gemfile /myapp/Gemfile
 COPY Gemfile.lock /myapp/Gemfile.lock

rails_helper.rb
 RSpec.configure do |config|
   config.before(:each, type: :system, js: true) do
     driven_by :remote_chrome
     Capybara.server_host = IPSocket.getaddress(Socket.gethostname)
-    Capybara.server_port = 3000
+    Capybara.server_port = 3010
     Capybara.app_host = "http://#{Capybara.server_host}:#{Capybara.server_port}"
   end
   config.include FactoryBot::Syntax::Methods

spec/system/site_layouts_spec.rb
 require 'rails_helper'

-RSpec.describe 'Layouts', type: :system do
+RSpec.describe 'Layouts', js: true, type: :system do
   let(:user) { create(:user) }

   context "user signed in" do
                :
         expect(page).to have_link href: notifications_path
         expect(page).to have_selector "i.fa-bell"
         expect(page).to have_link href: search_works_path, class: "fa-search"
+        within("li.dropdown") do
+          expect(page).to have_link class: "dropdown-toggle"
+          click_on "#{user.username}"
+        end
         expect(page).to have_link "ログアウト", href: destroy_user_session_path
         expect(page).to have_link "プロフィール", href: user_path(user)
         expect(page).to have_link "アカウント編集", href: edit_user_registration_path

おわりに

最後まで目を通して頂きありがとうございました！

ただ、正直まだ全然理解が追いついていなくて恥ずかしいくらいです。将来的には、もっと根本的な理解ができているようなエンジニアになりたい。（本当に