質問編集履歴

4

試したことの削除

2021/12/05 01:31

投稿

nyanko-meshi
nyanko-meshi

スコア13

test CHANGED
File without changes
test CHANGED
@@ -277,91 +277,3 @@
277
277
  end
278
278
 
279
279
  ```
280
-
281
-
282
-
283
- ② Capybaraの設定を変更 => 同様のエラーが発生
284
-
285
- test/test_helper.rb
286
-
287
- ```
288
-
289
- ENV['RAILS_ENV'] ||= 'test'
290
-
291
- require_relative "../config/environment"
292
-
293
- require "rails/test_help"
294
-
295
- require "minitest/reporters"
296
-
297
- require "capybara/rails" # 追記
298
-
299
- Minitest::Reporters.use!
300
-
301
-
302
-
303
- # (中略)
304
-
305
-
306
-
307
- class ActionDispatch::IntegrationTest
308
-
309
- include Capybara::DSL # 追記
310
-
311
-
312
-
313
- def log_in_as(user, password: 'password', remember_me: '1')
314
-
315
- post login_path, params: { session: { email: user.email,
316
-
317
- password: password,
318
-
319
- remember_me: remember_me } }
320
-
321
- end
322
-
323
- end
324
-
325
- ```
326
-
327
- test/integration/likes_interface_test.rb
328
-
329
- ```
330
-
331
- require 'test_helper'
332
-
333
-
334
-
335
- class LikesInterfaceTest < ActionDispatch::IntegrationTest
336
-
337
-
338
-
339
- #(中略)
340
-
341
-
342
-
343
- # likeボタンの描画の切り替わり(ajaxリクエスト)
344
-
345
- test "like-btn should change with ajax when pusshed " do
346
-
347
- Capybara.current_driver = :poltergeist # 追記
348
-
349
- assert_select 'i.like-btn'
350
-
351
- post create_like_path(@micropost), xhr: true
352
-
353
- sleep 1 # 追記
354
-
355
- assert_select 'i.unlike-btn'
356
-
357
- post destroy_like_path(@micropost), xhr: true
358
-
359
- sleep 1 # 追記
360
-
361
- assert_select 'i.like-btn'
362
-
363
- Capybara.use_default_driver # 追記
364
-
365
- end
366
-
367
- ```

3

試したこと②を追加

2021/12/05 01:31

投稿

nyanko-meshi
nyanko-meshi

スコア13

test CHANGED
File without changes
test CHANGED
@@ -252,7 +252,7 @@
252
252
 
253
253
  ### 試したこと
254
254
 
255
- `assert_match`を用いて`respose.body`の中から調べる形で書くとテストが通る。
255
+ `assert_match`を用いて`respose.body`の中から調べる形で書くとテストが通る。
256
256
 
257
257
 
258
258
 
@@ -277,3 +277,91 @@
277
277
  end
278
278
 
279
279
  ```
280
+
281
+
282
+
283
+ ② Capybaraの設定を変更 => 同様のエラーが発生
284
+
285
+ test/test_helper.rb
286
+
287
+ ```
288
+
289
+ ENV['RAILS_ENV'] ||= 'test'
290
+
291
+ require_relative "../config/environment"
292
+
293
+ require "rails/test_help"
294
+
295
+ require "minitest/reporters"
296
+
297
+ require "capybara/rails" # 追記
298
+
299
+ Minitest::Reporters.use!
300
+
301
+
302
+
303
+ # (中略)
304
+
305
+
306
+
307
+ class ActionDispatch::IntegrationTest
308
+
309
+ include Capybara::DSL # 追記
310
+
311
+
312
+
313
+ def log_in_as(user, password: 'password', remember_me: '1')
314
+
315
+ post login_path, params: { session: { email: user.email,
316
+
317
+ password: password,
318
+
319
+ remember_me: remember_me } }
320
+
321
+ end
322
+
323
+ end
324
+
325
+ ```
326
+
327
+ test/integration/likes_interface_test.rb
328
+
329
+ ```
330
+
331
+ require 'test_helper'
332
+
333
+
334
+
335
+ class LikesInterfaceTest < ActionDispatch::IntegrationTest
336
+
337
+
338
+
339
+ #(中略)
340
+
341
+
342
+
343
+ # likeボタンの描画の切り替わり(ajaxリクエスト)
344
+
345
+ test "like-btn should change with ajax when pusshed " do
346
+
347
+ Capybara.current_driver = :poltergeist # 追記
348
+
349
+ assert_select 'i.like-btn'
350
+
351
+ post create_like_path(@micropost), xhr: true
352
+
353
+ sleep 1 # 追記
354
+
355
+ assert_select 'i.unlike-btn'
356
+
357
+ post destroy_like_path(@micropost), xhr: true
358
+
359
+ sleep 1 # 追記
360
+
361
+ assert_select 'i.like-btn'
362
+
363
+ Capybara.use_default_driver # 追記
364
+
365
+ end
366
+
367
+ ```

2

質問内容とタイトルを詳細化

2021/11/29 14:30

投稿

nyanko-meshi
nyanko-meshi

スコア13

test CHANGED
@@ -1 +1 @@
1
- いいねボタンのテンプレートの切り替わりをテストしたい(minitest
1
+ [minitest]assert_selectで指定した要素がajaxだと見つけられない
test CHANGED
@@ -2,13 +2,239 @@
2
2
 
3
3
  Railsでtwitterのようなアプリを作成しています。
4
4
 
5
- ユーザーの投稿に「いいね」を押せるようにし、いいねボタンにはajaxを用いてテプレート(赤いハート、灰色のハート)が非同期で切り替わるように実装しています。
5
+ ユーザーの投稿に「いいね」ボタン実装し、ボタンを押すとajaxで`js.erb`ファイル読み込むことでボタン(赤いハート、灰色のハート)が非同期で切り替わるように実装しています。
6
+
7
+
8
+
6
-
9
+ このテンプレートが切り替わったかどうかを検証するテストを書こうと思い、
10
+
7
-
11
+ `assert_select`を用いてボタン部分の要素が存在するか確認したところ、
12
+
8
-
13
+ (1)非同期通信 => 該当する要素を見つけられずテストが失敗
14
+
15
+ (2)同期通信  => テスト成功
16
+
17
+ という結果になりました。
18
+
19
+
20
+
21
+ そこで、代わりに`assert_match`を用いると、非同期通信でもテストが通るようになりました。
22
+
23
+
24
+
25
+ なぜ`assert_select`だと、非同期通信において指定した要素を検知できなかったのでしょうか。
26
+
27
+
28
+
29
+
30
+
31
+ ### 該当のソースコード
32
+
33
+ いいねボタンのテンプレート(app/views/likes/_like_form.html.erb)
34
+
35
+ ```
36
+
37
+ <% if logged_in? %>
38
+
39
+ <%# いいね済みの場合 %>
40
+
41
+ <% if current_user.liked_micropost?(micropost.id) %>
42
+
43
+ <td>
44
+
45
+ <%= link_to destroy_like_path(micropost), method: :POST, remote: true do %>
46
+
47
+ <i class="fa fa-heart unlike-btn"></i>
48
+
49
+ <% end %>
50
+
51
+ <%= micropost.likes.count %>
52
+
53
+ </td>
54
+
55
+ <%# いいねしてない場合 %>
56
+
57
+ <% else %>
58
+
59
+ <td>
60
+
61
+ <%= link_to create_like_path(micropost), method: :POST, remote: true do %>
62
+
63
+ <i class="fa fa-heart like-btn"></i>
64
+
65
+ <% end %>
66
+
67
+ <%= object.likes.count %>
68
+
69
+ </td>
70
+
71
+ <% end %>
72
+
73
+ <% end %>
74
+
75
+ ```
76
+
77
+
78
+
79
+ app/controllers/likes_controller.rb
80
+
81
+ ```
82
+
83
+ class LikesController < ApplicationController
84
+
85
+ before_action :micropost_params
86
+
87
+
88
+
89
+ def create
90
+
91
+ @like = Like.new(user_id: current_user.id, micropost_id: params[:micropost_id])
92
+
93
+ @like.save
94
+
95
+ respond_to do |format|
96
+
97
+ format.html { redirect_back(fallback_location: root_url) } # jsをオフにしている人向け
98
+
99
+ format.js # => /app/views/likes/create.js.erb
100
+
101
+ end
102
+
103
+ end
104
+
105
+
106
+
107
+ def destroy
108
+
109
+ @like = Like.find_by(user_id: current_user.id, micropost_id: params[:micropost_id])
110
+
111
+ @like.destroy
112
+
113
+ respond_to do |format|
114
+
115
+ format.html { redirect_back(fallback_location: root_url) }
116
+
117
+ format.js # => /app/views/likes/create.js.erb
118
+
119
+ end
120
+
121
+ end
122
+
123
+
124
+
125
+ private
126
+
127
+
128
+
129
+ # いいねボタンを押した投稿情報を、インスタンス変数に保持してビューへ
130
+
131
+ def micropost_params
132
+
133
+ @micropost = Micropost.find(params[:micropost_id])
134
+
135
+ end
136
+
137
+
138
+
139
+ end
140
+
141
+ ```
142
+
143
+
144
+
145
+ app/views/likes/create.js.erb
146
+
147
+ ```
148
+
9
- テストコードを書くにあたって、非同期通信でない場合は`follow_redirect!`でページを再読込みするとテンプレートが切り替わっているようなのですが、非同期通信の場合、リダイレクトを用いずにどうやってテンプレートを切り替えることができるのでしょうか。
149
+ $('#like_<%= @micropost.id %>').html("<%= j(render partial: 'likes/like_form', locals: {micropost: @micropost}) %>");
150
+
10
-
151
+ ```
152
+
11
-
153
+ app/views/likes/destroy.js.erb
154
+
155
+ ```
156
+
157
+ $('#like_<%= @micropost.id %>').html("<%= j(render partial: 'likes/like_form', locals: {micropost: @micropost}) %>");
158
+
159
+ ```
160
+
161
+ ### テストコード
162
+
163
+ test/integration/likes_interface_test.rb
164
+
165
+ ```ここに言語名を入力
166
+
167
+ require 'test_helper'
168
+
169
+
170
+
171
+ class LikesInterfaceTest < ActionDispatch::IntegrationTest
172
+
173
+
174
+
175
+ def setup
176
+
177
+ @user = users(:michael)
178
+
179
+ # feed: 自身とフォロー中ユーザーの全投稿
180
+
181
+ @micropost = @user.feed.paginate(page: 1).first
182
+
183
+ log_in_as(@user)
184
+
185
+ get root_url
186
+
187
+ end
188
+
189
+
190
+
191
+ # いいねボタンの描画の切り替わり(通常リクエスト) => テスト成功
192
+
193
+ test "like-btn should change on standard way" do
194
+
195
+ assert_select 'i.like-btn'
196
+
197
+ post create_like_path(@micropost)
198
+
199
+ follow_redirect!
200
+
201
+ assert_select 'i.unlike-btn'
202
+
203
+ post destroy_like_path(@micropost)
204
+
205
+ follow_redirect!
206
+
207
+ assert_select 'i.like-btn'
208
+
209
+ end
210
+
211
+
212
+
213
+ # いいねボタンの描画の切り替わり(ajaxリクエスト) => テスト失敗
214
+
215
+ test "like-btn should change with ajax " do
216
+
217
+ assert_select 'i.like-btn'
218
+
219
+ post create_like_path(@micropost), xhr: true
220
+
221
+ assert_select 'i.unlike-btn'
222
+
223
+ post destroy_like_path(@micropost), xhr: true
224
+
225
+ assert_select 'i.like-btn'
226
+
227
+ end
228
+
229
+
230
+
231
+ # 以下略
232
+
233
+
234
+
235
+ end
236
+
237
+ ```
12
238
 
13
239
  ### 発生している問題・エラーメッセージ
14
240
 
@@ -24,106 +250,28 @@
24
250
 
25
251
 
26
252
 
27
- ### 該当のソースコード
253
+ ### 試したこと
28
-
29
- test/integration/likes_interface_test.rb
254
+
30
-
31
- ```ここに言語名を入力
32
-
33
- require 'test_helper'
34
-
35
-
36
-
37
- class LikesInterfaceTest < ActionDispatch::IntegrationTest
38
-
39
-
40
-
41
- def setup
42
-
43
- @user = users(:michael)
44
-
45
- # feed: 自身とフォロー中ユーザーの全投稿
46
-
47
- @micropost = @user.feed.paginate(page: 1).first
255
+ `assert_match`を用いて`respose.body`の中から調べる形で書くとテストが通る。
48
-
49
- log_in_as(@user)
256
+
50
-
51
- get root_url
257
+
52
-
258
+
259
+
260
+
53
- end
261
+ ```
54
-
55
-
56
-
57
- # いいねボタンの描画の切り替わり(通常リクエスト) => テスト成功
262
+
58
-
59
- test "like-btn should change on standard way" do
60
-
61
- assert_select 'i.like-btn'
62
-
63
- post create_like_path(@micropost)
64
-
65
- follow_redirect!
66
-
67
- assert_select 'i.unlike-btn'
68
-
69
- post destroy_like_path(@micropost)
70
-
71
- follow_redirect!
72
-
73
- assert_select 'i.like-btn'
74
-
75
- end
76
-
77
-
78
-
79
- # いいねボタンの描画の切り替わり(ajaxリクエスト) => テスト失敗
263
+ # いいねボタンの描画の切り替わり(ajaxリクエスト)
80
-
264
+
81
- test "like-btn should change with ajax " do
265
+ test "like-btn should change with ajax when pusshed " do
82
266
 
83
267
  assert_select 'i.like-btn'
84
268
 
85
269
  post create_like_path(@micropost), xhr: true
86
270
 
87
- assert_select 'i.unlike-btn'
271
+ assert_match 'unlike-btn', response.body
88
272
 
89
273
  post destroy_like_path(@micropost), xhr: true
90
274
 
91
- assert_select 'i.like-btn'
92
-
93
- end
94
-
95
-
96
-
97
- # 以下略
98
-
99
-
100
-
101
- end
102
-
103
- ```
104
-
105
-
106
-
107
- ### 試したこと
108
-
109
- `assert_match`を用いて`respose.body`の中から調べる形で書くとテストが通るようにはなりました。
110
-
111
-
112
-
113
- ```
114
-
115
- # likeボタンの描画の切り替わり(ajaxリクエスト)
116
-
117
- test "like-btn should change with ajax when pusshed " do
118
-
119
- assert_select 'i.like-btn'
120
-
121
- post create_like_path(@micropost), xhr: true
122
-
123
- assert_match 'unlike-btn', response.body
124
-
125
- post destroy_like_path(@micropost), xhr: true
126
-
127
275
  assert_match 'like-btn', response.body
128
276
 
129
277
  end

1

「試したこと」を追加

2021/11/29 03:14

投稿

nyanko-meshi
nyanko-meshi

スコア13

test CHANGED
File without changes
test CHANGED
@@ -101,3 +101,31 @@
101
101
  end
102
102
 
103
103
  ```
104
+
105
+
106
+
107
+ ### 試したこと
108
+
109
+ `assert_match`を用いて`respose.body`の中から調べる形で書くとテストが通るようにはなりました。
110
+
111
+
112
+
113
+ ```
114
+
115
+ # likeボタンの描画の切り替わり(ajaxリクエスト)
116
+
117
+ test "like-btn should change with ajax when pusshed " do
118
+
119
+ assert_select 'i.like-btn'
120
+
121
+ post create_like_path(@micropost), xhr: true
122
+
123
+ assert_match 'unlike-btn', response.body
124
+
125
+ post destroy_like_path(@micropost), xhr: true
126
+
127
+ assert_match 'like-btn', response.body
128
+
129
+ end
130
+
131
+ ```