質問編集履歴

試したことの削除

2021/12/05 01:31

投稿

nyanko-meshi

スコア13

test CHANGED Viewed

File without changes

test CHANGED Viewed

@@ -277,91 +277,3 @@
   end
 ```
-② Capybaraの設定を変更  => 同様のエラーが発生
-test/test_helper.rb
-```
-ENV['RAILS_ENV'] ||= 'test'
-require_relative "../config/environment"
-require "rails/test_help"
-require "minitest/reporters"
-require "capybara/rails"  # 追記
-Minitest::Reporters.use!
-# (中略)
-class ActionDispatch::IntegrationTest
-  include Capybara::DSL   # 追記
-  def log_in_as(user, password: 'password', remember_me: '1')
-    post login_path, params: { session: { email: user.email,
-                                          password: password,
-                                          remember_me: remember_me } }
-  end
-end
-```
-test/integration/likes_interface_test.rb
-```
-require 'test_helper'
-class LikesInterfaceTest < ActionDispatch::IntegrationTest
-#(中略)
-  # likeボタンの描画の切り替わり（ajaxリクエスト）
-  test "like-btn should change with ajax when pusshed " do
-    Capybara.current_driver = :poltergeist    # 追記
-    assert_select 'i.like-btn'
-    post create_like_path(@micropost), xhr: true
-    sleep 1                                   # 追記
-    assert_select 'i.unlike-btn'
-    post destroy_like_path(@micropost), xhr: true
-    sleep 1                                   # 追記
-    assert_select 'i.like-btn'
-    Capybara.use_default_driver               # 追記
-  end
-```

試したこと②を追加

2021/12/05 01:31

投稿

nyanko-meshi

スコア13

test CHANGED Viewed

File without changes

test CHANGED Viewed

@@ -252,7 +252,7 @@
 ### 試したこと
-`assert_match`を用いて`respose.body`の中から調べる形で書くとテストが通る。
+① `assert_match`を用いて`respose.body`の中から調べる形で書くとテストが通る。
@@ -277,3 +277,91 @@
   end
 ```
+② Capybaraの設定を変更  => 同様のエラーが発生
+test/test_helper.rb
+```
+ENV['RAILS_ENV'] ||= 'test'
+require_relative "../config/environment"
+require "rails/test_help"
+require "minitest/reporters"
+require "capybara/rails"  # 追記
+Minitest::Reporters.use!
+# (中略)
+class ActionDispatch::IntegrationTest
+  include Capybara::DSL   # 追記
+  def log_in_as(user, password: 'password', remember_me: '1')
+    post login_path, params: { session: { email: user.email,
+                                          password: password,
+                                          remember_me: remember_me } }
+  end
+end
+```
+test/integration/likes_interface_test.rb
+```
+require 'test_helper'
+class LikesInterfaceTest < ActionDispatch::IntegrationTest
+#(中略)
+  # likeボタンの描画の切り替わり（ajaxリクエスト）
+  test "like-btn should change with ajax when pusshed " do
+    Capybara.current_driver = :poltergeist    # 追記
+    assert_select 'i.like-btn'
+    post create_like_path(@micropost), xhr: true
+    sleep 1                                   # 追記
+    assert_select 'i.unlike-btn'
+    post destroy_like_path(@micropost), xhr: true
+    sleep 1                                   # 追記
+    assert_select 'i.like-btn'
+    Capybara.use_default_driver               # 追記
+  end
+```

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

2021/11/29 14:30

投稿

nyanko-meshi

スコア13

test CHANGED Viewed

	@@ -1 +1 @@
1	- ~~いいねボタンのテンプレートの切り替わりをテストしたい（~~minitest）
1	+ [minitest]assert_selectで指定した要素がajaxだと見つけられない

test CHANGED Viewed

@@ -2,13 +2,239 @@
 Railsでtwitterのようなアプリを作成しています。
-ユーザーの投稿に「いいね」を押せるようにし、いいねボタンにはajaxを用いてテンプレート（赤いハート、灰色のハート）が非同期で切り替わるように実装しています。
+ユーザーの投稿に「いいね」ボタンを実装し、ボタンを押すとajaxで`js.erb`ファイルを読み込むことでボタン（赤いハート、灰色のハート）が非同期で切り替わるように実装しています。
+このテンプレートが切り替わったかどうかを検証するテストを書こうと思い、
+`assert_select`を用いてボタン部分の要素が存在するか確認したところ、
+(1)非同期通信 => 該当する要素を見つけられずテストが失敗
+(2)同期通信　 => テスト成功
+という結果になりました。
+そこで、代わりに`assert_match`を用いると、非同期通信でもテストが通るようになりました。
+なぜ`assert_select`だと、非同期通信において指定した要素を検知できなかったのでしょうか。
+### 該当のソースコード
+いいねボタンのテンプレート（app/views/likes/_like_form.html.erb）
+```
+<% if logged_in? %>
+  <%# いいね済みの場合 %>
+  <% if current_user.liked_micropost?(micropost.id) %>
+    <td>
+      <%= link_to destroy_like_path(micropost), method: :POST, remote: true do %>
+        <i class="fa fa-heart unlike-btn"></i>
+      <% end %>
+      <%= micropost.likes.count %>
+    </td>
+  <%# いいねしてない場合 %>
+  <% else %>
+    <td>
+      <%= link_to create_like_path(micropost), method: :POST, remote: true do %>
+        <i class="fa fa-heart like-btn"></i>
+      <% end %>
+      <%= object.likes.count %>
+    </td>
+  <% end %>
+<% end %>
+```
+app/controllers/likes_controller.rb
+```
+class LikesController < ApplicationController
+  before_action :micropost_params
+  def create
+    @like = Like.new(user_id: current_user.id, micropost_id: params[:micropost_id])
+    @like.save
+    respond_to do |format|
+      format.html { redirect_back(fallback_location: root_url) }  # jsをオフにしている人向け
+      format.js  # => /app/views/likes/create.js.erb
+    end
+  end
+  def destroy
+    @like = Like.find_by(user_id: current_user.id, micropost_id: params[:micropost_id])
+    @like.destroy
+    respond_to do |format|
+      format.html { redirect_back(fallback_location: root_url) }
+      format.js  # => /app/views/likes/create.js.erb
+    end
+  end
+  private
+  # いいねボタンを押した投稿情報を、インスタンス変数に保持してビューへ
+  def micropost_params
+    @micropost = Micropost.find(params[:micropost_id])
+  end
+end
+```
+app/views/likes/create.js.erb
+```
-テストコードを書くにあたって、非同期通信でない場合は`follow_redirect!`でページを再読込みするとテンプレートが切り替わっているようなのですが、非同期通信の場合、リダイレクトを用いずにどうやってテンプレートを切り替えることができるのでしょうか。
+$('#like_<%= @micropost.id %>').html("<%= j(render partial: 'likes/like_form', locals: {micropost: @micropost}) %>");
+```
+app/views/likes/destroy.js.erb
+```
+$('#like_<%= @micropost.id %>').html("<%= j(render partial: 'likes/like_form', locals: {micropost: @micropost}) %>");
+```
+### テストコード
+test/integration/likes_interface_test.rb
+```ここに言語名を入力
+require 'test_helper'
+class LikesInterfaceTest < ActionDispatch::IntegrationTest
+  def setup
+    @user = users(:michael)
+    # feed: 自身とフォロー中ユーザーの全投稿
+    @micropost = @user.feed.paginate(page: 1).first
+    log_in_as(@user)
+    get root_url
+  end
+  # いいねボタンの描画の切り替わり（通常リクエスト） => テスト成功
+  test "like-btn should change on standard way" do
+    assert_select 'i.like-btn'
+    post create_like_path(@micropost)
+    follow_redirect!
+    assert_select 'i.unlike-btn'
+    post destroy_like_path(@micropost)
+    follow_redirect!
+    assert_select 'i.like-btn'
+  end
+  # いいねボタンの描画の切り替わり（ajaxリクエスト） => テスト失敗
+  test "like-btn should change with ajax " do
+    assert_select 'i.like-btn'
+    post create_like_path(@micropost), xhr: true
+    assert_select 'i.unlike-btn'
+    post destroy_like_path(@micropost), xhr: true
+    assert_select 'i.like-btn'
+  end
+ # 以下略
+end
+```
 ### 発生している問題・エラーメッセージ
@@ -24,106 +250,28 @@
-### 該当のソースコード
+### 試したこと
-test/integration/likes_interface_test.rb
-```ここに言語名を入力
-require 'test_helper'
-class LikesInterfaceTest < ActionDispatch::IntegrationTest
-  def setup
-    @user = users(:michael)
-    # feed: 自身とフォロー中ユーザーの全投稿
-    @micropost = @user.feed.paginate(page: 1).first
+`assert_match`を用いて`respose.body`の中から調べる形で書くとテストが通る。
-    log_in_as(@user)
-    get root_url
-  end
+```
-  # いいねボタンの描画の切り替わり（通常リクエスト） => テスト成功
-  test "like-btn should change on standard way" do
-    assert_select 'i.like-btn'
-    post create_like_path(@micropost)
-    follow_redirect!
-    assert_select 'i.unlike-btn'
-    post destroy_like_path(@micropost)
-    follow_redirect!
-    assert_select 'i.like-btn'
-  end
-  # いいねボタンの描画の切り替わり（ajaxリクエスト） => テスト失敗
+  # いいねボタンの描画の切り替わり（ajaxリクエスト）
-  test "like-btn should change with ajax " do
+  test "like-btn should change with ajax when pusshed " do
     assert_select 'i.like-btn'
     post create_like_path(@micropost), xhr: true
-    assert_select 'i.unlike-btn'
+    assert_match 'unlike-btn', response.body
     post destroy_like_path(@micropost), xhr: true
-    assert_select 'i.like-btn'
-  end
- # 以下略
-end
-```
-### 試したこと
-`assert_match`を用いて`respose.body`の中から調べる形で書くとテストが通るようにはなりました。
-```
-# likeボタンの描画の切り替わり（ajaxリクエスト）
-  test "like-btn should change with ajax when pusshed " do
-    assert_select 'i.like-btn'
-    post create_like_path(@micropost), xhr: true
-    assert_match 'unlike-btn', response.body
-    post destroy_like_path(@micropost), xhr: true
     assert_match 'like-btn', response.body
   end

「試したこと」を追加

2021/11/29 03:14

投稿

nyanko-meshi

スコア13

test CHANGED Viewed

File without changes

test CHANGED Viewed

@@ -101,3 +101,31 @@
 end
 ```
+### 試したこと
+`assert_match`を用いて`respose.body`の中から調べる形で書くとテストが通るようにはなりました。
+```
+# likeボタンの描画の切り替わり（ajaxリクエスト）
+  test "like-btn should change with ajax when pusshed " do
+    assert_select 'i.like-btn'
+    post create_like_path(@micropost), xhr: true
+    assert_match 'unlike-btn', response.body
+    post destroy_like_path(@micropost), xhr: true
+    assert_match 'like-btn', response.body
+  end
+```