scaffoldでサンプルアプリを作る

docker-compose run web rails g scaffold  user name:string address:string age:integer

そして

docker-compose run web rails db:migrate

ブラウザでlocalhost:3000/usersでアクセスできますが、毎回めんどいのでrootに指定します

confing/routes.rb

Rails.application.routes.draw do
  resources :users
  root 'users#index'
end

slimを導入

gem 'slim-rails'
gem 'html2slim'

そして

docker-compose run web bundle install

さらに

docker-compose build

既存のerbファイルをslim可する

docker-compose run web bundle exec erb2slim app/views/layouts/ --delete
docker-compose run web bundle exec erb2slim app/views/users/ --delete

rspec導入

group :development, :test do
  gem 'rspec-rails'
  gem 'factory_bot_rails'
end

そして

docker-compose run web bundle install
docker-compose build

さらに

docker-compose run web rails g rspec:install
rm -r ./test

rspec使い方

docker-compose run web rspec

System Spec導入

Dockerfileに書き込む

dockerコンテナの中へ新たにchromedriverを準備なければなりません。

FROM ruby:2.5
RUN apt-get update -qq && apt-get install -y nodejs postgresql-client

# chromeの追加
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


RUN mkdir /myapp
WORKDIR /myapp
COPY Gemfile /myapp/Gemfile
COPY Gemfile.lock /myapp/Gemfile.lock
RUN bundle install
COPY . /myapp

# Add a script to be executed every time the container starts.
COPY entrypoint.sh /usr/bin/
RUN chmod +x /usr/bin/entrypoint.sh
ENTRYPOINT ["entrypoint.sh"]
EXPOSE 3000

# Start the main process.
CMD ["rails", "server", "-b", "0.0.0.0"]

ディレクトリ作成

mkdir spec/system
mkdir spec/support
touch spec/support/capybara.rb

設定を書く

spec/support/capybara.rb

require 'capybara/rspec'
require 'selenium-webdriver'

Capybara.register_driver :selenium_chrome_headless do |app|
  options = ::Selenium::WebDriver::Chrome::Options.new


  options.add_argument('--headless')
  options.add_argument('--no-sandbox')
  options.add_argument('--disable-dev-shm-usage')
  options.add_argument('--window-size=1400,1400')


  driver = Capybara::Selenium::Driver.new(app, browser: :chrome, options: options)
end

Capybara.javascript_driver = :selenium_chrome_headless

spec/rails_helper.rb

Dir[Rails.root.join('spec', 'support', '**', '*.rb')].each { |f| require f }
#↑コメントアウトする これによりspec/support/capybara.rbが読み込まれます。

RSpec.configure do |config|
  config.before(:each) do |example|
    if example.metadata[:type] == :system
      if example.metadata[:js]
        driven_by :selenium_chrome_headless, screen_size: [1400, 1400]
      else
        driven_by :rack_test
      end
    end
  end
end
#type: :systemのときのみchromeを使うという設定です。

テストの実行

docker-compose run web rspec spec

参考

Rails + Selenium + DockerでSystemSpecの環境構築