いいね機能のRspec いいね数を取得する方法orアイコンをクリックで反映させる方法

Question

前提・実現したいこと

始めまして、私は学習２ヶ月ちょっとのRails初学者です。
現在SNSのようなオリジナルアプリを開発しており、いいね機能のテストコードを書いている段階です。

私の現状が

このような形でお気に入り登録の数がリンクになってしまっている物です。

開発段階では形に拘らず完成を目指していたのですが、
数字の部分を取得する方法が分からずテストコードが書けずにいます。

（私なりの）解決法の仮説

１　マークをリンクにしてお気に入りができるようにする

2 テストコードでいいね数を取得する

私としては１で開発し、見た目を整えつつ
下記の記事を参考にテストコードを書いていけたと思っております。

https://qiita.com/nanairo3/items/9efc86159582ae788f32

該当のソースコード

view/likes/_like.html.erb

<% if user_signed_in? %>
    <% if post.like_user(current_user.id) %>
        <p><span>お気に入り解除: <i class="fas fa-star"><%=link_to post.likes.count, post_likes_path(post.id), method: :delete, remote: true %></i></span>
        </p>
    <% else %>
        <p>お気に入り登録: <span><i class="far fa-star"><%=link_to post.likes.count, post_likes_path(post.id), method: :post, remote: true %></i></span>
        </p>
    <% end %>
<% else %>
<i class="far fa-star"></i>
    <p><span>お気に入り数: </span><%= post.likes.count %></p>
<% end %>

view/likes/create.js.erb &　destroy/js.erb

$('#likes_buttons_<%= @post.id %>').html("<%= j(render partial: 'likes/like', locals: {post: @post}) %>");

Likes_contoroller

def create
    @post = Post.find(params[:post_id])
    like = current_user.likes.build(post_id: params[:post_id])
    like.save
  end

  def destroy
    @post = Post.find(params[:post_id])
    like = Like.find_by(post_id: params[:post_id], user_id: current_user.id)
    like.destroy
  end
end

試したこと

１の仮説で問題解決を取り組んだところ、星のマークが数字の左へ行ったり、右へ行ったり、またはエラーを出してしまったりして私が思った通りのものができませんでした。

２の仮説では
Xpath
このような要素をクリックしたいと思ったのですが、
こちらをどう活かしたら良いのか分からず、Xpathを使用した場合も

 Failure/Error: find('/html/body/div/div/div/div[2]/p/span/i/a').click
     
     Selenium::WebDriver::Error::InvalidSelectorError:
       invalid selector: An invalid or illegal selector was specified
         (Session info: chrome=87.0.4280.88)

のようなエラーが出てしまい、解決が難しい状況です。

私としてはやはり、１の方法で解決したい。という気持ちが強いです。
しかし、勉強のため２の方法でも解決する方法を知りたいと考えております。

Answer 1

こんな感じだといかがでしょうか。

<%= link_to post_likes_path(post.id), remote:true, method: :delete do %>
            <i class="fas fa-star"></i>
          <% end %>

おそらく、link_toの中に post.likes.count　を指定してしまっているので、いいねの数にリンクが振られている状態になってしまっているものだと思われます。

Comments

[Pro01x19]

できました！

<span>お気に入り解除: <%= link_to post_likes_path(post.id), remote:true, method: :delete do %>
<i class="fas fa-star"></i>
<% end %>
<%= post.likes.count %></span>

このような形でlikes.countを外にだし、ブロックを使うことでfont-awesomeの要素も中に入れられました。

仮説立てと基礎を実戦で活かす思考力をもっと意識したいな、と感じる一見でした。
@educ_gtさん本当にありがとうございました！

Answer 2

１　マークをリンクにしてお気に入りができるようにする
に関して、link_toでfont-awesomeの要素も囲ってしまえば良さそうです。

今、

 <p><span>お気に入り解除: <i class="fas fa-star"><%=link_to post.likes.count, post_likes_path(post.id), method: :delete, remote: true %></i></span>
        </p>

というコードになっているため、iタグに指定してある、font-awesomeがリンクになっていないということが起きていそうです。

2 に関して、
いずれにおいても結合テストを書く場合は、上のlink_toにクラスを指定してやって、そのクラスをclick_onとかでクリックするようにしたらいいかなと思います。

1が出来たら2はすぐうまいこといくかなとおもいます。

Comments

[Pro01x19]

回答ありがとうございます！

link_toでfont-awesomeの要素を囲う。について

１、link_toをaタグにして閉じタグを設けて囲えるようにする

2、直接iタグの要素をlink_toのなかに書き込む

を試しました。
どちらもまだ工夫が足りないだけかもしれませんが、
１はリンクになってもらえず
２はエラーが出てしまう結果となりました。

```
<%=link_to post.likes.count, post_likes_path(post.id), remote: true, method: :delete do %><i class="fas fa-star"></i>
```

このような形も試しましたが

undefined method `stringify_keys' for "/posts/1/likes":String

のようなエラーが出てきてしまいました。
もし、@educ_gtさんのご指摘いただいていた形ではなかったら申し訳ございません。