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)