Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We鈥檒l occasionally send you account related emails.

Already on GitHub? Sign in to your account

Jump to bottom

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

Merged
merged 9 commits into from Jan 27, 2021
Merged

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

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
9 commits
Select commit Hold shift + click to select a range
5b2827b
Implement for Feed Card only
msarit Jan 20, 2021
fe3ff8e
update snapshot
msarit Jan 21, 2021
4c2c3ab
Updating with latest master
msarit Jan 21, 2021
081f834
Updating with latest master
msarit Jan 25, 2021
534ecc8
write tests
msarit Jan 25, 2021
e7b6c3e
Implement changes in other article-feed-card views
msarit Jan 25, 2021
a51f993
modify failing spec
msarit Jan 25, 2021
2af3b88
Updating with latest master
msarit Jan 26, 2021
b7f7345
Address code review comments
msarit Jan 26, 2021
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Jump to
Jump to file
Failed to load files.
Diff view
Diff view
8 changes: 4 additions & 4 deletions app/assets/javascripts/utilities/buildArticleHTML.js
View file
Open in desktop
Expand Up @@ -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;
Expand Down
52 changes: 0 additions & 52 deletions app/javascript/articles/__tests__/__snapshots__/Article.test.jsx.snap
View file
Open in desktop
Expand Up @@ -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"
Expand Down Expand Up @@ -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"
Expand Down
5 changes: 5 additions & 0 deletions app/javascript/articles/__tests__/utilities/articleUtilities.js
View file
Open in desktop
Expand Up @@ -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',
Expand Down
4 changes: 4 additions & 0 deletions app/javascript/articles/components/ReactionsCount.jsx
View file
Open in desktop
Expand Up @@ -15,6 +15,10 @@ export const ReactionsCount = ({ article }) => {
</svg>
);

if (totalReactions === 0) {
return;
}

return (
<Button
variant="ghost"
Expand Down
26 changes: 26 additions & 0 deletions app/javascript/articles/components/__tests__/ReactionsCount.test.jsx
View file
Open in desktop
@@ -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 changes: 12 additions & 10 deletions app/views/articles/_single_story.html.erb
View file
Open in desktop
Expand Up @@ -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">
Expand Down
12 changes: 11 additions & 1 deletion spec/system/search/display_articles_search_spec.rb
View file
Open in desktop
Expand Up @@ -21,6 +21,7 @@
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"
Expand All @@ -31,7 +32,16 @@
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