maverick/docbrown
1
0
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity Actions

Don't display '0 reactions' on article feed (#12425)

Browse source 
* Implement for Feed Card only

* update snapshot

* write tests

* Implement changes in other article-feed-card views

* modify failing spec

* Address code review comments
This commit is contained in:
Arit Amana 2021-01-27 11:13:10 -05:00 • committed by GitHub
parent 8340207728
commit 23f3386f3f
No known key found for this signature in database
GPG key ID: 4AEE18F83AFDEB23
7 changed files with 62 additions and 67 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

8
app/assets/javascripts/utilities/buildArticleHTML.js
View file

@ -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;

52
app/javascript/articles/__tests__/__snapshots__/Article.test.jsx.snap
View file

@ -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"

5
app/javascript/articles/__tests__/utilities/articleUtilities.js
View file

@ -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',

4
app/javascript/articles/components/ReactionsCount.jsx
View file

@ -15,6 +15,10 @@ export const ReactionsCount = ({ article }) => {
</svg>
);
if (totalReactions === 0) {
return;
}
return (
<Button
variant="ghost"

26
app/javascript/articles/components/__tests__/ReactionsCount.test.jsx Normal file
View file

@ -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();
});
});

22
app/views/articles/_single_story.html.erb
View file

@ -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">

12
spec/system/search/display_articles_search_spec.rb
View file

@ -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