From 23f3386f3f4b3b59075baf76e08370365ae3fac8 Mon Sep 17 00:00:00 2001
From: Arit Amana <32520970+msarit@users.noreply.github.com>
Date: Wed, 27 Jan 2021 11:13:10 -0500
Subject: [PATCH] Don't display '0 reactions' on article feed (#12425)

* Implement for Feed Card only

* update snapshot

* write tests

* Implement changes in other article-feed-card views

* modify failing spec

* Address code review comments
---
 .../javascripts/utilities/buildArticleHTML.js |  8 +--
 .../__snapshots__/Article.test.jsx.snap       | 52 -------------------
 .../__tests__/utilities/articleUtilities.js   |  5 ++
 .../articles/components/ReactionsCount.jsx    |  4 ++
 .../__tests__/ReactionsCount.test.jsx         | 26 ++++++++++
 app/views/articles/_single_story.html.erb     | 22 ++++----
 .../search/display_articles_search_spec.rb    | 12 ++++-
 7 files changed, 62 insertions(+), 67 deletions(-)
 create mode 100644 app/javascript/articles/components/__tests__/ReactionsCount.test.jsx

diff --git a/app/assets/javascripts/utilities/buildArticleHTML.js b/app/assets/javascripts/utilities/buildArticleHTML.js
index acfa943fc..3da961a8d 100644
--- a/app/assets/javascripts/utilities/buildArticleHTML.js
+++ b/app/assets/javascripts/utilities/buildArticleHTML.js
@@ -88,17 +88,17 @@ function buildArticleHTML(article) {
         '<span class="hidden s:inline">&nbsp;comments</span></a>';
     }
 
-    var rc = article.public_reactions_count;
-    var reactionsCount = rc || '0';
+    var reactionsCount = article.public_reactions_count;
     var reactionsDisplay = '';
+    var reactionsText = reactionsCount === 1 ? 'reaction' : 'reactions';
 
-    if (article.class_name !== 'User') {
+    if (article.class_name !== 'User' && reactionsCount > 0) {
       reactionsDisplay =
         '<a href="' +
         article.path +
         '" 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="M18.884 12.595l.01.011L12 19.5l-6.894-6.894.01-.01A4.875 4.875 0 0112 5.73a4.875 4.875 0 016.884 6.865zM6.431 7.037a3.375 3.375 0 000 4.773L12 17.38l5.569-5.569a3.375 3.375 0 10-4.773-4.773L9.613 10.22l-1.06-1.062 2.371-2.372a3.375 3.375 0 00-4.492.25v.001z"/></svg>' +
         reactionsCount +
-        '<span class="hidden s:inline">&nbsp;reactions</span></a>';
+        `<span class="hidden s:inline">&nbsp;${reactionsText}</span></a>`;
     }
 
     var picUrl;
diff --git a/app/javascript/articles/__tests__/__snapshots__/Article.test.jsx.snap b/app/javascript/articles/__tests__/__snapshots__/Article.test.jsx.snap
index c3d8fb0a1..f5f0f8bab 100644
--- a/app/javascript/articles/__tests__/__snapshots__/Article.test.jsx.snap
+++ b/app/javascript/articles/__tests__/__snapshots__/Article.test.jsx.snap
@@ -138,32 +138,6 @@ Object {
                 <div
                   class="crayons-story__details"
                 >
-                  <a
-                    class="crayons-btn crayons-btn--ghost crayons-btn--s crayons-btn--icon-left"
-                    href="/some-post/path"
-                  >
-                    <svg
-                      class="crayons-icon"
-                      height="24"
-                      width="24"
-                      xmlns="http://www.w3.org/2000/svg"
-                    >
-                      <path
-                        d="M18.884 12.595l.01.011L12 19.5l-6.894-6.894.01-.01A4.875 4.875 0 0112 5.73a4.875 4.875 0 016.884 6.865zM6.431 7.037a3.375 3.375 0 000 4.773L12 17.38l5.569-5.569a3.375 3.375 0 10-4.773-4.773L9.613 10.22l-1.06-1.062 2.371-2.372a3.375 3.375 0 00-4.492.25v.001z"
-                      />
-                    </svg>
-                    <span
-                      title="Number of reactions"
-                    >
-                      0
-                      <span
-                        class="hidden s:inline"
-                      >
-                         
-                        reactions
-                      </span>
-                    </span>
-                  </a>
                   <a
                     class="crayons-btn crayons-btn--ghost crayons-btn--s crayons-btn--icon-left"
                     data-testid="add-a-comment"
@@ -350,32 +324,6 @@ Object {
               <div
                 class="crayons-story__details"
               >
-                <a
-                  class="crayons-btn crayons-btn--ghost crayons-btn--s crayons-btn--icon-left"
-                  href="/some-post/path"
-                >
-                  <svg
-                    class="crayons-icon"
-                    height="24"
-                    width="24"
-                    xmlns="http://www.w3.org/2000/svg"
-                  >
-                    <path
-                      d="M18.884 12.595l.01.011L12 19.5l-6.894-6.894.01-.01A4.875 4.875 0 0112 5.73a4.875 4.875 0 016.884 6.865zM6.431 7.037a3.375 3.375 0 000 4.773L12 17.38l5.569-5.569a3.375 3.375 0 10-4.773-4.773L9.613 10.22l-1.06-1.062 2.371-2.372a3.375 3.375 0 00-4.492.25v.001z"
-                    />
-                  </svg>
-                  <span
-                    title="Number of reactions"
-                  >
-                    0
-                    <span
-                      class="hidden s:inline"
-                    >
-                       
-                      reactions
-                    </span>
-                  </span>
-                </a>
                 <a
                   class="crayons-btn crayons-btn--ghost crayons-btn--s crayons-btn--icon-left"
                   data-testid="add-a-comment"
diff --git a/app/javascript/articles/__tests__/utilities/articleUtilities.js b/app/javascript/articles/__tests__/utilities/articleUtilities.js
index 16f8ece26..b0993a18a 100644
--- a/app/javascript/articles/__tests__/utilities/articleUtilities.js
+++ b/app/javascript/articles/__tests__/utilities/articleUtilities.js
@@ -130,6 +130,11 @@ export const articleWithReactions = {
   public_reactions_count: 232,
 };
 
+export const articleWithoutReactions = {
+  ...article,
+  public_reactions_count: 428,
+};
+
 export const articleWithComments = {
   id: 62407,
   title: 'Unbranded Home Loan Account',
diff --git a/app/javascript/articles/components/ReactionsCount.jsx b/app/javascript/articles/components/ReactionsCount.jsx
index e343c2340..fb0c3dbe0 100644
--- a/app/javascript/articles/components/ReactionsCount.jsx
+++ b/app/javascript/articles/components/ReactionsCount.jsx
@@ -15,6 +15,10 @@ export const ReactionsCount = ({ article }) => {
     </svg>
   );
 
+  if (totalReactions === 0) {
+    return;
+  }
+
   return (
     <Button
       variant="ghost"
diff --git a/app/javascript/articles/components/__tests__/ReactionsCount.test.jsx b/app/javascript/articles/components/__tests__/ReactionsCount.test.jsx
new file mode 100644
index 000000000..156fa36e5
--- /dev/null
+++ b/app/javascript/articles/components/__tests__/ReactionsCount.test.jsx
@@ -0,0 +1,26 @@
+import { h } from 'preact';
+import { render } from '@testing-library/preact';
+import '@testing-library/jest-dom';
+import { ReactionsCount } from '..';
+import {
+  articleWithReactions,
+  articleWithoutReactions,
+} from '../../__tests__/utilities/articleUtilities.js';
+
+describe('<ReactionsCount /> component', () => {
+  it('should not display reactions data when there are no reactions', async () => {
+    const { queryByText } = render(
+      <ReactionsCount article={articleWithoutReactions} />,
+    );
+
+    expect(queryByText('0 reactions')).toBeNull();
+  });
+
+  it('should display reactions data when there are reactions', async () => {
+    const { findByText } = render(
+      <ReactionsCount article={articleWithReactions} />,
+    );
+
+    expect(findByText('232 reactions')).toBeDefined();
+  });
+});
diff --git a/app/views/articles/_single_story.html.erb b/app/views/articles/_single_story.html.erb
index e5fd15332..14d42106f 100644
--- a/app/views/articles/_single_story.html.erb
+++ b/app/views/articles/_single_story.html.erb
@@ -70,17 +70,19 @@
       </div>
       <div class="crayons-story__bottom">
         <div class="crayons-story__details">
-          <a href="<%= story.path %>" class="crayons-btn crayons-btn--s crayons-btn--ghost crayons-btn--icon-left" data-reaction-count data-reactable-id="<%= story.id %>">
-            <%= inline_svg_tag("small-heart.svg", aria: true, width: 24, height: 24, class: "crayons-icon", title: "Reactions") %>
-            <%= story.public_reactions_count %>
-            <span class="hidden s:inline">&nbsp;reactions</span>
-          </a>
+          <% if story.public_reactions_count > 0 %>
+            <a href="<%= story.path %>" class="crayons-btn crayons-btn--s crayons-btn--ghost crayons-btn--icon-left" data-reaction-count data-reactable-id="<%= story.id %>">
+              <%= inline_svg_tag("small-heart.svg", aria: true, width: 24, height: 24, class: "crayons-icon", title: "Reactions") %>
+              <%= story.public_reactions_count %>
+              <span class="hidden s:inline">&nbsp;<%= story.public_reactions_count == 1 ? "reaction" : "reactions" %></span>
+            </a>
+          <% end %>
           <% if story.comments_count > 0 %>
-          <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") %>
-            <%= story.comments_count %>
-            <span class="hidden s:inline">&nbsp;comments</span>
-          </a>
+            <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") %>
+              <%= story.comments_count %>
+              <span class="hidden s:inline">&nbsp;<%= story.comments_count == 1 ? "comment" : "comments" %></span>
+            </a>
           <% end %>
         </div>
         <div class="crayons-story__save">
diff --git a/spec/system/search/display_articles_search_spec.rb b/spec/system/search/display_articles_search_spec.rb
index e29c6f724..e25e9d7be 100644
--- a/spec/system/search/display_articles_search_spec.rb
+++ b/spec/system/search/display_articles_search_spec.rb
@@ -21,6 +21,7 @@ RSpec.describe "Display articles search spec", type: :system, js: true, elastics
   it "returns all expected article fields" do
     allow(found_article_one).to receive(:reading_time).and_return(5)
     allow(found_article_one).to receive(:comments_count).and_return(2)
+    allow(found_article_one).to receive(:public_reactions_count).and_return(3)
     found_article_one.tags << create(:tag, name: "ruby")
     index_documents_for_search_class([found_article_one], Search::FeedContent)
     visit "/search?q=ruby&filters=class_name:Article"
@@ -31,7 +32,16 @@ RSpec.describe "Display articles search spec", type: :system, js: true, elastics
     expect(page).to have_content("5 min read")
     expect(find_link("#ruby")["href"]).to include("/t/ruby")
     expect(find_link(found_article_one.user.name)["href"]).to include(found_article_one.username)
-    expect(page).to have_content("0 reactions")
+    expect(page).to have_content("3 reactions")
     expect(page).to have_content("2 comments")
   end
+
+  it "does not show reaction data if article has no reactions" do
+    allow(found_article_one).to receive(:public_reactions_count).and_return(0)
+    found_article_one.tags << create(:tag, name: "ruby")
+    index_documents_for_search_class([found_article_one], Search::FeedContent)
+    visit "/search?q=ruby&filters=class_name:Article"
+
+    expect(page).not_to have_content("0 reactions")
+  end
 end