From 0c6f4113f275c88efe0f6c9cf60bcd40efe2b164 Mon Sep 17 00:00:00 2001
From: Jacob Herrington <jacobherringtondeveloper@gmail.com>
Date: Mon, 22 Feb 2021 12:11:44 -0600
Subject: [PATCH] Fix irregular comment count buttons (#12724)

* Fix irregular comment count buttons

* Fix irregular comments button on tag and user page

* Add regression tests for irregular comment buttons
---
 app/assets/javascripts/utilities/buildArticleHTML.js | 12 +++++++++---
 app/views/articles/_single_story.html.erb            |  5 +++++
 .../articles/user_visits_articles_by_tag_spec.rb     |  6 ++++++
 .../homepage/user_visits_homepage_articles_spec.rb   |  9 +++++++++
 4 files changed, 29 insertions(+), 3 deletions(-)

diff --git a/app/assets/javascripts/utilities/buildArticleHTML.js b/app/assets/javascripts/utilities/buildArticleHTML.js
index 3da961a8d..7880173f2 100644
--- a/app/assets/javascripts/utilities/buildArticleHTML.js
+++ b/app/assets/javascripts/utilities/buildArticleHTML.js
@@ -83,9 +83,15 @@ function buildArticleHTML(article) {
       commentsDisplay =
         '<a href="' +
         article.path +
-        '#comments" class="crayons-btn crayons-btn--s crayons-btn--ghost crayons-btn--icon-left "><svg class="crayons-icon" width="24" height="24" xmlns="http://www.w3.org/2000/svg"><path d="M10.5 5h3a6 6 0 110 12v2.625c-3.75-1.5-9-3.75-9-8.625a6 6 0 016-6zM12 15.5h1.5a4.501 4.501 0 001.722-8.657A4.5 4.5 0 0013.5 6.5h-3A4.5 4.5 0 006 11c0 2.707 1.846 4.475 6 6.36V15.5z"/></svg>' +
-        commentsCount +
-        '<span class="hidden s:inline">&nbsp;comments</span></a>';
+        '#comments" class="crayons-btn crayons-btn--s crayons-btn--ghost crayons-btn--icon-left "><svg class="crayons-icon" width="24" height="24" xmlns="http://www.w3.org/2000/svg"><path d="M10.5 5h3a6 6 0 110 12v2.625c-3.75-1.5-9-3.75-9-8.625a6 6 0 016-6zM12 15.5h1.5a4.501 4.501 0 001.722-8.657A4.5 4.5 0 0013.5 6.5h-3A4.5 4.5 0 006 11c0 2.707 1.846 4.475 6 6.36V15.5z"/></svg>';
+      if (commentsCount > 0) {
+        commentsDisplay +=
+          commentsCount +
+          '<span class="hidden s:inline">&nbsp;comments</span></a>';
+      } else {
+        commentsDisplay +=
+          '<span class="hidden s:inline">Add&nbsp;Comment</span></a>';
+      }
     }
 
     var reactionsCount = article.public_reactions_count;
diff --git a/app/views/articles/_single_story.html.erb b/app/views/articles/_single_story.html.erb
index 14d42106f..2026207db 100644
--- a/app/views/articles/_single_story.html.erb
+++ b/app/views/articles/_single_story.html.erb
@@ -83,6 +83,11 @@
               <%= story.comments_count %>
               <span class="hidden s:inline">&nbsp;<%= story.comments_count == 1 ? "comment" : "comments" %></span>
             </a>
+          <% else %>
+            <a href="<%= story.path %>#comments" class="crayons-btn crayons-btn--s crayons-btn--ghost crayons-btn--icon-left">
+              <%= inline_svg_tag("small-comment.svg", aria: true, width: 24, height: 24, class: "crayons-icon", title: "Comments") %>
+              <span class="hidden s:inline">Add&nbsp;Comment</span>
+            </a>
           <% end %>
         </div>
         <div class="crayons-story__save">
diff --git a/spec/system/articles/user_visits_articles_by_tag_spec.rb b/spec/system/articles/user_visits_articles_by_tag_spec.rb
index 9baff83c2..ab267506a 100644
--- a/spec/system/articles/user_visits_articles_by_tag_spec.rb
+++ b/spec/system/articles/user_visits_articles_by_tag_spec.rb
@@ -26,6 +26,12 @@ RSpec.describe "User visits articles by tag", type: :system do
         within("header.tag-header") { expect(page).to have_button("Follow") }
       end
 
+      # Regression test for https://github.com/forem/forem/pull/12724
+      it "does not display a comment count of 0", js: true, stub_elasticsearch: true do
+        expect(page).to have_text("Add Comment")
+        expect(page).not_to have_text("0 comments")
+      end
+
       it "shows correct articles count" do
         expect(page).to have_selector(".crayons-story", count: 2)
       end
diff --git a/spec/system/homepage/user_visits_homepage_articles_spec.rb b/spec/system/homepage/user_visits_homepage_articles_spec.rb
index 43482e2f2..b701d2526 100644
--- a/spec/system/homepage/user_visits_homepage_articles_spec.rb
+++ b/spec/system/homepage/user_visits_homepage_articles_spec.rb
@@ -19,6 +19,15 @@ RSpec.describe "User visits a homepage", type: :system do
         expect(page).to have_selector(".crayons-story--featured", visible: :visible)
       end
 
+      # Regression test for https://github.com/forem/forem/pull/12724
+      it "does not display a comment count of 0", js: true, stub_elasticsearch: true do
+        expect(page).to have_text("Add Comment")
+        expect(page).not_to have_text("0 comments")
+        article.update_column(:comments_count, 50)
+        visit "/"
+        expect(page).to have_text(/50\s*comments/)
+      end
+
       it "shows the main article readable date and time", js: true, stub_elasticsearch: true do
         expect(page).to have_selector(".crayons-story--featured time", text: published_date)
         selector = ".crayons-story--featured time[datetime='#{timestamp}']"