diff --git a/src/discussions/comments/comment/CommentHeader.jsx b/src/discussions/comments/comment/CommentHeader.jsx index 7a84e69f..737e2e11 100644 --- a/src/discussions/comments/comment/CommentHeader.jsx +++ b/src/discussions/comments/comment/CommentHeader.jsx @@ -4,7 +4,8 @@ import PropTypes from 'prop-types'; import { useSelector } from 'react-redux'; import { injectIntl } from '@edx/frontend-platform/i18n'; -import { Avatar } from '@edx/paragon'; +import { Avatar, Icon } from '@edx/paragon'; +import { CheckCircle, Verified } from '@edx/paragon/icons'; import { ThreadType } from '../../../data/constants'; import { AuthorLabel } from '../../common'; @@ -24,13 +25,18 @@ function CommentHeader({ - +
+ {comment.endorsed && (postType === 'question' + ? + : )} + +
); } diff --git a/src/discussions/comments/comment/CommentHeader.test.jsx b/src/discussions/comments/comment/CommentHeader.test.jsx new file mode 100644 index 00000000..ddfc177c --- /dev/null +++ b/src/discussions/comments/comment/CommentHeader.test.jsx @@ -0,0 +1,52 @@ +import React from 'react'; + +import { render, screen } from '@testing-library/react'; +import { IntlProvider } from 'react-intl'; + +import { initializeMockApp } from '@edx/frontend-platform'; +import { AppProvider } from '@edx/frontend-platform/react'; + +import { initializeStore } from '../../../store'; +import CommentHeader from './CommentHeader'; + +let store; + +function renderComponent(comment, postType, actionHandlers) { + return render( + + + + + , + ); +} + +const mockComment = { + author: 'abc123', + authorLabel: 'ABC 123', + endorsed: true, + editableFields: [], +}; + +describe('Comment Header', () => { + beforeEach(async () => { + initializeMockApp({ + authenticatedUser: { + userId: 3, + username: 'abc123', + administrator: true, + roles: [], + }, + }); + store = initializeStore(); + }); + + it('should render verified icon for endorsed discussion posts', () => { + renderComponent(mockComment, 'discussion', {}); + expect(screen.queryAllByTestId('verified-icon')).toHaveLength(1); + }); + it('should render check icon for endorsed question posts', () => { + renderComponent(mockComment, 'question', {}); + expect(screen.queryAllByTestId('check-icon')).toHaveLength(1); + }); +});