Merge pull request #17 from nashikotokyo/feature/16_system_spec

Feature/16 system spec

Gemfile

@@ -77,9 +77,8 @@ end
 group :test do
   # Adds support for Capybara system testing and selenium driver
   gem 'capybara', '>= 2.15'
-  gem 'selenium-webdriver'
   # Easy installation and use of chromedriver to run system tests with Chrome
-  gem 'chromedriver-helper'
+  gem 'webdrivers'
 end
 
 # Windows does not include zoneinfo files, so bundle the tzinfo-data gem

Gemfile.lock

@@ -47,8 +47,6 @@ GEM
     annotate (3.1.1)
       activerecord (>= 3.2, < 7.0)
       rake (>= 10.4, < 14.0)
-    archive-zip (0.12.0)
-      io-like (~> 0.3.0)
     arel (9.0.0)
     ast (2.4.2)
     bcrypt (3.1.16)
@@ -81,9 +79,6 @@ GEM
       mini_mime (>= 0.1.3)
       ssrf_filter (~> 1.0)
     childprocess (4.1.0)
-    chromedriver-helper (2.1.1)
-      archive-zip (~> 0.10)
-      nokogiri (~> 1.8)
     coderay (1.1.3)
     concurrent-ruby (1.1.9)
     config (4.0.0)
@@ -167,7 +162,6 @@ GEM
     image_processing (1.12.1)
       mini_magick (>= 4.9.5, < 5)
       ruby-vips (>= 2.0.17, < 3)
-    io-like (0.3.1)
     jbuilder (2.11.3)
       activesupport (>= 5.0.0)
     jquery-rails (4.4.0)
@@ -401,6 +395,10 @@ GEM
       activemodel (>= 5.0)
       bindex (>= 0.4.0)
       railties (>= 5.0)
+    webdrivers (5.0.0)
+      nokogiri (~> 1.6)
+      rubyzip (>= 1.3.0)
+      selenium-webdriver (~> 4.0)
     websocket-driver (0.7.5)
       websocket-extensions (>= 0.1.0)
     websocket-extensions (0.1.5)
@@ -418,7 +416,6 @@ DEPENDENCIES
   byebug
   capybara (>= 2.15)
   carrierwave
-  chromedriver-helper
   config
   factory_bot_rails
   faker
@@ -443,7 +440,6 @@ DEPENDENCIES
   rubocop
   rubocop-rails
   sass-rails (~> 5.0)
-  selenium-webdriver
   sidekiq
   sinatra
   slim-rails
@@ -454,6 +450,7 @@ DEPENDENCIES
   tzinfo-data
   uglifier (>= 1.3.0)
   web-console (>= 3.3.0)
+  webdrivers
 
 RUBY VERSION
    ruby 2.6.4p104

app/controllers/users_controller.rb

@@ -11,7 +11,7 @@ def create
     @user = User.new(user_params)
     if @user.save
       auto_login(@user)
-      redirect_to new_user_path, success: 'ユーザーを作成しました'
+      redirect_to posts_path, success: 'ユーザーを作成しました'
     else
       flash.now[:danger] = 'ユーザーの作成に失敗しました'
       render :new

app/views/posts/_form.html.slim

@@ -1,4 +1,4 @@
-= form_with model: post, local: true do |f|
+= form_with model: post, local: true, id: 'posts_form' do |f|
   = render 'shared/error_messages', object: post
   .form-group
     = f.label :images

app/views/posts/_like.html.slim

@@ -1,2 +1,2 @@
-= link_to likes_path(post_id: post.id), method: :post, remote: true do
+= link_to likes_path(post_id: post.id), class: 'like-button', method: :post, remote: true do
   = icon 'far', 'heart', class: 'fa-lg'

app/views/posts/_post.html.slim

@@ -1,14 +1,14 @@
-.card.mb-5.post
+.card.mb-5.post id="post-#{post.id}"
   .card-header
     .d-flex.align-items-center
       = link_to user_path(post.user) do
         = image_tag post.user.avatar.url, size: '40x40', class: 'rounded-circle mr-1'
         = post.user.username
       - if current_user&.own?(post)
         .ml-auto
-          = link_to post_path(post), class: 'mr-3', method: :delete, data: { confirm: '本当に削除しますか？' } do
+          = link_to post_path(post), class: 'mr-3 delete-button', method: :delete, data: { confirm: '本当に削除しますか？' } do
             = icon 'far', 'trash-alt', class: 'fa-lg'      
-          = link_to edit_post_path(post) do
+          = link_to edit_post_path(post), class: 'edit-button' do
             = icon 'far', 'edit', class: 'fa-lg'
       - if logged_in? && !current_user.own?(post)
         .ml-auto

app/views/posts/_unlike.html.slim

@@ -1,2 +1,2 @@
-= link_to like_path(current_user.likes.find_by(post_id: post.id)), method: :delete, remote: true do
+= link_to like_path(current_user.likes.find_by(post_id: post.id)), method: :delete, class: 'unlike-button', remote: true do
   = icon 'fa', 'heart', class: 'fa-lg'

spec/rails_helper.rb

@@ -5,6 +5,7 @@
 # Prevent database truncation if the environment is production
 abort("The Rails environment is running in production mode!") if Rails.env.production?
 require 'rspec/rails'
+require 'capybara/rspec'
 # Add additional requires below this line. Rails is not loaded until this point!
 
 # Requires supporting ruby files with custom matchers and macros, etc, in
@@ -20,7 +21,7 @@
 # directory. Alternatively, in the individual `*_spec.rb` files, manually
 # require only the support files necessary.
 #
-# Dir[Rails.root.join('spec', 'support', '**', '*.rb')].sort.each { |f| require f }
+Dir[Rails.root.join('spec', 'support', '**', '*.rb')].sort.each { |f| require f }
 
 # Checks for pending migrations and applies them before tests are run.
 # If you are not using ActiveRecord, you can remove these lines.
@@ -63,4 +64,9 @@
   # config.filter_gems_from_backtrace("gem name")
 
   config.include FactoryBot::Syntax::Methods
+  config.include SystemHelper, type: :system
+
+  config.before(:each, type: :system) do
+    driven_by :selenium, using: :headless_chrome, screen_size: [1920, 1080]
+  end
 end

spec/support/system_helper.rb

@@ -0,0 +1,16 @@
+module SystemHelper
+  def login
+    user = create(:user)
+    visit login_path
+    fill_in 'メールアドレス', with: user.email
+    fill_in 'パスワード', with: '12345678'
+    click_button 'ログイン'
+  end
+
+  def login_as(user)
+    visit login_path
+    fill_in 'メールアドレス', with: user.email
+    fill_in 'パスワード', with: '12345678'
+    click_button 'ログイン'
+  end
+end

spec/system/posts/posts_spec.rb

@@ -0,0 +1,158 @@
+require 'rails_helper'
+
+RSpec.describe 'ポスト', type: :system do
+
+  describe 'ポスト一覧' do
+    let!(:user) { create(:user) }
+    let!(:post_1_by_others) { create(:post) }
+    let!(:post_2_by_others) { create(:post) }
+    let!(:post_by_user) { create(:post, user: user) }
+
+    context 'ログインしている場合' do
+      before do
+        login_as user
+        user.follow(post_1_by_others.user)
+      end
+      it 'フォロワーと自分の投稿だけが表示されること' do
+        visit posts_path
+        expect(page).to have_content post_1_by_others.body
+        expect(page).to have_content post_by_user.body
+        expect(page).not_to have_content post_2_by_others.body
+      end
+    end
+
+    context 'ログインしていない場合' do
+      it '全てのポストが表示されること' do
+        visit posts_path
+        expect(page).to have_content post_1_by_others.body
+        expect(page).to have_content post_2_by_others.body
+        expect(page).to have_content post_by_user.body
+      end
+    end
+  end
+
+  describe 'ポスト投稿' do
+    it '画像を投稿できること' do
+      login
+      visit new_post_path
+      within '#posts_form' do
+        attach_file '画像', Rails.root.join('spec', 'fixtures', 'fixture.png')
+        fill_in '本文', with: 'This is an example post'
+        click_button '登録する'
+      end
+
+      expect(page).to have_content '投稿しました'
+      expect(page).to have_content 'This is an example post'
+    end
+  end
+
+  describe 'ポスト更新' do
+    let!(:user) { create(:user) }
+    let!(:post_1_by_others) { create(:post) }
+    let!(:post_by_user) { create(:post, user: user) }
+    before do
+      login_as user
+    end
+    it '自分の投稿に編集ボタンが表示されること' do
+      visit posts_path
+      within "#post-#{post_by_user.id}" do
+        expect(page).to have_css '.delete-button'
+        expect(page).to have_css '.edit-button'
+      end
+    end
+
+    it '他人の投稿には編集ボタンが表示されないこと' do
+      user.follow(post_1_by_others.user)
+      visit posts_path
+      within "#post-#{post_1_by_others.id}" do
+        expect(page).not_to have_css '.edit-button'
+      end
+    end
+
+    it '投稿が更新できること' do
+      visit edit_post_path(post_by_user)
+      within '#posts_form' do
+        attach_file '画像', Rails.root.join('spec', 'fixtures', 'fixture.png')
+        fill_in '本文', with: 'This is an example updated post'
+        click_button '更新する'
+      end
+      expect(page).to have_content '投稿を更新しました'
+      expect(page).to have_content 'This is an example updated post'
+    end
+  end
+
+  describe 'ポスト削除' do
+    let!(:user) { create(:user) }
+    let!(:post_1_by_others) { create(:post) }
+    let!(:post_by_user) { create(:post, user: user) }
+    before do
+      login_as user
+    end
+    it '自分の投稿に削除ボタンが表示されること' do
+      visit posts_path
+      within "#post-#{post_by_user.id}" do
+        expect(page).to have_css '.delete-button'
+      end
+    end
+
+    it '他人の投稿には削除ボタンが表示されないこと' do
+      user.follow(post_1_by_others.user)
+      visit posts_path
+      within "#post-#{post_1_by_others.id}" do
+        expect(page).not_to have_css '.delete-button'
+      end
+    end
+
+    it '投稿が削除できること' do
+      visit posts_path
+      within "#post-#{post_by_user.id}" do
+        page.accept_confirm { find('.delete-button').click }
+      end
+      expect(page).to have_content '投稿を削除しました'
+      expect(page).not_to have_content post_by_user.body
+    end
+  end
+
+  describe 'ポスト詳細' do
+    let(:user) { create(:user) }
+    let(:post_by_user) { create(:post, user: user) }
+
+    before do
+      login_as user
+    end
+
+    it '投稿の詳細画面が閲覧できること' do
+      visit post_path(post_by_user)
+      expect(current_path).to eq post_path(post_by_user)
+    end
+  end
+
+  describe 'いいね' do
+    let!(:user) { create(:user) }
+    let!(:post) { create(:post) }
+    before do
+      login_as user
+      user.follow(post.user)
+    end
+    it 'いいねができること' do
+      visit posts_path
+      expect {
+        within "#post-#{post.id}" do
+          find('.like-button').click
+          expect(page).to have_css '.unlike-button'
+        end
+      }.to change{user.like_posts.count}.by(1)
+    end
+
+    it 'いいねを取り消せること' do
+      user.like(post)
+      visit posts_path
+      expect {
+        within "#post-#{post.id}" do
+          find('.unlike-button').click
+          expect(page).to have_css '.like-button'
+        end
+      }.to change {user.like_posts.count}.by(-1)
+    end
+  end
+end

spec/system/user_sessions/user_sessions_spec.rb

@@ -0,0 +1,41 @@
+require 'rails_helper'
+
+RSpec.describe 'ログイン・ログアウト', type: :system do
+  let(:user) { create(:user) }
+
+  describe 'ログイン' do
+    context '認証情報が正しい場合' do
+      it 'ログインできること' do
+        visit login_path
+        fill_in 'メールアドレス', with: user.email
+        fill_in 'パスワード', with: '12345678'
+        click_button 'ログイン'
+        expect(current_path).to eq posts_path
+        expect(page).to have_content 'ログインしました'
+      end
+    end
+
+    context '認証情報に誤りがある場合' do
+      it 'ログインできないこと' do
+        visit login_path
+        fill_in 'メールアドレス', with: user.email
+        fill_in 'パスワード', with: '1234'
+        click_button 'ログイン'
+        expect(current_path).to eq login_path
+        expect(page).to have_content 'ログインに失敗しました'
+      end
+    end
+  end
+
+  describe 'ログアウト' do
+    before do
+      login
+    end
+    it 'ログアウトできること' do
+      click_on('ログアウト')
+      expect(current_path).to eq login_path
+      expect(page).to have_content 'ログアウトしました'
+    end
+  end
+
+end