RSpec Capybara リンク画像に関するテスト(system spec)

10535 ワード
RSpec RubyOnRails5.2 RSpec テキストリンク

⭐️初学者です。同じような方の参考になればと思います。

⭐️状況

・自身の作成したポートフォリオにsystem specを書いている
・FactoryBot使用
・postを投稿したユーザーのプロフィール画像がユーザーページへ遷移するリンクになっている
・テストで↑を証明したい
・プロフィール画像(Refile使用　avatar_id)エラー沼から抜け出せない

参考までに設定画像
spec/factories/users.rb
  FactoryBot.define do
    factory :user do
      name {"name_1"}
      avatar{"Rack::Test::UploadedFile.new(File.join(Rails.root,'app/assets/images/no_image.png'))"}
      sequence(:account_name, "account_1")
      sequence(:email, "[email protected]")
      password {"testchan"}
    end
spec/system/posts_spec.rb
  context "画面遷移の確認" do
    it "ユーザー名をクリックするとプロフィール画面へ遷移する" do
      click_link post.user.name
      visit user_path(user)
      expect(page).to have_content "こだわりさん information"
    end
    it "ユーザー画像をクリックするとプロフィール画面へ遷移する" do
      click_link post.user.avatar
      visit user_path(user)
      expect(page).to have_content "こだわりさん information"
    end
views
<%= attachment_image_tag(post, :image, size: "50x50", fallback: "no_postimage.jpg") %>
  <p><%= link_to post.content.truncate(45), post_path(post), style: "color: black;" %></p>
  <p>
    <%= link_to user_path(post.user) do %>
      <%= attachment_image_tag(post.user, :avatar, size: "30x30", class:"rounded-circle", fallback: "no_image.png") %><br>
      <span class="postuser" style="color:black;"><%= post.user.name %></span>
    <% end %>
    <span class="fas fa-comments">
      <%= post.post_comments.count %>
    </span>
    <span class="fas fa-hiking" style="color: #FF66CC;">
      <%= post.bravos.count %>
    </span>
  </p>
  <p><%= link_to "View Detail", post_path(post), class:"view-btn btn btn-light btn-lg btn-block" %></p>

テスト結果

「Ambiguous match, found 21 elements matching visible link nil」

複数要素発見されたけど、linkがない。。。
これで数時間格闘の末、Rspecで使用しているCapybara公式ドキュメントにこのように記述されていました。
この内容についてはteamcapybara/capybaraで以下のように説明されています。

> Clicking links and buttons
Full reference: Capybara::Node::Actions

You can interact with the webapp by following links and buttons. 
Capybara automatically follows any redirects, and submits forms associated with buttons.

click_link('id-of-link')
click_link('Link Text')
click_button('Save')
click_on('Link Text') # clicks on either links or buttons
click_on('Button Value')

ユーザーネームをクリックしてユーザーページに遷移するテストが通っていたのは”文字列”だったから。
Click linkは画像に対して使えなかったということでした。
ということでテストとviewの一部以下のように修正しました。

spec/system/posts_spec.rb

    it "ユーザー画像をクリックするとプロフィール画面へ遷移する" do
      click_link "#{post.user.name}さんのプロフィール画像"
      visit user_path(user)
      expect(page).to have_content "こだわりさん information"
    end
views
    <%= link_to user_path(post.user) do %>
      <%= attachment_image_tag(post.user, :avatar, size: "30x30", class:"rounded-circle", fallback: "no_image.png", :alt => "#{post.user.name}さんのプロフィール画像")) %><br>
      <span class="postuser" style="color:black;"><%= post.user.name %></span>
    <% end %>

無事にテストが通りました

まとめ

Click linkが画像には使えなかった。
そこでalt属性を画像に持たせて click_link　”alt属性”で解決。
Alt属性は画像の読み込みに失敗した場合にtextとして画像を表示させてくれる。
そもそも画像表示させる際は必ずalt属性をつけたほうがいいようです。

補足

Capybara公式ドキュメントにもありますが、
Click_linkだけでなく、click_onで試したところ同じようにテストは通りました。

参考

何かご指摘ございましたらお願い致します！
ご覧いただきありがとうございました。