From 8ce8a31a623fc981703fa06da747f495a37465c7 Mon Sep 17 00:00:00 2001
From: Anuj Chhikara <107175639+AnujChhikara@users.noreply.github.com>
Date: Wed, 18 Dec 2024 15:03:01 +0530
Subject: [PATCH] Prevent Unauthorized Message on Mine page when load (#1296)

* fix useAuthentication hook

* fix tests

* fix flaky tests

* wrap async calls with waitFor
---
 .../Calendar/UserSearchField.test.tsx         |  8 +++--
 .../Components/Tasks/TaskDetails.test.tsx     | 31 +++++++++++--------
 __tests__/Unit/pages/Mine/Mine.test.tsx       | 19 +++++++-----
 src/hooks/useAuthenticated.ts                 |  8 +----
 src/pages/mine/index.tsx                      |  2 +-
 5 files changed, 38 insertions(+), 30 deletions(-)

diff --git a/__tests__/Unit/Components/Calendar/UserSearchField.test.tsx b/__tests__/Unit/Components/Calendar/UserSearchField.test.tsx
index afa440af3..5fa0067ec 100644
--- a/__tests__/Unit/Components/Calendar/UserSearchField.test.tsx
+++ b/__tests__/Unit/Components/Calendar/UserSearchField.test.tsx
@@ -177,13 +177,17 @@ describe('SearchField component', () => {
         userEvent.type(input, 'mu');
         await waitFor(() => expect(input).toHaveValue('mu'));
 
-        const suggestionsAfterFirstTyping = screen.queryAllByRole('listitem');
+        const suggestionsAfterFirstTyping = await waitFor(() =>
+            screen.queryAllByRole('listitem')
+        );
         expect(suggestionsAfterFirstTyping.length).toBeGreaterThan(0);
 
         userEvent.type(input, 'hammad');
         await waitFor(() => expect(input).toHaveValue('muhammad'));
 
-        const suggestionsAfterSecondTyping = screen.queryAllByRole('listitem');
+        const suggestionsAfterSecondTyping = await waitFor(() =>
+            screen.queryAllByRole('listitem')
+        );
         expect(suggestionsAfterSecondTyping.length).toBeGreaterThan(0);
         expect(suggestionsAfterSecondTyping.length).toBeLessThan(
             suggestionsAfterFirstTyping.length
diff --git a/__tests__/Unit/Components/Tasks/TaskDetails.test.tsx b/__tests__/Unit/Components/Tasks/TaskDetails.test.tsx
index 24ec69ef0..261d9994f 100644
--- a/__tests__/Unit/Components/Tasks/TaskDetails.test.tsx
+++ b/__tests__/Unit/Components/Tasks/TaskDetails.test.tsx
@@ -405,24 +405,25 @@ test('should update the title and description with the new values', async () =>
         <Provider store={store()}>
             <TaskDetails taskID={details.taskID} />
             <ToastContainer />
-        </Provider>,
-        {}
+        </Provider>
     );
-    await waitFor(() => {
-        const editButton = screen.getByRole('button', { name: 'Edit' });
-        fireEvent.click(editButton);
-    });
-    const textareaElement = screen.getByTestId('title-textarea');
+
+    const editButton = await screen.findByRole('button', { name: 'Edit' });
+    fireEvent.click(editButton);
+
+    const textareaElement = await screen.findByTestId('title-textarea');
     fireEvent.change(textareaElement, {
         target: { name: 'title', value: 'New Title' },
     });
 
-    const saveButton = await screen.findByRole('button', {
-        name: 'Save',
-    });
+    const saveButton = await screen.findByRole('button', { name: 'Save' });
     fireEvent.click(saveButton);
-    expect(screen.findByText(/Successfully saved/i)).not.toBeNull();
+
+    await waitFor(() => {
+        expect(screen.getByText(/Successfully saved/i)).toBeInTheDocument();
+    });
 });
+
 test('should not update the title and description with the same values', async () => {
     server.use(...taskDetailsHandler);
     renderWithRouter(
@@ -447,7 +448,9 @@ test('should not update the title and description with the same values', async (
         name: 'Save',
     });
     fireEvent.click(saveButton);
-    expect(screen.queryByText(/Successfully saved/i)).toBeNull();
+    await waitFor(() => {
+        expect(screen.queryByText(/Successfully saved/i)).toBeNull();
+    });
 });
 
 test('Should render No task progress', async () => {
@@ -577,7 +580,9 @@ describe('Task details Edit mode ', () => {
             });
             fireEvent.click(saveButton);
         });
-        expect(screen.queryByText(/Successfully saved/i)).toBeNull();
+        await waitFor(() => {
+            expect(screen.queryByText(/Successfully saved/i)).toBeNull();
+        });
     });
     test('Should render task progress', async () => {
         server.use(superUserSelfHandler);
diff --git a/__tests__/Unit/pages/Mine/Mine.test.tsx b/__tests__/Unit/pages/Mine/Mine.test.tsx
index fc48e6a17..f09e1952a 100644
--- a/__tests__/Unit/pages/Mine/Mine.test.tsx
+++ b/__tests__/Unit/pages/Mine/Mine.test.tsx
@@ -1,4 +1,4 @@
-import { waitFor } from '@testing-library/react';
+import { waitFor, within } from '@testing-library/react';
 import Mine, { searchTasks } from '@/pages/mine';
 import { store } from '@/app/store';
 import { Provider } from 'react-redux';
@@ -25,13 +25,14 @@ afterAll(() => server.close());
 
 describe('Mine Page', () => {
     it('should render loading state', () => {
-        const { getByText } = renderWithRouter(
+        const { getByTestId } = renderWithRouter(
             <Provider store={store()}>
                 <Mine />
             </Provider>,
             { route: '/mine' }
         );
-        expect(getByText(/loading/i)).toBeInTheDocument();
+        const container = getByTestId('mine-page-container');
+        expect(within(container).getByText(/loading/i)).toBeInTheDocument();
     });
 
     it('should call searchTasks', () => {
@@ -142,13 +143,17 @@ describe('Mine Page', () => {
         );
 
         const searchInput = await findByTestId('search-input');
-        userEvent.type(searchInput, 'status:verified');
+        expect(searchInput).toBeInTheDocument();
+        await userEvent.type(searchInput, 'status:verified');
+        await waitFor(() => expect(searchInput).toHaveValue('status:verified'));
+        await waitFor(() => findByText('status: verified'));
+
         const tag = await findByText('status: verified');
+        expect(tag).toBeInTheDocument();
+
         userEvent.click(tag);
 
-        await waitFor(() => {
-            expect(getAllByText('Verified').length).toEqual(2);
-        });
+        await waitFor(() => expect(getAllByText('Verified').length).toEqual(2));
     });
 
     it('should filter tasks based on filter dropdown select', async () => {
diff --git a/src/hooks/useAuthenticated.ts b/src/hooks/useAuthenticated.ts
index 8779d67b7..47b1059bd 100644
--- a/src/hooks/useAuthenticated.ts
+++ b/src/hooks/useAuthenticated.ts
@@ -11,12 +11,9 @@ const useAuthenticated = (): userDetails => {
         profilePicture: DEFAULT_AVATAR,
     });
 
-    const { data, isSuccess } = useUserData();
+    const { data, isSuccess, isLoading } = useUserData();
 
-    const [isLoading, setIsLoading] = useState(false);
     const setUserDetails = () => {
-        setIsLoading(true);
-
         if (data?.incompleteUserDetails) {
             window.open(`${SIGNUP_LINK}`, '_blank', 'noopener');
         }
@@ -25,10 +22,7 @@ const useAuthenticated = (): userDetails => {
             firstName: data?.first_name ?? '',
             profilePicture: data?.picture?.url ?? DEFAULT_AVATAR,
         });
-
         if (isSuccess) setIsLoggedIn(true);
-
-        setIsLoading(false);
     };
 
     useEffect(() => {
diff --git a/src/pages/mine/index.tsx b/src/pages/mine/index.tsx
index f08fd5acc..75552d5d9 100644
--- a/src/pages/mine/index.tsx
+++ b/src/pages/mine/index.tsx
@@ -95,7 +95,7 @@ const Mine: FC = () => {
     return (
         <Layout>
             <Head title="Mine" />
-            <div className={styles.container}>
+            <div className={styles.container} data-testid="mine-page-container">
                 {isAuthenticating ? (
                     <Loader />
                 ) : isLoggedIn ? (