実現したい事
- 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-3 | class:1 | class:2 |
id:2021-3-2 | class:1 | class:2 |
id:2021-3-1 | class:1 | class:2 |
id:2021-2-28 | class:1 | class:2 |
id:2021-2-27 | class:1 | class:2 |
id:2021-2-26 | class:1 | class: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})
あなたの回答
tips
プレビュー