collapsable comments on proposals/debates

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
+      )

app/views/comments/_comment.html.erb

@@ -72,7 +72,13 @@
               <%= render 'comments/votes', comment: comment %>
             </span>
 
-            <%= 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 %>
+                <i id="<%= dom_id(comment) %>_children_arrow" class="icon-angle-down"></i> <%= t("comments.comment.responses", count: comment.children.size) %>
+              <% end %>
+            <% else %>
+              <%= t("comments.comment.responses", count: 0) %>
+            <% end %>
 
             <% if user_signed_in? %>
               <span class="divider">&nbsp;|&nbsp;</span>

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)

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)