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
This commit is contained in:
Javi Martín
2020-05-10 21:04:09 +02:00
parent 255e56c0f2
commit 41b9d2ba01
10 changed files with 85 additions and 36 deletions

View File

@@ -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;
children_container_id = ($(this).data().id) + "_children";
$("#" + children_container_id).toggle("slow");
App.Comments.toggle_arrow(children_container_id);
$("#" + $(this).data().id + "_children").toggle("slow");
$(this).children(".far").toggleClass("fa-minus-square fa-plus-square");
$(this).children(".js-child-toggle").toggle();
return false;
});

View File

@@ -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 %>

View File

@@ -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)")

View File

@@ -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)")

View File

@@ -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)")

View File

@@ -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)")

View File

@@ -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)")

View File

@@ -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)")

View File

@@ -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)")

View File

@@ -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