diff --git a/src/discussions/posts/post/PostFooter.jsx b/src/discussions/posts/post/PostFooter.jsx
index bf38f9ae..eb83a4a9 100644
--- a/src/discussions/posts/post/PostFooter.jsx
+++ b/src/discussions/posts/post/PostFooter.jsx
@@ -6,7 +6,7 @@ import * as timeago from 'timeago.js';
import { injectIntl, intlShape } from '@edx/frontend-platform/i18n';
import {
- Icon, IconButton, OverlayTrigger, Tooltip,
+ Badge, Icon, IconButton, OverlayTrigger, Tooltip,
} from '@edx/paragon';
import {
Locked, Person, QuestionAnswer, StarFilled, StarOutline,
@@ -62,6 +62,9 @@ function PostFooter({
>
)}
+ {post.unreadCommentCount && post.unreadCommentCount > 0 && post.commentCount > 1 ? (
+
a test post
', + hasEndorsed: false, + voted: false, + voteCount: 10, + previewBody: 'a test post
', + read: false, + title: 'test post', + topicId: 'i4x-edx-eiorguegnru-course-foobarbaz', + unreadCommentCount: 2, + groupName: null, + groupId: null, + createdAt: '2022-02-25T09:17:17Z', + closed: false, +}; + +describe('PostFooter', () => { + beforeEach(async () => { + initializeMockApp({ + authenticatedUser: { + userId: 3, + username: 'abc123', + administrator: true, + roles: [], + }, + }); + store = initializeStore(); + }); + + it("shows 'x new' badge for new comments", () => { + renderComponent(mockPost); + expect(screen.getByText('2 new')).toBeTruthy(); + }); + + it("doesn't have 'new' badge when there are 0 new comments", () => { + renderComponent({ ...mockPost, unreadCommentCount: 0 }); + expect(screen.queryByText('2 new')).toBeFalsy(); + expect(screen.queryByText('0 new')).toBeFalsy(); + }); + + it("doesn't has 'new' badge when the new-unread item is the post itself", () => { + // commentCount === 1 means it's just the post without any further comments + renderComponent({ ...mockPost, unreadCommentCount: 1, commentCount: 1 }); + expect(screen.queryByText('1 new')).toBeFalsy(); + }); +}); diff --git a/src/discussions/posts/post/messages.js b/src/discussions/posts/post/messages.js index 79c92e14..dc3b4d8a 100644 --- a/src/discussions/posts/post/messages.js +++ b/src/discussions/posts/post/messages.js @@ -70,6 +70,11 @@ const messages = defineMessages({ id: 'discussions.editor.delete.post.description', defaultMessage: 'Are you sure you want to permanently delete this post?', }, + newLabel: { + id: 'discussions.post.label.new', + defaultMessage: '{count} new', + description: 'Label shown on the badge indicating new comments/posts like "3 new"', + }, }); export default messages;