From 9e7b7ae7bba545d4e989fb45ca90f5b89c442741 Mon Sep 17 00:00:00 2001
From: sundasnoreen12 <72802712+sundasnoreen12@users.noreply.github.com>
Date: Wed, 13 Aug 2025 00:00:32 +0500
Subject: [PATCH] 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
---
 src/discussions/common/HoverCard.jsx      | 63 ++++++++++++++---------
 src/discussions/common/HoverCard.test.jsx | 25 ++++++++-
 2 files changed, 64 insertions(+), 24 deletions(-)

diff --git a/src/discussions/common/HoverCard.jsx b/src/discussions/common/HoverCard.jsx
index a4777767..bfb37b53 100644
--- a/src/discussions/common/HoverCard.jsx
+++ b/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();
-          }}
-        />
+        <OverlayTrigger
+          overlay={(
+            <Tooltip>
+              {intl.formatMessage(voted ? messages.removeLike : messages.like)}
+            </Tooltip>
+        )}
+        >
+          <IconButton
+            src={voted ? ThumbUpFilled : ThumbUpOutline}
+            iconAs={Icon}
+            size="sm"
+            alt="Like"
+            disabled={!userHasLikePermission}
+            iconClassNames="like-icon-dimensions"
+            onClick={(e) => {
+              e.preventDefault();
+              onLike();
+            }}
+          />
+        </OverlayTrigger>
       </div>
       {following !== undefined && (
         <div className="hover-button">
-          <IconButton
-            src={following ? StarFilled : StarOutline}
-            iconAs={Icon}
-            size="sm"
-            alt="Follow"
-            iconClassNames="follow-icon-dimensions"
-            onClick={(e) => {
-              e.preventDefault();
-              onFollow();
-            }}
-          />
+          <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">
diff --git a/src/discussions/common/HoverCard.test.jsx b/src/discussions/common/HoverCard.test.jsx
index 64c5f1f6..6795ec27 100644
--- a/src/discussions/common/HoverCard.test.jsx
+++ b/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();
+  });
 });