Simplify code to show/collapse comment replies

Tests are also a bit easier to read, even though we need to use the
`text:` option to find links because otherwise the text in the hidden
`<span>` tags will cause `click_link` to miss the link we want to click.

Here's an explanation by one of Capybara's authors:
https://github.com/teamcapybara/capybara/issues/2347#issuecomment-626373440

app/assets/javascripts/comments.js

@@ -39,9 +39,6 @@
     toggle_form: function(id) {
       $("#js-comment-form-" + id).toggle();
     },
-    toggle_arrow: function(id) {
-      $("span#" + id + "_arrow").toggleClass("fa-minus-square fa-plus-square");
-    },
     initialize: function() {
       $("body").on("click", ".js-add-comment-link", function() {
         App.Comments.toggle_form($(this).data().id);
@@ -49,10 +46,8 @@
       });
 
       $("body").on("click", ".js-toggle-children", function() {
-        var children_container_id;
+        $("#" + $(this).data().id + "_children").toggle("slow");
-        children_container_id = ($(this).data().id) + "_children";
+        $(this).children(".far").toggleClass("fa-minus-square fa-plus-square");
-        $("#" + children_container_id).toggle("slow");
-        App.Comments.toggle_arrow(children_container_id);
         $(this).children(".js-child-toggle").toggle();
         return false;
       });

app/views/comments/_comment.html.erb

@@ -89,7 +89,7 @@
             <%= link_to "", class: "js-toggle-children relative", data: { "id": "#{dom_id(comment)}" } do %>
               <span class="show-for-sr js-child-toggle" style="display: none;"><%= t("shared.show") %></span>
               <span class="show-for-sr js-child-toggle"><%= t("shared.hide") %></span>
-              <span id="<%= dom_id(comment) %>_children_arrow" class="far fa-minus-square"></span>
+              <span class="far fa-minus-square"></span>
               <span class="js-child-toggle" style="display: none;"><%= t("comments.comment.responses_show", count: comment.children.size) %></span>
               <span class="js-child-toggle"><%= t("comments.comment.responses_collapse", count: comment.children.size) %></span>
             <% end %>

spec/system/comments/budget_investments_spec.rb

@@ -66,20 +66,26 @@ describe "Commenting Budget::Investments" do
     expect(page).to have_css(".comment", count: 3)
     expect(page).to have_content("1 response (collapse)", count: 2)
 
-    find("#comment_#{child_comment.id}_children_arrow").click
+    within ".comment .comment", text: "First subcomment" do
+      click_link text: "1 response (collapse)"
+    end
 
     expect(page).to have_css(".comment", count: 2)
     expect(page).to have_content("1 response (collapse)")
     expect(page).to have_content("1 response (show)")
     expect(page).not_to have_content grandchild_comment.body
 
-    find("#comment_#{child_comment.id}_children_arrow").click
+    within ".comment .comment", text: "First subcomment" do
+      click_link text: "1 response (show)"
+    end
 
     expect(page).to have_css(".comment", count: 3)
     expect(page).to have_content("1 response (collapse)", count: 2)
     expect(page).to have_content grandchild_comment.body
 
-    find("#comment_#{parent_comment.id}_children_arrow").click
+    within ".comment", text: "Main comment" do
+      click_link text: "1 response (collapse)", match: :first
+    end
 
     expect(page).to have_css(".comment", count: 1)
     expect(page).to have_content("1 response (show)")

spec/system/comments/budget_investments_valuation_spec.rb

@@ -61,7 +61,7 @@ describe "Internal valuation comments on Budget::Investments" do
     scenario "Collapsable comments", :js do
       parent_comment = create(:comment, :valuation, author: valuator_user, body: "Main comment",
                                                     commentable: investment)
-      child_comment  = create(:comment, :valuation, author: valuator_user, body: "First child",
+      child_comment  = create(:comment, :valuation, author: valuator_user, body: "First subcomment",
                                                     commentable: investment, parent: parent_comment)
       grandchild_comment = create(:comment, :valuation, author: valuator_user,
                                                         parent: child_comment,
@@ -73,20 +73,26 @@ describe "Internal valuation comments on Budget::Investments" do
       expect(page).to have_css(".comment", count: 3)
       expect(page).to have_content("1 response (collapse)", count: 2)
 
-      find("#comment_#{child_comment.id}_children_arrow").click
+      within ".comment .comment", text: "First subcomment" do
+        click_link text: "1 response (collapse)"
+      end
 
       expect(page).to have_css(".comment", count: 2)
       expect(page).to have_content("1 response (collapse)")
       expect(page).to have_content("1 response (show)")
       expect(page).not_to have_content grandchild_comment.body
 
-      find("#comment_#{child_comment.id}_children_arrow").click
+      within ".comment .comment", text: "First subcomment" do
+        click_link text: "1 response (show)"
+      end
 
       expect(page).to have_css(".comment", count: 3)
       expect(page).to have_content("1 response (collapse)", count: 2)
       expect(page).to have_content grandchild_comment.body
 
-      find("#comment_#{parent_comment.id}_children_arrow").click
+      within ".comment", text: "Main comment" do
+        click_link text: "1 response (collapse)", match: :first
+      end
 
       expect(page).to have_css(".comment", count: 1)
       expect(page).to have_content("1 response (show)")

spec/system/comments/debates_spec.rb

@@ -63,20 +63,26 @@ describe "Commenting debates" do
     expect(page).to have_css(".comment", count: 3)
     expect(page).to have_content("1 response (collapse)", count: 2)
 
-    find("#comment_#{child_comment.id}_children_arrow").click
+    within ".comment .comment", text: "First subcomment" do
+      click_link text: "1 response (collapse)"
+    end
 
     expect(page).to have_css(".comment", count: 2)
     expect(page).to have_content("1 response (collapse)")
     expect(page).to have_content("1 response (show)")
     expect(page).not_to have_content grandchild_comment.body
 
-    find("#comment_#{child_comment.id}_children_arrow").click
+    within ".comment .comment", text: "First subcomment" do
+      click_link text: "1 response (show)"
+    end
 
     expect(page).to have_css(".comment", count: 3)
     expect(page).to have_content("1 response (collapse)", count: 2)
     expect(page).to have_content grandchild_comment.body
 
-    find("#comment_#{parent_comment.id}_children_arrow").click
+    within ".comment", text: "Main comment" do
+      click_link text: "1 response (collapse)", match: :first
+    end
 
     expect(page).to have_css(".comment", count: 1)
     expect(page).to have_content("1 response (show)")

spec/system/comments/legislation_annotations_spec.rb

@@ -71,20 +71,26 @@ describe "Commenting legislation questions" do
     expect(page).to have_css(".comment", count: 3)
     expect(page).to have_content("1 response (collapse)", count: 2)
 
-    find("#comment_#{child_comment.id}_children_arrow").click
+    within ".comment .comment", text: "First subcomment" do
+      click_link text: "1 response (collapse)"
+    end
 
     expect(page).to have_css(".comment", count: 2)
     expect(page).to have_content("1 response (collapse)")
     expect(page).to have_content("1 response (show)")
     expect(page).not_to have_content grandchild_comment.body
 
-    find("#comment_#{child_comment.id}_children_arrow").click
+    within ".comment .comment", text: "First subcomment" do
+      click_link text: "1 response (show)"
+    end
 
     expect(page).to have_css(".comment", count: 3)
     expect(page).to have_content("1 response (collapse)", count: 2)
     expect(page).to have_content grandchild_comment.body
 
-    find("#comment_#{parent_comment.id}_children_arrow").click
+    within ".comment", text: parent_comment.body do
+      click_link text: "1 response (collapse)", match: :first
+    end
 
     expect(page).to have_css(".comment", count: 1)
     expect(page).to have_content("1 response (show)")

spec/system/comments/legislation_questions_spec.rb

@@ -69,20 +69,26 @@ describe "Commenting legislation questions" do
     expect(page).to have_css(".comment", count: 3)
     expect(page).to have_content("1 response (collapse)", count: 2)
 
-    find("#comment_#{child_comment.id}_children_arrow").click
+    within ".comment .comment", text: "First subcomment" do
+      click_link text: "1 response (collapse)"
+    end
 
     expect(page).to have_css(".comment", count: 2)
     expect(page).to have_content("1 response (collapse)")
     expect(page).to have_content("1 response (show)")
     expect(page).not_to have_content grandchild_comment.body
 
-    find("#comment_#{child_comment.id}_children_arrow").click
+    within ".comment .comment", text: "First subcomment" do
+      click_link text: "1 response (show)"
+    end
 
     expect(page).to have_css(".comment", count: 3)
     expect(page).to have_content("1 response (collapse)", count: 2)
     expect(page).to have_content grandchild_comment.body
 
-    find("#comment_#{parent_comment.id}_children_arrow").click
+    within ".comment", text: "Main comment" do
+      click_link text: "1 response (collapse)", match: :first
+    end
 
     expect(page).to have_css(".comment", count: 1)
     expect(page).to have_content("1 response (show)")

spec/system/comments/polls_spec.rb

@@ -64,20 +64,26 @@ describe "Commenting polls" do
     expect(page).to have_css(".comment", count: 3)
     expect(page).to have_content("1 response (collapse)", count: 2)
 
-    find("#comment_#{child_comment.id}_children_arrow").click
+    within ".comment .comment", text: "First subcomment" do
+      click_link text: "1 response (collapse)"
+    end
 
     expect(page).to have_css(".comment", count: 2)
     expect(page).to have_content("1 response (collapse)")
     expect(page).to have_content("1 response (show)")
     expect(page).not_to have_content grandchild_comment.body
 
-    find("#comment_#{child_comment.id}_children_arrow").click
+    within ".comment .comment", text: "First subcomment" do
+      click_link text: "1 response (show)"
+    end
 
     expect(page).to have_css(".comment", count: 3)
     expect(page).to have_content("1 response (collapse)", count: 2)
     expect(page).to have_content grandchild_comment.body
 
-    find("#comment_#{parent_comment.id}_children_arrow").click
+    within ".comment", text: "Main comment" do
+      click_link text: "1 response (collapse)", match: :first
+    end
 
     expect(page).to have_css(".comment", count: 1)
     expect(page).to have_content("1 response (show)")

spec/system/comments/proposals_spec.rb

@@ -62,20 +62,26 @@ describe "Commenting proposals" do
     expect(page).to have_css(".comment", count: 3)
     expect(page).to have_content("1 response (collapse)", count: 2)
 
-    find("#comment_#{child_comment.id}_children_arrow").click
+    within ".comment .comment", text: "First subcomment" do
+      click_link text: "1 response (collapse)"
+    end
 
     expect(page).to have_css(".comment", count: 2)
     expect(page).to have_content("1 response (collapse)")
     expect(page).to have_content("1 response (show)")
     expect(page).not_to have_content grandchild_comment.body
 
-    find("#comment_#{child_comment.id}_children_arrow").click
+    within ".comment .comment", text: "First subcomment" do
+      click_link text: "1 response (show)"
+    end
 
     expect(page).to have_css(".comment", count: 3)
     expect(page).to have_content("1 response (collapse)", count: 2)
     expect(page).to have_content grandchild_comment.body
 
-    find("#comment_#{parent_comment.id}_children_arrow").click
+    within ".comment", text: "Main comment" do
+      click_link text: "1 response (collapse)", match: :first
+    end
 
     expect(page).to have_css(".comment", count: 1)
     expect(page).to have_content("1 response (show)")

spec/system/comments/topics_spec.rb

@@ -67,20 +67,26 @@ describe "Commenting topics from proposals" do
     expect(page).to have_css(".comment", count: 3)
     expect(page).to have_content("1 response (collapse)", count: 2)
 
-    find("#comment_#{child_comment.id}_children_arrow").click
+    within ".comment .comment", text: "First subcomment" do
+      click_link text: "1 response (collapse)"
+    end
 
     expect(page).to have_css(".comment", count: 2)
     expect(page).to have_content("1 response (collapse)")
     expect(page).to have_content("1 response (show)")
     expect(page).not_to have_content grandchild_comment.body
 
-    find("#comment_#{child_comment.id}_children_arrow").click
+    within ".comment .comment", text: "First subcomment" do
+      click_link text: "1 response (show)"
+    end
 
     expect(page).to have_css(".comment", count: 3)
     expect(page).to have_content("1 response (collapse)", count: 2)
     expect(page).to have_content grandchild_comment.body
 
-    find("#comment_#{parent_comment.id}_children_arrow").click
+    within ".comment", text: "Main comment" do
+      click_link text: "1 response (collapse)", match: :first
+    end
 
     expect(page).to have_css(".comment", count: 1)
     expect(page).to have_content("1 response (show)")
@@ -625,17 +631,23 @@ describe "Commenting topics from budget investments" do
 
     expect(page).to have_css(".comment", count: 3)
 
-    find("#comment_#{child_comment.id}_children_arrow").click
+    within ".comment .comment", text: "First subcomment" do
+      click_link text: "1 response (collapse)"
+    end
 
     expect(page).to have_css(".comment", count: 2)
     expect(page).not_to have_content grandchild_comment.body
 
-    find("#comment_#{child_comment.id}_children_arrow").click
+    within ".comment .comment", text: "First subcomment" do
+      click_link text: "1 response (show)"
+    end
 
     expect(page).to have_css(".comment", count: 3)
     expect(page).to have_content grandchild_comment.body
 
-    find("#comment_#{parent_comment.id}_children_arrow").click
+    within ".comment", text: "Main comment" do
+      click_link text: "1 response (collapse)", match: :first
+    end
 
     expect(page).to have_css(".comment", count: 1)
     expect(page).not_to have_content child_comment.body