railsのRspecの結合テストコードで要素をクリックした時に背景色が変化したことを真偽値で表現できるのか？

Question

実現したいこと

railsの結合テストコードで要素をクリックした時に背景色が変化したことを真偽値で表現したい。

詰まっている問題

現在結合テストコードで要素をクリックするところまでは,行けたんですがクリックした時にCSSが適用されているかどうかの確認ができておりません。要素の内容を確認する(Capybara::Node::Matcher)検索メソッドなどを一通り確認して試しているんですがうまいこと行かないです。組み合わせの問題なのかスペルミスでうまいこといっていないのか？

(例)こんな感じで試しました。

実際のページ

画像: ブロックをクリックするとCSSが適用される.
![

実際のコード

views/motions/index.html.erb

<div class="plan-image">
<div class="container text-center ">
<%if user_signed_in? %>
<% if  @motion != nil && current_user.motion != [] && current_user.motion.last.created_at.strftime("%Y%m%d")  == @now.strftime("%Y%m%d")%>
<h1 class="text-center">本日の予定</h1>
<div class="row g-5">
<div class="border p-3   col-lg-6 col-sm-12">
<h2 class="center"><%= current_user.nickname%>さんの本日の時間割</h2>
  <div class="plan border fs-2 py-3 w-75 mx-auto" data-id=<%= current_user.motion.last.id %> data-check=<%= current_user.motion.last.checked %>>
<% if current_user.motion.last.plans1.present?%>
  <%= current_user.motion.last.plans1 %>
  <%= current_user.motion.last.count1.strftime('%H:%M') %>
  </div>
<% end %> 
<% if current_user.motion.last.plans2.present?%>
  <div class="plan border fs-2 py-3 w-75 mx-auto" data-id=<%= current_user.motion.last.id %> data-check=<%= current_user.motion.last.checked %>>
  <%= current_user.motion.last.plans2 %>
  <%= current_user.motion.last.count2.strftime('%H:%M')  %>
  </div> 
<% end%>
<% if current_user.motion.last.plans3.present?%>
  <div class="plan border fs-2 py-3 w-75 mx-auto" data-id=<%= current_user.motion.last.id %> data-check=<%= current_user.motion.last.checked %>>
  <%= current_user.motion.last.plans3  %>
  <%= current_user.motion.last.count3.strftime('%H:%M')  %>
  </div>
<% end %>
<% if current_user.motion.last.plans4.present?%>
  <div class="plan border fs-2 py-3 w-75 mx-auto" data-id=<%= current_user.motion.last.id %> data-check=<%= current_user.motion.last.checked %>>
  <%= current_user.motion.last.plans4  %>
  <%= current_user.motion.last.count4.strftime('%H:%M')%> 
  </div>
<% end %>
 <% if current_user.motion.last.plans5.present?%> 
  <div class="plan border fs-2 py-3 w-75 mx-auto" data-id=<%= current_user.motion.last.id %> data-check=<%= current_user.motion.last.checked %>>
  <%= current_user.motion.last.plans5  %>
  <%= current_user.motion.last.count5.strftime('%H:%M')  %>  
  </div>
<% end %>
<h2 class="center">メモ<h2>
<div class="border w-75 mx-auto p-3" , style="word-wrap: break-word;">
<p><%= current_user.motion.last.memo %></p>
</div>
</div>

spec/factories/motions.rb

FactoryBot.define do
  factory :motion do
    weight                    { '33' }
    plans1                    { '学習' }
    plans2                    { '学習' }
    plans3                    { '学習' }
    plans4                    { '学習' }
    plans5                    { '学習' }
    count1                    { '15:30' }
    count2                    { '16:30' }
    count3                    { '17:30' }
    count4                    { '18:30' }
    count5                    { '19:30' }
    memo                      { 'テスト確認します' }
    association :user
  end
end

spec/system/motions_spec.rb

RSpec.describe '予定完了機能', type: :system, js: true do
  before do
    @user = FactoryBot.create(:user)
    @motion = FactoryBot.build(:motion)
  end

  context '予定完了作成' do
    it '予定をクリックするとCSSが適用される' do
      # サインする
      sign_in(@user)
      # 予定作成ページへのボタンがあることを確認する
      expect(page).to have_link('本日の予定を設定する')
      # 予定作成ページへ移動する
      visit new_motion_path
      # フォームに値を入力する
      fill_in 'motion_weight', with: @motion.weight
      fill_in 'motion_plans1', with: @motion.plans1
      fill_in 'motion_count1', with: @motion.count1
      fill_in 'motion_plans2', with: @motion.plans2
      fill_in 'motion_count2', with: @motion.count2
      fill_in 'motion_plans3', with: @motion.plans3
      fill_in 'motion_count3', with: @motion.count3
      fill_in 'motion_plans4', with: @motion.plans4
      fill_in 'motion_count4', with: @motion.count4
      fill_in 'motion_plans5', with: @motion.plans5
      fill_in 'motion_count5', with: @motion.count5
      fill_in 'motion_memo',   with: @motion.memo
      # 送信するとmotionモデルのカウントが1上がることを確認する
      expect  do
        find('input[name="commit"]').click
      end.to change { Motion.count }.by(1)
      # トップページに遷移することを確認する
      expect(current_path).to eq(root_path)
      # 予定をクリックする
      binding.pry
      page.all('.plan')[0].click
      page.all('.plan')[1].click
      page.all('.plan')[2].click
      page.all('.plan')[3].click
      page.all('.plan')[4].click
      # CSSが適用されたことを確認する
    end
  end

最後のCSSが適用されているかどうかの確認を表現したいんですが、これがうまいこといかない。
わかる方がいらっしゃいましたらお力添えお願いたします.

追記

javascript/packs/checked.js

function check() {
  const plans = document.querySelectorAll(".plan");
  plans.forEach(function (plan) { 
    if (plan.getAttribute("data-load") != null) {
      return null;
    }
    plan.setAttribute("data-load", "true");
    plan.addEventListener("click", () => { 
    const planId =  plan.getAttribute("data-id");
    const XHR = new XMLHttpRequest();
    XHR.open("GET", `/motion/${planId}`, true);
    XHR.responseType = "json";
    XHR.send();
    XHR.onload = () => {
      if(XHR.status != 200) {
        alert(`Error ${XHR.status}: ${XHR.statusText}`);
        return null;
      }
      const item = XHR.response.plan;
      if (item.checked === true) {
        plan.setAttribute("data-check", "true");
      } else if (item.checked === false) {
        plan.removeAttribute("data-check");
      }
    };
    });
  });
}
setInterval(check, 1000);

javascript/stylesheets/application.scss

@import "bootstrap";


div[data-check="true"] {
  background-color: red;
}


.top-image{
  background: url(https://publicdomainq.net/images/202106/05s/publicdomainq-0055890rbu.jpg);
  background-size: cover;
}


a,li{
  color: black;
  text-decoration: black;
  list-style: none;
}

page.all('.plan')[0].matches_style?( 'background-color' => 'rgb(255, 0, 0)' )
page.all('.plan')[0].matches_style?( 'background-color' => 'red' )
このような指定の仕方をするとCSSが適用されていてもfalseを返されてしまう。

Comments

[suama]

> 最後のCSSが適用されているかどうかの確認を表現したいんですが、これがうまいこといかない。

試されたコードはありますか？
こういうMatcherを使ってみたけど、値が取れなかったとかいうのがあれば、追記いただけると。

[hitosi0317]

返信ありがとうございます。
大変遅くなって申し訳ありません一応上記のように追記したんですけど.matches_style?というmatcheを使うのが正しいのか、うまいこといかないんですよね。何か他に試す方法がありましたらよろしくお願いします。

Answer 1

こんばんは。
page.all('.plan')[0].click　.... の処理で、クリックのイベントでAjaxリクエストを送信して、その結果を受けてCSSを変更している、で良いでしょうか。

Capybaraのテストではうまくテストできなくても、ブラウザでの操作では、背景色の変更は正しくできていると想定しております。

動かさないとなんとも言えないのですが、よくあるのが、Ajaxの処理を待たずにテスト（マッチャーでの確認）が進んでしまうといった点です。

wait_for_ajax で検索すると、ajaxの処理を待ってからテストをすると言った記事がいくつか出てくると思います。

こんな感じのメソッドを定義して、マッチャーの前に挟んでいたりしました。
なにかヒントになれば幸いです。

  def wait_for_ajax
    Timeout.timeout(Capybara.default_max_wait_time) do
      loop until finished_all_ajax_requests?
    end
  end

  def finished_all_ajax_requests?
    page.evaluate_script('jQuery.active').zero?
  end