fix: update following unit tests

Author: HelanaNady

src/__tests__/profile/FollowingScreen.test.tsx

@@ -17,6 +17,14 @@ jest.mock('@/services/connections', () => ({
   getUserFollowing: jest.fn(),
 }));
 
+jest.mock('@react-navigation/native', () => {
+  const actualNav = jest.requireActual('@react-navigation/native');
+  return {
+    ...actualNav,
+    useFocusEffect: jest.fn().mockImplementation((callback) => callback()),
+  };
+});
+
 const mockQueryClient = new QueryClient({
   defaultOptions: {
     queries: { retry: false },

src/__tests__/screens/profile/connections/FollowingScreen.test.tsx

@@ -1,3 +1,4 @@
+import { QueryClient, QueryClientProvider } from '@tanstack/react-query';
 import { render } from '@testing-library/react-native';
 
 import { ThemeProvider } from '@/hooks/useTheme';
@@ -21,6 +22,14 @@ jest.mock('@/components/ui/Avatar', () => ({
   default: jest.fn(() => null),
 }));
 
+jest.mock('@react-navigation/native', () => {
+  const actualNav = jest.requireActual('@react-navigation/native');
+  return {
+    ...actualNav,
+    useFocusEffect: jest.fn().mockImplementation((callback) => callback()),
+  };
+});
+
 jest.mock('@/components/ui/Spinner', () => {
   // eslint-disable-next-line @typescript-eslint/no-require-imports
   const { ActivityIndicator } = require('react-native');
@@ -49,6 +58,24 @@ const mockFollowing = [
   },
 ];
 
+jest.mock('@react-navigation/native', () => {
+  const actualNav = jest.requireActual('@react-navigation/native');
+  return {
+    ...actualNav,
+    useFocusEffect: jest.fn().mockImplementation((callback) => callback()),
+  };
+});
+
+const queryClient = new QueryClient();
+
+const renderWithClient = (ui: React.ReactElement) => {
+  return render(ui, {
+    wrapper: ({ children }) => (
+      <QueryClientProvider client={queryClient}>{children}</QueryClientProvider>
+    ),
+  });
+};
+
 describe('FollowingScreen', () => {
   const username = 'testuser';
 
@@ -70,7 +97,7 @@ describe('FollowingScreen', () => {
       error: null,
     });
 
-    const { getByTestId } = render(
+    const { getByTestId } = renderWithClient(
       <ThemeProvider>
         <FollowingScreen username={username} />
       </ThemeProvider>
@@ -89,7 +116,7 @@ describe('FollowingScreen', () => {
       error: new Error('Network error'),
     });
 
-    const { getByText } = render(
+    const { getByText } = renderWithClient(
       <ThemeProvider>
         <FollowingScreen username={username} />
       </ThemeProvider>
@@ -115,7 +142,7 @@ describe('FollowingScreen', () => {
       error: null,
     });
 
-    const { queryByTestId } = render(
+    const { queryByTestId } = renderWithClient(
       <ThemeProvider>
         <FollowingScreen username={username} />
       </ThemeProvider>
@@ -143,13 +170,13 @@ describe('FollowingScreen', () => {
       error: null,
     });
 
-    const { getByTestId } = render(
+    const { getByTestId } = renderWithClient(
       <ThemeProvider>
         <FollowingScreen username={username} />
       </ThemeProvider>
     );
 
-    expect(getByTestId('spinner-small')).toBeTruthy();
+    expect(getByTestId('footer-spinner')).toBeTruthy();
   });
 
   it('does not render footer when not fetching next page', () => {
@@ -169,7 +196,7 @@ describe('FollowingScreen', () => {
       error: null,
     });
 
-    const { queryByTestId } = render(
+    const { queryByTestId } = renderWithClient(
       <ThemeProvider>
         <FollowingScreen username={username} />
       </ThemeProvider>

src/hooks/profile/useBlockMutation.tsx

@@ -34,7 +34,7 @@ async function updateLists(queryClient: QueryClient, username: string, isBlocked
     mutes: false,
   };
 
-  for (const key of listKeys) {
+  for (const key of queryKeys) {
     const queries = queryClient.getQueriesData<InfiniteListResponse>({
       queryKey: [key],
     });
@@ -145,68 +145,25 @@ function updateTweetLikersAndRetweetersLists(
   retweetersQueries.forEach(([queryKey, data]) => {
     if (!data) return;
 
-      const pages = data.pages.map((page) => ({
-        ...page,
-        data: page.data.map((user) => {
-          if (user.username === username) {
-            isFound[key] = true;
-            return {
+    const pages = data.pages.map((page) => ({
+      ...page,
+      data: page.data.map((user) =>
+        user.username === username
+          ? {
               ...user,
               relationship: {
                 ...user.relationship,
                 blocking: isBlocked,
                 follower: isBlocked ? false : user.relationship?.follower,
                 following: isBlocked ? false : user.relationship?.following,
               },
-            };
-          } else return user;
-        }),
-      }));
-
-      queryClient.setQueryData(queryKey, { ...data, pages });
-    });
-  }
-
-  if (isBlocked && !isFound.blocks) {
-    let profile = queryClient.getQueryData<UserProfile>(['profile', username]);
-    if (!profile) {
-      // fetch it if not found in cache
-      profile = await queryClient.fetchQuery<UserProfile>({
-        queryKey: ['profile', username],
-      });
-    }
-
-    if (profile) {
-      // map to compact user type first
-      const newProfile = {
-        username: profile.username,
-        displayName: profile.displayName,
-        bio: profile.bio,
-        avatarUrl: profile.avatarUrl,
-        bioEntities: profile.bioEntities,
-        relationship: { ...profile.relationship, following: true },
-      };
-
-      const blocksList = queryClient.getQueryData<InfiniteListResponse>(['blocks']);
-
-      if (!blocksList) return;
-
-      const updatedPages = blocksList.pages.map((page, index) => {
-        if (index === 0) {
-          return {
-            ...page,
-            data: [newProfile, ...page.data],
-          };
-        }
-        return page;
-      });
+            }
+          : user
+      ),
+    }));
 
-      queryClient.setQueryData(['blocks'], {
-        ...blocksList,
-        pages: updatedPages,
-      });
-    }
-  }
+    queryClient.setQueryData(queryKey, { ...data, pages });
+  });
 }
 
 export function useBlockMutation() {

src/screens/profile/connections/FollowingScreen.tsx

@@ -137,7 +137,7 @@ export default function FollowingScreen({ username }: FollowingScreenProps) {
         ListFooterComponent={renderFooter}
         ListEmptyComponent={
           isLoading ? (
-            <View style={styles.spinner}>
+            <View style={styles.spinner} testID="spinner-large">
               <Spinner size="large" />
             </View>
           ) : error ? (