diff --git a/app/assets/javascripts/comments.js.coffee b/app/assets/javascripts/comments.js.coffee
index cec074574..dd8006b9b 100644
--- a/app/assets/javascripts/comments.js.coffee
+++ b/app/assets/javascripts/comments.js.coffee
@@ -29,6 +29,13 @@ App.Comments =
toggle_form: (id) ->
$("#js-comment-form-#{id}").toggle()
+ toggle_arrow: (id) ->
+ arrow = "i##{id}_arrow"
+ if $(arrow).hasClass("icon-angle-right")
+ $(arrow).removeClass("icon-angle-right").addClass("icon-angle-down")
+ else
+ $(arrow).removeClass("icon-angle-down").addClass("icon-angle-right")
+
initialize: ->
$('body .js-add-comment-link').each ->
$this = $(this)
@@ -39,3 +46,11 @@ App.Comments =
App.Comments.toggle_form(id)
false
).data 'initialized', 'yes'
+
+ $('body .js-toggle-children').each ->
+ $(this).on('click', ->
+ children_container_id = "#{$(this).data().id}_children"
+ $("##{children_container_id}").toggle('slow')
+ App.Comments.toggle_arrow(children_container_id)
+ false
+ )
diff --git a/app/views/comments/_comment.html.erb b/app/views/comments/_comment.html.erb
index ad6114457..e6202673c 100644
--- a/app/views/comments/_comment.html.erb
+++ b/app/views/comments/_comment.html.erb
@@ -72,7 +72,13 @@
<%= render 'comments/votes', comment: comment %>
- <%= t("comments.comment.responses", count: comment.children.size) %>
+ <% if comment.children.size > 0 %>
+ <%= link_to "", class: "js-toggle-children", data: {'id': "#{dom_id(comment)}"} do %>
+ <%= t("comments.comment.responses", count: comment.children.size) %>
+ <% end %>
+ <% else %>
+ <%= t("comments.comment.responses", count: 0) %>
+ <% end %>
<% if user_signed_in? %>
|
diff --git a/spec/features/comments/debates_spec.rb b/spec/features/comments/debates_spec.rb
index 7d807a6c0..eafcb64e1 100644
--- a/spec/features/comments/debates_spec.rb
+++ b/spec/features/comments/debates_spec.rb
@@ -35,6 +35,32 @@ feature 'Commenting debates' do
expect(page).to have_link "Go back to #{debate.title}", debate_path(debate)
end
+ scenario 'Collapsable comments', :js do
+ parent_comment = create(:comment, body: "Main comment", commentable: debate)
+ child_comment = create(:comment, body: "First subcomment", commentable: debate, parent: parent_comment)
+ grandchild_comment = create(:comment, body: "Last subcomment", commentable: debate, parent: child_comment)
+
+ visit debate_path(debate)
+
+ expect(page).to have_css('.comment', count: 3)
+
+ find("#comment_#{child_comment.id}_children_arrow").trigger('click')
+
+ expect(page).to have_css('.comment', count: 2)
+ expect(page).to_not have_content grandchild_comment.body
+
+ find("#comment_#{child_comment.id}_children_arrow").trigger('click')
+
+ expect(page).to have_css('.comment', count: 3)
+ expect(page).to have_content grandchild_comment.body
+
+ find("#comment_#{parent_comment.id}_children_arrow").trigger('click')
+
+ expect(page).to have_css('.comment', count: 1)
+ expect(page).to_not have_content child_comment.body
+ expect(page).to_not have_content grandchild_comment.body
+ end
+
scenario 'Comment order' do
c1 = create(:comment, :with_confidence_score, commentable: debate, cached_votes_up: 100, cached_votes_total: 120, created_at: Time.now - 2)
c2 = create(:comment, :with_confidence_score, commentable: debate, cached_votes_up: 10, cached_votes_total: 12, created_at: Time.now - 1)
diff --git a/spec/features/comments/proposals_spec.rb b/spec/features/comments/proposals_spec.rb
index d919f0b51..d7a3dbc95 100644
--- a/spec/features/comments/proposals_spec.rb
+++ b/spec/features/comments/proposals_spec.rb
@@ -35,6 +35,32 @@ feature 'Commenting proposals' do
expect(page).to have_link "Go back to #{proposal.title}", proposal_path(proposal)
end
+ scenario 'Collapsable comments', :js do
+ parent_comment = create(:comment, body: "Main comment", commentable: proposal)
+ child_comment = create(:comment, body: "First subcomment", commentable: proposal, parent: parent_comment)
+ grandchild_comment = create(:comment, body: "Last subcomment", commentable: proposal, parent: child_comment)
+
+ visit proposal_path(proposal)
+
+ expect(page).to have_css('.comment', count: 3)
+
+ find("#comment_#{child_comment.id}_children_arrow").trigger('click')
+
+ expect(page).to have_css('.comment', count: 2)
+ expect(page).to_not have_content grandchild_comment.body
+
+ find("#comment_#{child_comment.id}_children_arrow").trigger('click')
+
+ expect(page).to have_css('.comment', count: 3)
+ expect(page).to have_content grandchild_comment.body
+
+ find("#comment_#{parent_comment.id}_children_arrow").trigger('click')
+
+ expect(page).to have_css('.comment', count: 1)
+ expect(page).to_not have_content child_comment.body
+ expect(page).to_not have_content grandchild_comment.body
+ end
+
scenario 'Comment order' do
c1 = create(:comment, :with_confidence_score, commentable: proposal, cached_votes_up: 100, cached_votes_total: 120, created_at: Time.now - 2)
c2 = create(:comment, :with_confidence_score, commentable: proposal, cached_votes_up: 10, cached_votes_total: 12, created_at: Time.now - 1)