fix: fix post height and remove overstate from author label (#472)

* fix: fixed post length according to figma

* fix: remove hoverstate from author label and author icon

* style: adds tooltip in hovercard for endorsemment icon

* test: fix test cases

* test: adds test cases for descreaased coverage

* refactor: updated api call to a method for reusability

* refactor: changed test descriptions

src/discussions/posts/post/Post.jsx

@@ -15,7 +15,7 @@ import { selectorForUnitSubsection, selectTopicContext } from '../../../data/sel
 import { AlertBanner, Confirmation } from '../../common';
 import { DiscussionContext } from '../../common/context';
 import HoverCard from '../../common/HoverCard';
-import { selectModerationSettings } from '../../data/selectors';
+import { selectModerationSettings, selectUserHasModerationPrivileges } from '../../data/selectors';
 import { selectTopic } from '../../topics/data/selectors';
 import { removeThread, updateExistingThread } from '../data/thunks';
 import ClosePostReasonModal from './ClosePostReasonModal';
@@ -26,7 +26,6 @@ import { postShape } from './proptypes';
 
 function Post({
   post,
-  preview,
   intl,
   handleAddResponseButton,
 }) {
@@ -42,6 +41,9 @@ function Post({
   const [isDeleting, showDeleteConfirmation, hideDeleteConfirmation] = useToggle(false);
   const [isReporting, showReportConfirmation, hideReportConfirmation] = useToggle(false);
   const [isClosing, showClosePostModal, hideClosePostModal] = useToggle(false);
+  const userHasModerationPrivileges = useSelector(selectUserHasModerationPrivileges);
+  const displayPostFooter = post.following || post.voteCount || post.closed
+  || (post.groupId && userHasModerationPrivileges);
 
   const handleAbusedFlag = useCallback(() => {
     if (post.abuseFlagged) {
@@ -147,8 +149,8 @@ function Post({
       </div>
       {(topicContext || topic) && (
         <div
-          className={classNames('mt-14px mb-1 font-style font-size-12',
-            { 'w-100': enableInContextSidebar })}
+          className={classNames('mt-14px font-style font-size-12',
+            { 'w-100': enableInContextSidebar, 'mb-1': !displayPostFooter })}
           style={{ lineHeight: '20px' }}
         >
           <span className="text-gray-500" style={{ lineHeight: '20px' }}>{intl.formatMessage(messages.relatedTo)}{' '}</span>
@@ -170,7 +172,7 @@ function Post({
           </Hyperlink>
         </div>
       )}
-      <PostFooter post={post} preview={preview} />
+      {displayPostFooter && <PostFooter post={post} userHasModerationPrivileges={userHasModerationPrivileges} />}
       <ClosePostReasonModal
         isOpen={isClosing}
         onCancel={hideClosePostModal}
@@ -186,12 +188,7 @@ function Post({
 Post.propTypes = {
   intl: intlShape.isRequired,
   post: postShape.isRequired,
-  preview: PropTypes.bool,
   handleAddResponseButton: PropTypes.func.isRequired,
 };
 
-Post.defaultProps = {
-  preview: false,
-};
-
 export default injectIntl(Post);

src/discussions/posts/post/PostFooter.jsx

@@ -1,6 +1,7 @@
 import React from 'react';
+import PropTypes from 'prop-types';
 
-import { useDispatch, useSelector } from 'react-redux';
+import { useDispatch } from 'react-redux';
 
 import { injectIntl, intlShape } from '@edx/frontend-platform/i18n';
 import {
@@ -9,20 +10,19 @@ import {
 import { Locked, People } from '@edx/paragon/icons';
 
 import { StarFilled, StarOutline } from '../../../components/icons';
-import { selectUserHasModerationPrivileges } from '../../data/selectors';
 import { updateExistingThread } from '../data/thunks';
 import LikeButton from './LikeButton';
 import messages from './messages';
 import { postShape } from './proptypes';
 
 function PostFooter({
-  post,
   intl,
+  post,
+  userHasModerationPrivileges,
 }) {
   const dispatch = useDispatch();
-  const userHasModerationPrivileges = useSelector(selectUserHasModerationPrivileges);
   return (
-    <div className="d-flex align-items-center ml-n1.5 mt-10px" style={{ lineHeight: '32px' }}>
+    <div className="d-flex align-items-center ml-n1.5 mt-10px" style={{ height: '32px' }} data-testid="post-footer">
       {post.voteCount !== 0 && (
         <LikeButton
           count={post.voteCount}
@@ -83,6 +83,7 @@ function PostFooter({
             >
               <Icon
                 src={Locked}
+                className="text-primary-500"
                 style={{
                   width: '1rem',
                   height: '1rem',
@@ -99,7 +100,7 @@ function PostFooter({
 PostFooter.propTypes = {
   intl: intlShape.isRequired,
   post: postShape.isRequired,
-
+  userHasModerationPrivileges: PropTypes.bool.isRequired,
 };
 
 export default injectIntl(PostFooter);

src/discussions/posts/post/PostFooter.test.jsx

@@ -14,11 +14,11 @@ import PostFooter from './PostFooter';
 
 let store;
 
-function renderComponent(post, preview = false, showNewCountLabel = false) {
+function renderComponent(post, userHasModerationPrivileges = false) {
   return render(
     <IntlProvider locale="en">
       <AppProvider store={store}>
-        <PostFooter post={post} preview={preview} showNewCountLabel={showNewCountLabel} />
+        <PostFooter post={post} userHasModerationPrivileges={userHasModerationPrivileges} />
       </AppProvider>
     </IntlProvider>,
   );
@@ -64,23 +64,11 @@ describe('PostFooter', () => {
     });
   });
 
-  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();
-  });
-
   it('has the cohort icon only when group information is present', () => {
     renderComponent(mockPost);
     expect(screen.queryByTestId('cohort-icon')).toBeFalsy();
 
-    renderComponent({ ...mockPost, groupId: 5, groupName: 'Test Cohort' });
+    renderComponent({ ...mockPost, groupId: 5, groupName: 'Test Cohort' }, true);
     expect(screen.getByTestId('cohort-icon')).toBeTruthy();
   });
 
@@ -104,4 +92,24 @@ describe('PostFooter', () => {
     renderComponent({ ...mockPost, following: false });
     expect(screen.queryByRole('button', { name: /follow/i })).not.toBeInTheDocument();
   });
+
+  it('tests like button when voteCount is zero', async () => {
+    renderComponent({ ...mockPost, voteCount: 0 });
+    expect(screen.queryByRole('button', { name: /like/i })).not.toBeInTheDocument();
+  });
+
+  it('tests like button when voteCount is not zero', async () => {
+    renderComponent({ ...mockPost, voted: true, voteCount: 4 });
+    const likeButton = screen.getByRole('button', { name: /like/i });
+    await act(async () => {
+      fireEvent.mouseEnter(likeButton);
+    });
+
+    expect(screen.getByRole('tooltip')).toHaveTextContent(/unlike/i);
+    await act(async () => {
+      fireEvent.click(likeButton);
+    });
+    // clicking on the button triggers thread update.
+    expect(store.getState().threads.status === RequestStatus.IN_PROGRESS).toBeTruthy();
+  });
 });