Feat/explore page UI

quotevote-frontend/src/__tests__/app/dashboard/notifications/NotificationsPageContent.test.tsx

@@ -98,6 +98,6 @@ describe('NotificationsPageContent', () => {
     mockLoading = false;
     mockData = { notifications: [] };
     render(<NotificationsPageContent />);
-    expect(screen.getByText(/don't have any alerts/i)).toBeInTheDocument();
+    expect(screen.getByText(/you're all caught up/i)).toBeInTheDocument();
   });
 });

quotevote-frontend/src/__tests__/components/Chat/ChatList.test.tsx

@@ -34,10 +34,19 @@
 jest.mock('@/components/Avatar', () => ({
   __esModule: true,
   default: ({ src, alt }: { src?: string; alt: string }) => (
     <img data-testid="avatar" src={src} alt={alt} />
   ),
 }))
 
+// ─── DisplayAvatar mock (used by ChatList) ─────────────────────────────────
+jest.mock('@/components/DisplayAvatar', () => ({
+  __esModule: true,
+  DisplayAvatar: ({ avatar, username }: { avatar?: string | Record<string, unknown>; username: string; size?: number; className?: string }) => {
+    const src = typeof avatar === 'string' ? avatar : `https://avataaars.io/?seed=${username}`
+    return <img data-testid="avatar" src={src} alt={`${username}'s avatar`} />
+  },
+}))
+
 // ─── LoadingSpinner mock ───────────────────────────────────────────────────
 jest.mock('@/components/LoadingSpinner', () => ({
   LoadingSpinner: ({ size }: { size: number }) => (
@@ -328,8 +337,8 @@
     render(<ChatList filterType="chats" />)
 
     await waitFor(() => {
-      // When no avatar, the first letter of the room title is displayed
-      expect(screen.getByText('J')).toBeInTheDocument()
+      // When no avatar, DisplayAvatar still renders a cartoon avatar image
+      expect(screen.getByTestId('avatar')).toBeInTheDocument()
     })
   })
 

quotevote-frontend/src/__tests__/components/Chat/MessageItem.test.tsx

@@ -45,6 +45,16 @@ jest.mock('@/components/Avatar', () => ({
   ),
 }))
 
+// Mock DisplayAvatar component (used by MessageItem)
+jest.mock('@/components/DisplayAvatar', () => ({
+  __esModule: true,
+  DisplayAvatar: ({ username, size }: { avatar?: unknown; username: string; size: number; className?: string }) => (
+    <div data-testid="avatar" data-username={username} data-size={size}>
+      DisplayAvatar
+    </div>
+  ),
+}))
+
 jest.mock('@/hooks/useGuestGuard', () => ({
   __esModule: true,
   default: () => () => true,