質問編集履歴

追記

2021/07/04 16:39

投稿

hitosi0317

スコア1

test CHANGED Viewed

File without changes

test CHANGED Viewed

@@ -266,7 +266,9 @@
-追記
+**追記**
+---

追記

2021/07/04 16:39

投稿

hitosi0317

スコア1

test CHANGED Viewed

File without changes

test CHANGED Viewed

@@ -268,6 +268,118 @@
 追記
+javascript/packs/checked.js
+```javascript
+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
+```css
+@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' )

追記

2021/07/04 16:37

投稿

hitosi0317

スコア1

test CHANGED Viewed

File without changes

test CHANGED Viewed

@@ -263,3 +263,13 @@
 最後のCSSが適用されているかどうかの確認を表現したいんですが、これがうまいこといかない。
 わかる方がいらっしゃいましたらお力添えお願いたします.
+追記
+page.all('.plan')[0].matches_style?( 'background-color' => 'rgb(255, 0, 0)' )
+page.all('.plan')[0].matches_style?( 'background-color' => 'red' )
+このような指定の仕方をするとCSSが適用されていてもfalseを返されてしまう。

rspec　クリック背景色変化具体的質問

2021/07/04 16:22

投稿

hitosi0317

スコア1

test CHANGED Viewed

	@@ -1 +1 @@
1	- railsのRspecの結合テストコードで要素をクリックすると~~CSSが適用するコード~~を書きたい
1	+ railsのRspecの結合テストコードで要素をクリックした時に背景色が変化したことを真偽値で表現できるのか？

test CHANGED Viewed

@@ -1 +1,265 @@
+**実現したいこと**
+---
+railsの結合テストコードで要素をクリックした時に背景色が変化したことを真偽値で表現したい。
+**詰まっている問題**
+---
-これから要素をクリックするとCSSが適用されるコードを書こうと思っているんですが、Google検索などを用いて色々と参考サイトを探しているんですが全く見つかりません。参考になるようなサイトがありましたら教えていただけるとありがたいです。
+現在結合テストコードで要素をクリックするところまでは,行けたんですがクリックした時にCSSが適用されているかどうかの確認ができておりません。要素の内容を確認する(Capybara::Node::Matcher)検索メソッドなどを一通り確認して試しているんですがうまいこと行かないです。組み合わせの問題なのかスペルミスでうまいこといっていないのか？
+(例)こんな感じで試しました。
+![イメージ説明](2e164a6c8b13e14211a066af275ab77e.png)
+**実際のページ**
+---
+画像: ブロックをクリックするとCSSが適用される.
+![![イメージ説明](f9357f252454d2cb6408fd1ecf6cce90.png)
+**実際のコード**
+---
+views/motions/index.html.erb
+```Ruby
+<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
+```rspec
+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が適用されているかどうかの確認を表現したいんですが、これがうまいこといかない。
+わかる方がいらっしゃいましたらお力添えお願いたします.