feat: added tooltips for like and follow button (#799)

* feat: added tooltips for like and follow button

* test: added test cases for like and follow buttons

Author: sundasnoreen12

src/discussions/common/HoverCard.jsx

@@ -14,6 +14,7 @@ import { useIntl } from '@edx/frontend-platform/i18n';
 import { ThreadType } from '../../data/constants';
 import { useHasLikePermission, useUserPostingEnabled } from '../data/hooks';
 import PostCommentsContext from '../post-comments/postCommentsContext';
+import messages from '../posts/post/messages';
 import ActionsDropdown from './ActionsDropdown';
 import DiscussionContext from './context';
 
@@ -82,32 +83,48 @@ const HoverCard = ({
         </div>
       )}
       <div className="hover-button">
-        <IconButton
-          src={voted ? ThumbUpFilled : ThumbUpOutline}
-          iconAs={Icon}
-          size="sm"
-          alt="Like"
-          disabled={!userHasLikePermission}
-          iconClassNames="like-icon-dimensions"
-          onClick={(e) => {
-            e.preventDefault();
-            onLike();
-          }}
-        />
-      </div>
-      {following !== undefined && (
-        <div className="hover-button">
+        <OverlayTrigger
+          overlay={(
+            <Tooltip>
+              {intl.formatMessage(voted ? messages.removeLike : messages.like)}
+            </Tooltip>
+        )}
+        >
           <IconButton
-            src={following ? StarFilled : StarOutline}
+            src={voted ? ThumbUpFilled : ThumbUpOutline}
             iconAs={Icon}
             size="sm"
-            alt="Follow"
-            iconClassNames="follow-icon-dimensions"
+            alt="Like"
+            disabled={!userHasLikePermission}
+            iconClassNames="like-icon-dimensions"
             onClick={(e) => {
               e.preventDefault();
-              onFollow();
+              onLike();
             }}
           />
+        </OverlayTrigger>
+      </div>
+      {following !== undefined && (
+        <div className="hover-button">
+          <OverlayTrigger
+            overlay={(
+              <Tooltip>
+                {intl.formatMessage(following ? messages.unFollow : messages.follow)}
+              </Tooltip>
+          )}
+          >
+            <IconButton
+              src={following ? StarFilled : StarOutline}
+              iconAs={Icon}
+              size="sm"
+              alt="Follow"
+              iconClassNames="follow-icon-dimensions"
+              onClick={(e) => {
+                e.preventDefault();
+                onFollow();
+              }}
+            />
+          </OverlayTrigger>
         </div>
       )}
       <div className="hover-button ml-auto">

src/discussions/common/HoverCard.test.jsx

@@ -1,5 +1,5 @@
 import {
-  render, screen, waitFor, within,
+  fireEvent, render, screen, waitFor, within,
 } from '@testing-library/react';
 import MockAdapter from 'axios-mock-adapter';
 import { IntlProvider } from 'react-intl';
@@ -138,4 +138,27 @@ describe('HoverCard', () => {
     expect(within(hoverCard).queryByRole('button', { name: /like/i })).toBeInTheDocument();
     expect(within(hoverCard).queryByRole('button', { name: /actions menu/i })).toBeInTheDocument();
   });
+
+  test('it should call onFollow when follow button is clicked', async () => {
+    await waitFor(() => renderComponent(discussionPostId));
+    const post = screen.getByTestId('post-thread-1');
+    const hoverCard = within(post).getByTestId('hover-card-thread-1');
+
+    const followBtn = within(hoverCard).getByRole('button', { name: /follow/i });
+    fireEvent.click(followBtn);
+
+    expect(followBtn).toBeEnabled();
+  });
+
+  test('it should call onLike when Like button is clicked', async () => {
+    await waitFor(() => renderComponent(discussionPostId));
+
+    const post = screen.getByTestId('post-thread-1');
+    const hoverCard = within(post).getByTestId('hover-card-thread-1');
+
+    const likeBtn = within(hoverCard).getByRole('button', { name: /like/i });
+    fireEvent.click(likeBtn);
+
+    expect(likeBtn).toBeEnabled();
+  });
 });