質問をすることでしか得られない、回答やアドバイスがある。

15分調べてもわからないことは、質問しよう!

新規登録して質問してみよう
ただいま回答率
85.50%
Haml

Haml(HTML abstraction markup language)は、HTML/XHTMLを効率的に記述するためのマークアップ言語および記法です。

RSpec

RSpecはRuby用のBDD(behaviour-driven development)フレームワークです。

JavaScript

JavaScriptは、プログラミング言語のひとつです。ネットスケープコミュニケーションズで開発されました。 開発当初はLiveScriptと呼ばれていましたが、業務提携していたサン・マイクロシステムズが開発したJavaが脚光を浴びていたことから、JavaScriptと改名されました。 動きのあるWebページを作ることを目的に開発されたもので、主要なWebブラウザのほとんどに搭載されています。

Q&A

0回答

751閲覧

テストコードで背景の色が変化していることを判定したい

Ryo-EAST

総合スコア33

Haml

Haml(HTML abstraction markup language)は、HTML/XHTMLを効率的に記述するためのマークアップ言語および記法です。

RSpec

RSpecはRuby用のBDD(behaviour-driven development)フレームワークです。

JavaScript

JavaScriptは、プログラミング言語のひとつです。ネットスケープコミュニケーションズで開発されました。 開発当初はLiveScriptと呼ばれていましたが、業務提携していたサン・マイクロシステムズが開発したJavaが脚光を浴びていたことから、JavaScriptと改名されました。 動きのあるWebページを作ることを目的に開発されたもので、主要なWebブラウザのほとんどに搭載されています。

0グッド

0クリップ

投稿2021/02/27 15:35

実現したい事

  • Rspecで背景色をjsで変更できた事を確認したい
  • jsのように表に指定しているidやclassで指定できないか知りたい

(現状で今日との日付の差分から算出するより短いコードで済む方法があれば知りたい)

##現状
rspecにて結合テストを作成しています。

下記のような日付とユーザーでできたtableをビューで作成し
クリックした部分を赤く塗りつぶすjsが作動します

クリックしたところが赤く塗り潰すところまでできましたが
どうしても塗りつぶされた事を確認できません

下記のコードでuser.idで登録された表のstyle='background: red;'
で判定しようとしましたが(※現在コメント化している部分です。)
「invalid selector: An invalid or illegal selector was specified」
とselectorの指定している中身が無効というようなメッセージが出てしまいます。

日付ユーザー:1ユーザー:2
id:2021-3-3class:1class:2
id:2021-3-2class:1class:2
id:2021-3-1class:1class:2
id:2021-2-28class:1class:2
id:2021-2-27class:1class:2
id:2021-2-26class:1class:2
```rspec
require 'rails_helper'

RSpec.describe "当番チェック機能", type: :system do
before do
@user = FactoryBot.create(:user)
@duty = FactoryBot.create(:duty, user_ids: @user.id)
end

context '当番表チェック作成' do
context '成功' do
it '全てが揃っている場合チェック作成が成功する' do
# サインインする
sign_in(@user)
@roster = FactoryBot.build(:roster)
# チェックページに遷移する
visit new_duty_roster_path(@duty.id)
# 表をクリックする
date = 5 - (@roster.date - Date.current).to_i
tds = all('tbody tr')[date].all('td')
tds[1].click
# # クリックしたところが赤に変化しているか確認する
# expect(page).to have_selector ".#{@user.id}[style='background: red;']"
# # 登録ボタンを押しDBが増えている事を確認する
expect{
find('input[name="commit"]').click
}.to change {Roster.count}.by(1)
# # ページに○がついている事を確認する
expect(page).to have_content('編集')
end
end
end
end

```haml %table#roster-table %thead %tr %th 日付 - @dutys.each do |dutys| %th.roster-name = dutys.user.nickname %tbody - 20.times do |i| %tr{id: "#{@today + 5 - i}"} %td = (@today + 5 - i).strftime('%Y/%m/%d') - @dutys.each do |dutys| %td{class: "#{dutys.user_id}"} - @roster.each do |roster| - if (@today + 5 - i) == roster.date && dutys.user_id == roster.user_id = link_to '○', duty_roster_path(@dutyfind, roster), method: :delete

javascript

1window.addEventListener('load', function(){ 2 // 表要素取得 3 const days = document.getElementsByTagName ("tr") 4 const users = document.getElementsByTagName ("td") 5 // 日付取得 6 for( var i=0,l=days.length; l>i; i++ ) { 7 var day = days[i] ; 8 day.addEventListener('click', function(){ 9 document.getElementById('roster_date').value = this.id 10 }) 11 } 12 // user_id取得 13 for( var i=0,l=users.length; l>i; i++ ) { 14 var user = users[i] ; 15 user.addEventListener('click', function(){ 16 for( var i=0,l=users.length; l>i; i++ ) { 17 users[i].style.background = 'white' 18 } 19 document.getElementById('roster_user_id').value = this.className 20 this.style.backgroundColor = 'red' 21 }) 22 } 23})

気になる質問をクリップする

クリップした質問は、後からいつでもMYページで確認できます。

またクリップした質問に回答があった際、通知やメールを受け取ることができます。

バッドをするには、ログインかつ

こちらの条件を満たす必要があります。

guest

あなたの回答

tips

太字

斜体

打ち消し線

見出し

引用テキストの挿入

コードの挿入

リンクの挿入

リストの挿入

番号リストの挿入

表の挿入

水平線の挿入

プレビュー

まだ回答がついていません

会員登録して回答してみよう

アカウントをお持ちの方は

15分調べてもわからないことは
teratailで質問しよう!

ただいまの回答率
85.50%

質問をまとめることで
思考を整理して素早く解決

テンプレート機能で
簡単に質問をまとめる

質問する

関連した質問