いいね機能の統合テストをRSpecで実装したい。

Question

前提・実現したいこと

表題の通りです。
ログイン→詳細ページ→unlikeボタン（いいね数0の状態）を押すと→likesカウントが1増えるという状況を想定しています。

ローカルの画面上では上手くいっているのですが、なぜかunlikeをしてもlikesカウントが0のままのようで原因を特定できず困っています。
着目した方が良いポイントや必要な情報などありましたら是非教えてください。

Failure/Error: expect(@article.likes.count).to eq(1)
  expected: 1
  got: 0

該当のソースコード

**詳細ページ**

<div id="article_<%= @article.id %>">
  <% if logged_in? %>
     <% if @current_user.liked_by?(@article.id) && %>
        <td>
          <%= link_to destroy_like_path(@article), class: "like-link", method: :DELETE, remote: true do %>
            <i class="fa fa-heart like-btn"></i>
          <% end %>
        </td>
     <% else %>
        <td>
          <%= link_to create_like_path(@article), class: "like-link", method: :POST, remote: true do %>
            <i class="fa fa-heart unlike-btn"></i>
          <% end %>
        </td>
     <% end %>
     <%= @article.likes.count %>
  <% end %>
</div>

require 'rails_helper'

RSpec.describe "Likes", type: :feature do
  before do
    @article = FactoryBot.create(:article)
  end
  
  describe '#create,#destroy' do
    it 'can do goot button any article' do
      sign_in(@article.user)
      visit article_path(@article.id)
      find('.unlike-btn').click
      expect(@article.likes.count).to eq(1)
    end
  end
end

**articleのテストデータ**

FactoryBot.define do
  factory :article do
    association :user
    sequence(:title)  { |n| "Title #{n}" }
    content  "text"
    category "anime"
    
    after(:build) do |article|
      article.image.attach(io: File.open("spec/fixtures/files/sample.jpg"), filename: 'sample.jpg', content_type: 'image/jpg')
    end
  end
end

module SignInSupport
  def sign_in(user)
    visit root_path
    
    click_link "ログイン"
    fill_in "user[email]", with: user.email
    fill_in "user[password]", with: user.password
    find('input[name="commit"]').click
    
    expect(current_path).to eq(root_path)
  end
end

RSpec.configure do|config|
  config.include SignInSupport
end

いいね機能のコード

.like-link {
  text-decoration: none!important;
}

.like-link:hover {
  background-color: #fff!important;
}

.like-btn {
  font-size: 15px;
  color: #808080;
}
 
.unlike-btn {
  font-size: 15px;
  color: #e54747;
}

**create.js  destory.js**

document.getElementById('article_<%= @article.id %>').innerHTML = '<%= j(render @article) %>'

補足情報（FW/ツールのバージョンなど）

rails -v 6.0.0
ruby -v 2.6.3
RSpec -v 3.10

現状の統合テストはこちらの記事を参照しています
https://qiita.com/narimiya/items/477e30fe9a3aeb747282

Answer 1

コードを見る限り、「いいね！」ボタンはAjaxで動作しているようです。なので、テストコードは実際のブラウザを動かしてテストする必要があります。（慣習として、その場合はjs: trueのフラグを付けることが多いです）

「Everyday Rails - RSpecによるRailsテスト入門」をお持ちであれば、6章の「JavaScriptを使った操作をテストする」以降の内容が参考になると思います。

ただし、使用しているライブラリ等が若干古いかもしれないので、ライブラリのバージョンや設定ファイルの設定内容等はここ最近の情報を参考にするのが良いと思います。

僕のGitHubリポジトリにも最近のライブラリを使う場合のコード例があるので、こちらも参考にしてみてください。

https://github.com/JunichiIto/everydayrails-rspec-2017/pull/4

Comments

[AkiDatsugoku26]

すぐにご回答いただきありがとうございます！
まさか伊藤さんからご回答いただけるとは思っていなかったので驚きました。

まずは「Everyday Rails - RSpecによるRailsテスト入門」の6章を見直してみます。
またGitHubリポジトリまでありがとうございます。こちらも参照してみます。

まだまだRSpec慣れませんがやっているうちにその必要性は実感しているので挫けず頑張ってみます！

[AkiDatsugoku26]

こちら上記の助言を頼りに作業してみたところ上手くいきました。

僕の場合はRSpecをブラウザ上でうごかす為に　
①　gem 'webdrivers'をインストール

②　$ curl https://intoli.com/install-google-chrome.sh | bashでグーグルクロームをインストール

③記載した詳細ページ（show）のlike-btnとunlike-btnを入れ替える
<td>
<%= link_to destroy_like_path(@article), class: "like-link", method: :DELETE, remote: true do %>
<i class="fa fa-heart unlike-btn"></i>
<% end %>
</td>
<% else %>
<td>
<%= link_to create_like_path(@article), class: "like-link", method: :POST, remote: true do %>
<i class="fa fa-heart like-btn"></i>
<% end %>
</td>

④統合テストを書き直す
require 'rails_helper'
require 'capybara/rspec'

RSpec.describe "Likes", type: :feature do
scenario "can do goot button any article", js: true do
@article = FactoryBot.create(:article)

sign_in(@article.user)

visit article_path(@article.id)

find('.like-btn').click
sleep 0.5
expect(page).to have_selector '.unlike-btn'
expect(@article.likes.count).to eq(1)

find('.unlike-btn').click
sleep 0.5
expect(page).to have_selector '.like-btn'
expect(@article.likes.count).to eq(0)

end
end

上記で上手くいきました。ポイントはlike-btnとunlike-btnのクリックをする際にsleepを使用していることです。この記述がないとテストが成功したり失敗したりしたので僕の場合こうすることで上手くいきました。

理由については下記記事がおすすめです
https://qiita.com/eitches/items/eee0d0502ee65feb6fa2

以上です。
いいね機能については実装の手順はありますがRSpecの検証までをやっている記事は少なかったため同じ状況の方のお役に立てれば嬉しいです。