Merge pull request #4003 from rockandror/fix-comments-reply-alternate

Update comment responses count when adding replies

app/assets/javascripts/comments.js

@@ -2,7 +2,8 @@
   "use strict";
   App.Comments = {
     add_comment: function(parent_selector, response_html) {
-      $(parent_selector + " .comment-list:first").prepend($(response_html));
+      $(parent_selector + " .comment-list:first").prepend($(response_html)).show("slow");
+      $(parent_selector + " .responses-count:first").removeClass("collapsed");
       this.update_comments_count();
     },
     update_comments_count: function() {
@@ -14,6 +15,9 @@
         $(this).text(new_val);
       });
     },
+    update_responses_count: function(comment_id, responses_count_html) {
+      $(comment_id + "_reply .responses-count").html(responses_count_html);
+    },
     display_error: function(field_with_errors, error_html) {
       $(error_html).insertAfter($("" + field_with_errors));
     },
@@ -38,8 +42,7 @@
 
       $("body").on("click", ".js-toggle-children", function() {
         $(this).closest(".comment").find(".comment-list:first").toggle("slow");
-        $(this).children(".far").toggleClass("fa-minus-square fa-plus-square");
-        $(this).children(".js-child-toggle").toggle();
+        $(this).closest(".responses-count").toggleClass("collapsed");
         return false;
       });
     }

app/assets/javascripts/users.js

@@ -2,7 +2,14 @@
   "use strict";
   App.Users = {
     initialize: function() {
+      var observer;
       $(".initialjs-avatar").initial();
+      observer = new MutationObserver(function(mutations) {
+        $.each(mutations, function(index, mutation) {
+          $(mutation.addedNodes).find(".initialjs-avatar").initial();
+        });
+      });
+      observer.observe(document.body, { childList: true, subtree: true });
     }
   };
 }).call(this);

app/assets/stylesheets/layout.scss

@@ -2121,14 +2121,6 @@ table {
       padding-left: rem-calc(18);
     }
 
-    .far {
-      font-size: $small-font-size;
-      left: 0;
-      position: absolute;
-      text-decoration: none;
-      top: 2px;
-    }
-
     .divider {
       color: $text-light;
       display: inline-block;
@@ -2139,6 +2131,35 @@ table {
     }
   }
 
+  .responses-count {
+    .far {
+      @extend .fa-minus-square;
+      font-size: $small-font-size;
+      left: 0;
+      position: absolute;
+      text-decoration: none;
+      top: 2px;
+    }
+
+    .show-children {
+      display: none;
+    }
+
+    &.collapsed {
+      .far {
+        @extend .fa-plus-square;
+      }
+
+      .collapse-children {
+        display: none;
+      }
+
+      .show-children {
+        display: inline;
+      }
+    }
+  }
+
   .comment-user {
     margin-top: $line-height / 4;
     padding: $line-height / 4 0;

app/views/comments/_comment.html.erb

@@ -85,15 +85,9 @@
             </div>
           <% end %>
 
-          <% if comment.children.size > 0 %>
-            <%= link_to "", class: "js-toggle-children relative" do %>
-              <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 %>
-          <% else %>
-            <%= t("comments.comment.responses", count: 0) %>
-          <% end %>
+          <span class="responses-count">
+            <%= render "comments/responses_count", count: comment.children.size %>
+          </span>
 
           <% if user_signed_in? && !comments_closed_for_commentable?(comment.commentable) && !require_verified_resident_for_commentable?(comment.commentable, current_user) %>
             <span class="divider">&nbsp;|&nbsp;</span>

app/views/comments/_responses_count.html.erb

@@ -0,0 +1,9 @@
+<% if count > 0 %>
+  <%= link_to "", class: "js-toggle-children relative" do %>
+    <span class="far"></span>
+    <span class="show-children"><%= t("comments.comment.responses_show", count: count) %></span>
+    <span class="collapse-children"><%= t("comments.comment.responses_collapse", count: count) %></span>
+  <% end %>
+<% else %>
+  <%= t("comments.comment.responses", count: 0) %>
+<% end %>

app/views/comments/create.js.erb

@@ -2,6 +2,8 @@
   var parent_id = "";
 <% else -%>
   var parent_id = "#" + "<%= "comment_#{@comment.parent_id}" %>";
+  var responses_count_html = "<%= j(render "comments/responses_count", count: @comment.parent.children.size) %>"
+  App.Comments.update_responses_count(parent_id, responses_count_html);
 <% end -%>
 
 App.Comments.reset_form(parent_id);

spec/system/comments/budget_investments_spec.rb

@@ -242,6 +242,38 @@ describe "Commenting Budget::Investments" do
     expect(page).not_to have_selector("#js-comment-form-comment_#{comment.id}", visible: true)
   end
 
+  scenario "Reply update parent comment responses count", :js do
+    comment = create(:comment, commentable: investment)
+
+    login_as(create(:user))
+    visit budget_investment_path(investment.budget, investment)
+
+    within ".comment", text: comment.body do
+      click_link "Reply"
+      fill_in "Leave your comment", with: "It will be done next week."
+      click_button "Publish reply"
+
+      expect(page).to have_content("1 response (collapse)")
+    end
+  end
+
+  scenario "Reply show parent comments responses when hidden", :js do
+    comment = create(:comment, commentable: investment)
+    create(:comment, commentable: investment, parent: comment)
+
+    login_as(create(:user))
+    visit budget_investment_path(investment.budget, investment)
+
+    within ".comment", text: comment.body do
+      click_link text: "1 response (collapse)"
+      click_link "Reply"
+      fill_in "Leave your comment", with: "It will be done next week."
+      click_button "Publish reply"
+
+      expect(page).to have_content("It will be done next week.")
+    end
+  end
+
   scenario "Errors on reply", :js do
     comment = create(:comment, commentable: investment, user: user)
 

spec/system/comments/budget_investments_valuation_spec.rb

@@ -216,6 +216,38 @@ describe "Internal valuation comments on Budget::Investments" do
       expect(page).not_to have_content("It will be done next week.")
     end
 
+    scenario "Reply update parent comment responses count", :js do
+      comment = create(:comment, :valuation, author: admin_user, commentable: investment)
+
+      login_as(valuator_user)
+      visit valuation_budget_budget_investment_path(budget, investment)
+
+      within ".comment", text: comment.body do
+        click_link "Reply"
+        fill_in "Leave your comment", with: "It will be done next week."
+        click_button "Publish reply"
+
+        expect(page).to have_content("1 response (collapse)")
+      end
+    end
+
+    scenario "Reply show parent comments responses when hidden", :js do
+      comment = create(:comment, :valuation, author: admin_user, commentable: investment)
+      create(:comment, :valuation, author: admin_user, commentable: investment, parent: comment)
+
+      login_as(valuator_user)
+      visit valuation_budget_budget_investment_path(budget, investment)
+
+      within ".comment", text: comment.body do
+        click_link text: "1 response (collapse)"
+        click_link "Reply"
+        fill_in "Leave your comment", with: "It will be done next week."
+        click_button "Publish reply"
+
+        expect(page).to have_content("It will be done next week.")
+      end
+    end
+
     scenario "Errors on reply without comment text", :js do
       comment = create(:comment, :valuation, author: admin_user, commentable: investment)
 

spec/system/comments/debates_spec.rb

@@ -91,8 +91,7 @@ describe "Commenting debates" do
   end
 
   scenario "can collapse comments after adding a reply", :js do
-    parent_comment = create(:comment, body: "Main comment", commentable: debate)
-    create(:comment, body: "First subcomment", commentable: debate, parent: parent_comment)
+    create(:comment, body: "Main comment", commentable: debate)
 
     login_as(user)
     visit debate_path(debate)
@@ -104,7 +103,7 @@ describe "Commenting debates" do
 
       expect(page).to have_content("It will be done next week.")
 
-      find(".fa-minus-square").click
+      click_link text: "1 response (collapse)"
 
       expect(page).not_to have_content("It will be done next week.")
     end
@@ -281,6 +280,38 @@ describe "Commenting debates" do
     end
   end
 
+  scenario "Reply update parent comment responses count", :js do
+    comment = create(:comment, commentable: debate)
+
+    login_as(create(:user))
+    visit debate_path(debate)
+
+    within ".comment", text: comment.body do
+      click_link "Reply"
+      fill_in "Leave your comment", with: "It will be done next week."
+      click_button "Publish reply"
+
+      expect(page).to have_content("1 response (collapse)")
+    end
+  end
+
+  scenario "Reply show parent comments responses when hidden", :js do
+    comment = create(:comment, commentable: debate)
+    create(:comment, commentable: debate, parent: comment)
+
+    login_as(create(:user))
+    visit debate_path(debate)
+
+    within ".comment", text: comment.body do
+      click_link text: "1 response (collapse)"
+      click_link "Reply"
+      fill_in "Leave your comment", with: "It will be done next week."
+      click_button "Publish reply"
+
+      expect(page).to have_content("It will be done next week.")
+    end
+  end
+
   scenario "Errors on reply", :js do
     comment = create(:comment, commentable: debate, user: user)
 

spec/system/comments/legislation_annotations_spec.rb

@@ -278,6 +278,46 @@ describe "Commenting legislation questions" do
     expect(page).not_to have_selector("#js-comment-form-comment_#{comment.id}", visible: true)
   end
 
+  scenario "Reply update parent comment responses count", :js do
+    manuela = create(:user, :level_two, username: "Manuela")
+    legislation_annotation = create(:legislation_annotation)
+    comment = legislation_annotation.comments.first
+
+    login_as(manuela)
+    visit legislation_process_draft_version_annotation_path(legislation_annotation.draft_version.process,
+                                                            legislation_annotation.draft_version,
+                                                            legislation_annotation)
+
+    within ".comment", text: comment.body do
+      click_link "Reply"
+      fill_in "Leave your comment", with: "It will be done next week."
+      click_button "Publish reply"
+
+      expect(page).to have_content("1 response (collapse)")
+    end
+  end
+
+  scenario "Reply show parent comments responses when hidden", :js do
+    manuela = create(:user, :level_two, username: "Manuela")
+    legislation_annotation = create(:legislation_annotation)
+    comment = legislation_annotation.comments.first
+    create(:comment, commentable: legislation_annotation, parent: comment)
+
+    login_as(manuela)
+    visit legislation_process_draft_version_annotation_path(legislation_annotation.draft_version.process,
+                                                            legislation_annotation.draft_version,
+                                                            legislation_annotation)
+
+    within ".comment", text: comment.body do
+      click_link text: "1 response (collapse)"
+      click_link "Reply"
+      fill_in "Leave your comment", with: "It will be done next week."
+      click_button "Publish reply"
+
+      expect(page).to have_content("It will be done next week.")
+    end
+  end
+
   scenario "Errors on reply", :js do
     comment = legislation_annotation.comments.first
 

spec/system/comments/legislation_questions_spec.rb

@@ -260,6 +260,40 @@ describe "Commenting legislation questions" do
     expect(page).not_to have_selector("#js-comment-form-comment_#{comment.id}", visible: true)
   end
 
+  scenario "Reply update parent comment responses count", :js do
+    manuela = create(:user, :level_two, username: "Manuela")
+    comment = create(:comment, commentable: legislation_question)
+
+    login_as(manuela)
+    visit legislation_process_question_path(legislation_question.process, legislation_question)
+
+    within ".comment", text: comment.body do
+      click_link "Reply"
+      fill_in "Leave your answer", with: "It will be done next week."
+      click_button "Publish reply"
+
+      expect(page).to have_content("1 response (collapse)")
+    end
+  end
+
+  scenario "Reply show parent comments responses when hidden", :js do
+    manuela = create(:user, :level_two, username: "Manuela")
+    comment = create(:comment, commentable: legislation_question)
+    create(:comment, commentable: legislation_question, parent: comment)
+
+    login_as(manuela)
+    visit legislation_process_question_path(legislation_question.process, legislation_question)
+
+    within ".comment", text: comment.body do
+      click_link text: "1 response (collapse)"
+      click_link "Reply"
+      fill_in "Leave your answer", with: "It will be done next week."
+      click_button "Publish reply"
+
+      expect(page).to have_content("It will be done next week.")
+    end
+  end
+
   scenario "Errors on reply", :js do
     comment = create(:comment, commentable: legislation_question, user: user)
 

spec/system/comments/polls_spec.rb

@@ -240,6 +240,38 @@ describe "Commenting polls" do
     expect(page).not_to have_selector("#js-comment-form-comment_#{comment.id}", visible: true)
   end
 
+  scenario "Reply update parent comment responses count", :js do
+    comment = create(:comment, commentable: poll)
+
+    login_as(create(:user))
+    visit poll_path(poll)
+
+    within ".comment", text: comment.body do
+      click_link "Reply"
+      fill_in "Leave your comment", with: "It will be done next week."
+      click_button "Publish reply"
+
+      expect(page).to have_content("1 response (collapse)")
+    end
+  end
+
+  scenario "Reply show parent comments responses when hidden", :js do
+    comment = create(:comment, commentable: poll)
+    create(:comment, commentable: poll, parent: comment)
+
+    login_as(create(:user))
+    visit poll_path(poll)
+
+    within ".comment", text: comment.body do
+      click_link text: "1 response (collapse)"
+      click_link "Reply"
+      fill_in "Leave your comment", with: "It will be done next week."
+      click_button "Publish reply"
+
+      expect(page).to have_content("It will be done next week.")
+    end
+  end
+
   scenario "Errors on reply", :js do
     comment = create(:comment, commentable: poll, user: user)
 

spec/system/comments/proposals_spec.rb

@@ -238,6 +238,38 @@ describe "Commenting proposals" do
     expect(page).not_to have_selector("#js-comment-form-comment_#{comment.id}", visible: true)
   end
 
+  scenario "Reply update parent comment responses count", :js do
+    comment = create(:comment, commentable: proposal)
+
+    login_as(create(:user))
+    visit proposal_path(proposal)
+
+    within ".comment", text: comment.body do
+      click_link "Reply"
+      fill_in "Leave your comment", with: "It will be done next week."
+      click_button "Publish reply"
+
+      expect(page).to have_content("1 response (collapse)")
+    end
+  end
+
+  scenario "Reply show parent comments responses when hidden", :js do
+    comment = create(:comment, commentable: proposal)
+    create(:comment, commentable: proposal, parent: comment)
+
+    login_as(create(:user))
+    visit proposal_path(proposal)
+
+    within ".comment", text: comment.body do
+      click_link text: "1 response (collapse)"
+      click_link "Reply"
+      fill_in "Leave your comment", with: "It will be done next week."
+      click_button "Publish reply"
+
+      expect(page).to have_content("It will be done next week.")
+    end
+  end
+
   scenario "Errors on reply", :js do
     comment = create(:comment, commentable: proposal, user: user)
 

spec/system/comments/topics_spec.rb

@@ -264,6 +264,42 @@ describe "Commenting topics from proposals" do
     expect(page).not_to have_selector("#js-comment-form-comment_#{comment.id}", visible: true)
   end
 
+  scenario "Reply update parent comment responses count", :js do
+    community = proposal.community
+    topic = create(:topic, community: community)
+    comment = create(:comment, commentable: topic)
+
+    login_as(create(:user))
+    visit community_topic_path(community, topic)
+
+    within ".comment", text: comment.body do
+      click_link "Reply"
+      fill_in "Leave your comment", with: "It will be done next week."
+      click_button "Publish reply"
+
+      expect(page).to have_content("1 response (collapse)")
+    end
+  end
+
+  scenario "Reply show parent comments responses when hidden", :js do
+    community = proposal.community
+    topic = create(:topic, community: community)
+    comment = create(:comment, commentable: topic)
+    create(:comment, commentable: topic, parent: comment)
+
+    login_as(create(:user))
+    visit community_topic_path(community, topic)
+
+    within ".comment", text: comment.body do
+      click_link text: "1 response (collapse)"
+      click_link "Reply"
+      fill_in "Leave your comment", with: "It will be done next week."
+      click_button "Publish reply"
+
+      expect(page).to have_content("It will be done next week.")
+    end
+  end
+
   scenario "Errors on reply", :js do
     community = proposal.community
     topic = create(:topic, community: community)

spec/system/users_spec.rb

@@ -515,4 +515,18 @@ describe "Users" do
       end
     end
   end
+
+  describe "Initials" do
+    scenario "display SVG avatars when loaded into the DOM", :js do
+      login_as(create(:user))
+      visit debate_path(create(:debate))
+
+      fill_in "Leave your comment", with: "I'm awesome"
+      click_button "Publish comment"
+
+      within ".comment", text: "I'm awesome" do
+        expect(page).to have_css "img.initialjs-avatar[src^='data:image/svg']"
+      end
+    end
+  end
 end