fix: [BD-38] [BB-5599] [TNL-9629] fix Follow button on post summary (#74)

* fix: [BD-38] [BB-5599] [TNL-9629] fix Follow button on post summary

* test: add tests

src/discussions/posts/post/PostFooter.jsx

@@ -37,21 +37,17 @@ function PostFooter({
           </Tooltip>
         )}
       >
-        {preview
-          ? <Icon src={post.following ? StarFilled : StarOutline} className="my-0 mr-4.5" />
-          : (
-            <IconButton
-              onClick={() => {
-                dispatch(updateExistingThread(post.id, { following: !post.following }));
-                return true;
-              }}
-              alt="Follow"
-              iconAs={Icon}
-              size="inline"
-              className="mx-2.5 my-0"
-              src={post.following ? StarFilled : StarOutline}
-            />
-          )}
+        <IconButton
+          onClick={() => {
+            dispatch(updateExistingThread(post.id, { following: !post.following }));
+            return true;
+          }}
+          alt="Follow"
+          iconAs={Icon}
+          size="inline"
+          className="mx-2.5 my-0"
+          src={post.following ? StarFilled : StarOutline}
+        />
       </OverlayTrigger>
       {preview && post.commentCount > 1
         && (

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

@@ -1,11 +1,14 @@
 import React from 'react';
 
-import { render, screen } from '@testing-library/react';
+import {
+  act, fireEvent, 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 { RequestStatus } from '../../../data/constants';
 import { initializeStore } from '../../../store';
 import PostFooter from './PostFooter';
 
@@ -81,4 +84,18 @@ describe('PostFooter', () => {
     renderComponent({ ...mockPost, groupId: 5, groupName: 'Test Cohort' });
     expect(screen.getByTestId('cohort-icon')).toBeTruthy();
   });
+  it.each([[true, /unfollow/i], [false, /follow/i]])('test follow button when following=%s', async (following, message) => {
+    renderComponent({ ...mockPost, following });
+    const followButton = screen.getByRole('button', { name: /follow/i });
+    expect(screen.queryByRole('tooltip')).not.toBeInTheDocument();
+    await act(async () => {
+      fireEvent.mouseEnter(followButton);
+    });
+    expect(screen.getByRole('tooltip')).toHaveTextContent(message);
+    await act(async () => {
+      fireEvent.click(followButton);
+    });
+    // clicking on the button triggers thread update.
+    expect(store.getState().threads.status === RequestStatus.IN_PROGRESS).toBeTruthy();
+  });
 });