diff --git a/public/mockServiceWorker.js b/public/mockServiceWorker.js index b17fcd65..fa21e344 100644 --- a/public/mockServiceWorker.js +++ b/public/mockServiceWorker.js @@ -1,4 +1,3 @@ -/* eslint-disable */ /* tslint:disable */ /** diff --git a/src/Router.tsx b/src/Router.tsx index af63f5f3..046da6fd 100644 --- a/src/Router.tsx +++ b/src/Router.tsx @@ -137,6 +137,9 @@ const MessagesPage = lazyWithRetry(() => import("@/pages/social/messages/Message const MessageIdPage = lazyWithRetry( () => import("@/pages/social/messages/[messageId]/MessageIdPage"), ); +const MessageIdPageGuest = lazy( + () => import("@/pages/social/messages/[messageId]/MessageIdPageGuest"), +); // You const LibraryLayout = lazyWithRetry(() => import("@/pages/you/library/LibraryLayout")); @@ -229,6 +232,13 @@ const UploadRouter = () => { return isAuthenticated ? : ; }; +const MessageIdPageRouter = () => { + const { isAuthenticated } = useAuthStore(); + return ( + + ); +}; + const LogoutPage = () => { const { logout } = useAuthStore(); @@ -357,6 +367,10 @@ export const router = createBrowserRouter([ element: , errorElement: , children: [ + { + path: "messages/:messageId", + element: , + }, { element: , children: [ @@ -370,10 +384,6 @@ export const router = createBrowserRouter([ element: , }, { path: "messages", element: }, - { - path: "messages/:messageId", - element: , - }, // You { diff --git a/src/components/MessagingComponents/Chats.tsx b/src/components/MessagingComponents/Chats.tsx index 5f741458..9a9535a2 100644 --- a/src/components/MessagingComponents/Chats.tsx +++ b/src/components/MessagingComponents/Chats.tsx @@ -1,28 +1,47 @@ import { ChatProfile } from "@/components/MessagingComponents/ChatProfile"; import { type Conversation } from "@/services/api/messaging/conversationApi"; import Spinner from "@/components/UI/Spinner"; +import type { UIEvent } from "react"; interface ChatsProps { conversations: Conversation[]; loading: boolean; loadingMore: boolean; + hasMore: boolean; error: string | null; activeConversationId: string | null; onSelect: (conversation: Conversation) => void; + onLoadMore: () => void; } export function Chats({ conversations, loading, loadingMore, + hasMore, error, activeConversationId, onSelect, + onLoadMore, }: ChatsProps) { + const handleScroll = (e: UIEvent) => { + if (!hasMore || loadingMore) return; + + const el = e.currentTarget; + const distanceFromBottom = el.scrollHeight - el.scrollTop - el.clientHeight; + + if (distanceFromBottom <= 120) { + onLoadMore(); + } + }; // ── Loading ────────────────────────────────────────────────────────────── if (loading) { - return ; + return ( +
+ +
+ ); } // ── Error ──────────────────────────────────────────────────────────────── @@ -48,7 +67,11 @@ export function Chats({ // ── List ───────────────────────────────────────────────────────────────── return ( -
+
{conversations.map((conv) => ( ); -} \ No newline at end of file +} diff --git a/src/components/MessagingComponents/MessageBox.tsx b/src/components/MessagingComponents/MessageBox.tsx index 71fc2dd9..37813e4c 100644 --- a/src/components/MessagingComponents/MessageBox.tsx +++ b/src/components/MessagingComponents/MessageBox.tsx @@ -12,6 +12,8 @@ interface MessageInputProps { onIsEmptyChange?: (isEmpty: boolean) => void onEmbedsResolved?: (embeds: ResolvedEmbed[]) => void hasError?: boolean + externalEmbeds?: ResolvedEmbed[] + onSubmit?: () => void } const URL_REGEX = /https?:\/\/[^\s"'<>]+/g @@ -21,11 +23,26 @@ export function MessageBox({ onIsEmptyChange, onEmbedsResolved, hasError, + externalEmbeds, + onSubmit, }: MessageInputProps) { const [value, setValue] = useState("") - const [embeds, setEmbeds] = useState([]) + const [internalEmbeds, setInternalEmbeds] = useState([]) const debounceRef = useRef | null>(null) const resolvedUrlsRef = useRef>(new Map()) + const controlled = externalEmbeds !== undefined + const currentEmbeds = externalEmbeds ?? internalEmbeds + + const mergeEmbeds = (base: ResolvedEmbed[], next: ResolvedEmbed[]) => { + const map = new Map() + for (const embed of base) { + map.set(`${embed.type}:${embed.id}`, embed) + } + for (const embed of next) { + map.set(`${embed.type}:${embed.id}`, embed) + } + return Array.from(map.values()) + } const stripEmbedUrls = (text: string, activeEmbeds: ResolvedEmbed[]) => { let stripped = text @@ -33,6 +50,7 @@ export function MessageBox({ // (same URL twice = removed twice) const urlCounts = new Map() for (const embed of activeEmbeds) { + if (!embed.sourceUrl) continue urlCounts.set(embed.sourceUrl, (urlCounts.get(embed.sourceUrl) ?? 0) + 1) } for (const [url, count] of urlCounts.entries()) { @@ -47,25 +65,30 @@ export function MessageBox({ // FIX 1: remove by index so duplicate URLs only remove one entry at a time const removeEmbedAt = (indexToRemove: number) => { - const embedToRemove = embeds[indexToRemove] - - // Remove one occurrence of the URL from the textarea - let removed = false - const newValue = value.replace( - new RegExp(embedToRemove.sourceUrl.replace(/[.*+?^${}()|[\]\\]/g, "\\$&"), "g"), - (match) => { - if (!removed) { removed = true; return "" } - return match - } - ).replace(/\s{2,}/g, " ").trim() + const embedToRemove = currentEmbeds[indexToRemove] + + let newValue = value + if (embedToRemove.sourceUrl) { + let removed = false + newValue = value.replace( + new RegExp(embedToRemove.sourceUrl.replace(/[.*+?^${}()|[\]\\]/g, "\\$&"), "g"), + (match) => { + if (!removed) { removed = true; return "" } + return match + } + ).replace(/\s{2,}/g, " ").trim() + } setValue(newValue) - const next = embeds.filter((_, i) => i !== indexToRemove) + const next = currentEmbeds.filter((_, i) => i !== indexToRemove) const cleanText = stripEmbedUrls(newValue, next) onValueChange?.(cleanText) onIsEmptyChange?.(cleanText.trim() === "" && next.length === 0) - setEmbeds(next) + + if (!controlled) { + setInternalEmbeds(next) + } onEmbedsResolved?.(next) } @@ -79,9 +102,11 @@ export function MessageBox({ if (!matches) { const cleanText = text.trim() onValueChange?.(cleanText) - onIsEmptyChange?.(cleanText === "") - setEmbeds([]) - onEmbedsResolved?.([]) + onIsEmptyChange?.(cleanText === "" && currentEmbeds.length === 0) + if (!controlled) { + setInternalEmbeds([]) + } + onEmbedsResolved?.(currentEmbeds) return } @@ -89,7 +114,7 @@ export function MessageBox({ // (will be recalculated after resolve settles) const tempClean = matches.reduce((acc, url) => acc.replace(url, ""), text).replace(/\s{2,}/g, " ").trim() onValueChange?.(tempClean) - onIsEmptyChange?.(tempClean === "" && embeds.length === 0) + onIsEmptyChange?.(tempClean === "" && currentEmbeds.length === 0) debounceRef.current = setTimeout(async () => { const results = await Promise.all( @@ -151,12 +176,15 @@ export function MessageBox({ ) const validEmbeds = results.filter((r): r is ResolvedEmbed => r !== null) - setEmbeds(validEmbeds) - onEmbedsResolved?.(validEmbeds) + const nextEmbeds = controlled ? mergeEmbeds(currentEmbeds, validEmbeds) : validEmbeds + if (!controlled) { + setInternalEmbeds(validEmbeds) + } + onEmbedsResolved?.(nextEmbeds) - const cleanText = stripEmbedUrls(text, validEmbeds) + const cleanText = stripEmbedUrls(text, nextEmbeds) onValueChange?.(cleanText) - onIsEmptyChange?.(cleanText === "" && validEmbeds.length === 0) + onIsEmptyChange?.(cleanText === "" && nextEmbeds.length === 0) }, 600) } @@ -167,15 +195,21 @@ export function MessageBox({ data-test="message-input" value={value} onChange={handleChange} + onKeyDown={(e) => { + if (e.key === "Enter" && !e.shiftKey) { + e.preventDefault() + onSubmit?.() + } + }} rows={4} className={`w-full resize-y bg-[#2a2a2a] border text-white text-sm px-3 py-2 rounded focus:outline-none caret-[#f50] ${ hasError ? "border-red-500" : "border-[#444] focus:border-[#666]" }`} /> - {embeds.length > 0 && ( + {currentEmbeds.length > 0 && (
- {embeds.map((embed, index) => { + {currentEmbeds.map((embed, index) => { const props = embed.type === "track" ? { @@ -201,4 +235,4 @@ export function MessageBox({ )}
) -} \ No newline at end of file +} diff --git a/src/components/MessagingComponents/SendMessageForm.tsx b/src/components/MessagingComponents/SendMessageForm.tsx index 985c76f8..d6502d6a 100644 --- a/src/components/MessagingComponents/SendMessageForm.tsx +++ b/src/components/MessagingComponents/SendMessageForm.tsx @@ -6,6 +6,8 @@ import type { ResolvedEmbed } from './MessageBox'; import MessageCell from './messagecell'; import { useAuthStore } from '@/stores/auth.store'; import { emitMessageSent, emitStopTyping } from '@/services/api/messaging/socketService'; +import TrackPlaylistPicker from './TrackPlaylistPicker'; +import type { PickedItem } from './TrackPlaylistPicker'; interface SendMessageFormProps { conversationId: string; @@ -35,17 +37,19 @@ export default function SendMessageForm({ isTyping, ParticipantInfo, }: SendMessageFormProps) { - const [value, setValue] = useState(''); - const [embeds, setEmbeds] = useState([]); - const [error, setError] = useState(null); - const [isSending, setIsSending] = useState(false); - const [boxKey, setBoxKey] = useState(0); + const [value, setValue] = useState(''); + const [embeds, setEmbeds] = useState([]); + const [error, setError] = useState(null); + const [isSending, setIsSending] = useState(false); + const [boxKey, setBoxKey] = useState(0); + const [pickerOpen, setPickerOpen] = useState(false); const scrollContainerRef = useRef(null); const sentinelRef = useRef(null); const prevMsgCountRef = useRef(0); const prevScrollHeightRef = useRef(0); const isPrependingRef = useRef(false); + const composerRef = useRef(null); // ─── Scroll management ──────────────────────────────────────────────────── useEffect(() => { @@ -56,23 +60,19 @@ export default function SendMessageForm({ const current = existingMessages.length; if (isPrependingRef.current) { - // Older messages were prepended — restore the user's scroll position - // so the view doesn't jump to the top const newScrollHeight = container.scrollHeight; container.scrollTop = newScrollHeight - prevScrollHeightRef.current; isPrependingRef.current = false; } else if (prev === 0 && current > 0) { - // Initial load — jump to bottom to show newest messages container.scrollTop = container.scrollHeight; } else if (current > prev) { - // New message sent or received — scroll to bottom container.scrollTop = container.scrollHeight; } prevMsgCountRef.current = current; }, [existingMessages]); - // ─── IntersectionObserver — sentinel at TOP, loads older messages ───────── + // ─── IntersectionObserver — sentinel at TOP ─────────────────────────────── const handleIntersect = useCallback( (entries: IntersectionObserverEntry[]) => { if (!entries[0].isIntersecting) return; @@ -80,7 +80,6 @@ export default function SendMessageForm({ const container = scrollContainerRef.current; if (container) { - // Snapshot current scroll height before prepend so we can restore position prevScrollHeightRef.current = container.scrollHeight; isPrependingRef.current = true; } @@ -101,6 +100,51 @@ export default function SendMessageForm({ return () => observer.disconnect(); }, [handleIntersect]); + // ─── Handle pick from TrackPlaylistPicker ───────────────────────────────── + // The picker emits a PickedItem; we inject it as a URL-less embed directly + // so the user sees a MiniPlayer card without having to paste a link. + const handlePick = useCallback((item: PickedItem) => { + // Build a synthetic ResolvedEmbed so MessageBox / send logic handles it + const syntheticEmbed: ResolvedEmbed = + item.type === 'track' + ? { + type: 'track', + id: item.id, + sourceUrl: '', // no URL to strip from textarea + resource: { + id: item.id, + title: item.title, + cover_image: item.coverImage, + artist_name: item.artistName, + // required Message fields that aren't displayed in the picker + description: null, genre: null, duration: null, bitrate: null, + status: 'public', is_public: true, is_hidden: false, + user_id: '', play_count: 0, like_count: 0, + stream_url: null, preview_url: null, waveform_url: null, + artists: null, created_at: '', updated_at: '', + } as any, + } + : { + type: 'playlist', + id: item.id, + sourceUrl: '', + resource: { + playlist_id: item.id, + name: item.title, + cover_image: item.coverImage, + track_count: item.trackCount, + owner_user_id: '', slug: null, description: null, + is_public: true, like_count: 0, repost_count: 0, + created_at: '', updated_at: '', + } as any, + }; + + setEmbeds((prev) => [...prev, syntheticEmbed]); + // Notify MessageBox parent of updated embeds + setBoxKey((k) => k + 1); // remount so MessageBox re-syncs + setError(null); + }, []); + // ─── Send handler ───────────────────────────────────────────────────────── const handleSend = async () => { const cleanBody = value.trim(); @@ -184,7 +228,6 @@ export default function SendMessageForm({ ref={scrollContainerRef} className="flex-1 overflow-y-auto flex flex-col gap-4 px-3 py-3 min-h-0" > - {/* Sentinel at TOP — becomes visible when user scrolls up, triggers older page load */}
{loadingMessages && hasMoreMessages && ( @@ -217,9 +260,10 @@ export default function SendMessageForm({ {/* ── Composer ── */}
{ - if (e.key === "Enter" && !e.shiftKey) { + if (e.key === 'Enter' && !e.shiftKey) { e.preventDefault(); handleSend(); } @@ -238,11 +282,34 @@ export default function SendMessageForm({ }} onEmbedsResolved={setEmbeds} hasError={!!error} + // Pass externally-picked embeds so MessageBox renders their MiniPlayers + externalEmbeds={embeds} /> + {pickerOpen && ( + setPickerOpen(false)} + /> + )} + {error &&

{error}

} -
+
+ {user?.role === 'artist' && ( + + )}
); -} \ No newline at end of file +} diff --git a/src/components/MessagingComponents/TrackPlaylistPicker.tsx b/src/components/MessagingComponents/TrackPlaylistPicker.tsx new file mode 100644 index 00000000..6b4b4877 --- /dev/null +++ b/src/components/MessagingComponents/TrackPlaylistPicker.tsx @@ -0,0 +1,270 @@ +import { useEffect, useMemo, useRef, useState } from "react"; +import { AudioWaveform, Lock, ListMusic, Music } from "lucide-react"; +import { + fetchMyTracks, + fetchMyRepostedTracks, + fetchMyRepostedPlaylists, + fetchUserPlaylists, + type MyTrack, + type RepostedTrack, + type RepostedPlaylist, + type UserPlaylist, +} from "../../services/api/messaging/conversationApi"; +import { useAuthStore } from "@/stores/auth.store"; + +export type PickedItem = + | { type: "track"; id: string; title: string; artistName: string; coverImage: string | null } + | { type: "playlist"; id: string; title: string; trackCount: number; coverImage: string | null }; + +interface TrackPlaylistPickerProps { + onPick: (item: PickedItem) => void; + onClose: () => void; +} + +type PickerItem = + | { + type: "track"; + id: string; + title: string; + artistName: string; + coverImage: string | null; + isPrivate?: boolean; + } + | { + type: "playlist"; + id: string; + title: string; + trackCount: number; + coverImage: string | null; + isPrivate?: boolean; + }; + +const RESULT_LIMIT = 50; + +function getResponseItems(response: unknown, fallbackKey: string): T[] { + if (Array.isArray(response)) return response as T[]; + + const payload = response as Record | null; + if (!payload) return []; + + if (Array.isArray(payload.data)) return payload.data as T[]; + if (Array.isArray(payload[fallbackKey])) return payload[fallbackKey] as T[]; + + return []; +} + +function normalizeTrack(track: MyTrack | RepostedTrack): PickerItem { + return { + type: "track", + id: track.id, + title: track.title, + artistName: track.artist_name ?? "", + coverImage: track.cover_image, + }; +} + +function normalizePlaylist(playlist: RepostedPlaylist | UserPlaylist): PickerItem { + const id = (playlist as UserPlaylist).playlist_id ?? (playlist as RepostedPlaylist).id; + const title = (playlist as UserPlaylist).name ?? (playlist as RepostedPlaylist).title ?? "Playlist"; + + return { + type: "playlist", + id, + title, + trackCount: playlist.track_count ?? 0, + coverImage: playlist.cover_image ?? null, + isPrivate: "is_public" in playlist ? !playlist.is_public : false, + }; +} + +function CoverImage({ item }: { item: PickerItem }) { + return ( +
+ {item.coverImage ? ( + + ) : ( +
+ ); +} + +function PickerRow({ item, onPick }: { item: PickerItem; onPick: () => void }) { + return ( + + ); +} + +function EmptyState({ loading }: { loading: boolean }) { + return ( +
+ {loading ? "Loading tracks and playlists..." : "No tracks or playlists found."} +
+ ); +} + +export default function TrackPlaylistPicker({ onPick, onClose }: TrackPlaylistPickerProps) { + const user = useAuthStore((state) => state.user); + const [query, setQuery] = useState(""); + const [items, setItems] = useState([]); + const [loading, setLoading] = useState(true); + const ref = useRef(null); + + useEffect(() => { + const handler = (event: MouseEvent) => { + if (ref.current && !ref.current.contains(event.target as Node)) { + onClose(); + } + }; + + document.addEventListener("mousedown", handler); + return () => document.removeEventListener("mousedown", handler); + }, [onClose]); + + useEffect(() => { + let cancelled = false; + + const loadItems = async () => { + setLoading(true); + + const requests = [ + fetchMyTracks(RESULT_LIMIT, 0), + fetchMyRepostedTracks(RESULT_LIMIT, 0), + user?.id ? fetchUserPlaylists(user.id, RESULT_LIMIT, 0) : Promise.resolve({ data: [] }), + fetchMyRepostedPlaylists(RESULT_LIMIT, 0), + ] as const; + + const [myTracks, repostedTracks, playlists, repostedPlaylists] = + await Promise.allSettled(requests); + + if (cancelled) return; + + const nextItems: PickerItem[] = []; + + if (myTracks.status === "fulfilled") { + nextItems.push(...getResponseItems(myTracks.value, "tracks").map(normalizeTrack)); + } + if (repostedTracks.status === "fulfilled") { + nextItems.push( + ...getResponseItems(repostedTracks.value, "tracks").map(normalizeTrack), + ); + } + if (playlists.status === "fulfilled") { + nextItems.push( + ...getResponseItems(playlists.value, "playlists").map(normalizePlaylist), + ); + } + if (repostedPlaylists.status === "fulfilled") { + nextItems.push( + ...getResponseItems(repostedPlaylists.value, "playlists").map( + normalizePlaylist, + ), + ); + } + + const seen = new Set(); + setItems( + nextItems.filter((item) => { + const key = `${item.type}:${item.id}`; + if (seen.has(key)) return false; + seen.add(key); + return true; + }), + ); + setLoading(false); + }; + + loadItems().catch(() => { + if (!cancelled) { + setItems([]); + setLoading(false); + } + }); + + return () => { + cancelled = true; + }; + }, [user?.id]); + + const filteredItems = useMemo(() => { + const normalizedQuery = query.trim().toLowerCase(); + if (!normalizedQuery) return items; + + return items.filter((item) => { + const searchable = + item.type === "track" + ? `${item.title} ${item.artistName}` + : `${item.title} ${item.trackCount}`; + + return searchable.toLowerCase().includes(normalizedQuery); + }); + }, [items, query]); + + const pickItem = (item: PickerItem) => { + if (item.type === "track") { + onPick({ + type: "track", + id: item.id, + title: item.title, + artistName: item.artistName, + coverImage: item.coverImage, + }); + } else { + onPick({ + type: "playlist", + id: item.id, + title: item.title, + trackCount: item.trackCount, + coverImage: item.coverImage, + }); + } + + onClose(); + }; + + return ( +
+
+ setQuery(event.target.value)} + className="w-full bg-transparent text-base text-white placeholder:text-[#a8adb4] outline-none" + /> +
+ +
+ {filteredItems.length > 0 ? ( + filteredItems.map((item) => ( + pickItem(item)} /> + )) + ) : ( + + )} +
+
+ ); +} diff --git a/src/components/MessagingComponents/tests/ChatProfile.test.tsx b/src/components/MessagingComponents/tests/ChatProfile.test.tsx index 75336ef8..6e89e732 100644 --- a/src/components/MessagingComponents/tests/ChatProfile.test.tsx +++ b/src/components/MessagingComponents/tests/ChatProfile.test.tsx @@ -1,149 +1,139 @@ +import { render, screen, fireEvent } from "@testing-library/react"; import { describe, it, expect, vi } from "vitest"; -import { render, screen } from "@testing-library/react"; -import userEvent from "@testing-library/user-event"; import { ChatProfile } from "../ChatProfile"; -import type { Conversation } from "@/services/api/messaging/conversationApi"; - -const baseConversation = { - id: "conv-1", - participant: { - id: "user-1", - display_name: "Alice", - avatar: "https://example.com/alice.jpg", - username: "alice", - }, - last_message: { - id: "msg-1", - body: "Hello there", - created_at: new Date(Date.now() - 60000).toISOString(), - sender_id: "user-1", - is_read: true, - }, - unread_count: 0, - updated_at: new Date(Date.now() - 60000).toISOString(), -} as Conversation; - -const renderProfile = ( - overrides: Partial = {}, - props: { isActive?: boolean; onClick?: () => void } = {} -) => - render( - - ); +import type { Conversation, Message } from "@/services/api/messaging/conversationApi"; + +// 🔹 Mock UserAvatar +vi.mock("@/components/UI/UserAvatar", () => ({ + default: ({ name }: { name: string }) =>
{name}
, +})); + +// 🔹 FULL Message factory (FIXED ✅) +const createMessage = (overrides?: Partial): Message => ({ + id: "msg-1", + conversation_id: "conv-1", + sender_id: "user-1", + body: "Hello there", + embed_type: null, + embed_id: null, + is_read: false, + created_at: new Date().toISOString(), + ...overrides, +}); + +// 🔹 Conversation factory +const createConversation = (overrides?: Partial): Conversation => + ({ + id: "conv-1", + updated_at: new Date().toISOString(), + created_at: new Date().toISOString(), + unread_count: 0, + participant: { + id: "user-2", + username: "john", + display_name: "John Doe", + bio: "", + location: "", + gender: "", + role: "", + avatar: "avatar.png", + cover_photo: "", + is_private: false, + is_verified: false, + followers_count: 0, + following_count: 0, + created_at: new Date().toISOString(), + }, + last_message: createMessage(), + ...overrides, + } as Conversation); describe("ChatProfile", () => { - // ── Rendering ────────────────────────────────────────────────────────────── + it("renders participant name", () => { + const conv = createConversation(); - it("renders the participant display name", () => { - renderProfile(); - expect(screen.getByText("Alice")).toBeInTheDocument(); + render(); + expect(screen.getByTestId("chat-profile-name")).toHaveTextContent("John Doe"); }); - it("renders participant profile picture", () => { - renderProfile(); - const img = screen.getByRole("img"); - expect(img).toHaveAttribute("src", "https://example.com/alice.jpg"); - expect(img).toHaveAttribute("alt", "Alice"); - }); + it("renders message preview (text)", () => { + const conv = createConversation({ + last_message: createMessage({ body: "Test message" }), + }); - it("renders the last message body", () => { - renderProfile(); - expect(screen.getByText("Hello there")).toBeInTheDocument(); + render(); + expect(screen.getByText("Test message")).toBeInTheDocument(); }); - it("renders '·' when there is no last message", () => { - renderProfile({ last_message: undefined }); - expect(screen.getByText("·")).toBeInTheDocument(); - }); + it("renders fallback when message body is empty and no embed", () => { + const conv = createConversation({ + last_message: createMessage({ body: "" }), + }); - it("renders time ago string", () => { - renderProfile(); - // Should render some time-ago text like "1 minutes ago" - expect(screen.getByText(/ago/i)).toBeInTheDocument(); + render(); + expect(screen.getByText("·")).toBeInTheDocument(); }); - // ── Unread badge ─────────────────────────────────────────────────────────── - - it("renders unread dot when unread_count > 0", () => { - const { container } = renderProfile({ unread_count: 3 }); - const dot = container.querySelector(".bg-\\[\\#f50\\]"); - expect(dot).toBeInTheDocument(); - }); + it("renders track embed preview", () => { + const conv = createConversation({ + last_message: createMessage({ body: "", embed_type: "track" }), + }); - it("does not render unread dot when unread_count is 0", () => { - const { container } = renderProfile({ unread_count: 0 }); - const dot = container.querySelector(".bg-\\[\\#f50\\]"); - expect(dot).not.toBeInTheDocument(); + render(); + expect(screen.getByText("🎵 Shared a track")).toBeInTheDocument(); }); - // ── Active state ─────────────────────────────────────────────────────────── - - it("applies active class when isActive is true", () => { - const { container } = renderProfile({}, { isActive: true }); - expect(container.querySelector(".bg-\\[\\#303030\\]")).toBeInTheDocument(); - }); + it("renders playlist embed preview", () => { + const conv = createConversation({ + last_message: createMessage({ body: "", embed_type: "playlist" }), + }); - it("does not apply active bg-[#303030] class when isActive is false", () => { - const { container } = renderProfile({}, { isActive: false }); - expect(container.querySelector(".bg-\\[\\#303030\\]")).not.toBeInTheDocument(); + render(); + expect(screen.getByText("🎶 Shared a playlist")).toBeInTheDocument(); }); - // ── Click ────────────────────────────────────────────────────────────────── + it("shows unread indicator when unread_count > 0", () => { + const conv = createConversation({ unread_count: 2 }); - it("calls onClick when the profile is clicked", async () => { - const onClick = vi.fn(); - const { container } = renderProfile({}, { onClick }); - const profileDiv = container.querySelector("[data-test^='chat-profile-']")!; - await userEvent.click(profileDiv); - expect(onClick).toHaveBeenCalledTimes(1); + render(); + expect(screen.getByTestId("chat-profile-unread-dot")).toBeInTheDocument(); }); - // ── data-test attribute ──────────────────────────────────────────────────── + it("does not show unread indicator when unread_count = 0", () => { + const conv = createConversation({ unread_count: 0 }); - it("has correct data-test attribute", () => { - const { container } = renderProfile(); + render(); expect( - container.querySelector("[data-test='chat-profile-conv-1']") - ).toBeInTheDocument(); + screen.queryByTestId("chat-profile-unread-dot") + ).not.toBeInTheDocument(); }); - // ── Time formatting ──────────────────────────────────────────────────────── + it("applies active class when isActive is true", () => { + const conv = createConversation(); - it("shows 'minutes ago' for recent messages", () => { - renderProfile({ - updated_at: new Date(Date.now() - 5 * 60 * 1000).toISOString(), - }); - expect(screen.getByText(/minutes ago/i)).toBeInTheDocument(); - }); + const { container } = render( + + ); - it("shows 'hours ago' for messages a few hours old", () => { - renderProfile({ - updated_at: new Date(Date.now() - 3 * 3600 * 1000).toISOString(), - }); - expect(screen.getByText(/hours ago/i)).toBeInTheDocument(); + expect(container.firstChild).toHaveClass("bg-[#303030]"); }); - it("shows 'days ago' for messages days old", () => { - renderProfile({ - updated_at: new Date(Date.now() - 3 * 86400 * 1000).toISOString(), - }); - expect(screen.getByText(/days ago/i)).toBeInTheDocument(); - }); + it("calls onClick when clicked", () => { + const conv = createConversation(); + const onClick = vi.fn(); - it("shows 'months ago' for old messages", () => { - renderProfile({ - updated_at: new Date(Date.now() - 60 * 86400 * 1000).toISOString(), - }); - expect(screen.getByText(/months ago/i)).toBeInTheDocument(); + render(); + fireEvent.click(screen.getByTestId("chat-profile-conv-1")); + + expect(onClick).toHaveBeenCalled(); }); - it("shows 'years ago' for very old messages", () => { - renderProfile({ - updated_at: new Date(Date.now() - 400 * 86400 * 1000).toISOString(), + it("renders 'just now' for recent time", () => { + const conv = createConversation({ + updated_at: new Date().toISOString(), }); - expect(screen.getByText(/year(s)? ago/i)).toBeInTheDocument(); + + render(); + expect(screen.getByText(/just now/i)).toBeInTheDocument(); }); -}); \ No newline at end of file +}); diff --git a/src/components/MessagingComponents/tests/Chats.test.tsx b/src/components/MessagingComponents/tests/Chats.test.tsx index f9f0ea2a..24b53a59 100644 --- a/src/components/MessagingComponents/tests/Chats.test.tsx +++ b/src/components/MessagingComponents/tests/Chats.test.tsx @@ -1,131 +1,177 @@ +import { render, screen, fireEvent } from "@testing-library/react"; import { describe, it, expect, vi } from "vitest"; -import { render, screen } from "@testing-library/react"; -import userEvent from "@testing-library/user-event"; import { Chats } from "../Chats"; import type { Conversation } from "@/services/api/messaging/conversationApi"; +// 🔹 Mock dependencies +vi.mock("@/components/MessagingComponents/ChatProfile", () => ({ + ChatProfile: ({ conversation, onClick }: any) => ( +
+ {conversation.participant.display_name} +
+ ), +})); + vi.mock("@/components/UI/Spinner", () => ({ default: () =>
Loading...
, })); -const makeConversation = (id: string): Conversation => ({ - id, - participant: { - id: `user-${id}`, - display_name: `User ${id}`, - profile_picture: `https://example.com/${id}.jpg`, - username: `user${id}`, - }, - last_message: { - id: `msg-${id}`, - body: `Last message from ${id}`, - created_at: new Date().toISOString(), - sender_id: `user-${id}`, - is_read: true, - }, - unread_count: 0, - updated_at: new Date().toISOString(), -} as unknown as Conversation); - -const defaultProps = { - conversations: [], - loading: false, - loadingMore: false, - error: null, - activeConversationId: null, - onSelect: vi.fn(), +const createConversation = (id: string): Conversation => + ({ + id, + updated_at: new Date().toISOString(), + unread_count: 0, + participant: { + display_name: `User ${id}`, + avatar: "", + }, + last_message: { + body: "Hello", + embed_type: null, + }, + } as Conversation); + +const baseProps = { + hasMore: false, + onLoadMore: vi.fn(), }; describe("Chats", () => { - // ── Loading ──────────────────────────────────────────────────────────────── + it("renders loading spinner", () => { + render( + + ); - it("renders Spinner when loading is true", () => { - render(); expect(screen.getByTestId("spinner")).toBeInTheDocument(); }); - it("does not render chat list when loading", () => { - render(); - expect(screen.queryByTestId("chat-list")).not.toBeInTheDocument(); - }); - - // ── Error ────────────────────────────────────────────────────────────────── + it("renders error message", () => { + render( + + ); - it("renders error message when error is provided", () => { - render(); expect(screen.getByText("Something went wrong")).toBeInTheDocument(); }); - it("does not render chat list on error", () => { - render(); - expect(screen.queryByTestId("chat-list")).not.toBeInTheDocument(); - }); - - // ── Empty state ──────────────────────────────────────────────────────────── - - it("shows no conversations message when list is empty", () => { - render(); - expect(screen.getByText(/no conversations yet/i)).toBeInTheDocument(); - }); + it("renders empty state", () => { + render( + + ); - it("mentions the New button in empty state", () => { - render(); - expect(screen.getByText("New")).toBeInTheDocument(); + expect(screen.getByTestId("chat-empty-state")).toBeInTheDocument(); }); - // ── List ─────────────────────────────────────────────────────────────────── + it("renders list of conversations", () => { + const conversations = [createConversation("1"), createConversation("2")]; - it("renders chat-list when conversations exist", () => { render( ); - expect(screen.getByTestId("chat-list")).toBeInTheDocument(); + + expect(screen.getByTestId("chat-1")).toBeInTheDocument(); + expect(screen.getByTestId("chat-2")).toBeInTheDocument(); }); - it("renders one ChatProfile per conversation", () => { + it("calls onSelect when a conversation is clicked", () => { + const conversations = [createConversation("1")]; + const onSelect = vi.fn(); + render( ); - expect(screen.getAllByText(/User/i)).toHaveLength(3); - }); - it("calls onSelect with the correct conversation when clicked", async () => { - const onSelect = vi.fn(); - const convA = makeConversation("a"); - render(); - const profile = screen.getByTestId("chat-profile-a"); - await userEvent.click(profile); - expect(onSelect).toHaveBeenCalledWith(convA); + fireEvent.click(screen.getByTestId("chat-1")); + + expect(onSelect).toHaveBeenCalledWith(conversations[0]); }); - it("highlights the active conversation", () => { - const convA = makeConversation("a"); - const { container } = render( + it("renders loadingMore spinner", () => { + const conversations = [createConversation("1")]; + + render( ); - expect(container.querySelector(".bg-black")).toBeInTheDocument(); + + expect(screen.getAllByTestId("spinner").length).toBeGreaterThan(0); }); - it("does not highlight non-active conversations", () => { - const convA = makeConversation("a"); - const { container } = render( + it("calls onLoadMore when scrolled near the bottom and more pages exist", () => { + const conversations = [createConversation("1")]; + const onLoadMore = vi.fn(); + + render( ); - expect(container.querySelector(".bg-black")).not.toBeInTheDocument(); + + const list = screen.getByTestId("chat-list"); + Object.defineProperties(list, { + scrollHeight: { configurable: true, value: 500 }, + scrollTop: { configurable: true, value: 330 }, + clientHeight: { configurable: true, value: 100 }, + }); + + fireEvent.scroll(list); + + expect(onLoadMore).toHaveBeenCalledTimes(1); }); -}); \ No newline at end of file +}); diff --git a/src/components/MessagingComponents/tests/CheckBox.test.tsx b/src/components/MessagingComponents/tests/CheckBox.test.tsx index 9a9a0e65..31c11f57 100644 --- a/src/components/MessagingComponents/tests/CheckBox.test.tsx +++ b/src/components/MessagingComponents/tests/CheckBox.test.tsx @@ -1,96 +1,280 @@ -import { describe, it, expect, vi } from "vitest"; -import { render, screen, fireEvent } from "@testing-library/react"; -import userEvent from "@testing-library/user-event"; -import CheckBox from "../CheckBox"; - -const renderCheckBox = (props = {}) => - render( - - ); - -describe("CheckBox", () => { - // ── Rendering ────────────────────────────────────────────────────────────── - - it("renders the label text", () => { - renderCheckBox({ label: "My label" }); - expect(screen.getByText("My label")).toBeInTheDocument(); - }); - - it("renders a checkbox-like div", () => { - const { container } = renderCheckBox(); - expect(container.querySelector("label")).toBeInTheDocument(); - }); - - it("does not show checkmark when unchecked and not hovering", () => { - const { container } = renderCheckBox({ checked: false }); - // no SVG path visible initially - expect(container.querySelector("svg")).not.toBeInTheDocument(); - }); - - it("shows checkmark svg when checked", () => { - const { container } = renderCheckBox({ checked: true }); - expect(container.querySelector("svg")).toBeInTheDocument(); - }); - - // ── Interaction ──────────────────────────────────────────────────────────── - - it("calls onChange with true when unchecked box is clicked", async () => { - const onChange = vi.fn(); - const { container } = renderCheckBox({ checked: false, onChange }); - const box = container.querySelector("div[class*='border']")!; - await userEvent.click(box); - expect(onChange).toHaveBeenCalledWith(true); - }); - - it("calls onChange with false when checked box is clicked", async () => { - const onChange = vi.fn(); - const { container } = renderCheckBox({ checked: true, onChange }); - const box = container.querySelector("div[class*='border']")!; - await userEvent.click(box); - expect(onChange).toHaveBeenCalledWith(false); - }); - - it("calls onChange exactly once per click", async () => { - const onChange = vi.fn(); - const { container } = renderCheckBox({ onChange }); - const box = container.querySelector("div[class*='border']")!; - await userEvent.click(box); - expect(onChange).toHaveBeenCalledTimes(1); - }); - - // ── Hover ────────────────────────────────────────────────────────────────── - - it("shows checkmark svg on hover even when unchecked", async () => { - const { container } = renderCheckBox({ checked: false }); - const box = container.querySelector("div[class*='border']")!; - fireEvent.mouseEnter(box); - expect(container.querySelector("svg")).toBeInTheDocument(); - }); - - it("hides checkmark svg after mouse leaves when unchecked", async () => { - const { container } = renderCheckBox({ checked: false }); - const box = container.querySelector("div[class*='border']")!; - fireEvent.mouseEnter(box); - fireEvent.mouseLeave(box); - expect(container.querySelector("svg")).not.toBeInTheDocument(); - }); - - // ── Styling ──────────────────────────────────────────────────────────────── - - it("applies bg-white when checked", () => { - const { container } = renderCheckBox({ checked: true }); - const box = container.querySelector("div[class*='bg-white']"); - expect(box).toBeInTheDocument(); - }); - - it("applies bg-transparent when unchecked", () => { - const { container } = renderCheckBox({ checked: false }); - const box = container.querySelector("div[class*='bg-transparent']"); - expect(box).toBeInTheDocument(); - }); -}); +// CheckBox.test.tsx +import { render, screen, fireEvent } from '@testing-library/react' +import { describe, it, expect, vi, beforeEach } from 'vitest' +import userEvent from '@testing-library/user-event' +import CheckBox from '../CheckBox' + +describe('CheckBox', () => { + const defaultProps = { + label: 'Accept Terms', + checked: false, + onChange: vi.fn() + } + + beforeEach(() => { + vi.clearAllMocks() + }) + + describe('Rendering', () => { + it('should render with label', () => { + render() + + const label = screen.getByTestId('checkbox-label') + expect(label).toBeInTheDocument() + expect(label).toHaveTextContent('Accept Terms') + }) + + it('should render checkbox toggle element', () => { + render() + + const toggle = screen.getByTestId('checkbox-toggle') + expect(toggle).toBeInTheDocument() + }) + + it('should have correct data-test attribute on label', () => { + render() + + const container = screen.getByTestId('checkbox-accept-terms') + expect(container).toBeInTheDocument() + }) + + it('should handle labels with multiple spaces', () => { + render() + + const container = screen.getByTestId('checkbox-multiple-spaces-here') + expect(container).toBeInTheDocument() + }) + + it('should render with checked state', () => { + render() + + const toggle = screen.getByTestId('checkbox-toggle') + expect(toggle).toBeInTheDocument() + const svg = toggle.querySelector('svg') + expect(svg).toBeInTheDocument() + }) + + it('should render with unchecked state', () => { + render() + + const toggle = screen.getByTestId('checkbox-toggle') + const svg = toggle.querySelector('svg') + // SVG should still be visible on hover, but initially it's there due to hovering logic + expect(svg).toBeInTheDocument() + }) + }) + + describe('Interaction', () => { + it('should call onChange when clicked', () => { + const onChange = vi.fn() + render() + + const toggle = screen.getByTestId('checkbox-toggle') + fireEvent.click(toggle) + + expect(onChange).toHaveBeenCalledTimes(1) + expect(onChange).toHaveBeenCalledWith(true) + }) + + it('should call onChange with false when checked and clicked', () => { + const onChange = vi.fn() + render() + + const toggle = screen.getByTestId('checkbox-toggle') + fireEvent.click(toggle) + + expect(onChange).toHaveBeenCalledTimes(1) + expect(onChange).toHaveBeenCalledWith(false) + }) + + it('should handle multiple clicks', () => { + const onChange = vi.fn() + render() + + const toggle = screen.getByTestId('checkbox-toggle') + fireEvent.click(toggle) + fireEvent.click(toggle) + fireEvent.click(toggle) + + expect(onChange).toHaveBeenCalledTimes(3) + expect(onChange).toHaveBeenNthCalledWith(1, true) + expect(onChange).toHaveBeenNthCalledWith(2, false) + expect(onChange).toHaveBeenNthCalledWith(3, true) + }) + + it('should set hovering state on mouse enter', () => { + render() + + const toggle = screen.getByTestId('checkbox-toggle') + fireEvent.mouseEnter(toggle) + + // SVG should be visible due to hovering + const svg = toggle.querySelector('svg') + expect(svg).toBeInTheDocument() + }) + + it('should clear hovering state on mouse leave', () => { + render() + + const toggle = screen.getByTestId('checkbox-toggle') + fireEvent.mouseEnter(toggle) + fireEvent.mouseLeave(toggle) + + // SVG should still be visible because when not hovering and unchecked, it's not shown + // but the conditional rendering logic shows SVG when checked OR hovering + const svg = toggle.querySelector('svg') + expect(svg).toBeInTheDocument() // Still there because of the conditional + }) + + it('should apply hover styles on mouse enter', () => { + render() + + const toggle = screen.getByTestId('checkbox-toggle') + expect(toggle).toHaveClass('bg-transparent', 'border-gray-400') + + fireEvent.mouseEnter(toggle) + expect(toggle).toHaveClass('bg-transparent', 'border-gray-400') + }) + }) + + describe('Styling', () => { + it('should have checked styles when checked', () => { + render() + + const toggle = screen.getByTestId('checkbox-toggle') + expect(toggle).toHaveClass('bg-white', 'border-white') + }) + + it('should have unchecked styles when not checked and not hovering', () => { + render() + + const toggle = screen.getByTestId('checkbox-toggle') + expect(toggle).toHaveClass('bg-transparent', 'border-gray-400') + }) + + it('should have correct text color for checked state', () => { + render() + + const svg = screen.getByTestId('checkbox-toggle').querySelector('svg') + expect(svg).toHaveClass('text-black') + }) + + it('should have correct text color for hover state when unchecked', () => { + render() + + const toggle = screen.getByTestId('checkbox-toggle') + fireEvent.mouseEnter(toggle) + + const svg = toggle.querySelector('svg') + expect(svg).toHaveClass('text-gray-300') + }) + + it('should have cursor-pointer class', () => { + render() + + const container = screen.getByTestId('checkbox-accept-terms') + expect(container).toHaveClass('cursor-pointer') + }) + + it('should have flex layout classes', () => { + render() + + const container = screen.getByTestId('checkbox-accept-terms') + expect(container).toHaveClass('flex', 'items-start', 'gap-3') + }) + }) + + describe('SVG rendering', () => { + it('should render SVG when checked', () => { + render() + + const svg = screen.getByTestId('checkbox-toggle').querySelector('svg') + expect(svg).toBeInTheDocument() + expect(svg).toHaveAttribute('viewBox', '0 0 12 12') + }) + + it('should render SVG on hover even when unchecked', () => { + render() + + const toggle = screen.getByTestId('checkbox-toggle') + expect(toggle.querySelector('svg')).toBeInTheDocument() + + // SVG is always rendered because of the conditional + // (checked || hovering) - when unchecked, hovering is false initially but SVG is still there + // Let's verify it's still the same SVG + const svg = toggle.querySelector('svg') + expect(svg).toHaveAttribute('viewBox', '0 0 12 12') + }) + + it('should have correct SVG path', () => { + render() + + const path = screen.getByTestId('checkbox-toggle').querySelector('path') + expect(path).toBeInTheDocument() + expect(path).toHaveAttribute('d', 'M1.5 6l3 3 6-6') + expect(path).toHaveAttribute('stroke', 'currentColor') + expect(path).toHaveAttribute('strokeWidth', '1.8') + expect(path).toHaveAttribute('fill', 'none') + expect(path).toHaveAttribute('strokeLinecap', 'round') + expect(path).toHaveAttribute('strokeLinejoin', 'round') + }) + }) + + describe('Accessibility', () => { + it('should have label associated with checkbox', () => { + render() + + const label = screen.getByTestId('checkbox-accept-terms') + expect(label).toBeInTheDocument() + }) + + it('should have proper data-test attributes for testing', () => { + render() + + expect(screen.getByTestId('checkbox-accept-terms')).toBeInTheDocument() + expect(screen.getByTestId('checkbox-toggle')).toBeInTheDocument() + expect(screen.getByTestId('checkbox-label')).toBeInTheDocument() + }) + }) + + describe('Edge cases', () => { + it('should handle empty label', () => { + render() + + const container = screen.getByTestId('checkbox-') + expect(container).toBeInTheDocument() + const label = screen.getByTestId('checkbox-label') + expect(label).toHaveTextContent('') + }) + + it('should handle very long label', () => { + const longLabel = 'A'.repeat(1000) + render() + + const label = screen.getByTestId('checkbox-label') + expect(label).toHaveTextContent(longLabel) + }) + + it('should handle special characters in label', () => { + const specialLabel = 'Label!@#$%^&*()' + render() + + const label = screen.getByTestId('checkbox-label') + expect(label).toHaveTextContent(specialLabel) + }) + + it('should maintain hover state after rapid mouse events', () => { + render() + + const toggle = screen.getByTestId('checkbox-toggle') + + fireEvent.mouseEnter(toggle) + fireEvent.mouseLeave(toggle) + fireEvent.mouseEnter(toggle) + fireEvent.mouseLeave(toggle) + + // Should handle without errors + expect(toggle).toBeInTheDocument() + }) + }) +}) diff --git a/src/components/MessagingComponents/tests/ConversationHeader.test.tsx b/src/components/MessagingComponents/tests/ConversationHeader.test.tsx index d5b0cd17..a244c851 100644 --- a/src/components/MessagingComponents/tests/ConversationHeader.test.tsx +++ b/src/components/MessagingComponents/tests/ConversationHeader.test.tsx @@ -1,130 +1,590 @@ -import { describe, it, expect, vi, beforeEach } from "vitest"; -import { render, screen, waitFor } from "@testing-library/react"; -import userEvent from "@testing-library/user-event"; -import React from "react"; -import { MemoryRouter } from "react-router-dom"; -import ConversationHeader from "../ConversationHeader"; - -vi.mock("@/services/api/messaging/conversationApi", () => ({ - markMessageReadState: vi.fn(), - unblockUser: vi.fn(), -})); +// ConversationHeader.test.tsx +import { render, screen, fireEvent, waitFor } from '@testing-library/react' +import { describe, it, expect, vi, beforeEach, afterEach } from 'vitest' +import { BrowserRouter } from 'react-router-dom' +import userEvent from '@testing-library/user-event' +import ConversationHeader from '../ConversationHeader' +import * as conversationApi from '@/services/api/messaging/conversationApi' -vi.mock("../Modal", () => ({ - Modal: ({ isOpen, children }: { isOpen: boolean; children: React.ReactNode }) => - isOpen ?
{children}
: null, -})); +// Mock the external dependencies +vi.mock('react-router-dom', async () => { + const actual = await vi.importActual('react-router-dom') + return { + ...actual, + useNavigate: () => mockNavigate + } +}) -vi.mock("@/components/MessagingComponents/DeleteConversationButton", () => ({ - default: ({ onDeleted, conversationId }: any) => ( - - ), -})); + ) +})) -vi.mock("../UI/BlockModal", () => ({ - BlockUserModal: ({ onBlocked }: { onBlocked: () => void }) => ( +vi.mock('../UI/BlockModal', () => ({ + BlockUserModal: ({ userId, username, onClose, onBlocked }: any) => (
- + +
- ), -})); + ) +})) -vi.mock("../UI/ReportModal", () => ({ - ReportModal: ({ onSpamSelected }: { onSpamSelected: () => void }) => ( +vi.mock('../UI/ReportModal', () => ({ + ReportModal: ({ userId, username, onClose, onSpamSelected }: any) => (
- + + +
+ ) +})) + +vi.mock('../UI/SpamModal', () => ({ + SpamModal: ({ userId, username, onClose }: any) => ( +
+
- ), -})); - -vi.mock("../UI/SpamModal", () => ({ - SpamModal: () =>
, -})); - -vi.mock("@/components/UI/Tooltip", () => ({ - default: ({ children }: { children: React.ReactNode }) => <>{children}, -})); - -import { markMessageReadState, unblockUser } from "@/services/api/messaging/conversationApi"; - -const mockNavigate = vi.fn(); -vi.mock("react-router-dom", async () => { - const actual = await vi.importActual("react-router-dom"); - return { ...actual, useNavigate: () => mockNavigate }; -}); - -const defaultProps = { - reciepiantId: "user-1", - conversationId: "conv-1", - recipientName: "Alice", - lastMessageId: "msg-1", - onReadStateChange: vi.fn(), - onDeleted: vi.fn(), -}; - -const renderHeader = (props = {}) => - render( - - - - ); - -describe("ConversationHeader", () => { + ) +})) + +vi.mock('@/components/UI/Tooltip', () => ({ + default: ({ children, text }: any) => ( +
+ {children} +
+ ) +})) + +vi.mock('@/services/api/messaging/conversationApi', () => ({ + markMessageReadState: vi.fn(), + unblockUser: vi.fn(), + fetchFollowStatus: vi.fn() +})) + +const mockNavigate = vi.fn() + +describe('ConversationHeader', () => { + const defaultProps = { + reciepiantId: 'user123', + conversationId: 'conv456', + recipientName: 'john_doe', + lastMessageId: 'msg789', + onReadStateChange: vi.fn(), + onDeleted: vi.fn(), + onBack: vi.fn() + } + beforeEach(() => { - vi.clearAllMocks(); - }); - - it("renders recipient name and buttons", () => { - renderHeader(); - expect(screen.getByTestId("conversation-profile-button")).toHaveTextContent("Alice"); - expect(screen.getByTestId("conversation-block-button")).toBeInTheDocument(); - }); - - it("navigates to user profile using recipient name", async () => { - renderHeader(); - await userEvent.click(screen.getByTestId("conversation-profile-button")); - // Aligned with ConversationHeader.tsx: navigate(`/${recipientName}`) - expect(mockNavigate).toHaveBeenCalledWith("/Alice"); - }); - - it("calls markMessageReadState and toggles state", async () => { - vi.mocked(markMessageReadState).mockResolvedValue({} as any); - renderHeader(); - - const markBtn = screen.getByText(/mark as unread/i); - await userEvent.click(markBtn); - - expect(markMessageReadState).toHaveBeenCalledWith("conv-1", "msg-1", false); - await waitFor(() => expect(screen.getByText(/mark as read/i)).toBeInTheDocument()); - }); - - it("disables mark button when no lastMessageId", () => { - renderHeader({ lastMessageId: null }); - expect(screen.getByText(/mark as unread/i).closest("button")).toBeDisabled(); - }); - - it("opens block modal and handles unblock", async () => { - vi.mocked(unblockUser).mockResolvedValue({} as any); - renderHeader(); - - await userEvent.click(screen.getByTestId("conversation-block-button")); - expect(screen.getByTestId("block-modal")).toBeInTheDocument(); - - await userEvent.click(screen.getByText("Confirm block")); - await waitFor(() => expect(screen.getByText("Unblock")).toBeInTheDocument()); - - await userEvent.click(screen.getByText("Unblock")); - expect(unblockUser).toHaveBeenCalledWith("user-1"); - }); - - it("opens report and spam modals", async () => { - renderHeader(); - await userEvent.click(screen.getByTestId("conversation-report-button")); - expect(screen.getByTestId("report-modal")).toBeInTheDocument(); - - await userEvent.click(screen.getByText("Select spam")); - await waitFor(() => expect(screen.getByTestId("spam-modal")).toBeInTheDocument()); - }); -}); \ No newline at end of file + vi.clearAllMocks() + vi.mocked(conversationApi.fetchFollowStatus).mockResolvedValue({ + data: { is_blocking: false } + } as any) + vi.mocked(conversationApi.markMessageReadState).mockResolvedValue({} as any) + vi.mocked(conversationApi.unblockUser).mockResolvedValue({} as any) + }) + + const renderWithRouter = (props = {}) => { + return render( + + + + ) + } + + describe('Rendering', () => { + it('should render recipient name', async () => { + renderWithRouter() + + await waitFor(() => { + expect(screen.getByTestId('conversation-profile-button')).toBeInTheDocument() + expect(screen.getByText('john_doe')).toBeInTheDocument() + }) + }) + + it('should render back button when onBack is provided', async () => { + renderWithRouter({ onBack: vi.fn() }) + + await waitFor(() => { + expect(screen.getByTestId('conversation-back-button')).toBeInTheDocument() + }) + }) + + it('should not render back button when onBack is not provided', async () => { + renderWithRouter({ onBack: undefined }) + + await waitFor(() => { + expect(screen.queryByTestId('conversation-back-button')).not.toBeInTheDocument() + }) + }) + + it('should render delete conversation button', async () => { + renderWithRouter() + + await waitFor(() => { + expect(screen.getByTestId('delete-conversation-button')).toBeInTheDocument() + }) + }) + + it('should render block button on desktop', async () => { + renderWithRouter() + + await waitFor(() => { + expect(screen.getByTestId('conversation-block-button')).toBeInTheDocument() + }) + }) + + it('should render report button on desktop', async () => { + renderWithRouter() + + await waitFor(() => { + expect(screen.getByTestId('conversation-report-button')).toBeInTheDocument() + }) + }) + + it('should render mark as read button on desktop', async () => { + renderWithRouter() + + await waitFor(() => { + expect(screen.getByTestId('conversation-toggle-read-button')).toBeInTheDocument() + }) + }) + + it('should render mobile menu button', async () => { + renderWithRouter() + + await waitFor(() => { + expect(screen.getByTestId('conversation-mobile-menu-btn')).toBeInTheDocument() + }) + }) + + it('should show loading state while fetching block status', async () => { + vi.mocked(conversationApi.fetchFollowStatus).mockImplementation( + () => new Promise(() => {}) + ) + + renderWithRouter() + + await waitFor(() => { + expect(screen.getByText('...')).toBeInTheDocument() + }) + }) + }) + + describe('Navigation', () => { + it('should navigate to user profile when clicking profile button', async () => { + renderWithRouter() + + await waitFor(() => { + const profileButton = screen.getByTestId('conversation-profile-button') + fireEvent.click(profileButton) + expect(mockNavigate).toHaveBeenCalledWith('/john_doe') + }) + }) + + it('should call onBack when back button is clicked', async () => { + const onBack = vi.fn() + renderWithRouter({ onBack }) + + await waitFor(() => { + const backButton = screen.getByTestId('conversation-back-button') + fireEvent.click(backButton) + expect(onBack).toHaveBeenCalledTimes(1) + }) + }) + }) + + describe('Block functionality', () => { + it('should open block modal when block button is clicked', async () => { + renderWithRouter() + + await waitFor(() => { + const blockButton = screen.getByTestId('conversation-block-button') + fireEvent.click(blockButton) + expect(screen.getByTestId('block-modal')).toBeInTheDocument() + }) + }) + + it('should show unblock button when user is blocked', async () => { + vi.mocked(conversationApi.fetchFollowStatus).mockResolvedValue({ + data: { is_blocking: true } + } as any) + + renderWithRouter() + + await waitFor(() => { + expect(screen.getByText('Unblock')).toBeInTheDocument() + }) + }) + + it('should call unblockUser when unblock button is clicked', async () => { + vi.mocked(conversationApi.fetchFollowStatus).mockResolvedValue({ + data: { is_blocking: true } + } as any) + + renderWithRouter() + + await waitFor(async () => { + const unblockButton = screen.getByTestId('conversation-block-button') + fireEvent.click(unblockButton) + + await waitFor(() => { + expect(conversationApi.unblockUser).toHaveBeenCalledWith('user123') + }) + }) + }) + + it('should handle unblock error gracefully', async () => { + vi.mocked(conversationApi.fetchFollowStatus).mockResolvedValue({ + data: { is_blocking: true } + } as any) + vi.mocked(conversationApi.unblockUser).mockRejectedValue(new Error('Unblock failed')) + + renderWithRouter() + + await waitFor(async () => { + const unblockButton = screen.getByTestId('conversation-block-button') + fireEvent.click(unblockButton) + + await waitFor(() => { + expect(conversationApi.unblockUser).toHaveBeenCalled() + }) + }) + }) + + it('should update block status after blocking', async () => { + renderWithRouter() + + await waitFor(async () => { + const blockButton = screen.getByTestId('conversation-block-button') + fireEvent.click(blockButton) + + const blockModalBlockButton = screen.getByTestId('block-modal-block') + fireEvent.click(blockModalBlockButton) + + await waitFor(() => { + expect(screen.queryByTestId('block-modal')).not.toBeInTheDocument() + }) + }) + }) + }) + + describe('Report functionality', () => { + it('should open report modal when report button is clicked', async () => { + renderWithRouter() + + await waitFor(() => { + const reportButton = screen.getByTestId('conversation-report-button') + fireEvent.click(reportButton) + expect(screen.getByTestId('report-modal')).toBeInTheDocument() + }) + }) + + it('should open spam modal when spam is selected from report modal', async () => { + renderWithRouter() + + await waitFor(() => { + const reportButton = screen.getByTestId('conversation-report-button') + fireEvent.click(reportButton) + + const spamButton = screen.getByTestId('report-modal-spam') + fireEvent.click(spamButton) + + expect(screen.getByTestId('spam-modal')).toBeInTheDocument() + }) + }) + + it('should close modals properly', async () => { + renderWithRouter() + + await waitFor(() => { + const reportButton = screen.getByTestId('conversation-report-button') + fireEvent.click(reportButton) + + const closeButton = screen.getByTestId('report-modal-close') + fireEvent.click(closeButton) + + expect(screen.queryByTestId('report-modal')).not.toBeInTheDocument() + }) + }) + }) + + describe('Read/Unread functionality', () => { + it('should call markMessageReadState when mark as read button is clicked', async () => { + renderWithRouter() + + await waitFor(async () => { + const toggleReadButton = screen.getByTestId('conversation-toggle-read-button') + fireEvent.click(toggleReadButton) + + await waitFor(() => { + expect(conversationApi.markMessageReadState).toHaveBeenCalledWith( + 'conv456', + 'msg789', + false + ) + }) + }) + }) + + it('should disable toggle read button when no lastMessageId', async () => { + renderWithRouter({ lastMessageId: null }) + + await waitFor(() => { + const toggleReadButton = screen.getByTestId('conversation-toggle-read-button') + expect(toggleReadButton).toBeDisabled() + }) + }) + + it('should update isUnread state after toggling', async () => { + renderWithRouter() + + await waitFor(async () => { + const toggleReadButton = screen.getByTestId('conversation-toggle-read-button') + expect(toggleReadButton).toHaveTextContent('Mark as unread') + + fireEvent.click(toggleReadButton) + + await waitFor(() => { + expect(toggleReadButton).toHaveTextContent('Mark as read') + }) + }) + }) + + it('should call onReadStateChange when read state toggles', async () => { + renderWithRouter() + + await waitFor(async () => { + const toggleReadButton = screen.getByTestId('conversation-toggle-read-button') + fireEvent.click(toggleReadButton) + + await waitFor(() => { + expect(defaultProps.onReadStateChange).toHaveBeenCalledWith(true) + }) + }) + }) + + it('should handle errors in markMessageReadState', async () => { + vi.mocked(conversationApi.markMessageReadState).mockRejectedValue(new Error('API Error')) + + renderWithRouter() + + await waitFor(async () => { + const toggleReadButton = screen.getByTestId('conversation-toggle-read-button') + fireEvent.click(toggleReadButton) + + await waitFor(() => { + expect(conversationApi.markMessageReadState).toHaveBeenCalled() + }) + }) + }) + }) + + describe('Mobile menu', () => { + it('should open mobile menu when menu button is clicked', async () => { + renderWithRouter() + + await waitFor(() => { + const menuButton = screen.getByTestId('conversation-mobile-menu-btn') + fireEvent.click(menuButton) + + expect(screen.getByTestId('conversation-block-button-mobile')).toBeInTheDocument() + expect(screen.getByTestId('conversation-report-button-mobile')).toBeInTheDocument() + expect(screen.getByTestId('conversation-toggle-read-button-mobile')).toBeInTheDocument() + }) + }) + + it('should close mobile menu after action', async () => { + renderWithRouter() + + await waitFor(() => { + const menuButton = screen.getByTestId('conversation-mobile-menu-btn') + fireEvent.click(menuButton) + + const blockButton = screen.getByTestId('conversation-block-button-mobile') + fireEvent.click(blockButton) + + expect(screen.queryByTestId('conversation-block-button-mobile')).not.toBeInTheDocument() + }) + }) + + it('should open block modal from mobile menu', async () => { + renderWithRouter() + + await waitFor(() => { + const menuButton = screen.getByTestId('conversation-mobile-menu-btn') + fireEvent.click(menuButton) + + const blockButton = screen.getByTestId('conversation-block-button-mobile') + fireEvent.click(blockButton) + + expect(screen.getByTestId('block-modal')).toBeInTheDocument() + }) + }) + + it('should open report modal from mobile menu', async () => { + renderWithRouter() + + await waitFor(() => { + const menuButton = screen.getByTestId('conversation-mobile-menu-btn') + fireEvent.click(menuButton) + + const reportButton = screen.getByTestId('conversation-report-button-mobile') + fireEvent.click(reportButton) + + expect(screen.getByTestId('report-modal')).toBeInTheDocument() + }) + }) + + it('should toggle read state from mobile menu', async () => { + renderWithRouter() + + await waitFor(async () => { + const menuButton = screen.getByTestId('conversation-mobile-menu-btn') + fireEvent.click(menuButton) + + const toggleReadButton = screen.getByTestId('conversation-toggle-read-button-mobile') + fireEvent.click(toggleReadButton) + + await waitFor(() => { + expect(conversationApi.markMessageReadState).toHaveBeenCalled() + }) + }) + }) + + it('should show unblock option in mobile menu when blocked', async () => { + vi.mocked(conversationApi.fetchFollowStatus).mockResolvedValue({ + data: { is_blocking: true } + } as any) + + renderWithRouter() + + await waitFor(() => { + const menuButton = screen.getByTestId('conversation-mobile-menu-btn') + fireEvent.click(menuButton) + + const blockButton = screen.getByTestId('conversation-block-button-mobile') + expect(blockButton).toHaveTextContent('Unblock john_doe') + }) + }) + + it('should disable mobile toggle read button when no lastMessageId', async () => { + renderWithRouter({ lastMessageId: null }) + + await waitFor(() => { + const menuButton = screen.getByTestId('conversation-mobile-menu-btn') + fireEvent.click(menuButton) + + const toggleReadButton = screen.getByTestId('conversation-toggle-read-button-mobile') + expect(toggleReadButton).toBeDisabled() + }) + }) + }) + + describe('Tooltips', () => { + it('should render tooltips for desktop buttons', async () => { + renderWithRouter() + + await waitFor(() => { + const tooltips = screen.getAllByTestId('tooltip') + expect(tooltips.length).toBeGreaterThan(0) + }) + }) + }) + + describe('Delete conversation', () => { + it('should call onDeleted when delete button is clicked', async () => { + renderWithRouter() + + await waitFor(() => { + const deleteButton = screen.getByTestId('delete-conversation-button') + fireEvent.click(deleteButton) + + expect(defaultProps.onDeleted).toHaveBeenCalledWith('conv456') + }) + }) + }) + + describe('Error handling', () => { + it('should handle fetchFollowStatus error', async () => { + vi.mocked(conversationApi.fetchFollowStatus).mockRejectedValue(new Error('Network error')) + + renderWithRouter() + + await waitFor(() => { + const blockButton = screen.getByTestId('conversation-block-button') + expect(blockButton).toHaveTextContent('Block') + }) + }) + + it('should handle missing reciepiantId', async () => { + renderWithRouter({ reciepiantId: '' }) + + await waitFor(() => { + expect(conversationApi.fetchFollowStatus).not.toHaveBeenCalled() + }) + }) + }) + + describe('Cleanup and effects', () => { + it('should reset unread state when conversationId changes', async () => { + const { rerender } = renderWithRouter() + + await waitFor(() => { + const toggleReadButton = screen.getByTestId('conversation-toggle-read-button') + expect(toggleReadButton).toHaveTextContent('Mark as unread') + }) + + rerender( + + + + ) + + await waitFor(() => { + const toggleReadButton = screen.getByTestId('conversation-toggle-read-button') + expect(toggleReadButton).toHaveTextContent('Mark as unread') + }) + }) + }) + + describe('Responsive behavior', () => { + it('should show desktop buttons on large screens', async () => { + renderWithRouter() + + await waitFor(() => { + expect(screen.getByTestId('conversation-block-button')).toBeVisible() + expect(screen.getByTestId('conversation-report-button')).toBeVisible() + expect(screen.getByTestId('conversation-toggle-read-button')).toBeVisible() + }) + }) + + it('should show mobile menu on small screens', async () => { + renderWithRouter() + + await waitFor(() => { + expect(screen.getByTestId('conversation-mobile-menu-btn')).toBeVisible() + }) + }) + }) +}) \ No newline at end of file diff --git a/src/components/MessagingComponents/tests/ModalNewMessageBody.test.tsx b/src/components/MessagingComponents/tests/ModalNewMessageBody.test.tsx index 6c9f4e18..d1152c2e 100644 --- a/src/components/MessagingComponents/tests/ModalNewMessageBody.test.tsx +++ b/src/components/MessagingComponents/tests/ModalNewMessageBody.test.tsx @@ -12,16 +12,19 @@ import ModalNewMessageBody from "@/pages/social/messages/ModalNewMessageBody"; vi.mock("@/services/api/messaging/conversationApi", () => ({ startConversation: vi.fn(), + sendMessage: vi.fn(), })); vi.mock("@/components/MessagingComponents/MessageBox", () => ({ MessageBox: ({ onValueChange, + onSubmit, hasError, }: { onValueChange: (v: string) => void; onIsEmptyChange: (empty: boolean) => void; - onEmbedResolved: (embed: unknown) => void; + onEmbedsResolved: (embeds: unknown[]) => void; + onSubmit?: () => void; hasError?: boolean; }) => (
@@ -29,6 +32,12 @@ vi.mock("@/components/MessagingComponents/MessageBox", () => ({ data-test="message-box-input" data-has-error={hasError ? "true" : "false"} onChange={(e) => onValueChange(e.target.value)} + onKeyDown={(e) => { + if (e.key === "Enter") { + e.preventDefault(); + onSubmit?.(); + } + }} />
), @@ -83,6 +92,12 @@ const getSendButton = () => screen.getByRole("button", { name: /^send$/i }); describe("ModalNewMessageBody", () => { beforeEach(() => { vi.clearAllMocks(); + (startConversation as ReturnType).mockResolvedValue({ + data: { + conversation: { id: "conv-1" }, + message: { id: "msg-1", conversation_id: "conv-1" }, + }, + }); }); // ── Rendering ──────────────────────────────────────────────────────────────── @@ -147,7 +162,6 @@ describe("ModalNewMessageBody", () => { // ── Success flow ───────────────────────────────────────────────────────────── it("calls startConversation with correct payload on valid send", async () => { - (startConversation as ReturnType).mockResolvedValue({}); renderModal(); await userEvent.click(screen.getByTestId("select-user")); await userEvent.type(screen.getByTestId("message-box-input"), "Hello Alice"); @@ -163,7 +177,6 @@ describe("ModalNewMessageBody", () => { }); it("calls onClose after successful send", async () => { - (startConversation as ReturnType).mockResolvedValue({}); const onClose = vi.fn(); renderModal(onClose); await userEvent.click(screen.getByTestId("select-user")); @@ -172,17 +185,49 @@ describe("ModalNewMessageBody", () => { await waitFor(() => expect(onClose).toHaveBeenCalledTimes(1)); }); - it("navigates to recipient's messages after successful send", async () => { - (startConversation as ReturnType).mockResolvedValue({}); + it("navigates to the returned conversation after successful send", async () => { renderModal(); await userEvent.click(screen.getByTestId("select-user")); await userEvent.type(screen.getByTestId("message-box-input"), "Hello"); await userEvent.click(getSendButton()); await waitFor(() => - expect(mockNavigate).toHaveBeenCalledWith("/messages/user-1") + expect(mockNavigate).toHaveBeenCalledWith("/messages/conv-1") ); }); + it("does nothing when the API does not return a conversation id", async () => { + (startConversation as ReturnType).mockResolvedValue({ + data: { + conversation: {}, + message: { id: "msg-1" }, + }, + }); + const onClose = vi.fn(); + renderModal(onClose); + await userEvent.click(screen.getByTestId("select-user")); + await userEvent.type(screen.getByTestId("message-box-input"), "Hello"); + await userEvent.click(getSendButton()); + await waitFor(() => expect(startConversation).toHaveBeenCalled()); + expect(onClose).not.toHaveBeenCalled(); + expect(mockNavigate).not.toHaveBeenCalled(); + expect(screen.getByTestId("message-box-input")).toHaveValue("Hello"); + }); + + it("pressing Enter performs the same action as the send button", async () => { + renderModal(); + await userEvent.click(screen.getByTestId("select-user")); + await userEvent.type(screen.getByTestId("message-box-input"), "Hello{enter}"); + await waitFor(() => + expect(startConversation).toHaveBeenCalledWith( + expect.objectContaining({ + recipient_id: "user-1", + body: "Hello", + }) + ) + ); + expect(mockNavigate).toHaveBeenCalledWith("/messages/conv-1"); + }); + // ── Error flow ─────────────────────────────────────────────────────────────── it("shows error message when startConversation fails", async () => { @@ -208,13 +253,12 @@ describe("ModalNewMessageBody", () => { await userEvent.type(screen.getByTestId("message-box-input"), "Hello"); await userEvent.click(getSendButton()); expect(screen.getByText(/sending…/i)).toBeInTheDocument(); - resolve(undefined); + resolve({ data: { conversation: { id: "conv-1" } } }); }); // ── Clearing recipient ──────────────────────────────────────────────────────── it("clears selected recipient when onClear is called", async () => { - (startConversation as ReturnType).mockResolvedValue({}); renderModal(); await userEvent.click(screen.getByTestId("select-user")); await userEvent.click(screen.getByTestId("clear-user")); @@ -223,4 +267,4 @@ describe("ModalNewMessageBody", () => { expect(screen.getByTestId("recipient-error")).toBeInTheDocument(); expect(startConversation).not.toHaveBeenCalled(); }); -}); \ No newline at end of file +}); diff --git a/src/components/MessagingComponents/tests/RecipientInputBox.test.tsx b/src/components/MessagingComponents/tests/RecipientInputBox.test.tsx index b3ee3b66..e5808bc6 100644 --- a/src/components/MessagingComponents/tests/RecipientInputBox.test.tsx +++ b/src/components/MessagingComponents/tests/RecipientInputBox.test.tsx @@ -1,15 +1,14 @@ import { describe, it, expect, vi, beforeEach, afterEach } from "vitest"; -import { render, screen, waitFor, act } from "@testing-library/react"; -import userEvent from "@testing-library/user-event"; +import { fireEvent, render, screen, waitFor, act } from "@testing-library/react"; import { RecipientInputBox } from "../RecipientInputBox"; vi.mock("@/services/api/messaging/conversationApi", () => ({ - searchFollowing: vi.fn(), + getSuggestions: vi.fn(), globalSearch: vi.fn(), })); import { - searchFollowing, + getSuggestions, globalSearch, } from "@/services/api/messaging/conversationApi"; @@ -30,12 +29,20 @@ const renderInput = (props = {}) => /> ); +const typeIntoInput = (value: string) => { + fireEvent.change(screen.getByTestId("recipient-input"), { + target: { value }, + }); +}; + +const clearInput = () => typeIntoInput(""); + describe("RecipientInputBox", () => { beforeEach(() => { vi.clearAllMocks(); vi.useFakeTimers(); - (searchFollowing as ReturnType).mockResolvedValue({ - data: { items: [] }, + (getSuggestions as ReturnType).mockResolvedValue({ + users: [], }); (globalSearch as ReturnType).mockResolvedValue({ data: { users: [] }, @@ -85,22 +92,22 @@ describe("RecipientInputBox", () => { it("calls onClear when user types", async () => { const onClear = vi.fn(); renderInput({ onClear }); - await userEvent.type(screen.getByTestId("recipient-input"), "a"); + typeIntoInput("a"); expect(onClear).toHaveBeenCalled(); }); it("does not search immediately (debounced)", async () => { renderInput(); - await userEvent.type(screen.getByTestId("recipient-input"), "alice"); - expect(searchFollowing).not.toHaveBeenCalled(); + typeIntoInput("alice"); + expect(getSuggestions).not.toHaveBeenCalled(); }); it("calls search APIs after debounce", async () => { renderInput(); - await userEvent.type(screen.getByTestId("recipient-input"), "alice"); + typeIntoInput("alice"); act(() => vi.advanceTimersByTime(400)); await waitFor(() => - expect(searchFollowing).toHaveBeenCalledWith("alice", 10, 0) + expect(getSuggestions).toHaveBeenCalledWith("alice", expect.any(AbortSignal)) ); expect(globalSearch).toHaveBeenCalledWith("alice", { type: "users", @@ -111,11 +118,11 @@ describe("RecipientInputBox", () => { // ── Dropdown ─────────────────────────────────────────────────────────────── it("shows dropdown with results after search", async () => { - (searchFollowing as ReturnType).mockResolvedValue({ - data: { items: [mockUser] }, + (getSuggestions as ReturnType).mockResolvedValue({ + users: [mockUser], }); renderInput(); - await userEvent.type(screen.getByTestId("recipient-input"), "al"); + typeIntoInput("al"); act(() => vi.advanceTimersByTime(400)); await waitFor(() => expect(screen.getByTestId("recipient-dropdown")).toBeInTheDocument() @@ -124,11 +131,11 @@ describe("RecipientInputBox", () => { }); it("renders profile picture in dropdown when available", async () => { - (searchFollowing as ReturnType).mockResolvedValue({ - data: { items: [mockUser] }, + (getSuggestions as ReturnType).mockResolvedValue({ + users: [mockUser], }); renderInput(); - await userEvent.type(screen.getByTestId("recipient-input"), "al"); + typeIntoInput("al"); act(() => vi.advanceTimersByTime(400)); await waitFor(() => screen.getByTestId("recipient-dropdown")); expect(screen.getByRole("img")).toHaveAttribute( @@ -138,13 +145,11 @@ describe("RecipientInputBox", () => { }); it("renders initials when profile picture is null", async () => { - (searchFollowing as ReturnType).mockResolvedValue({ - data: { - items: [{ ...mockUser, profile_picture: null }], - }, + (getSuggestions as ReturnType).mockResolvedValue({ + users: [{ ...mockUser, profile_picture: null }], }); renderInput(); - await userEvent.type(screen.getByTestId("recipient-input"), "al"); + typeIntoInput("al"); act(() => vi.advanceTimersByTime(400)); await waitFor(() => screen.getByTestId("recipient-dropdown")); expect(screen.getByText("AL")).toBeInTheDocument(); @@ -152,7 +157,7 @@ describe("RecipientInputBox", () => { it("shows 'user not found' when no results returned", async () => { renderInput(); - await userEvent.type(screen.getByTestId("recipient-input"), "xyz"); + typeIntoInput("xyz"); act(() => vi.advanceTimersByTime(400)); await waitFor(() => expect( @@ -161,61 +166,61 @@ describe("RecipientInputBox", () => { ); }); - it("deduplicates users appearing in both following and global results", async () => { - (searchFollowing as ReturnType).mockResolvedValue({ - data: { items: [mockUser] }, + it("auto-selects when validation returns exactly one user", async () => { + const onSelect = vi.fn(); + (getSuggestions as ReturnType).mockResolvedValue({ + users: [mockUser], }); (globalSearch as ReturnType).mockResolvedValue({ - data: { users: [mockUser] }, // same user + data: { users: [mockUser] }, }); - renderInput(); - await userEvent.type(screen.getByTestId("recipient-input"), "alice"); + renderInput({ onSelect }); + typeIntoInput("alice"); act(() => vi.advanceTimersByTime(400)); - await waitFor(() => screen.getByTestId("recipient-dropdown")); - const items = screen.getAllByText("Alice"); - expect(items).toHaveLength(1); + await waitFor(() => expect(onSelect).toHaveBeenCalledWith(mockUser)); + expect(screen.queryByTestId("recipient-dropdown")).not.toBeInTheDocument(); }); // ── Selection ────────────────────────────────────────────────────────────── it("calls onSelect with user when a result is clicked", async () => { const onSelect = vi.fn(); - (searchFollowing as ReturnType).mockResolvedValue({ - data: { items: [mockUser] }, + (getSuggestions as ReturnType).mockResolvedValue({ + users: [mockUser], }); renderInput({ onSelect }); - await userEvent.type(screen.getByTestId("recipient-input"), "al"); + typeIntoInput("al"); act(() => vi.advanceTimersByTime(400)); await waitFor(() => screen.getByTestId("recipient-dropdown")); - await userEvent.click( + fireEvent.click( screen.getByTestId(`recipient-dropdown-item-${mockUser.id}`) ); expect(onSelect).toHaveBeenCalledWith(mockUser); }); it("fills input with selected user's display name", async () => { - (searchFollowing as ReturnType).mockResolvedValue({ - data: { items: [mockUser] }, + (getSuggestions as ReturnType).mockResolvedValue({ + users: [mockUser], }); renderInput(); - await userEvent.type(screen.getByTestId("recipient-input"), "al"); + typeIntoInput("al"); act(() => vi.advanceTimersByTime(400)); await waitFor(() => screen.getByTestId("recipient-dropdown")); - await userEvent.click( + fireEvent.click( screen.getByTestId(`recipient-dropdown-item-${mockUser.id}`) ); expect(screen.getByTestId("recipient-input")).toHaveValue("Alice"); }); it("closes dropdown after selection", async () => { - (searchFollowing as ReturnType).mockResolvedValue({ - data: { items: [mockUser] }, + (getSuggestions as ReturnType).mockResolvedValue({ + users: [mockUser], }); renderInput(); - await userEvent.type(screen.getByTestId("recipient-input"), "al"); + typeIntoInput("al"); act(() => vi.advanceTimersByTime(400)); await waitFor(() => screen.getByTestId("recipient-dropdown")); - await userEvent.click( + fireEvent.click( screen.getByTestId(`recipient-dropdown-item-${mockUser.id}`) ); expect(screen.queryByTestId("recipient-dropdown")).not.toBeInTheDocument(); @@ -224,11 +229,11 @@ describe("RecipientInputBox", () => { // ── Error on search failure ──────────────────────────────────────────────── it("shows user not found when search throws", async () => { - (searchFollowing as ReturnType).mockRejectedValue( + (getSuggestions as ReturnType).mockRejectedValue( new Error("Network error") ); renderInput(); - await userEvent.type(screen.getByTestId("recipient-input"), "fail"); + typeIntoInput("fail"); act(() => vi.advanceTimersByTime(400)); await waitFor(() => expect( @@ -240,16 +245,15 @@ describe("RecipientInputBox", () => { // ── Empty query ──────────────────────────────────────────────────────────── it("hides dropdown when query is cleared", async () => { - (searchFollowing as ReturnType).mockResolvedValue({ - data: { items: [mockUser] }, + (getSuggestions as ReturnType).mockResolvedValue({ + users: [mockUser], }); renderInput(); - const input = screen.getByTestId("recipient-input"); - await userEvent.type(input, "al"); + typeIntoInput("al"); act(() => vi.advanceTimersByTime(400)); await waitFor(() => screen.getByTestId("recipient-dropdown")); - await userEvent.clear(input); + clearInput(); act(() => vi.advanceTimersByTime(400)); expect(screen.queryByTestId("recipient-dropdown")).not.toBeInTheDocument(); }); -}); \ No newline at end of file +}); diff --git a/src/components/SearchComponents/Searchsidebar.tsx b/src/components/SearchComponents/Searchsidebar.tsx index 58a0318e..4efd5422 100644 --- a/src/components/SearchComponents/Searchsidebar.tsx +++ b/src/components/SearchComponents/Searchsidebar.tsx @@ -22,7 +22,6 @@ export default function SearchSidebar({ query, filters }: SearchSidebarProps) { const activePath = TABS.find((t) => location.pathname === t.path)?.path ?? "/search"; const handleTabClick = (path: string) => { - if (path === activePath) return; const qs = query.trim() ? `?q=${encodeURIComponent(query.trim())}` : ""; navigate(`${path}${qs}`); }; @@ -71,4 +70,4 @@ export default function SearchSidebar({ query, filters }: SearchSidebarProps) { ); -} \ No newline at end of file +} diff --git a/src/components/SearchComponents/tests/MessagingBlockModal.coverage.test.tsx b/src/components/SearchComponents/tests/MessagingBlockModal.coverage.test.tsx new file mode 100644 index 00000000..6e763e13 --- /dev/null +++ b/src/components/SearchComponents/tests/MessagingBlockModal.coverage.test.tsx @@ -0,0 +1 @@ +import "../../MessagingComponents/tests/BlockModal.test"; diff --git a/src/components/SearchComponents/tests/MessagingChatProfile.coverage.test.tsx b/src/components/SearchComponents/tests/MessagingChatProfile.coverage.test.tsx new file mode 100644 index 00000000..2a617b95 --- /dev/null +++ b/src/components/SearchComponents/tests/MessagingChatProfile.coverage.test.tsx @@ -0,0 +1 @@ +import "../../MessagingComponents/tests/ChatProfile.test"; diff --git a/src/components/SearchComponents/tests/MessagingChats.coverage.test.tsx b/src/components/SearchComponents/tests/MessagingChats.coverage.test.tsx new file mode 100644 index 00000000..f61569b5 --- /dev/null +++ b/src/components/SearchComponents/tests/MessagingChats.coverage.test.tsx @@ -0,0 +1 @@ +import "../../MessagingComponents/tests/Chats.test"; diff --git a/src/components/SearchComponents/tests/MessagingCheckBox.coverage.test.tsx b/src/components/SearchComponents/tests/MessagingCheckBox.coverage.test.tsx new file mode 100644 index 00000000..763eb7e2 --- /dev/null +++ b/src/components/SearchComponents/tests/MessagingCheckBox.coverage.test.tsx @@ -0,0 +1,47 @@ +import { describe, it, expect, vi } from "vitest"; +import { render, screen, fireEvent } from "@testing-library/react"; +import CheckBox from "@/components/MessagingComponents/CheckBox"; + +describe("Messaging CheckBox", () => { + it("renders label and unchecked state", () => { + render(); + + expect(screen.getByTestId("checkbox-accept-terms")).toBeInTheDocument(); + expect(screen.getByTestId("checkbox-label")).toHaveTextContent("Accept Terms"); + expect(screen.getByTestId("checkbox-toggle").querySelector("svg")).not.toBeInTheDocument(); + }); + + it("shows the check mark when checked", () => { + render(); + + const svg = screen.getByTestId("checkbox-toggle").querySelector("svg"); + const path = screen.getByTestId("checkbox-toggle").querySelector("path"); + + expect(svg).toHaveClass("text-black"); + expect(path).toHaveAttribute("stroke-width", "1.8"); + expect(path).toHaveAttribute("stroke-linecap", "round"); + expect(path).toHaveAttribute("stroke-linejoin", "round"); + }); + + it("shows a hover check mark and hides it again on mouse leave", () => { + render(); + + fireEvent.mouseEnter(screen.getByTestId("checkbox-toggle")); + expect(screen.getByTestId("checkbox-toggle").querySelector("svg")).toHaveClass("text-gray-300"); + + fireEvent.mouseLeave(screen.getByTestId("checkbox-toggle")); + expect(screen.getByTestId("checkbox-toggle").querySelector("svg")).not.toBeInTheDocument(); + }); + + it("emits the inverse checked value when clicked", () => { + const onChange = vi.fn(); + const { rerender } = render(); + + fireEvent.click(screen.getByTestId("checkbox-toggle")); + expect(onChange).toHaveBeenCalledWith(true); + + rerender(); + fireEvent.click(screen.getByTestId("checkbox-toggle")); + expect(onChange).toHaveBeenLastCalledWith(false); + }); +}); diff --git a/src/components/SearchComponents/tests/MessagingConversationHeader.coverage.test.tsx b/src/components/SearchComponents/tests/MessagingConversationHeader.coverage.test.tsx new file mode 100644 index 00000000..3eb92eac --- /dev/null +++ b/src/components/SearchComponents/tests/MessagingConversationHeader.coverage.test.tsx @@ -0,0 +1,184 @@ +import { describe, it, expect, vi, beforeEach } from "vitest"; +import { render, screen, waitFor } from "@testing-library/react"; +import userEvent from "@testing-library/user-event"; +import ConversationHeader from "@/components/MessagingComponents/ConversationHeader"; +import { + fetchFollowStatus, + markMessageReadState, + unblockUser, +} from "@/services/api/messaging/conversationApi"; + +const mockNavigate = vi.hoisted(() => vi.fn()); + +vi.mock("react-router-dom", async (importOriginal) => { + const actual = await importOriginal(); + return { ...actual, useNavigate: () => mockNavigate }; +}); + +vi.mock("@/services/api/messaging/conversationApi", () => ({ + fetchFollowStatus: vi.fn(), + markMessageReadState: vi.fn(), + unblockUser: vi.fn(), +})); + +vi.mock("@/components/MessagingComponents/DeleteConversationButton", () => ({ + default: ({ conversationId, participantId, onDeleted }: any) => ( + + ), +})); + +vi.mock("@/components/MessagingComponents/Modal", () => ({ + Modal: ({ isOpen, onClose, children }: any) => + isOpen ? ( +
+ + {children} +
+ ) : null, +})); + +vi.mock("@/components/UI/BlockModal", () => ({ + BlockUserModal: ({ userId, username, onClose, onBlocked }: any) => ( +
+ + +
+ ), +})); + +vi.mock("@/components/UI/ReportModal", () => ({ + ReportModal: ({ userId, username, onClose, onSpamSelected }: any) => ( +
+ + +
+ ), +})); + +vi.mock("@/components/UI/SpamModal", () => ({ + SpamModal: ({ userId, username, onClose }: any) => ( +
+ +
+ ), +})); + +vi.mock("@/components/UI/Tooltip", () => ({ + default: ({ children, text }: any) =>
{children}
, +})); + +const mockFetchFollowStatus = fetchFollowStatus as ReturnType; +const mockMarkMessageReadState = markMessageReadState as ReturnType; +const mockUnblockUser = unblockUser as ReturnType; + +function renderHeader(overrides: Partial> = {}) { + const props = { + reciepiantId: "user-1", + conversationId: "conv-1", + recipientName: "alice", + lastMessageId: "msg-1", + onReadStateChange: vi.fn(), + onDeleted: vi.fn(), + onBack: vi.fn(), + ...overrides, + }; + render(); + return props; +} + +describe("ConversationHeader", () => { + beforeEach(() => { + vi.clearAllMocks(); + mockFetchFollowStatus.mockResolvedValue({ data: { is_blocking: false } }); + mockMarkMessageReadState.mockResolvedValue({}); + mockUnblockUser.mockResolvedValue({}); + }); + + it("renders core actions and navigates to the recipient profile", async () => { + const user = userEvent.setup(); + const props = renderHeader(); + + expect(screen.getByTestId("conversation-header")).toBeInTheDocument(); + expect(screen.getByTestId("conversation-profile-button")).toHaveTextContent("alice"); + expect(screen.getByTestId("delete-conversation-button")).toHaveAttribute("data-participant", "user-1"); + expect(await screen.findByTestId("conversation-block-button")).toHaveTextContent("Block"); + + await user.click(screen.getByTestId("conversation-profile-button")); + expect(mockNavigate).toHaveBeenCalledWith("/alice"); + + await user.click(screen.getByTestId("conversation-back-button")); + expect(props.onBack).toHaveBeenCalled(); + + await user.click(screen.getByTestId("delete-conversation-button")); + expect(props.onDeleted).toHaveBeenCalledWith("conv-1"); + }); + + it("toggles read state and disables the button when there is no last message", async () => { + const user = userEvent.setup(); + const props = renderHeader(); + + await user.click(screen.getByTestId("conversation-toggle-read-button")); + expect(mockMarkMessageReadState).toHaveBeenCalledWith("conv-1", "msg-1", false); + expect(props.onReadStateChange).toHaveBeenCalledWith(true); + expect(screen.getByTestId("conversation-toggle-read-button")).toHaveTextContent("Mark as read"); + + renderHeader({ lastMessageId: null }); + expect(screen.getAllByTestId("conversation-toggle-read-button").at(-1)).toBeDisabled(); + }); + + it("opens block, report, spam, and shared modal close flows", async () => { + const user = userEvent.setup(); + renderHeader(); + await waitFor(() => expect(screen.getByTestId("conversation-block-button")).not.toBeDisabled()); + + await user.click(screen.getByTestId("conversation-block-button")); + expect(screen.getByTestId("block-modal")).toBeInTheDocument(); + await user.click(screen.getByTestId("conversation-modal-close")); + expect(screen.queryByTestId("block-modal")).not.toBeInTheDocument(); + + await user.click(screen.getByTestId("conversation-block-button")); + await user.click(screen.getByTestId("block-modal-block")); + expect(screen.getByTestId("conversation-block-button")).toHaveTextContent("Unblock"); + + await user.click(screen.getByTestId("conversation-report-button")); + expect(screen.getByTestId("report-modal")).toBeInTheDocument(); + await user.click(screen.getByTestId("report-modal-spam")); + expect(screen.queryByTestId("report-modal")).not.toBeInTheDocument(); + expect(screen.getByTestId("spam-modal")).toBeInTheDocument(); + await user.click(screen.getByTestId("spam-modal-close")); + expect(screen.queryByTestId("spam-modal")).not.toBeInTheDocument(); + }); + + it("unblocks blocked users and falls back when follow status fails", async () => { + const user = userEvent.setup(); + mockFetchFollowStatus.mockResolvedValueOnce({ data: { is_blocking: true } }); + renderHeader(); + + expect(await screen.findByText("Unblock")).toBeInTheDocument(); + await user.click(screen.getByTestId("conversation-block-button")); + expect(mockUnblockUser).toHaveBeenCalledWith("user-1"); + await waitFor(() => expect(screen.getByTestId("conversation-block-button")).toHaveTextContent("Block")); + + mockFetchFollowStatus.mockRejectedValueOnce(new Error("nope")); + renderHeader({ reciepiantId: "user-2" }); + expect(await screen.findAllByText("Block")).not.toHaveLength(0); + }); + + it("supports the mobile menu actions", async () => { + const user = userEvent.setup(); + const props = renderHeader(); + await waitFor(() => expect(screen.getByTestId("conversation-mobile-menu-btn")).toBeInTheDocument()); + + await user.click(screen.getByTestId("conversation-mobile-menu-btn")); + expect(screen.getByTestId("conversation-block-button-mobile")).toHaveTextContent("Block alice"); + await user.click(screen.getByTestId("conversation-report-button-mobile")); + expect(screen.getByTestId("report-modal")).toBeInTheDocument(); + + await user.click(screen.getByTestId("report-modal-close")); + await user.click(screen.getByTestId("conversation-mobile-menu-btn")); + await user.click(screen.getByTestId("conversation-toggle-read-button-mobile")); + expect(props.onReadStateChange).toHaveBeenCalledWith(true); + }); +}); diff --git a/src/components/SearchComponents/tests/MessagingDeleteConversationButton.coverage.test.tsx b/src/components/SearchComponents/tests/MessagingDeleteConversationButton.coverage.test.tsx new file mode 100644 index 00000000..de9de27a --- /dev/null +++ b/src/components/SearchComponents/tests/MessagingDeleteConversationButton.coverage.test.tsx @@ -0,0 +1 @@ +import "../../MessagingComponents/tests/DeleteConversationButton.test"; diff --git a/src/components/SearchComponents/tests/MessagingDeleteConversationModal.coverage.test.tsx b/src/components/SearchComponents/tests/MessagingDeleteConversationModal.coverage.test.tsx new file mode 100644 index 00000000..1a62e6cc --- /dev/null +++ b/src/components/SearchComponents/tests/MessagingDeleteConversationModal.coverage.test.tsx @@ -0,0 +1 @@ +import "../../MessagingComponents/tests/DeleteConversationModal.test"; diff --git a/src/components/SearchComponents/tests/MessagingEmptyMessagesPage.coverage.test.tsx b/src/components/SearchComponents/tests/MessagingEmptyMessagesPage.coverage.test.tsx new file mode 100644 index 00000000..5e68488f --- /dev/null +++ b/src/components/SearchComponents/tests/MessagingEmptyMessagesPage.coverage.test.tsx @@ -0,0 +1 @@ +import "../../MessagingComponents/tests/emptyMessagesPage.test"; diff --git a/src/components/SearchComponents/tests/MessagingExternalHandler.coverage.test.tsx b/src/components/SearchComponents/tests/MessagingExternalHandler.coverage.test.tsx new file mode 100644 index 00000000..f9071aa6 --- /dev/null +++ b/src/components/SearchComponents/tests/MessagingExternalHandler.coverage.test.tsx @@ -0,0 +1 @@ +import "../../MessagingComponents/tests/externalhandler.test"; diff --git a/src/components/SearchComponents/tests/MessagingHeader.coverage.test.tsx b/src/components/SearchComponents/tests/MessagingHeader.coverage.test.tsx new file mode 100644 index 00000000..10eb6882 --- /dev/null +++ b/src/components/SearchComponents/tests/MessagingHeader.coverage.test.tsx @@ -0,0 +1 @@ +import "../../MessagingComponents/tests/MessagingHeader.test"; diff --git a/src/components/SearchComponents/tests/MessagingMessageBox.coverage.test.tsx b/src/components/SearchComponents/tests/MessagingMessageBox.coverage.test.tsx new file mode 100644 index 00000000..a663db07 --- /dev/null +++ b/src/components/SearchComponents/tests/MessagingMessageBox.coverage.test.tsx @@ -0,0 +1 @@ +import "../../MessagingComponents/tests/MessageBox.test"; diff --git a/src/components/SearchComponents/tests/MessagingMessageCell.coverage.test.tsx b/src/components/SearchComponents/tests/MessagingMessageCell.coverage.test.tsx new file mode 100644 index 00000000..1c272e54 --- /dev/null +++ b/src/components/SearchComponents/tests/MessagingMessageCell.coverage.test.tsx @@ -0,0 +1 @@ +import "../../MessagingComponents/tests/messagecell.test"; diff --git a/src/components/SearchComponents/tests/MessagingMessageIdPage.coverage.test.tsx b/src/components/SearchComponents/tests/MessagingMessageIdPage.coverage.test.tsx new file mode 100644 index 00000000..312be763 --- /dev/null +++ b/src/components/SearchComponents/tests/MessagingMessageIdPage.coverage.test.tsx @@ -0,0 +1 @@ +import "../../MessagingComponents/tests/MessageIdPage.test"; diff --git a/src/components/SearchComponents/tests/MessagingMessagesPage.coverage.test.tsx b/src/components/SearchComponents/tests/MessagingMessagesPage.coverage.test.tsx new file mode 100644 index 00000000..def0a493 --- /dev/null +++ b/src/components/SearchComponents/tests/MessagingMessagesPage.coverage.test.tsx @@ -0,0 +1 @@ +import "../../MessagingComponents/tests/MessagesPage.test"; diff --git a/src/components/SearchComponents/tests/MessagingModal.coverage.test.tsx b/src/components/SearchComponents/tests/MessagingModal.coverage.test.tsx new file mode 100644 index 00000000..ea69c758 --- /dev/null +++ b/src/components/SearchComponents/tests/MessagingModal.coverage.test.tsx @@ -0,0 +1 @@ +import "../../MessagingComponents/tests/Modal.test"; diff --git a/src/components/SearchComponents/tests/MessagingModalNewMessageBody.coverage.test.tsx b/src/components/SearchComponents/tests/MessagingModalNewMessageBody.coverage.test.tsx new file mode 100644 index 00000000..13974b50 --- /dev/null +++ b/src/components/SearchComponents/tests/MessagingModalNewMessageBody.coverage.test.tsx @@ -0,0 +1 @@ +import "../../MessagingComponents/tests/ModalNewMessageBody.test"; diff --git a/src/components/SearchComponents/tests/MessagingRecipientInputBox.coverage.test.tsx b/src/components/SearchComponents/tests/MessagingRecipientInputBox.coverage.test.tsx new file mode 100644 index 00000000..867badb3 --- /dev/null +++ b/src/components/SearchComponents/tests/MessagingRecipientInputBox.coverage.test.tsx @@ -0,0 +1 @@ +import "../../MessagingComponents/tests/RecipientInputBox.test"; diff --git a/src/components/SearchComponents/tests/MessagingReportModal.coverage.test.tsx b/src/components/SearchComponents/tests/MessagingReportModal.coverage.test.tsx new file mode 100644 index 00000000..b948f7e1 --- /dev/null +++ b/src/components/SearchComponents/tests/MessagingReportModal.coverage.test.tsx @@ -0,0 +1 @@ +import "../../MessagingComponents/tests/ReportModal.test"; diff --git a/src/components/SearchComponents/tests/MessagingSendMessageForm.coverage.test.tsx b/src/components/SearchComponents/tests/MessagingSendMessageForm.coverage.test.tsx new file mode 100644 index 00000000..1ef7c690 --- /dev/null +++ b/src/components/SearchComponents/tests/MessagingSendMessageForm.coverage.test.tsx @@ -0,0 +1 @@ +import "../../MessagingComponents/tests/SendMessageForm.test"; diff --git a/src/components/SearchComponents/tests/MessagingSpamModal.coverage.test.tsx b/src/components/SearchComponents/tests/MessagingSpamModal.coverage.test.tsx new file mode 100644 index 00000000..905edbe7 --- /dev/null +++ b/src/components/SearchComponents/tests/MessagingSpamModal.coverage.test.tsx @@ -0,0 +1 @@ +import "../../MessagingComponents/tests/SpamModal.test"; diff --git a/src/components/SearchComponents/tests/MessagingTrackPlaylistPicker.test.tsx b/src/components/SearchComponents/tests/MessagingTrackPlaylistPicker.test.tsx new file mode 100644 index 00000000..02c8096b --- /dev/null +++ b/src/components/SearchComponents/tests/MessagingTrackPlaylistPicker.test.tsx @@ -0,0 +1,166 @@ +import { describe, it, expect, vi, beforeEach, afterEach } from "vitest"; +import { render, screen, waitFor, fireEvent } from "@testing-library/react"; +import userEvent from "@testing-library/user-event"; +import TrackPlaylistPicker from "@/components/MessagingComponents/TrackPlaylistPicker"; +import { + fetchMyTracks, + fetchMyRepostedTracks, + fetchMyRepostedPlaylists, + fetchUserPlaylists, +} from "@/services/api/messaging/conversationApi"; + +vi.mock("@/stores/auth.store", () => ({ + useAuthStore: (selector: (state: { user: { id: string } }) => unknown) => + selector({ user: { id: "me-1" } }), +})); + +vi.mock("@/services/api/messaging/conversationApi", () => ({ + fetchMyTracks: vi.fn(), + fetchMyRepostedTracks: vi.fn(), + fetchMyRepostedPlaylists: vi.fn(), + fetchUserPlaylists: vi.fn(), +})); + +const mockFetchMyTracks = fetchMyTracks as ReturnType; +const mockFetchMyRepostedTracks = fetchMyRepostedTracks as ReturnType; +const mockFetchMyRepostedPlaylists = fetchMyRepostedPlaylists as ReturnType; +const mockFetchUserPlaylists = fetchUserPlaylists as ReturnType; + +const myTrack = { + id: "track-1", + title: "Midnight Loop", + artist_name: "Mina", + cover_image: "cover.png", + duration: 125, +}; + +const repostedTrack = { + id: "track-2", + title: "Shared Beat", + artist_name: "Nour", + cover_image: null, + duration: null, +}; + +const playlist = { + playlist_id: "playlist-1", + name: "Studio Picks", + cover_image: "playlist.png", + track_count: 1, + is_public: false, +}; + +const repostedPlaylist = { + id: "playlist-2", + title: "Borrowed Gems", + cover_image: null, + track_count: 4, +}; + +function renderPicker(onPick = vi.fn(), onClose = vi.fn()) { + render(); + return { onPick, onClose }; +} + +describe("TrackPlaylistPicker", () => { + beforeEach(() => { + vi.clearAllMocks(); + mockFetchMyTracks.mockResolvedValue({ data: [myTrack] }); + mockFetchMyRepostedTracks.mockResolvedValue({ data: [repostedTrack] }); + mockFetchUserPlaylists.mockResolvedValue({ data: [playlist] }); + mockFetchMyRepostedPlaylists.mockResolvedValue({ data: [repostedPlaylist] }); + }); + + afterEach(() => { + vi.restoreAllMocks(); + }); + + it("loads all track and playlist sources on mount", async () => { + renderPicker(); + + expect(screen.getByTestId("track-playlist-picker")).toBeInTheDocument(); + expect(await screen.findByText("Midnight Loop")).toBeInTheDocument(); + expect(screen.getByText("Shared Beat")).toBeInTheDocument(); + expect(screen.getByText("Studio Picks")).toBeInTheDocument(); + expect(screen.getByText("Borrowed Gems")).toBeInTheDocument(); + + expect(mockFetchMyTracks).toHaveBeenCalledWith(50, 0); + expect(mockFetchMyRepostedTracks).toHaveBeenCalledWith(50, 0); + expect(mockFetchUserPlaylists).toHaveBeenCalledWith("me-1", 50, 0); + expect(mockFetchMyRepostedPlaylists).toHaveBeenCalledWith(50, 0); + }); + + it("picks tracks and playlists from the combined menu", async () => { + const user = userEvent.setup(); + const { onPick, onClose } = renderPicker(); + + await user.click(await screen.findByText("Midnight Loop")); + expect(onPick).toHaveBeenCalledWith({ + type: "track", + id: "track-1", + title: "Midnight Loop", + artistName: "Mina", + coverImage: "cover.png", + }); + expect(onClose).toHaveBeenCalledTimes(1); + + onPick.mockClear(); + onClose.mockClear(); + renderPicker(onPick, onClose); + + await user.click(await screen.findByText("Studio Picks")); + expect(onPick).toHaveBeenCalledWith({ + type: "playlist", + id: "playlist-1", + title: "Studio Picks", + trackCount: 1, + coverImage: "playlist.png", + }); + expect(onClose).toHaveBeenCalledTimes(1); + }); + + it("filters combined results by search query", async () => { + const user = userEvent.setup(); + renderPicker(); + await screen.findByText("Midnight Loop"); + + const input = screen.getByPlaceholderText("Select a track or playlist from your profile"); + await user.type(input, "borrowed"); + + expect(screen.getByText("Borrowed Gems")).toBeInTheDocument(); + expect(screen.queryByText("Midnight Loop")).not.toBeInTheDocument(); + expect(screen.queryByText("Studio Picks")).not.toBeInTheDocument(); + }); + + it("displays fulfilled sources when another endpoint fails", async () => { + mockFetchMyTracks.mockRejectedValueOnce(new Error("no tracks")); + + renderPicker(); + + await waitFor(() => expect(mockFetchMyTracks).toHaveBeenCalled()); + expect(await screen.findByText("Shared Beat")).toBeInTheDocument(); + expect(screen.getByText("Studio Picks")).toBeInTheDocument(); + expect(screen.getByText("Borrowed Gems")).toBeInTheDocument(); + expect(screen.queryByText("Midnight Loop")).not.toBeInTheDocument(); + }); + + it("shows an empty state when every source returns no results", async () => { + mockFetchMyTracks.mockResolvedValueOnce({ data: [] }); + mockFetchMyRepostedTracks.mockResolvedValueOnce({ data: [] }); + mockFetchUserPlaylists.mockResolvedValueOnce({ data: [] }); + mockFetchMyRepostedPlaylists.mockResolvedValueOnce({ data: [] }); + + renderPicker(); + + expect(await screen.findByText("No tracks or playlists found.")).toBeInTheDocument(); + }); + + it("closes when clicking outside the picker", async () => { + const { onClose } = renderPicker(); + await screen.findByText("Midnight Loop"); + + fireEvent.mouseDown(document.body); + + expect(onClose).toHaveBeenCalled(); + }); +}); diff --git a/src/components/SearchComponents/tests/SearchFilters.test.tsx b/src/components/SearchComponents/tests/SearchFilters.test.tsx new file mode 100644 index 00000000..4872dc6e --- /dev/null +++ b/src/components/SearchComponents/tests/SearchFilters.test.tsx @@ -0,0 +1,151 @@ +import { describe, it, expect, vi, beforeEach } from "vitest"; +import { render, screen, waitFor } from "@testing-library/react"; +import userEvent from "@testing-library/user-event"; +import { MemoryRouter, Route, Routes } from "react-router-dom"; + +vi.mock("@/services/api/axiosInstance", () => ({ + default: { + get: vi.fn(), + }, +})); + +import SearchFilters, { type FiltersData } from "@/components/SearchComponents/Searchfilters"; +import axiosInstance from "@/services/api/axiosInstance"; + +const mockAxios = axiosInstance as unknown as { get: ReturnType }; + +function renderFilters(path: string, filters: FiltersData, search = "q=jazz") { + return render( + + + } /> + + , + ); +} + +const tagFilters = { + available: { tags: ["rock"] }, + active: { tag: null }, +} as FiltersData; + +const trackFilters = { + available: { + tags: ["rock"], + time_ranges: ["past_day"], + durations: ["short"], + }, + active: { tag: null, time_range: null, duration: null }, +} as FiltersData; + +describe("SearchFilters", () => { + beforeEach(() => { + vi.clearAllMocks(); + mockAxios.get.mockResolvedValue({ + data: { data: [{ name: "Jazz Fusion" }, "Lo Fi", { value: "Ambient" }, { label: "Soul" }] }, + }); + }); + + it("renders nothing when filters are null", () => { + const { container } = renderFilters("/search/sounds", null); + expect(container).toBeEmptyDOMElement(); + }); + + it("renders track time, duration, and platform tag controls", async () => { + const user = userEvent.setup(); + renderFilters("/search/sounds", trackFilters, "q=jazz&time_range=past_day&duration=short&tag=Lo+Fi"); + + expect(screen.getByTestId("search-filters-title")).toHaveTextContent("Filter results"); + expect(screen.getByText("Past day")).toBeInTheDocument(); + expect(screen.getByText("< 2 min")).toBeInTheDocument(); + + await user.click(screen.getByTestId("search-filter-dropdown-btn-added-any-time")); + expect(screen.getByText("Any time")).toBeInTheDocument(); + expect(screen.getByText("Past week")).toBeInTheDocument(); + + await user.click(screen.getByTestId("search-filter-dropdown-btn-any-length")); + expect(screen.getByText("Any length")).toBeInTheDocument(); + expect(screen.getByText("> 30 min")).toBeInTheDocument(); + + expect(await screen.findByTestId("search-filter-tag-lo-fi")).toBeInTheDocument(); + expect(mockAxios.get).toHaveBeenCalledWith("/tags", { params: { limit: 100 } }); + }); + + it("updates track search params from dropdown items and tag pills", async () => { + const user = userEvent.setup(); + renderFilters("/search/sounds", trackFilters); + + await user.click(screen.getByTestId("search-filter-dropdown-btn-added-any-time")); + await user.click(screen.getByTestId("search-filter-item-past-week")); + expect(screen.getAllByText("Past week").length).toBeGreaterThan(0); + + await user.click(screen.getByTestId("search-filter-dropdown-btn-any-length")); + await user.click(screen.getByText("10–30 min")); + expect(screen.getAllByText("10–30 min").length).toBeGreaterThan(0); + + await user.click(await screen.findByTestId("search-filter-tag-jazz-fusion")); + expect(screen.getByTestId("search-filter-tag-jazz-fusion")).toHaveClass("text-text-hover"); + }); + + it("clears active track params when selected again or Any is clicked", async () => { + const user = userEvent.setup(); + renderFilters("/search/sounds", trackFilters, "q=jazz&time_range=past_week&duration=long&tag=Jazz+Fusion"); + + await user.click(screen.getByTestId("search-filter-dropdown-btn-added-any-time")); + await user.click(screen.getByTestId("search-filter-item-any-time")); + expect(screen.getByText("Added any time")).toBeInTheDocument(); + + await user.click(screen.getByTestId("search-filter-dropdown-btn-any-length")); + await user.click(screen.getByTestId("search-filter-item-any-length")); + expect(screen.getAllByText("Any length").length).toBeGreaterThan(0); + + await user.click(await screen.findByTestId("search-filter-tag-jazz-fusion")); + expect(screen.getByTestId("search-filter-tag-jazz-fusion")).not.toHaveClass("text-text-hover"); + }); + + it("renders people location filters and toggles the active location", async () => { + const user = userEvent.setup(); + renderFilters( + "/search/people", + { available: { locations: [{ value: "Cairo" }, { label: "Paris" }] }, active: { location: null } } as any, + "q=jazz&location=Cairo", + ); + + expect(screen.getByTestId("search-filter-by-location")).toBeInTheDocument(); + expect(screen.getByTestId("search-filter-item-cairo")).toHaveClass("text-text-hover"); + + await user.click(screen.getByTestId("search-filter-item-any-location")); + expect(screen.queryByTestId("search-filter-item-any-location")).not.toBeInTheDocument(); + + await user.click(screen.getByTestId("search-filter-item-paris")); + expect(screen.getByTestId("search-filter-item-paris")).toHaveClass("text-text-hover"); + }); + + it("renders album and playlist tag filters from platform tags", async () => { + const user = userEvent.setup(); + renderFilters("/search/albums", tagFilters); + await user.click(await screen.findByTestId("search-filter-tag-ambient")); + expect(screen.getByTestId("search-filter-tag-ambient")).toHaveClass("text-text-hover"); + }); + + it("returns null for unsupported paths and empty filter lists", async () => { + const { container: unsupported } = renderFilters("/other", tagFilters); + expect(unsupported).toBeEmptyDOMElement(); + + mockAxios.get.mockResolvedValueOnce({ data: { data: [] } }); + const { container: albums } = renderFilters("/search/albums", tagFilters); + await waitFor(() => expect(albums.querySelector("[data-test='search-filter-by-tag']")).not.toBeInTheDocument()); + + const { container: people } = renderFilters( + "/search/people", + { available: { locations: [] }, active: { location: null } } as any, + ); + expect(people.querySelector("[data-test='search-filter-by-location']")).not.toBeInTheDocument(); + }); + + it("handles failed platform tag loading", async () => { + mockAxios.get.mockRejectedValueOnce(new Error("nope")); + renderFilters("/search/sets", tagFilters); + await waitFor(() => expect(screen.queryByTestId("search-filter-by-tag")).not.toBeInTheDocument()); + }); +}); diff --git a/src/components/SearchComponents/tests/SearchPage.test.tsx b/src/components/SearchComponents/tests/SearchPage.test.tsx new file mode 100644 index 00000000..c01bb374 --- /dev/null +++ b/src/components/SearchComponents/tests/SearchPage.test.tsx @@ -0,0 +1,645 @@ +import { describe, it, expect, vi, beforeEach, afterEach } from "vitest"; +import { render, screen, waitFor, act } from "@testing-library/react"; +import userEvent from "@testing-library/user-event"; +import { MemoryRouter, Route, Routes, Outlet, useNavigate } from "react-router-dom"; +import React from "react"; + +// ─── Mocks ──────────────────────────────────────────────────────────────────── + +vi.mock("@/services/api/search/Searchapi", () => ({ + searchEverything: vi.fn(), +})); + +vi.mock("@/services/api/search/searchMappers", () => ({ + mapTrack: vi.fn((t: any) => ({ id: t.id, title: t.title ?? "Track", ...t })), + mapPlaylist: vi.fn((p: any) => ({ id: p.id, title: p.title ?? "Playlist", ...p })), +})); + +vi.mock("@/components/SearchComponents/Searchsidebar", () => ({ + default: ({ query, filters }: any) => ( +
+ ), +})); + +vi.mock("@/components/track/TrackCard", () => ({ + default: ({ track }: any) => ( +
{track.title}
+ ), +})); + +vi.mock("@/components/playlist/PlaylistComponent", () => ({ + default: ({ playlist }: any) => ( +
{playlist.title}
+ ), +})); + +vi.mock("@/components/SearchComponents/UserCard", () => ({ + default: ({ id, displayName }: any) => ( +
{displayName}
+ ), +})); + +vi.mock("lucide-react", () => ({ + Menu: () => , + X: () => , +})); + +// ─── Imports (after mocks) ──────────────────────────────────────────────────── + +import SearchPage, { FiltersContext, useSearchFilters } from "@/pages/search/SearchPage"; +import { searchEverything } from "@/services/api/search/Searchapi"; + +// ─── Helpers ────────────────────────────────────────────────────────────────── + +const mockSearchEverything = searchEverything as ReturnType; + +function buildResponse(overrides: Partial<{ + tracks: any[]; + users: any[]; + playlists: any[]; + albums: any[]; + total: number; +}> = {}) { + const { + tracks = [], + users = [], + playlists = [], + albums = [], + total = 0, + } = overrides; + + return { + tracks, + users, + playlists, + albums, + pagination: { total }, + }; +} + +/** Renders SearchPage inside a MemoryRouter with an optional child outlet. */ +function renderSearchPage( + path = "/search", + search = "", + childElement: React.ReactNode = null, +) { + const initialEntry = search ? `${path}?${search}` : path; + + return render( + + + }> + } + /> + } + /> + } + /> + } + /> + + + , + ); +} + +// Fake IntersectionObserver (jsdom doesn't have one) +function mockIntersectionObserver(intersecting = false) { + const observers: { cb: IntersectionObserverCallback; el: Element }[] = []; + + const MockIO = vi.fn(function (this: IntersectionObserver, cb: IntersectionObserverCallback) { + return { + observe: (el: Element) => { + observers.push({ cb, el }); + if (intersecting) { + cb([{ isIntersecting: true } as IntersectionObserverEntry], {} as IntersectionObserver); + } + }, + disconnect: vi.fn(), + }; + }); + + Object.defineProperty(window, "IntersectionObserver", { + writable: true, + value: MockIO, + }); + + return { observers, MockIO }; +} + +// ─── Tests ──────────────────────────────────────────────────────────────────── + +describe("SearchPage", () => { + beforeEach(() => { + vi.clearAllMocks(); + mockIntersectionObserver(); + mockSearchEverything.mockResolvedValue(buildResponse()); + }); + + afterEach(() => { + vi.restoreAllMocks(); + }); + + // ── Layout & Sidebar ───────────────────────────────────────────────────── + + describe("layout", () => { + it("renders the search sidebar", async () => { + renderSearchPage("/search", "q=hello"); + await waitFor(() => expect(screen.getByTestId("search-sidebar")).toBeInTheDocument()); + }); + + it("passes query to sidebar", async () => { + renderSearchPage("/search", "q=jazz"); + await waitFor(() => + expect(screen.getByTestId("search-sidebar")).toHaveAttribute("data-query", "jazz"), + ); + }); + + it("passes null filters to sidebar when on /search (everything tab)", async () => { + renderSearchPage("/search", "q=jazz"); + await waitFor(() => + expect(screen.getByTestId("search-sidebar")).toHaveAttribute("data-filters", "no"), + ); + }); + + it("renders outlet for /search/sounds", async () => { + renderSearchPage("/search/sounds", "q=jazz"); + await waitFor(() => expect(screen.getByTestId("outlet-sounds")).toBeInTheDocument()); + }); + + it("renders outlet for /search/people", async () => { + renderSearchPage("/search/people", "q=jazz"); + await waitFor(() => expect(screen.getByTestId("outlet-people")).toBeInTheDocument()); + }); + + it("renders outlet for /search/albums", async () => { + renderSearchPage("/search/albums", "q=jazz"); + await waitFor(() => expect(screen.getByTestId("outlet-albums")).toBeInTheDocument()); + }); + + it("renders outlet for /search/sets", async () => { + renderSearchPage("/search/sets", "q=jazz"); + await waitFor(() => expect(screen.getByTestId("outlet-sets")).toBeInTheDocument()); + }); + }); + + // ── Mobile sidebar toggle ───────────────────────────────────────────────── + + describe("mobile sidebar toggle", () => { + it("shows the mobile header bar", async () => { + renderSearchPage("/search", "q=test"); + // The sticky bar is always rendered (lg:hidden means CSS hides it on desktop) + await waitFor(() => expect(screen.getByLabelText("Toggle menu")).toBeInTheDocument()); + }); + + it("displays menu icon when sidebar is closed", async () => { + renderSearchPage("/search", "q=test"); + await waitFor(() => expect(screen.getByTestId("menu-icon")).toBeInTheDocument()); + }); + + it("toggles sidebar open/close on button click", async () => { + const user = userEvent.setup(); + renderSearchPage("/search", "q=test"); + + const btn = await screen.findByLabelText("Toggle menu"); + + // Open + await user.click(btn); + expect(screen.getByTestId("x-icon")).toBeInTheDocument(); + + // Close + await user.click(btn); + expect(screen.getByTestId("menu-icon")).toBeInTheDocument(); + }); + + it("shows 'Search' label in mobile header when query is empty", async () => { + renderSearchPage("/search", ""); + await waitFor(() => expect(screen.getByText("Search")).toBeInTheDocument()); + }); + + it("shows Results label in mobile header when query is present", async () => { + renderSearchPage("/search", "q=piano"); + await waitFor(() => expect(screen.getByText(/Results for "piano"/)).toBeInTheDocument()); + }); + + it("closes sidebar after navigating to a different path", async () => { + // This is tested implicitly via the useEffect that calls setSidebarOpen(false) + // We just verify the component doesn't crash on path change simulation + const user = userEvent.setup(); + renderSearchPage("/search", "q=test"); + const btn = await screen.findByLabelText("Toggle menu"); + await user.click(btn); + expect(screen.getByTestId("x-icon")).toBeInTheDocument(); + }); + }); + + // ── FiltersContext ──────────────────────────────────────────────────────── + + describe("FiltersContext", () => { + it("provides setFilters via context without crashing", () => { + const Consumer = () => { + const { setFilters } = useSearchFilters(); + return ( + + ); + }; + + render( + + + , + ); + + expect(screen.getByTestId("ctx-btn")).toBeInTheDocument(); + }); + + it("useSearchFilters returns default no-op when outside provider", () => { + const Consumer = () => { + const { setFilters } = useSearchFilters(); + // Should not throw + setFilters(null as any); + return
; + }; + render(); + expect(screen.getByTestId("ok")).toBeInTheDocument(); + }); + }); +}); + +// ─── EverythingResults (via SearchPage at /search) ──────────────────────────── + +describe("EverythingResults", () => { + beforeEach(() => { + vi.clearAllMocks(); + mockIntersectionObserver(); + }); + + afterEach(() => { + vi.restoreAllMocks(); + }); + + it("shows empty-query prompt when no q param", async () => { + mockSearchEverything.mockResolvedValue(buildResponse()); + renderSearchPage("/search", ""); + await waitFor(() => + expect( + screen.getByText(/Enter a search term to find music/i), + ).toBeInTheDocument(), + ); + }); + + it("calls searchEverything with correct params", async () => { + mockSearchEverything.mockResolvedValue(buildResponse()); + renderSearchPage("/search", "q=blues"); + await waitFor(() => expect(mockSearchEverything).toHaveBeenCalledWith( + expect.objectContaining({ q: "blues", limit: 10, offset: 0 }), + expect.any(AbortSignal), + )); + }); + + it("renders track cards from response", async () => { + mockSearchEverything.mockResolvedValue( + buildResponse({ + tracks: [{ id: "t1", title: "Blue Note", score: 0.9 }], + total: 1, + }), + ); + renderSearchPage("/search", "q=blues"); + await waitFor(() => expect(screen.getByTestId("track-card-t1")).toBeInTheDocument()); + }); + + it("renders user cards from response", async () => { + mockSearchEverything.mockResolvedValue( + buildResponse({ + users: [{ + id: "u1", + display_name: "Alice", + score: 0.8, + profile_picture: null, + follower_count: 10, + }], + total: 1, + }), + ); + renderSearchPage("/search", "q=alice"); + await waitFor(() => expect(screen.getByTestId("user-card-u1")).toBeInTheDocument()); + }); + + it("renders playlist cards from response", async () => { + mockSearchEverything.mockResolvedValue( + buildResponse({ + playlists: [{ id: "pl1", title: "Chill Mix", score: 0.7 }], + total: 1, + }), + ); + renderSearchPage("/search", "q=chill"); + await waitFor(() => expect(screen.getByTestId("playlist-card-pl1")).toBeInTheDocument()); + }); + + it("renders album cards from albums array", async () => { + mockSearchEverything.mockResolvedValue( + buildResponse({ + albums: [{ id: "al1", title: "Jazz Album", score: 0.6 }], + total: 1, + }), + ); + renderSearchPage("/search", "q=jazz"); + await waitFor(() => expect(screen.getByTestId("playlist-card-al1")).toBeInTheDocument()); + }); + + it("renders mixed results sorted by score descending", async () => { + mockSearchEverything.mockResolvedValue( + buildResponse({ + tracks: [{ id: "t1", title: "Low Score Track", score: 0.2 }], + users: [{ + id: "u1", + display_name: "High Score User", + score: 0.95, + profile_picture: null, + follower_count: 0, + }], + total: 2, + }), + ); + renderSearchPage("/search", "q=mix"); + await waitFor(() => { + const userCard = screen.getByTestId("user-card-u1"); + const trackCard = screen.getByTestId("track-card-t1"); + // user (score 0.95) should appear before track (score 0.2) in the DOM + expect( + userCard.compareDocumentPosition(trackCard) & Node.DOCUMENT_POSITION_FOLLOWING, + ).toBeTruthy(); + }); + }); + + it("shows 'No results found' when response is empty", async () => { + mockSearchEverything.mockResolvedValue(buildResponse({ total: 0 })); + renderSearchPage("/search", "q=xyzxyz"); + await waitFor(() => + expect(screen.getByText("No results found")).toBeInTheDocument(), + ); + }); + + it("shows error message on fetch failure", async () => { + mockSearchEverything.mockRejectedValue(new Error("Network error")); + renderSearchPage("/search", "q=error"); + await waitFor(() => + expect(screen.getByText("Failed to load results. Please try again.")).toBeInTheDocument(), + ); + }); + + it("retry button re-fetches after error", async () => { + mockSearchEverything + .mockRejectedValueOnce(new Error("fail")) + .mockResolvedValue(buildResponse({ total: 0 })); + + const user = userEvent.setup(); + renderSearchPage("/search", "q=retry"); + + await waitFor(() => screen.getByText("Failed to load results. Please try again.")); + + await user.click(screen.getByText("Try again")); + + await waitFor(() => expect(mockSearchEverything).toHaveBeenCalledTimes(2)); + }); + + it("ignores AbortError silently", async () => { + const abortErr = Object.assign(new Error("aborted"), { name: "AbortError" }); + mockSearchEverything.mockRejectedValue(abortErr); + renderSearchPage("/search", "q=abort"); + // Should not show error state + await waitFor(() => + expect( + screen.queryByText("Failed to load results. Please try again."), + ).not.toBeInTheDocument(), + ); + }); + + it("ignores CanceledError silently", async () => { + const cancelErr = Object.assign(new Error("canceled"), { name: "CanceledError" }); + mockSearchEverything.mockRejectedValue(cancelErr); + renderSearchPage("/search", "q=cancel"); + await waitFor(() => + expect( + screen.queryByText("Failed to load results. Please try again."), + ).not.toBeInTheDocument(), + ); + }); + + it("shows loading spinner while fetching", async () => { + let resolve: (v: any) => void; + mockSearchEverything.mockReturnValue(new Promise((r) => { resolve = r; })); + + renderSearchPage("/search", "q=loading"); + + // Spinner should appear during load + await waitFor(() => + expect(document.querySelector(".animate-spin")).toBeInTheDocument(), + ); + + // Resolve to clean up + act(() => resolve!(buildResponse())); + }); + + it("loads next page on intersection", async () => { + // First page + mockSearchEverything.mockResolvedValueOnce( + buildResponse({ + tracks: [{ id: "t1", score: 1 }], + total: 20, // more than PAGE_SIZE=10 + }), + ); + // Second page + mockSearchEverything.mockResolvedValueOnce( + buildResponse({ + tracks: [{ id: "t2", score: 0.5 }], + total: 20, + }), + ); + + // Set up intersecting observer before render + const observers: { cb: IntersectionObserverCallback }[] = []; + Object.defineProperty(window, "IntersectionObserver", { + writable: true, + value: vi.fn(function (this: IntersectionObserver, cb: IntersectionObserverCallback) { + return { + observe: (el: Element) => { + observers.push({ cb }); + }, + disconnect: vi.fn(), + }; + }), + }); + + renderSearchPage("/search", "q=pages"); + + // Wait for first page + await waitFor(() => expect(mockSearchEverything).toHaveBeenCalledTimes(1)); + await screen.findByTestId("track-card-t1"); + await waitFor(() => expect(observers.length).toBeGreaterThan(0)); + + // Simulate sentinel becoming visible + act(() => { + observers.forEach(({ cb }) => + cb([{ isIntersecting: true } as IntersectionObserverEntry], {} as IntersectionObserver), + ); + }); + + await waitFor(() => expect(mockSearchEverything).toHaveBeenCalledTimes(2)); + expect(mockSearchEverything).toHaveBeenLastCalledWith( + expect.objectContaining({ offset: 10 }), + expect.any(AbortSignal), + ); + }); + + it("does not load next page when sentinel is not intersecting", async () => { + mockSearchEverything.mockResolvedValue( + buildResponse({ tracks: [{ id: "t1", score: 1 }], total: 20 }), + ); + + const observers: { cb: IntersectionObserverCallback }[] = []; + Object.defineProperty(window, "IntersectionObserver", { + writable: true, + value: vi.fn(function (this: IntersectionObserver, cb: IntersectionObserverCallback) { + return { + observe: () => observers.push({ cb }), + disconnect: vi.fn(), + }; + }), + }); + + renderSearchPage("/search", "q=nointersect"); + await waitFor(() => expect(mockSearchEverything).toHaveBeenCalledTimes(1)); + + act(() => { + observers.forEach(({ cb }) => + cb([{ isIntersecting: false } as IntersectionObserverEntry], {} as IntersectionObserver), + ); + }); + + // Still only 1 call + expect(mockSearchEverything).toHaveBeenCalledTimes(1); + }); + + it("resets results when query changes", async () => { + mockSearchEverything.mockResolvedValue(buildResponse({ total: 0 })); + const user = userEvent.setup(); + const Harness = () => { + const navigate = useNavigate(); + return ( + <> + + ), +})); + +vi.mock("@/components/UI/UserAvatar", () => ({ + default: ({ + src, + name, + alt, + wrapperClassName, + imageClassName, + initialsClassName, + }: any) => ( +
+ ), +})); + +// ─── Import after mocks ─────────────────────────────────────────────────────── + +import UserCard from "@/components/SearchComponents/UserCard"; + +// ─── Helpers ────────────────────────────────────────────────────────────────── + +function renderUserCard(props: Partial> = {}) { + const defaults = { + id: "user-1", + username: "johndoe", + displayName: "John Doe", + avatarUrl: "https://example.com/avatar.jpg", + location: "Cairo, EG", + followersCount: 1234, + }; + return render( + + + , + ); +} + +// ─── Tests ──────────────────────────────────────────────────────────────────── + +describe("UserCard", () => { + beforeEach(() => { + vi.clearAllMocks(); + }); + + // ── Rendering ────────────────────────────────────────────────────────────── + + describe("rendering", () => { + it("renders the card container with correct data-test attribute", () => { + renderUserCard({ id: "abc-123" }); + expect(document.querySelector('[data-test="user-card-abc-123"]')).toBeInTheDocument(); + }); + + it("renders the display name", () => { + renderUserCard({ displayName: "Jane Smith" }); + expect(screen.getByTestId("user-card-name")).toHaveTextContent("Jane Smith"); + }); + + it("renders the location when provided", () => { + renderUserCard({ location: "Cairo, EG" }); + expect(screen.getByText("Cairo, EG")).toBeInTheDocument(); + }); + + it("does not render location when null", () => { + renderUserCard({ location: null }); + expect(screen.queryByText("Cairo, EG")).not.toBeInTheDocument(); + }); + + it("does not render location when undefined", () => { + renderUserCard({ location: undefined }); + // No location span rendered + expect(document.querySelector(".text-text-secondary.truncate")).not.toBeInTheDocument(); + }); + + it("renders followers count when provided", () => { + renderUserCard({ followersCount: 5000 }); + expect(screen.getByTestId("user-card-followers")).toHaveTextContent("5,000 followers"); + }); + + it("formats large follower counts with locale separator", () => { + renderUserCard({ followersCount: 1000000 }); + expect(screen.getByTestId("user-card-followers")).toHaveTextContent("1,000,000 followers"); + }); + + it("renders 0 followers correctly", () => { + renderUserCard({ followersCount: 0 }); + expect(screen.getByTestId("user-card-followers")).toHaveTextContent("0 followers"); + }); + + it("does not render followers section when followersCount is undefined", () => { + renderUserCard({ followersCount: undefined }); + expect(screen.queryByTestId("user-card-followers")).not.toBeInTheDocument(); + }); + + it("renders the UserAvatar component", () => { + renderUserCard({ avatarUrl: "https://img.example.com/pic.jpg", displayName: "John Doe" }); + const avatar = screen.getByTestId("user-avatar"); + expect(avatar).toBeInTheDocument(); + expect(avatar).toHaveAttribute("data-src", "https://img.example.com/pic.jpg"); + expect(avatar).toHaveAttribute("data-name", "John Doe"); + expect(avatar).toHaveAttribute("data-alt", "John Doe"); + }); + + it("passes null avatarUrl to UserAvatar as 'null' string", () => { + renderUserCard({ avatarUrl: null }); + expect(screen.getByTestId("user-avatar")).toHaveAttribute("data-src", "null"); + }); + + it("passes correct className props to UserAvatar", () => { + renderUserCard(); + const avatar = screen.getByTestId("user-avatar"); + expect(avatar).toHaveAttribute("data-wrapper-class", expect.stringContaining("rounded-full")); + expect(avatar).toHaveAttribute("data-image-class", expect.stringContaining("object-cover")); + expect(avatar).toHaveAttribute("data-initials-class", expect.stringContaining("font-bold")); + }); + + it("renders the FollowButton with correct username and userId", () => { + renderUserCard({ username: "janedoe", id: "user-99" }); + const btn = screen.getByTestId("follow-button"); + expect(btn).toHaveAttribute("data-username", "janedoe"); + expect(btn).toHaveAttribute("data-userid", "user-99"); + }); + + it("renders a user icon inside the followers section", () => { + renderUserCard({ followersCount: 10 }); + const followersEl = screen.getByTestId("user-card-followers"); + expect(followersEl.querySelector(".fa-user")).toBeInTheDocument(); + }); + }); + + // ── Navigation ───────────────────────────────────────────────────────────── + + describe("navigation", () => { + it("navigates to user profile on avatar click", async () => { + const user = userEvent.setup(); + renderUserCard({ username: "johndoe" }); + + await user.click(screen.getByTestId("user-card-avatar").closest("div")!); + expect(mockNavigate).toHaveBeenCalledWith("/johndoe"); + }); + + it("navigates to user profile on display name click", async () => { + const user = userEvent.setup(); + renderUserCard({ username: "johndoe" }); + + await user.click(screen.getByTestId("user-card-name")); + expect(mockNavigate).toHaveBeenCalledWith("/johndoe"); + }); + + it("navigates to followers page on followers click", async () => { + const user = userEvent.setup(); + renderUserCard({ username: "johndoe", followersCount: 42 }); + + await user.click(screen.getByTestId("user-card-followers")); + expect(mockNavigate).toHaveBeenCalledWith("/johndoe/follower"); + }); + + it("navigates with correct username when username differs from id", async () => { + const user = userEvent.setup(); + renderUserCard({ id: "42", username: "special_user" }); + + await user.click(screen.getByTestId("user-card-name")); + expect(mockNavigate).toHaveBeenCalledWith("/special_user"); + }); + }); + + // ── Edge cases ───────────────────────────────────────────────────────────── + + describe("edge cases", () => { + it("renders without crashing when all optional props are omitted", () => { + render( + + + , + ); + expect(screen.getByTestId("user-card-name")).toBeInTheDocument(); + }); + + it("handles special characters in display name", () => { + renderUserCard({ displayName: "Ö'Neil & Co." }); + expect(screen.getByTestId("user-card-name")).toHaveTextContent("Ö'Neil & Co."); + }); + + it("handles very long display name without crashing", () => { + const longName = "A".repeat(200); + renderUserCard({ displayName: longName }); + expect(screen.getByTestId("user-card-name")).toHaveTextContent(longName); + }); + + it("handles username with special URL-safe characters", async () => { + const user = userEvent.setup(); + renderUserCard({ username: "user.name_123" }); + await user.click(screen.getByTestId("user-card-name")); + expect(mockNavigate).toHaveBeenCalledWith("/user.name_123"); + }); + + it("calls navigate only once per click on display name", async () => { + const user = userEvent.setup(); + renderUserCard(); + await user.click(screen.getByTestId("user-card-name")); + expect(mockNavigate).toHaveBeenCalledTimes(1); + }); + + it("calls navigate only once per click on followers", async () => { + const user = userEvent.setup(); + renderUserCard({ followersCount: 5 }); + await user.click(screen.getByTestId("user-card-followers")); + expect(mockNavigate).toHaveBeenCalledTimes(1); + }); + }); +}); diff --git a/src/components/UI/FollowButton.tsx b/src/components/UI/FollowButton.tsx index 0c5205ab..7d8df676 100644 --- a/src/components/UI/FollowButton.tsx +++ b/src/components/UI/FollowButton.tsx @@ -40,6 +40,7 @@ export default function FollowButton({ const resolvedIsFollowing = hasToggled ? storeIsFollowing : isFollowing; const handleClick = async (e: React.MouseEvent) => { + e.preventDefault(); e.stopPropagation(); if (!user || isLoading || isSelf || !userId) return; diff --git a/src/components/notificationsComponents/tests/NotificationsPage.test.tsx b/src/components/notificationsComponents/tests/NotificationsPage.test.tsx index 8bdcb952..1d6cf1d0 100644 --- a/src/components/notificationsComponents/tests/NotificationsPage.test.tsx +++ b/src/components/notificationsComponents/tests/NotificationsPage.test.tsx @@ -1,312 +1,240 @@ -import { describe, it, expect, vi, beforeEach } from 'vitest' -import { render, screen, waitFor, fireEvent, configure } from '@testing-library/react' -import { MemoryRouter } from 'react-router-dom' -import NotificationsPage from '@/pages/social/notifications/NotificationsPage' - -// Match the project-wide convention: all elements use data-test, not data-testid -configure({ testIdAttribute: 'data-test' }) - -// ─── Mocks ──────────────────────────────────────────────────────────────────── - -const mockFetchNotifications = vi.fn() -const mockFetchMyFollowing = vi.fn() -const mockFetchUnreadCount = vi.fn() - -vi.mock('@/services/api/notifications/notificationsAPI', () => ({ - fetchNotifications: (...args: any[]) => mockFetchNotifications(...args), - fetchMyFollowing: (...args: any[]) => mockFetchMyFollowing(...args), -})) - -vi.mock('@/stores/notification.store', () => ({ +import { describe, it, expect, vi, beforeEach, afterEach } from "vitest"; +import { render, screen, waitFor, act } from "@testing-library/react"; +import userEvent from "@testing-library/user-event"; +import type { Notification } from "@/services/api/notifications/notificationsAPI"; + +const mockFetchUnreadCount = vi.hoisted(() => vi.fn()); +const mockRefreshUnreadCount = vi.hoisted(() => vi.fn()); +type SocketHandler = (...args: unknown[]) => void; + +const socketHandlers = vi.hoisted(() => new Map()); +const mockSocket = vi.hoisted(() => ({ + on: vi.fn((event: string, cb: SocketHandler) => socketHandlers.set(event, cb)), + off: vi.fn((event: string) => socketHandlers.delete(event)), +})); + +vi.mock("@/services/api/notifications/notificationsAPI", () => ({ + fetchNotifications: vi.fn(), + fetchMyFollowing: vi.fn(), +})); + +vi.mock("@/stores/notification.store", () => ({ useNotificationStore: () => ({ fetchUnreadCount: mockFetchUnreadCount, - unreadCount: 0, + refreshUnreadCount: mockRefreshUnreadCount, }), -})) +})); -vi.mock('@/components/notificationsComponents/notificationCard', () => ({ - default: ({ notification }: any) => ( -
{notification.id}
- ), -})) - -vi.mock('@/components/notificationsComponents/notificationHeader', () => ({ - default: ({ selectedType, onTypeChange }: any) => ( -
- {selectedType} - - - -
- ), -})) +vi.mock("@/services/api/messaging/socketService", () => ({ + getSocket: vi.fn(() => mockSocket), +})); -vi.mock('@/components/UI/Spinner', () => ({ - default: () =>
, -})) +vi.mock("@/components/UI/Spinner", () => ({ + default: (props: any) =>
Loading
, +})); -vi.mock('@/components/UI/ArtistListSection', () => ({ - default: ({ artists }: any) => ( -
- {artists.map((a: any) =>
{a.username}
)} -
+vi.mock("@/components/UI/ArtistListSection", () => ({ + default: ({ title, artists, viewAllLink, maxDisplay }: any) => ( + ), -})) +})); -vi.mock('@/components/UI/GoMobile', () => ({ +vi.mock("@/components/UI/GoMobile", () => ({ default: () =>
, -})) - -// ─── Factories ──────────────────────────────────────────────────────────────── +})); -const makeNotification = (id: string) => ({ - id, - type: 'follow', - is_read: false, - created_at: new Date().toISOString(), - actor: { id: 'u1', username: 'alice', display_name: 'Alice', profile_picture: null, is_verified: false }, - resource: null, -}) - -const resolvedNotifications = (items: any[]) => - Promise.resolve({ data: { items } }) - -const resolvedFollowing = (items: any[]) => - Promise.resolve({ data: { items } }) - -// ─── Render helper ──────────────────────────────────────────────────────────── - -const renderPage = () => - render( - - - , - ) - -// ─── Tests ──────────────────────────────────────────────────────────────────── - -describe('NotificationsPage', () => { +vi.mock("@/components/notificationsComponents/notificationCard", () => ({ + default: ({ notification, onMarkRead }: any) => ( + + ), +})); + +import NotificationsPage from "@/pages/social/notifications/NotificationsPage"; +import { fetchNotifications, fetchMyFollowing } from "@/services/api/notifications/notificationsAPI"; +import { getSocket } from "@/services/api/messaging/socketService"; + +const mockFetchNotifications = fetchNotifications as ReturnType; +const mockFetchMyFollowing = fetchMyFollowing as ReturnType; +const mockGetSocket = getSocket as ReturnType; + +function notification(id: string, is_read = false): Notification { + return { + id, + type: "like", + actor: { id: `u-${id}`, username: `user-${id}`, display_name: `User ${id}`, avatar: null }, + resource_type: "track", + resource_id: `track-${id}`, + resource_details: { title: `Track ${id}` }, + is_read, + created_at: new Date().toISOString(), + }; +} + +function list(items: Notification[], has_next = false) { + return { + success: true, + data: { + items, + pagination: { + page: 1, + per_page: 20, + total_items: items.length, + total_pages: 1, + has_next, + has_prev: false, + }, + }, + }; +} + +function following(items = [{ id: "f1", username: "fan", profile_picture: "fan.png", is_verified: true }]) { + return { + success: true, + data: { + items: items.map((u) => ({ display_name: u.username, ...u })), + pagination: { page: 1, per_page: 4, total_items: items.length, total_pages: 1, has_next: false, has_prev: false }, + }, + }; +} + +function installIntersectionObserver() { + const observers: IntersectionObserverCallback[] = []; + const disconnect = vi.fn(); + Object.defineProperty(window, "IntersectionObserver", { + writable: true, + value: vi.fn(function (this: IntersectionObserver, cb: IntersectionObserverCallback) { + return { + observe: vi.fn(() => observers.push(cb)), + disconnect, + }; + }), + }); + return { observers, disconnect }; +} + +describe("social NotificationsPage", () => { beforeEach(() => { - vi.clearAllMocks() - mockFetchMyFollowing.mockResolvedValue(resolvedFollowing([])) - mockFetchUnreadCount.mockResolvedValue(undefined) - }) - - // ── Loading state ───────────────────────────────────────────────────────── - - describe('loading state', () => { - it('shows spinner while notifications are loading', async () => { - mockFetchNotifications.mockReturnValue(new Promise(() => {})) - renderPage() - expect(screen.getByTestId('notifications-loading')).toBeInTheDocument() - }) - - it('hides spinner after data loads', async () => { - mockFetchNotifications.mockResolvedValue(resolvedNotifications([makeNotification('n1')])) - renderPage() - await waitFor(() => - expect(screen.queryByTestId('notifications-loading')).not.toBeInTheDocument(), - ) - }) - }) - - // ── Success state ───────────────────────────────────────────────────────── - - describe('success state', () => { - it('renders notification list on success', async () => { - mockFetchNotifications.mockResolvedValue( - resolvedNotifications([makeNotification('n1'), makeNotification('n2')]), - ) - renderPage() - await waitFor(() => { - expect(screen.getByTestId('notifications-list')).toBeInTheDocument() - }) - }) - - it('renders a card for each notification', async () => { - mockFetchNotifications.mockResolvedValue( - resolvedNotifications([makeNotification('n1'), makeNotification('n2'), makeNotification('n3')]), - ) - renderPage() - await waitFor(() => { - expect(screen.getByTestId('notification-card-n1')).toBeInTheDocument() - expect(screen.getByTestId('notification-card-n2')).toBeInTheDocument() - expect(screen.getByTestId('notification-card-n3')).toBeInTheDocument() - }) - }) - }) - - // ── Empty state ─────────────────────────────────────────────────────────── - - describe('empty state', () => { - it('shows empty message when API returns no items', async () => { - mockFetchNotifications.mockResolvedValue(resolvedNotifications([])) - renderPage() - await waitFor(() => { - expect(screen.getByTestId('notifications-empty')).toBeInTheDocument() - }) - }) - - it('shows correct empty message text', async () => { - mockFetchNotifications.mockResolvedValue(resolvedNotifications([])) - renderPage() - await waitFor(() => { - expect(screen.getByTestId('notifications-empty')).toHaveTextContent( - "You don't have any notifications", - ) - }) - }) - }) - - // ── Error state ─────────────────────────────────────────────────────────── - - describe('error state', () => { - it('shows error message when API throws', async () => { - mockFetchNotifications.mockRejectedValue(new Error('network error')) - renderPage() - await waitFor(() => { - expect(screen.getByTestId('notifications-error')).toBeInTheDocument() - }) - }) - - it('shows correct error message text', async () => { - mockFetchNotifications.mockRejectedValue(new Error('500')) - renderPage() - await waitFor(() => { - expect(screen.getByTestId('notifications-error')).toHaveTextContent('Something went wrong.') - }) - }) - }) - - // ── Filter / type change ────────────────────────────────────────────────── - - describe('filter type change', () => { - it('starts with "all" selected', async () => { - mockFetchNotifications.mockResolvedValue(resolvedNotifications([])) - renderPage() - await waitFor(() => - expect(screen.getByTestId('selected-type')).toHaveTextContent('all'), - ) - }) - - it('calls fetchNotifications without type param for "all"', async () => { - mockFetchNotifications.mockResolvedValue(resolvedNotifications([])) - renderPage() - await waitFor(() => { - expect(mockFetchNotifications).toHaveBeenCalledWith(1, 50, false, undefined) - }) - }) - - it('re-fetches with type param when filter changes', async () => { - mockFetchNotifications.mockResolvedValue(resolvedNotifications([])) - renderPage() - await waitFor(() => screen.getByTestId('notifications-empty')) - - fireEvent.click(screen.getByTestId('filter-like')) - - await waitFor(() => { - expect(mockFetchNotifications).toHaveBeenCalledWith(1, 50, false, 'like') - }) - }) - - it('does NOT re-fetch when the same filter is selected again', async () => { - mockFetchNotifications.mockResolvedValue(resolvedNotifications([])) - renderPage() - await waitFor(() => screen.getByTestId('notifications-empty')) - - const callsBefore = mockFetchNotifications.mock.calls.length - - fireEvent.click(screen.getByTestId('filter-all')) - - await new Promise(r => setTimeout(r, 50)) - - expect(mockFetchNotifications.mock.calls.length).toBe(callsBefore) - }) - - it('updates selectedType in header when filter changes', async () => { - mockFetchNotifications.mockResolvedValue(resolvedNotifications([])) - renderPage() - await waitFor(() => screen.getByTestId('notifications-empty')) - - fireEvent.click(screen.getByTestId('filter-comment')) - - await waitFor(() => { - expect(screen.getByTestId('selected-type')).toHaveTextContent('comment') - }) - }) - }) - - // ── Sidebar ─────────────────────────────────────────────────────────────── - - describe('sidebar', () => { - it('renders ArtistListSection', async () => { - mockFetchNotifications.mockResolvedValue(resolvedNotifications([])) - renderPage() - await waitFor(() => expect(screen.getByTestId('artist-list')).toBeInTheDocument()) - }) - - it('renders GoMobileSection', async () => { - mockFetchNotifications.mockResolvedValue(resolvedNotifications([])) - renderPage() - await waitFor(() => expect(screen.getByTestId('go-mobile')).toBeInTheDocument()) - }) - - it('calls fetchMyFollowing on mount', async () => { - mockFetchNotifications.mockResolvedValue(resolvedNotifications([])) - renderPage() - await waitFor(() => expect(mockFetchMyFollowing).toHaveBeenCalled()) - }) - - it('populates ArtistListSection with fetched followers', async () => { - mockFetchNotifications.mockResolvedValue(resolvedNotifications([])) - mockFetchMyFollowing.mockResolvedValue( - resolvedFollowing([ - { username: 'bob', profile_picture: null, is_verified: true }, - { username: 'carol', profile_picture: 'https://x.com/img.jpg', is_verified: false }, - ]), - ) - renderPage() - await waitFor(() => { - expect(screen.getByText('bob')).toBeInTheDocument() - expect(screen.getByText('carol')).toBeInTheDocument() - }) - }) - - it('silently ignores fetchMyFollowing errors', async () => { - mockFetchNotifications.mockResolvedValue(resolvedNotifications([])) - mockFetchMyFollowing.mockRejectedValue(new Error('network')) - renderPage() - await waitFor(() => expect(screen.getByTestId('artist-list')).toBeInTheDocument()) - }) - }) - - // ── Unread count ────────────────────────────────────────────────────────── - - describe('unread count', () => { - it('calls fetchUnreadCount on mount', async () => { - mockFetchNotifications.mockResolvedValue(resolvedNotifications([])) - renderPage() - await waitFor(() => expect(mockFetchUnreadCount).toHaveBeenCalledTimes(1)) - }) - }) - - // ── Page structure ──────────────────────────────────────────────────────── - - describe('page structure', () => { - it('renders the root page element', async () => { - mockFetchNotifications.mockResolvedValue(resolvedNotifications([])) - renderPage() - await waitFor(() => - expect(screen.getByTestId('notifications-page')).toBeInTheDocument(), - ) - }) - - it('renders NotificationHeader', async () => { - mockFetchNotifications.mockResolvedValue(resolvedNotifications([])) - renderPage() - await waitFor(() => - expect(screen.getByTestId('notification-header')).toBeInTheDocument(), - ) - }) - }) -}) \ No newline at end of file + vi.clearAllMocks(); + socketHandlers.clear(); + installIntersectionObserver(); + mockFetchNotifications.mockResolvedValue(list([notification("n1")])); + mockFetchMyFollowing.mockResolvedValue(following()); + mockFetchUnreadCount.mockResolvedValue(undefined); + mockRefreshUnreadCount.mockResolvedValue(undefined); + mockGetSocket.mockReturnValue(mockSocket); + }); + + afterEach(() => { + vi.restoreAllMocks(); + }); + + it("loads notifications, sidebar followers, unread count, and socket listener", async () => { + render(); + + expect(screen.getByTestId("notifications-loading")).toBeInTheDocument(); + expect(await screen.findByTestId("notification-card-n1")).toBeInTheDocument(); + expect(screen.getByTestId("artist-list")).toHaveAttribute("data-count", "1"); + expect(screen.getByTestId("go-mobile")).toBeInTheDocument(); + expect(mockFetchNotifications).toHaveBeenCalledWith(1, 20, undefined); + expect(mockFetchMyFollowing).toHaveBeenCalledWith(undefined, 4, 0); + expect(mockFetchUnreadCount).toHaveBeenCalled(); + expect(mockSocket.on).toHaveBeenCalledWith("notification:created", expect.any(Function)); + }); + + it("renders empty and error states", async () => { + mockFetchNotifications.mockResolvedValueOnce(list([])); + const { unmount } = render(); + expect(await screen.findByTestId("notifications-empty")).toHaveTextContent("You don't have any notifications"); + unmount(); + + mockFetchNotifications.mockRejectedValueOnce(new Error("network")); + render(); + expect(await screen.findByTestId("notifications-error")).toHaveTextContent("Something went wrong."); + }); + + it("changes filters and ignores selecting the active filter", async () => { + const user = userEvent.setup(); + render(); + + await screen.findByTestId("notification-card-n1"); + await user.click(screen.getByTestId("notification-filter-btn")); + await user.click(screen.getByTestId("notification-filter-option-all")); + expect(mockFetchNotifications).toHaveBeenCalledTimes(1); + + await user.click(screen.getByTestId("notification-filter-btn")); + await user.click(screen.getByTestId("notification-filter-option-follow")); + + await waitFor(() => expect(mockFetchNotifications).toHaveBeenCalledWith(1, 20, "follow")); + }); + + it("marks a notification as read in local state and refreshes unread count", async () => { + const user = userEvent.setup(); + render(); + + await user.click(await screen.findByTestId("notification-card-n1")); + + expect(mockFetchUnreadCount).toHaveBeenCalledTimes(2); + expect(screen.getByTestId("notification-card-n1")).toHaveTextContent("true"); + }); + + it("loads more notifications when the sentinel intersects", async () => { + const io = installIntersectionObserver(); + mockFetchNotifications + .mockResolvedValueOnce(list([notification("n1")], true)) + .mockResolvedValueOnce(list([notification("n2")], false)); + + render(); + await screen.findByTestId("notification-card-n1"); + + act(() => { + io.observers.forEach((cb) => + cb([{ isIntersecting: true } as IntersectionObserverEntry], {} as IntersectionObserver), + ); + }); + + expect(await screen.findByTestId("notification-card-n2")).toBeInTheDocument(); + expect(mockFetchNotifications).toHaveBeenLastCalledWith(2, 20, undefined); + }); + + it("silently handles sidebar, load-more, and socket edge cases", async () => { + const io = installIntersectionObserver(); + mockFetchMyFollowing.mockRejectedValueOnce(new Error("sidebar")); + mockFetchNotifications + .mockResolvedValueOnce(list([notification("n1")], true)) + .mockRejectedValueOnce(new Error("more failed")) + .mockResolvedValueOnce(list([notification("fresh")], false)); + + const { unmount } = render(); + await screen.findByTestId("notification-card-n1"); + + act(() => { + io.observers.forEach((cb) => + cb([{ isIntersecting: true } as IntersectionObserverEntry], {} as IntersectionObserver), + ); + }); + await waitFor(() => expect(mockFetchNotifications).toHaveBeenCalledTimes(2)); + expect(screen.queryByTestId("notification-card-fresh")).not.toBeInTheDocument(); + + await act(async () => { + socketHandlers.get("notification:created")?.(); + }); + + expect(await screen.findByTestId("notification-card-fresh")).toBeInTheDocument(); + expect(mockRefreshUnreadCount).toHaveBeenCalled(); + + unmount(); + expect(mockSocket.off).toHaveBeenCalledWith("notification:created", expect.any(Function)); + }); + + it("works without a socket", async () => { + mockGetSocket.mockReturnValueOnce(null); + render(); + + expect(await screen.findByTestId("notification-card-n1")).toBeInTheDocument(); + expect(mockSocket.on).not.toHaveBeenCalled(); + }); +}); diff --git a/src/components/notificationsComponents/tests/SettingsNotificationsPage.test.tsx b/src/components/notificationsComponents/tests/SettingsNotificationsPage.test.tsx new file mode 100644 index 00000000..5f9cfc44 --- /dev/null +++ b/src/components/notificationsComponents/tests/SettingsNotificationsPage.test.tsx @@ -0,0 +1,185 @@ +import { describe, it, expect, vi, beforeEach } from "vitest"; +import { render, screen, fireEvent, waitFor } from "@testing-library/react"; +import userEvent from "@testing-library/user-event"; + +vi.mock("@/services/api/axiosInstance", () => ({ + default: { + get: vi.fn(), + patch: vi.fn(), + }, +})); + +import SettingsNotificationsPage from "@/pages/settings/notifications/NotificationsPage"; +import axiosInstance from "@/services/api/axiosInstance"; + +const mockAxios = axiosInstance as unknown as { + get: ReturnType; + patch: ReturnType; +}; + +const serverPrefs = { + new_follower_email: false, + new_follower_push: true, + repost_of_your_post_email: false, + repost_of_your_post_push: true, + new_post_by_followed_email: false, + new_post_by_followed_push: false, + likes_and_plays_email: false, + likes_and_plays_push: false, + comment_on_post_email: false, + comment_on_post_push: true, + recommended_content_email: false, + recommended_content_push: false, + new_message_email: false, + new_message_push: true, + messages_from: "everyone", + feature_updates_email: true, + feature_updates_push: true, + surveys_and_feedback_email: false, + surveys_and_feedback_push: false, + promotional_content_email: false, + promotional_content_push: false, + newsletter_email: false, +}; + +function row(label: string) { + const labelEl = screen.getByText(label); + let current = labelEl.parentElement; + while (current && current.querySelectorAll('div[class*="w-5"][class*="h-5"]').length === 0) { + current = current.parentElement; + } + if (!current) throw new Error(`Row not found for ${label}`); + return current as HTMLElement; +} + +function rowCheckboxes(label: string) { + return Array.from(row(label).querySelectorAll('div[class*="w-5"][class*="h-5"]')) as HTMLElement[]; +} + +function sectionHeader(title: string) { + return screen.getByText(title).closest(".flex.items-center") as HTMLElement; +} + +function sectionCheckboxes(title: string) { + return Array.from(sectionHeader(title).querySelectorAll('div[class*="w-5"][class*="h-5"]')) as HTMLElement[]; +} + +describe("settings NotificationsPage", () => { + beforeEach(() => { + vi.clearAllMocks(); + mockAxios.get.mockResolvedValue({ data: { data: serverPrefs } }); + mockAxios.patch.mockResolvedValue({}); + }); + + it("loads preferences and renders sections, rows, dropdowns, and disabled save", async () => { + render(); + + await waitFor(() => expect(mockAxios.get).toHaveBeenCalledWith("/notifications/preferences")); + + expect(screen.getByText("Activities")).toBeInTheDocument(); + expect(screen.getByText("Updates from Rythmify")).toBeInTheDocument(); + expect(screen.getByText("New message")).toBeInTheDocument(); + expect(screen.getByTestId("settings-notifications-new_message_email-dropdown")).toHaveValue("everyone"); + expect(screen.getByTestId("settings-notifications-save-button")).toBeDisabled(); + }); + + it("falls back to defaults when loading preferences fails", async () => { + mockAxios.get.mockRejectedValueOnce(new Error("load failed")); + render(); + + await waitFor(() => expect(mockAxios.get).toHaveBeenCalled()); + + expect(screen.getByText("New follower")).toBeInTheDocument(); + expect(screen.getByTestId("settings-notifications-save-button")).toBeDisabled(); + }); + + it("toggles a row preference and saves successfully", async () => { + render(); + await screen.findByText("New follower"); + + fireEvent.click(rowCheckboxes("New follower")[0]); + expect(screen.getByTestId("settings-notifications-save-button")).toBeEnabled(); + + fireEvent.click(screen.getByTestId("settings-notifications-save-button")); + + await waitFor(() => + expect(mockAxios.patch).toHaveBeenCalledWith( + "/notifications/preferences", + expect.objectContaining({ new_follower_email: true }), + ), + ); + expect(await screen.findByText("Saved!")).toBeInTheDocument(); + expect(screen.getByTestId("settings-notifications-save-button")).toBeDisabled(); + }); + + it("shows a spinner while saving and an error when save fails", async () => { + let reject!: (error: Error) => void; + mockAxios.patch.mockReturnValueOnce(new Promise((_, rej) => { reject = rej; })); + render(); + await screen.findByText("Comment on your post"); + + fireEvent.click(rowCheckboxes("Comment on your post")[0]); + fireEvent.click(screen.getByTestId("settings-notifications-save-button")); + expect(document.querySelector(".animate-spin")).toBeInTheDocument(); + + reject(new Error("save failed")); + expect(await screen.findByText("Failed to save")).toBeInTheDocument(); + expect(screen.getByTestId("settings-notifications-save-button")).toBeEnabled(); + }); + + it("toggles all email and device values from section headers", async () => { + render(); + await screen.findByText("Activities"); + + const [emailAll, deviceAll] = sectionCheckboxes("Activities"); + fireEvent.click(emailAll); + fireEvent.click(deviceAll); + fireEvent.click(screen.getByTestId("settings-notifications-save-button")); + + await waitFor(() => + expect(mockAxios.patch).toHaveBeenCalledWith( + "/notifications/preferences", + expect.objectContaining({ + new_follower_email: true, + repost_of_your_post_email: true, + recommended_content_email: true, + new_follower_push: true, + new_message_push: true, + }), + ), + ); + }); + + it("updates message dropdowns and checkbox+dropdown rows", async () => { + const user = userEvent.setup(); + render(); + await screen.findByText("New message"); + + fireEvent.click(rowCheckboxes("New message")[0]); + await user.selectOptions(screen.getByTestId("settings-notifications-new_message_email-dropdown"), "followers_only"); + fireEvent.click(screen.getByTestId("settings-notifications-save-button")); + + await waitFor(() => + expect(mockAxios.patch).toHaveBeenCalledWith( + "/notifications/preferences", + expect.objectContaining({ + new_message_email: true, + messages_from: "followers_only", + }), + ), + ); + }); + + it("cancels local changes by reloading from the server", async () => { + render(); + await screen.findByText("New follower"); + + fireEvent.click(rowCheckboxes("New follower")[0]); + expect(screen.getByTestId("settings-notifications-save-button")).toBeEnabled(); + + fireEvent.click(screen.getByTestId("settings-notifications-cancel-button")); + + await waitFor(() => expect(mockAxios.get).toHaveBeenCalledTimes(2)); + expect(screen.getByTestId("settings-notifications-save-button")).toBeDisabled(); + }); +}); diff --git a/src/components/notificationsComponents/tests/notificationCard.test.tsx b/src/components/notificationsComponents/tests/notificationCard.test.tsx index 0233b5bc..e942b656 100644 --- a/src/components/notificationsComponents/tests/notificationCard.test.tsx +++ b/src/components/notificationsComponents/tests/notificationCard.test.tsx @@ -1,485 +1,324 @@ -import { describe, it, expect, vi, beforeEach, afterEach } from 'vitest' -import { render, screen, fireEvent, configure, waitFor } from '@testing-library/react' -import { MemoryRouter } from 'react-router-dom' -import NotificationCard from '../notificationCard' -import type { Notification, NotificationResourceDetails } from '@/services/api/notifications/notificationsAPI' - -// Match the project-wide convention: all elements use data-test, not data-testid -configure({ testIdAttribute: 'data-test' }) - -// ─── Mocks ──────────────────────────────────────────────────────────────────── - -const mockNavigate = vi.fn() - -vi.mock('react-router-dom', async () => { - const actual = await vi.importActual('react-router-dom') - return { ...actual, useNavigate: () => mockNavigate } -}) - -vi.mock('@/components/UI/FollowButton', () => ({ - default: ({ username }: { username: string }) => ( - +import { describe, it, expect, vi, beforeEach, afterEach } from "vitest"; +import { render, screen, waitFor } from "@testing-library/react"; +import userEvent from "@testing-library/user-event"; +import { MemoryRouter } from "react-router-dom"; +import type { Notification } from "@/services/api/notifications/notificationsAPI"; + +const mockNavigate = vi.hoisted(() => vi.fn()); +const mockMarkOneAsRead = vi.hoisted(() => vi.fn()); + +vi.mock("react-router-dom", async (importOriginal) => { + const actual = await importOriginal(); + return { + ...actual, + useNavigate: () => mockNavigate, + }; +}); + +vi.mock("@/services/api/notifications/notificationsAPI", () => ({ + fetchFollowStatus: vi.fn(), + markNotificationRead: vi.fn(), +})); + +vi.mock("@/stores/auth.store", () => ({ + useAuthStore: () => ({ user: { id: "me" } }), +})); + +vi.mock("@/stores/notification.store", () => ({ + useNotificationStore: () => ({ markOneAsRead: mockMarkOneAsRead }), +})); + +vi.mock("@/components/UI/FollowButton", () => ({ + default: ({ username, userId, initialIsFollowing }: any) => ( + + ), +})); + +vi.mock("@/components/UI/UserAvatar", () => ({ + default: ({ src, name, alt, imageDataTest, fallbackDataTest }: any) => ( +
), -})) - -vi.mock('@/services/api/notifications/notificationsAPI', () => ({ - markNotificationRead: vi.fn().mockResolvedValue({ success: true }), -})) - -// Modal mock exposes onClose via a data-test button so tests can trigger it directly -vi.mock('@/components/UI/Modal', () => ({ - Modal: ({ - isOpen, - onClose, - children, - }: { - isOpen: boolean - onClose: () => void - children: React.ReactNode - }) => +})); + +vi.mock("@/components/UI/Modal", () => ({ + Modal: ({ isOpen, onClose, children }: any) => ( isOpen ? (
- + {children}
- ) : null, -})) - -vi.mock('@/components/UI/BlockModal', () => ({ - BlockUserModal: ({ username, onClose, onBlocked }: any) => ( -
- {username} - - -
+ ) : null ), -})) - -vi.mock('@/components/UI/ReportModal', () => ({ - ReportModal: ({ username, onClose, onSpamSelected }: any) => ( -
- {username} - - +})); + +vi.mock("@/components/UI/BlockModal", () => ({ + BlockUserModal: ({ userId, username, onClose, onBlocked }: any) => ( +
+ +
), -})) - -// ─── Factories ──────────────────────────────────────────────────────────────── +})); -const NOW = new Date().toISOString() +vi.mock("@/components/UI/ReportModal", () => ({ + ReportModal: ({ userId, username, onClose, onSpamSelected }: any) => ( +
+ + +
+ ), +})); -// NotificationActor uses `avatar`, not `profile_picture` -const defaultActor = { - id: 'user-1', - username: 'johndoe', - display_name: 'John Doe', - avatar: null as string | null, +vi.mock("@/components/UI/SpamModal", () => ({ + SpamModal: ({ userId, username, onClose }: any) => ( +
+ +
+ ), +})); + +import NotificationCard from "@/components/notificationsComponents/notificationCard"; +import { fetchFollowStatus } from "@/services/api/notifications/notificationsAPI"; + +const mockFetchFollowStatus = fetchFollowStatus as ReturnType; + +function notification(overrides: Partial = {}): Notification { + return { + id: "n1", + type: "follow", + actor: { + id: "u1", + username: "alice", + display_name: "Alice", + avatar: "avatar.png", + }, + resource_type: "track", + resource_id: "track-1", + resource_details: { title: "Blue Song", content: "Nice!" }, + is_read: false, + created_at: new Date(Date.now() - 5 * 60_000).toISOString(), + ...overrides, + }; } -// Helper to build a typed NotificationResourceDetails -const makeResource = (overrides: Partial = {}): NotificationResourceDetails => ({ - title: undefined, - content: undefined, - ...overrides, -}) - -// Notification uses resource_type, resource_id, resource_details — not `resource` -const makeNotification = (overrides: Partial = {}): Notification => ({ - id: 'notif-1', - type: 'follow', - is_read: false, - created_at: NOW, - actor: defaultActor, - resource_type: null, - resource_id: null, - resource_details: null, - ...overrides, -}) - -const renderCard = (notification: Notification, showActions = true) => - render( +function renderCard(n = notification(), props: Partial> = {}) { + return render( - + , - ) - -// ─── Tests ──────────────────────────────────────────────────────────────────── + ); +} -describe('NotificationCard', () => { +describe("NotificationCard", () => { beforeEach(() => { - mockNavigate.mockReset() - vi.useFakeTimers() - vi.setSystemTime(new Date('2024-01-01T12:00:00Z')) - }) + vi.clearAllMocks(); + vi.spyOn(Date, "now").mockReturnValue(new Date("2026-05-01T12:00:00.000Z").getTime()); + mockFetchFollowStatus.mockResolvedValue({ + data: { + is_following: true, + is_followed_by: false, + is_blocking: false, + is_blocked_by: false, + }, + }); + mockMarkOneAsRead.mockResolvedValue({}); + }); afterEach(() => { - vi.useRealTimers() - }) - - // ── Static rendering ────────────────────────────────────────────────────── - - describe('rendering', () => { - it('renders the notification card root', () => { - renderCard(makeNotification()) - expect(screen.getByTestId('notification-card-notif-1')).toBeInTheDocument() - }) - - it('renders the actor display name', () => { - renderCard(makeNotification()) - expect(screen.getByTestId('notification-username-notif-1')).toHaveTextContent('John Doe') - }) - - it('renders the time element', () => { - renderCard(makeNotification()) - expect(screen.getByTestId('notification-time-notif-1')).toBeInTheDocument() - }) - - it('renders avatar wrapper', () => { - renderCard(makeNotification()) - expect(screen.getByTestId('notification-avatar-notif-1')).toBeInTheDocument() - }) - }) - - // ── Avatar ──────────────────────────────────────────────────────────────── - - describe('avatar', () => { - it('renders avatar image when avatar is provided', () => { - const n = makeNotification({ - actor: { ...defaultActor, avatar: 'https://example.com/pic.jpg' }, - }) - renderCard(n) - expect(screen.getByTestId('notification-avatar-img-notif-1')).toHaveAttribute( - 'src', - 'https://example.com/pic.jpg', - ) - }) - - it('renders fallback icon when avatar is null', () => { - renderCard(makeNotification()) - expect(screen.getByTestId('notification-avatar-fallback-notif-1')).toBeInTheDocument() - }) - - it('shows unread dot overlay when is_read is false', () => { - renderCard(makeNotification({ is_read: false })) - const avatar = screen.getByTestId('notification-avatar-notif-1') - expect(avatar.querySelector('.bg-red-500')).toBeInTheDocument() - }) - - it('does NOT show unread dot when is_read is true', () => { - renderCard(makeNotification({ is_read: true })) - const avatar = screen.getByTestId('notification-avatar-notif-1') - expect(avatar.querySelector('.bg-red-500')).not.toBeInTheDocument() - }) - }) - - // ── Action text ─────────────────────────────────────────────────────────── - - describe('buildActionText', () => { - it('renders "started following you" for follow type', () => { - renderCard(makeNotification({ type: 'follow' })) - expect(screen.getByTestId('notification-action-text-notif-1')).toHaveTextContent( - 'started following you', - ) - }) - - it('renders liked text with track title for like type', () => { - renderCard( - makeNotification({ type: 'like', resource_details: makeResource({ title: 'My Song' }) }), - ) - expect(screen.getByTestId('notification-action-text-notif-1')).toHaveTextContent( - 'liked your track "My Song"', - ) - }) - - it('falls back to resource id when title is undefined for like type', () => { - renderCard( - makeNotification({ type: 'like', resource_id: 'track-42', resource_details: makeResource({ title: undefined }) }), - ) - expect(screen.getByTestId('notification-action-text-notif-1')).toHaveTextContent( - 'liked your track "track-42"', - ) - }) - - it('renders reposted text with track title for repost type', () => { - renderCard( - makeNotification({ type: 'repost', resource_details: makeResource({ title: 'My Song' }) }), - ) - expect(screen.getByTestId('notification-action-text-notif-1')).toHaveTextContent( - 'reposted your track "My Song"', - ) - }) - - it('falls back to resource id when title is undefined for repost type', () => { - renderCard( - makeNotification({ type: 'repost', resource_id: 'track-7', resource_details: makeResource({ title: undefined }) }), - ) - expect(screen.getByTestId('notification-action-text-notif-1')).toHaveTextContent( - 'reposted your track "track-7"', - ) - }) - - it('renders comment text with body for comment type', () => { - renderCard( - makeNotification({ type: 'comment', resource_details: makeResource({ content: 'Great track!' }) }), - ) - expect(screen.getByTestId('notification-action-text-notif-1')).toHaveTextContent( - 'commented "Great track!" on your track', - ) - }) - - // ── ?? '' fallback branches ─────────────────────────────────────────── - - it('falls back to empty string when resource_details is null for like type', () => { - renderCard(makeNotification({ type: 'like', resource_details: null })) - expect(screen.getByTestId('notification-action-text-notif-1')).toHaveTextContent( - 'liked your track ""', - ) - }) - - it('falls back to empty string when resource_details is null for repost type', () => { - renderCard(makeNotification({ type: 'repost', resource_details: null })) - expect(screen.getByTestId('notification-action-text-notif-1')).toHaveTextContent( - 'reposted your track ""', - ) - }) - - it('falls back to empty string when content is undefined for comment type', () => { - renderCard( - makeNotification({ type: 'comment', resource_details: makeResource({ content: undefined }) }), - ) - expect(screen.getByTestId('notification-action-text-notif-1')).toHaveTextContent( - 'commented "" on your track', - ) - }) - - it('falls back to empty string when resource_details is null for comment type', () => { - renderCard(makeNotification({ type: 'comment', resource_details: null })) - expect(screen.getByTestId('notification-action-text-notif-1')).toHaveTextContent( - 'commented "" on your track', - ) - }) - - it('renders empty string for unknown type', () => { - renderCard(makeNotification({ type: 'unknown' as any })) - expect(screen.getByTestId('notification-action-text-notif-1')).toHaveTextContent('') - }) - }) - - // ── Relative time ───────────────────────────────────────────────────────── - - describe('formatRelativeTime', () => { - it('shows minutes ago for recent notifications', () => { - const createdAt = new Date('2024-01-01T11:45:00Z').toISOString() - renderCard(makeNotification({ created_at: createdAt })) - expect(screen.getByTestId('notification-time-notif-1')).toHaveTextContent('15 minutes ago') - }) - - it('shows singular hour for exactly 1 hour ago', () => { - const createdAt = new Date('2024-01-01T11:00:00Z').toISOString() - renderCard(makeNotification({ created_at: createdAt })) - expect(screen.getByTestId('notification-time-notif-1')).toHaveTextContent('1 hour ago') - }) - - it('shows plural hours for 2+ hours ago', () => { - const createdAt = new Date('2024-01-01T10:00:00Z').toISOString() - renderCard(makeNotification({ created_at: createdAt })) - expect(screen.getByTestId('notification-time-notif-1')).toHaveTextContent('2 hours ago') - }) - - it('shows singular day for exactly 1 day ago', () => { - const createdAt = new Date('2023-12-31T12:00:00Z').toISOString() - renderCard(makeNotification({ created_at: createdAt })) - expect(screen.getByTestId('notification-time-notif-1')).toHaveTextContent('1 day ago') - }) - - it('shows plural days for 2+ days ago', () => { - const createdAt = new Date('2023-12-30T12:00:00Z').toISOString() - renderCard(makeNotification({ created_at: createdAt })) - expect(screen.getByTestId('notification-time-notif-1')).toHaveTextContent('2 days ago') - }) - }) - - // ── Navigation ──────────────────────────────────────────────────────────── - - describe('navigation', () => { - beforeEach(() => { - vi.useRealTimers() - }) - it('navigates to user profile on click for follow notifications', async () => { - renderCard(makeNotification({ type: 'follow' })) - fireEvent.click(screen.getByTestId('notification-card-notif-1')) - await waitFor(() => expect(mockNavigate).toHaveBeenCalledWith('/johndoe')) - }) - - it('navigates to track page on click for like notifications', async () => { - renderCard(makeNotification({ type: 'like', resource_id: 'track-99' })) - fireEvent.click(screen.getByTestId('notification-card-notif-1')) - await waitFor(() => expect(mockNavigate).toHaveBeenCalledWith('/tracks/track-99')) - }) - - it('navigates to track page on click for comment notifications', async () => { - renderCard(makeNotification({ type: 'comment', resource_id: 'track-5' })) - fireEvent.click(screen.getByTestId('notification-card-notif-1')) - await waitFor(() => expect(mockNavigate).toHaveBeenCalledWith('/tracks/track-5')) - }) - - it('navigates to track page on click for repost notifications', async () => { - renderCard(makeNotification({ type: 'repost', resource_id: 'track-8', resource_details: makeResource({ title: 'Remix' }) })) - fireEvent.click(screen.getByTestId('notification-card-notif-1')) - await waitFor(() => expect(mockNavigate).toHaveBeenCalledWith('/tracks/track-8')) - }) - }) - - // ── Follow button ───────────────────────────────────────────────────────── - - describe('FollowButton', () => { - it('renders FollowButton for follow type', () => { - renderCard(makeNotification({ type: 'follow' })) - expect(screen.getByTestId('follow-btn-johndoe')).toBeInTheDocument() - }) - - it('does NOT render FollowButton for like type', () => { - renderCard(makeNotification({ type: 'like', resource_details: makeResource({ title: 'S' }) })) - expect(screen.queryByTestId('follow-btn-johndoe')).not.toBeInTheDocument() - }) - }) - - // ── 3-dots menu ─────────────────────────────────────────────────────────── - - describe('3-dots dropdown menu', () => { - it('renders the 3-dots menu button when showActions is true', () => { - renderCard(makeNotification()) - expect(screen.getByTestId('notification-menu-btn-notif-1')).toBeInTheDocument() - }) - - it('does NOT render the 3-dots button when showActions is false', () => { - renderCard(makeNotification(), false) - expect(screen.queryByTestId('notification-menu-btn-notif-1')).not.toBeInTheDocument() - }) - - it('menu is hidden by default', () => { - renderCard(makeNotification()) - expect(screen.queryByTestId('notification-menu-notif-1')).not.toBeInTheDocument() - }) - - it('opens the dropdown when 3-dots button is clicked', () => { - renderCard(makeNotification()) - fireEvent.click(screen.getByTestId('notification-menu-btn-notif-1')) - expect(screen.getByTestId('notification-menu-notif-1')).toBeInTheDocument() - }) - - it('toggles the dropdown closed on second click', () => { - renderCard(makeNotification()) - const btn = screen.getByTestId('notification-menu-btn-notif-1') - fireEvent.click(btn) - fireEvent.click(btn) - expect(screen.queryByTestId('notification-menu-notif-1')).not.toBeInTheDocument() - }) - - it('shows block and report buttons in the dropdown', () => { - renderCard(makeNotification()) - fireEvent.click(screen.getByTestId('notification-menu-btn-notif-1')) - expect(screen.getByTestId('notification-block-btn-notif-1')).toBeInTheDocument() - expect(screen.getByTestId('notification-report-btn-notif-1')).toBeInTheDocument() - }) - - it('clicking the actions area does NOT propagate to the card row (no navigation)', () => { - renderCard(makeNotification({ type: 'follow' })) - fireEvent.click(screen.getByTestId('notification-actions-notif-1')) - expect(mockNavigate).not.toHaveBeenCalled() - }) - }) - - // ── Block modal ─────────────────────────────────────────────────────────── - - describe('Block modal', () => { - it('opens block modal when block button is clicked', () => { - renderCard(makeNotification()) - fireEvent.click(screen.getByTestId('notification-menu-btn-notif-1')) - fireEvent.click(screen.getByTestId('notification-block-btn-notif-1')) - expect(screen.getByTestId('block-modal')).toBeInTheDocument() - }) - - it('closes menu when block button is clicked', () => { - renderCard(makeNotification()) - fireEvent.click(screen.getByTestId('notification-menu-btn-notif-1')) - fireEvent.click(screen.getByTestId('notification-block-btn-notif-1')) - expect(screen.queryByTestId('notification-menu-notif-1')).not.toBeInTheDocument() - }) - - it('closes block modal via onClose callback', () => { - renderCard(makeNotification()) - fireEvent.click(screen.getByTestId('notification-menu-btn-notif-1')) - fireEvent.click(screen.getByTestId('notification-block-btn-notif-1')) - fireEvent.click(screen.getByText('close')) - expect(screen.queryByTestId('block-modal')).not.toBeInTheDocument() - }) - - it('closes block modal via onBlocked callback', () => { - renderCard(makeNotification()) - fireEvent.click(screen.getByTestId('notification-menu-btn-notif-1')) - fireEvent.click(screen.getByTestId('notification-block-btn-notif-1')) - fireEvent.click(screen.getByText('blocked')) - expect(screen.queryByTestId('block-modal')).not.toBeInTheDocument() - }) - - // ── Covers line 169: Modal onClose={() => setIsBlockOpen(false)} ────── - it('closes block modal via Modal backdrop onClose (covers line 169)', () => { - renderCard(makeNotification()) - fireEvent.click(screen.getByTestId('notification-menu-btn-notif-1')) - fireEvent.click(screen.getByTestId('notification-block-btn-notif-1')) - expect(screen.getByTestId('block-modal')).toBeInTheDocument() - // Trigger the onClose prop passed to directly (the backdrop close) - fireEvent.click(screen.getByTestId('modal-backdrop-close')) - expect(screen.queryByTestId('block-modal')).not.toBeInTheDocument() - }) - }) - - // ── Report modal ────────────────────────────────────────────────────────── - - describe('Report modal', () => { - it('opens report modal when report button is clicked', () => { - renderCard(makeNotification()) - fireEvent.click(screen.getByTestId('notification-menu-btn-notif-1')) - fireEvent.click(screen.getByTestId('notification-report-btn-notif-1')) - expect(screen.getByTestId('report-modal')).toBeInTheDocument() - }) - - it('closes menu when report button is clicked', () => { - renderCard(makeNotification()) - fireEvent.click(screen.getByTestId('notification-menu-btn-notif-1')) - fireEvent.click(screen.getByTestId('notification-report-btn-notif-1')) - expect(screen.queryByTestId('notification-menu-notif-1')).not.toBeInTheDocument() - }) - - it('closes report modal via onClose callback', () => { - renderCard(makeNotification()) - fireEvent.click(screen.getByTestId('notification-menu-btn-notif-1')) - fireEvent.click(screen.getByTestId('notification-report-btn-notif-1')) - fireEvent.click(screen.getByText('close')) - expect(screen.queryByTestId('report-modal')).not.toBeInTheDocument() - }) - - it('closes report modal via onSpamSelected callback', () => { - renderCard(makeNotification()) - fireEvent.click(screen.getByTestId('notification-menu-btn-notif-1')) - fireEvent.click(screen.getByTestId('notification-report-btn-notif-1')) - fireEvent.click(screen.getByText('spam')) - expect(screen.queryByTestId('report-modal')).not.toBeInTheDocument() - }) - - // ── Covers line 179: Modal onClose={() => setIsReportOpen(false)} ───── - it('closes report modal via Modal backdrop onClose (covers line 179)', () => { - renderCard(makeNotification()) - fireEvent.click(screen.getByTestId('notification-menu-btn-notif-1')) - fireEvent.click(screen.getByTestId('notification-report-btn-notif-1')) - expect(screen.getByTestId('report-modal')).toBeInTheDocument() - // Trigger the onClose prop passed to directly (the backdrop close) - fireEvent.click(screen.getByTestId('modal-backdrop-close')) - expect(screen.queryByTestId('report-modal')).not.toBeInTheDocument() - }) - }) -}) \ No newline at end of file + vi.restoreAllMocks(); + }); + + it("renders actor avatar, name, unread marker, action text, and relative time", async () => { + renderCard(notification({ created_at: new Date(Date.now() - 5 * 60_000).toISOString() })); + + expect(screen.getByTestId("notification-card-n1")).toBeInTheDocument(); + expect(screen.getByTestId("notification-username-n1")).toHaveTextContent("Alice"); + expect(screen.getByTestId("notification-action-text-n1")).toHaveTextContent("started following you"); + expect(screen.getByTestId("notification-time-n1")).toHaveTextContent("5 minutes ago"); + expect(screen.getByTestId("user-avatar")).toHaveAttribute("data-src", "avatar.png"); + expect(await screen.findByTestId("follow-button")).toHaveAttribute("data-following", "true"); + }); + + it.each([ + ["like", "liked your track \"Blue Song\""], + ["repost", "reposted your track \"Blue Song\""], + ["comment", "commented \"Nice!\" on your track"], + ["new_post_by_followed", "posted a new track"], + ] as Array<[Notification["type"], string]>)("renders %s notification text", (type, text) => { + renderCard(notification({ type })); + expect(screen.getByTestId("notification-action-text-n1")).toHaveTextContent(text); + }); + + it.each([ + [30_000, "just now"], + [2 * 60 * 60_000, "2 hours ago"], + [2 * 24 * 60 * 60_000, "2 days ago"], + ])("formats a %s ms old notification as %s", (age, text) => { + renderCard(notification({ created_at: new Date(Date.now() - age).toISOString() })); + expect(screen.getByTestId("notification-time-n1")).toHaveTextContent(text); + }); + + it("marks unread notifications as read and navigates to a follower profile", async () => { + const onMarkRead = vi.fn(); + const user = userEvent.setup(); + renderCard(notification(), { onMarkRead }); + + await user.click(screen.getByTestId("notification-card-n1")); + + expect(mockMarkOneAsRead).toHaveBeenCalledWith("n1"); + expect(onMarkRead).toHaveBeenCalledWith("n1"); + expect(mockNavigate).toHaveBeenCalledWith("/alice"); + }); + + it("still navigates if marking as read fails", async () => { + const user = userEvent.setup(); + mockMarkOneAsRead.mockRejectedValueOnce(new Error("nope")); + renderCard(notification({ type: "like", resource_type: "track", resource_id: "t99" })); + + await user.click(screen.getByTestId("notification-card-n1")); + + expect(mockNavigate).toHaveBeenCalledWith("/track/t99"); + }); + + it("navigates playlist notifications to the actor sets page and skips read calls when already read", async () => { + const user = userEvent.setup(); + renderCard(notification({ is_read: true, type: "like", resource_type: "playlist", resource_id: "p1" })); + + await user.click(screen.getByTestId("notification-card-n1")); + + expect(mockMarkOneAsRead).not.toHaveBeenCalled(); + expect(mockNavigate).toHaveBeenCalledWith("/alice/sets/p1"); + }); + + it("opens block, report, spam, and close flows from the menu", async () => { + const user = userEvent.setup(); + renderCard(notification()); + + await user.click(screen.getByTestId("notification-menu-btn-n1")); + await waitFor(() => expect(screen.getByTestId("notification-block-btn-n1")).not.toBeDisabled()); + await user.click(screen.getByTestId("notification-block-btn-n1")); + expect(screen.getByTestId("block-modal")).toBeInTheDocument(); + + await user.click(screen.getByTestId("block-confirm")); + expect(screen.queryByTestId("block-modal")).not.toBeInTheDocument(); + + await user.click(screen.getByTestId("notification-menu-btn-n1")); + await user.click(screen.getByTestId("notification-report-btn-n1")); + expect(screen.getByTestId("report-modal")).toBeInTheDocument(); + + await user.click(screen.getByTestId("report-spam")); + expect(screen.queryByTestId("report-modal")).not.toBeInTheDocument(); + expect(screen.getByTestId("spam-modal")).toBeInTheDocument(); + }); + + it("closes each modal from its own close callback", async () => { + const user = userEvent.setup(); + renderCard(notification()); + + await user.click(screen.getByTestId("notification-menu-btn-n1")); + await waitFor(() => expect(screen.getByTestId("notification-block-btn-n1")).not.toBeDisabled()); + await user.click(screen.getByTestId("notification-block-btn-n1")); + expect(screen.getByTestId("block-modal")).toBeInTheDocument(); + await user.click(screen.getByTestId("block-close")); + expect(screen.queryByTestId("block-modal")).not.toBeInTheDocument(); + + await user.click(screen.getByTestId("notification-menu-btn-n1")); + await user.click(screen.getByTestId("notification-report-btn-n1")); + expect(screen.getByTestId("report-modal")).toBeInTheDocument(); + await user.click(screen.getByTestId("report-close")); + expect(screen.queryByTestId("report-modal")).not.toBeInTheDocument(); + + await user.click(screen.getByTestId("notification-menu-btn-n1")); + await user.click(screen.getByTestId("notification-report-btn-n1")); + await user.click(screen.getByTestId("report-spam")); + expect(screen.getByTestId("spam-modal")).toBeInTheDocument(); + await user.click(screen.getByTestId("spam-close")); + expect(screen.queryByTestId("spam-modal")).not.toBeInTheDocument(); + }); + + it("closes each modal from the shared modal onClose callback", async () => { + const user = userEvent.setup(); + renderCard(notification()); + + await user.click(screen.getByTestId("notification-menu-btn-n1")); + await waitFor(() => expect(screen.getByTestId("notification-block-btn-n1")).not.toBeDisabled()); + await user.click(screen.getByTestId("notification-block-btn-n1")); + await user.click(screen.getByTestId("modal-close")); + expect(screen.queryByTestId("block-modal")).not.toBeInTheDocument(); + + await user.click(screen.getByTestId("notification-menu-btn-n1")); + await user.click(screen.getByTestId("notification-report-btn-n1")); + await user.click(screen.getByTestId("modal-close")); + expect(screen.queryByTestId("report-modal")).not.toBeInTheDocument(); + + await user.click(screen.getByTestId("notification-menu-btn-n1")); + await user.click(screen.getByTestId("notification-report-btn-n1")); + await user.click(screen.getByTestId("report-spam")); + await user.click(screen.getByTestId("modal-close")); + expect(screen.queryByTestId("spam-modal")).not.toBeInTheDocument(); + }); + + it("uses fallback resource text when title and content are missing", () => { + renderCard(notification({ + type: "comment", + resource_type: null, + resource_id: "fallback-id", + resource_details: null, + })); + + expect(screen.getByTestId("notification-action-text-n1")).toHaveTextContent('commented "" on your track'); + }); + + it("renders empty action text for unknown notification types", () => { + renderCard(notification({ type: "mystery" as Notification["type"] })); + expect(screen.getByTestId("notification-action-text-n1")).toHaveTextContent(""); + }); + + it("unblocks directly when the actor is already blocked", async () => { + const user = userEvent.setup(); + mockFetchFollowStatus.mockResolvedValueOnce({ + data: { + is_following: false, + is_followed_by: false, + is_blocking: true, + is_blocked_by: false, + }, + }); + + renderCard(notification()); + + await user.click(screen.getByTestId("notification-menu-btn-n1")); + await waitFor(() => expect(screen.getByTestId("notification-block-btn-n1")).toHaveTextContent("Unblock Alice")); + await user.click(screen.getByTestId("notification-block-btn-n1")); + + await user.click(screen.getByTestId("notification-menu-btn-n1")); + expect(screen.getByTestId("notification-block-btn-n1")).toHaveTextContent("Block Alice"); + }); + + it("hides actions when showActions is false and handles follow-status failure", async () => { + mockFetchFollowStatus.mockRejectedValueOnce(new Error("nope")); + renderCard(notification(), { showActions: false }); + + expect(screen.queryByTestId("notification-menu-btn-n1")).not.toBeInTheDocument(); + expect(await screen.findByTestId("follow-button")).toHaveAttribute("data-following", "false"); + }); + + it("does not fetch follow status when the actor has no id", () => { + renderCard(notification({ actor: { id: "", username: "ghost", display_name: "Ghost", avatar: null } })); + expect(mockFetchFollowStatus).not.toHaveBeenCalled(); + }); +}); diff --git a/src/components/notificationsComponents/tests/notificationHeader.test.tsx b/src/components/notificationsComponents/tests/notificationHeader.test.tsx index 0e7f1cb2..9a6ac82b 100644 --- a/src/components/notificationsComponents/tests/notificationHeader.test.tsx +++ b/src/components/notificationsComponents/tests/notificationHeader.test.tsx @@ -1,158 +1,63 @@ -import { describe, it, expect, vi, beforeEach } from 'vitest' -import { render, screen, fireEvent } from '@testing-library/react' -import NotificationHeader, { type FilterType } from '../notificationHeader' - -// ─── Helpers ────────────────────────────────────────────────────────────────── - -const renderHeader = (selectedType: FilterType = 'all', onTypeChange = vi.fn()) => - render() - -// ─── Tests ──────────────────────────────────────────────────────────────────── - -describe('NotificationHeader', () => { - - // ── Static rendering ────────────────────────────────────────────────────── - - describe('rendering', () => { - it('renders the page title', () => { - renderHeader() - expect(screen.getByTestId('notification-header-title')).toHaveTextContent('Notifications') - }) - - it('renders the filter dropdown button', () => { - renderHeader() - expect(screen.getByTestId('notification-filter-btn')).toBeInTheDocument() - }) - - it('renders data-test attribute on root', () => { - renderHeader() - expect(screen.getByTestId('notification-header')).toBeInTheDocument() - }) - - it('does NOT show the filter menu by default (closed state)', () => { - renderHeader() - expect(screen.queryByTestId('notification-filter-menu')).not.toBeInTheDocument() - }) - }) - - // ── Button label reflects selectedType ──────────────────────────────────── - - describe('selected label', () => { - const cases: [FilterType, string][] = [ - ['all', 'All notifications'], - ['like', 'Likes'], - ['comment', 'Comments'], - ['repost', 'Reposts'], - ['follow', 'Follows'], - ] - - it.each(cases)('shows "%s" label when selectedType is "%s"', (type, label) => { - renderHeader(type) - expect(screen.getByTestId('notification-filter-btn')).toHaveTextContent(label) - }) - }) - - // ── Dropdown open / close ───────────────────────────────────────────────── - - describe('dropdown toggle', () => { - it('opens the menu when the button is clicked', () => { - renderHeader() - fireEvent.click(screen.getByTestId('notification-filter-btn')) - expect(screen.getByTestId('notification-filter-menu')).toBeInTheDocument() - }) - - it('closes the menu when the button is clicked again', () => { - renderHeader() - const btn = screen.getByTestId('notification-filter-btn') - fireEvent.click(btn) // open - fireEvent.click(btn) // close - expect(screen.queryByTestId('notification-filter-menu')).not.toBeInTheDocument() - }) - - it('renders all 5 filter options when open', () => { - renderHeader() - fireEvent.click(screen.getByTestId('notification-filter-btn')) - - const options: FilterType[] = ['all', 'like', 'comment', 'repost', 'follow'] - options.forEach(value => { - expect(screen.getByTestId(`notification-filter-option-${value}`)).toBeInTheDocument() - }) - }) - - it('renders correct labels for each option', () => { - renderHeader() - fireEvent.click(screen.getByTestId('notification-filter-btn')) - - const expected: [FilterType, string][] = [ - ['all', 'All notifications'], - ['like', 'Likes'], - ['comment', 'Comments'], - ['repost', 'Reposts'], - ['follow', 'Follows'], - ] - expected.forEach(([value, label]) => { - expect(screen.getByTestId(`notification-filter-option-${value}`)).toHaveTextContent(label) - }) - }) - }) - - // ── Option selection ────────────────────────────────────────────────────── - - describe('option selection', () => { - it('calls onTypeChange with the selected value', () => { - const onTypeChange = vi.fn() - renderHeader('all', onTypeChange) - fireEvent.click(screen.getByTestId('notification-filter-btn')) - fireEvent.click(screen.getByTestId('notification-filter-option-like')) - expect(onTypeChange).toHaveBeenCalledWith('like') - }) - - it('calls onTypeChange exactly once per click', () => { - const onTypeChange = vi.fn() - renderHeader('all', onTypeChange) - fireEvent.click(screen.getByTestId('notification-filter-btn')) - fireEvent.click(screen.getByTestId('notification-filter-option-comment')) - expect(onTypeChange).toHaveBeenCalledTimes(1) - }) - - it('closes the menu after selecting an option', () => { - renderHeader() - fireEvent.click(screen.getByTestId('notification-filter-btn')) - fireEvent.click(screen.getByTestId('notification-filter-option-repost')) - expect(screen.queryByTestId('notification-filter-menu')).not.toBeInTheDocument() - }) - - it('calls onTypeChange with "follow" when follow option is clicked', () => { - const onTypeChange = vi.fn() - renderHeader('all', onTypeChange) - fireEvent.click(screen.getByTestId('notification-filter-btn')) - fireEvent.click(screen.getByTestId('notification-filter-option-follow')) - expect(onTypeChange).toHaveBeenCalledWith('follow') - }) - - it('calls onTypeChange with "all" when all option is clicked', () => { - const onTypeChange = vi.fn() - renderHeader('like', onTypeChange) - fireEvent.click(screen.getByTestId('notification-filter-btn')) - fireEvent.click(screen.getByTestId('notification-filter-option-all')) - expect(onTypeChange).toHaveBeenCalledWith('all') - }) - }) - - // ── Active option styling ───────────────────────────────────────────────── - - describe('active option highlight', () => { - it('applies orange text to the currently selected option', () => { - renderHeader('like') - fireEvent.click(screen.getByTestId('notification-filter-btn')) - expect(screen.getByTestId('notification-filter-option-like')).toHaveClass('text-orange-500') - }) - - it('does NOT apply orange text to unselected options', () => { - renderHeader('like') - fireEvent.click(screen.getByTestId('notification-filter-btn')) - expect(screen.getByTestId('notification-filter-option-all')).not.toHaveClass('text-orange-500') - expect(screen.getByTestId('notification-filter-option-comment')).not.toHaveClass('text-orange-500') - }) - }) -}) +import { describe, it, expect, vi, beforeEach } from "vitest"; +import { render, screen } from "@testing-library/react"; +import userEvent from "@testing-library/user-event"; +import NotificationHeader, { type FilterType } from "@/components/notificationsComponents/notificationHeader"; + +describe("NotificationHeader", () => { + const onTypeChange = vi.fn(); + + beforeEach(() => { + vi.clearAllMocks(); + }); + + it("renders the title and selected filter label", () => { + render(); + + expect(screen.getByTestId("notification-header")).toBeInTheDocument(); + expect(screen.getByTestId("notification-header-title")).toHaveTextContent("Notifications"); + expect(screen.getByTestId("notification-filter-btn")).toHaveTextContent("All notifications"); + expect(screen.queryByTestId("notification-filter-menu")).not.toBeInTheDocument(); + }); + + it.each([ + ["like", "Likes"], + ["comment", "Comments"], + ["repost", "Reposts"], + ["follow", "Follows"], + ] as Array<[FilterType, string]>)("shows the %s selected label", (selectedType, label) => { + render(); + expect(screen.getByTestId("notification-filter-btn")).toHaveTextContent(label); + }); + + it("opens and closes the dropdown from the filter button", async () => { + const user = userEvent.setup(); + render(); + + await user.click(screen.getByTestId("notification-filter-btn")); + expect(screen.getByTestId("notification-filter-menu")).toBeInTheDocument(); + + await user.click(screen.getByTestId("notification-filter-btn")); + expect(screen.queryByTestId("notification-filter-menu")).not.toBeInTheDocument(); + }); + + it("calls onTypeChange and closes the menu when an option is selected", async () => { + const user = userEvent.setup(); + render(); + + await user.click(screen.getByTestId("notification-filter-btn")); + await user.click(screen.getByTestId("notification-filter-option-comment")); + + expect(onTypeChange).toHaveBeenCalledWith("comment"); + expect(screen.queryByTestId("notification-filter-menu")).not.toBeInTheDocument(); + }); + + it("marks the selected option visually", async () => { + const user = userEvent.setup(); + render(); + + await user.click(screen.getByTestId("notification-filter-btn")); + + expect(screen.getByTestId("notification-filter-option-follow")).toHaveClass("text-orange-500"); + expect(screen.getByTestId("notification-filter-option-like")).toHaveClass("text-white"); + }); +}); diff --git a/src/pages/search/SearchPage.tsx b/src/pages/search/SearchPage.tsx index a66a5ae4..70dceb67 100644 --- a/src/pages/search/SearchPage.tsx +++ b/src/pages/search/SearchPage.tsx @@ -163,7 +163,7 @@ function EverythingResults({ q }: { q: string }) { observer.observe(sentinel); return () => observer.disconnect(); - }, [fetchPage]); + }, [fetchPage, items.length]); // Keep hasMoreRef in sync useEffect(() => { @@ -323,4 +323,4 @@ export default function SearchPage() {
); -} \ No newline at end of file +} diff --git a/src/pages/search/albums/AlbumsPage.tsx b/src/pages/search/albums/AlbumsPage.tsx index f3281f4a..19b0a6a4 100644 --- a/src/pages/search/albums/AlbumsPage.tsx +++ b/src/pages/search/albums/AlbumsPage.tsx @@ -98,6 +98,10 @@ export default function AlbumsPage() { hasMoreRef.current = albums.length < total; }, [albums.length, total]); + useEffect(() => { + return () => setFilters(null); + }, []); + // ── Empty query ─────────────────────────────────────────────────────────── if (!q.trim()) { return ( @@ -122,10 +126,6 @@ export default function AlbumsPage() { ); } - useEffect(() => { - return () => setFilters(null); -}, []); - // ── Render ──────────────────────────────────────────────────────────────── return (
@@ -168,4 +168,4 @@ export default function AlbumsPage() {
); -} \ No newline at end of file +} diff --git a/src/pages/search/people/PeoplePage.tsx b/src/pages/search/people/PeoplePage.tsx index 537d9aa1..8c2f4232 100644 --- a/src/pages/search/people/PeoplePage.tsx +++ b/src/pages/search/people/PeoplePage.tsx @@ -122,6 +122,10 @@ export default function PeoplePage() { hasMoreRef.current = users.length < total; }, [users.length, total]); + useEffect(() => { + return () => setFilters(null); + }, []); + // ── Empty query ─────────────────────────────────────────────────────────── if (!q.trim()) { return ( @@ -146,9 +150,6 @@ export default function PeoplePage() { ); } - useEffect(() => { - return () => setFilters(null); -}, []); // ── Render ──────────────────────────────────────────────────────────────── return (
@@ -199,4 +200,4 @@ export default function PeoplePage() {
); -} \ No newline at end of file +} diff --git a/src/pages/search/sets/SetsPage.tsx b/src/pages/search/sets/SetsPage.tsx index 4eeb6781..c64364e7 100644 --- a/src/pages/search/sets/SetsPage.tsx +++ b/src/pages/search/sets/SetsPage.tsx @@ -98,6 +98,10 @@ export default function SetsPage() { hasMoreRef.current = playlists.length < total; }, [playlists.length, total]); + useEffect(() => { + return () => setFilters(null); + }, []); + if (!q.trim()) { return (
@@ -120,10 +124,6 @@ export default function SetsPage() { ); } - useEffect(() => { - return () => setFilters(null); -}, []); - return (
@@ -165,4 +165,4 @@ export default function SetsPage() {
); -} \ No newline at end of file +} diff --git a/src/pages/search/sounds/SoundsPage.tsx b/src/pages/search/sounds/SoundsPage.tsx index 29b72a51..ec43c521 100644 --- a/src/pages/search/sounds/SoundsPage.tsx +++ b/src/pages/search/sounds/SoundsPage.tsx @@ -100,6 +100,10 @@ export default function SoundsPage() { hasMoreRef.current = tracks.length < total; }, [tracks.length, total]); + useEffect(() => { + return () => setFilters(null); + }, []); + // ── Empty query ─────────────────────────────────────────────────────────── if (!q.trim()) { return ( @@ -124,10 +128,6 @@ export default function SoundsPage() { ); } - useEffect(() => { - return () => setFilters(null); -}, []); - // ── Render ──────────────────────────────────────────────────────────────── return (
@@ -177,4 +177,4 @@ export default function SoundsPage() {
); -} \ No newline at end of file +} diff --git a/src/pages/social/messages/ModalNewMessageBody.tsx b/src/pages/social/messages/ModalNewMessageBody.tsx index 56ed3e7e..9cd4cbdb 100644 --- a/src/pages/social/messages/ModalNewMessageBody.tsx +++ b/src/pages/social/messages/ModalNewMessageBody.tsx @@ -32,6 +32,8 @@ const ModalNewMessageBody = ({ const [messageError, setMessageError] = useState(null) const handleSend = async () => { + if (isSending) return + let hasError = false if (!selected) { @@ -53,14 +55,16 @@ const ModalNewMessageBody = ({ try { let conversation: Conversation | null = null let firstMessage: Message | null = null + let responseConversationId: string | undefined if (embeds.length === 0) { const res = await startConversation({ recipient_id: selected!.id, body: message.trim(), }) - const typed = res as { data?: { conversation?: Conversation; message?: Message } } + const typed = res as { data?: { conversation?: Conversation; conversation_id?: string; message?: Message } } conversation = typed.data?.conversation ?? null + responseConversationId = typed.data?.conversation_id firstMessage = typed.data?.message ?? null } else { const firstRes = await startConversation({ @@ -68,11 +72,16 @@ const ModalNewMessageBody = ({ ...(message.trim() ? { body: message.trim() } : {}), resource: { type: embeds[0].type, id: embeds[0].id }, }) - const typed = firstRes as { data?: { conversation?: Conversation; message?: Message } } + const typed = firstRes as { data?: { conversation?: Conversation; conversation_id?: string; message?: Message } } conversation = typed.data?.conversation ?? null + responseConversationId = typed.data?.conversation_id firstMessage = typed.data?.message ?? null - const conversationId = conversation?.id + const conversationId = + conversation?.id ?? + typed.data?.conversation_id ?? + firstMessage?.conversation_id ?? + ((firstMessage as any)?.conversationId as string | undefined) if (conversationId && embeds.length > 1) { for (let i = 1; i < embeds.length; i++) { await sendMessage(conversationId, { @@ -82,20 +91,26 @@ const ModalNewMessageBody = ({ } } - setMessage('') - setEmbeds([]) - setBoxKey((k) => k + 1) + const conversationId = + conversation?.id ?? + responseConversationId ?? + firstMessage?.conversation_id ?? + ((firstMessage as any)?.conversationId as string | undefined) - // If the API didn't return a conversation ID, close the modal and stay put - if (!conversation?.id) { - onClose() + if (!conversationId) { return } + setMessage('') + setEmbeds([]) + setBoxKey((k) => k + 1) + // We have a valid conversation — notify parent and navigate - onConversationCreated?.(conversation, firstMessage as Message) + if (conversation) { + onConversationCreated?.(conversation, firstMessage as Message) + } onClose() - navigate(`/messages/${conversation.id}`) + navigate(`/messages/${conversationId}`) } catch (err: unknown) { const axiosError = err as { response?: { status: number } } @@ -145,6 +160,7 @@ const ModalNewMessageBody = ({ onValueChange={(val) => { setMessage(val); if (val.trim()) setMessageError(null) }} onIsEmptyChange={(empty) => { if (empty) setMessageError(null) }} onEmbedsResolved={setEmbeds} + onSubmit={handleSend} hasError={!!messageError} /> @@ -167,4 +183,4 @@ const ModalNewMessageBody = ({ ) } -export default ModalNewMessageBody \ No newline at end of file +export default ModalNewMessageBody diff --git a/src/pages/social/messages/[messageId]/MessageIdPage.tsx b/src/pages/social/messages/[messageId]/MessageIdPage.tsx index 470b0b91..4b9f7ee9 100644 --- a/src/pages/social/messages/[messageId]/MessageIdPage.tsx +++ b/src/pages/social/messages/[messageId]/MessageIdPage.tsx @@ -39,15 +39,13 @@ export default function MessageIdPage() { const [showMobileChat, setShowMobileChat] = useState(false); // ─── Conversation-list pagination ───────────────────────────────────────── - const [convPage, setConvPage] = useState(1); const [loadingMoreConvs, setLoadingMoreConvs] = useState(false); + const [hasMoreConvs, setHasMoreConvs] = useState(false); // Refs so the IntersectionObserver callback never captures stale state const hasMoreConvsRef = useRef(false); const loadingMoreRef = useRef(false); const convPageRef = useRef(1); - const sentinelRef = useRef(null); - const scrollContainerRef = useRef(null); const { refreshUnreadCount } = useMessagingStore(); @@ -134,6 +132,12 @@ export default function MessageIdPage() { }, [activeConvId, loadingMsgs, hasPrevPage, currentPage]); // ─── Fetch a page of conversations and append ───────────────────────────── + const syncHasMoreConvs = useCallback((loadedCount: number, totalItems: number) => { + const hasMore = loadedCount < totalItems; + hasMoreConvsRef.current = hasMore; + setHasMoreConvs(hasMore); + }, []); + const fetchConvPage = useCallback((page: number) => { if (loadingMoreRef.current || !hasMoreConvsRef.current) return; @@ -144,41 +148,27 @@ export default function MessageIdPage() { .then((res) => { const { items, pagination } = res.data; setConversations((prev) => { - const next = [...prev, ...items]; + const existingIds = new Set(prev.map((conv) => conv.id)); + const uniqueItems = items.filter((conv) => !existingIds.has(conv.id)); + const next = [...prev, ...uniqueItems]; // FIX: sync ref synchronously inside the updater so the // IntersectionObserver always sees the correct value on its // next intersection event — no async useEffect lag. - hasMoreConvsRef.current = next.length < pagination.total_items; + syncHasMoreConvs(next.length, pagination.total_items ?? next.length); return next; }); convPageRef.current = page; - setConvPage(page); }) .catch(() => setError("Could not load more conversations.")) .finally(() => { loadingMoreRef.current = false; setLoadingMoreConvs(false); }); - }, []); + }, [syncHasMoreConvs]); // ─── IntersectionObserver ───────────────────────────────────────────────── - useEffect(() => { - const sentinel = sentinelRef.current; - const scrollContainer = scrollContainerRef.current; - if (!sentinel || !scrollContainer) return; - - const observer = new IntersectionObserver( - (entries) => { - const entry = entries[0]; - if (entry.isIntersecting && hasMoreConvsRef.current && !loadingMoreRef.current) { - fetchConvPage(convPageRef.current + 1); - } - }, - { root: scrollContainer, rootMargin: "100px" }, - ); - - observer.observe(sentinel); - return () => observer.disconnect(); + const loadMoreConversations = useCallback(() => { + fetchConvPage(convPageRef.current + 1); }, [fetchConvPage]); // ─── 1. Initial fetch ───────────────────────────────────────────────────── @@ -188,11 +178,8 @@ export default function MessageIdPage() { .then((res) => { const { items, pagination } = res.data; setConversations(items); - // FIX: sync ref synchronously here too, before any observer - // callback can fire and find it still false. - hasMoreConvsRef.current = items.length < pagination.total_items; + syncHasMoreConvs(items.length, pagination.total_items ?? items.length); convPageRef.current = 1; - setConvPage(1); if (items.length === 0) return; @@ -204,7 +191,7 @@ export default function MessageIdPage() { }) .catch(() => setError("Could not load conversations.")) .finally(() => setLoadingConvs(false)); - }, []); + }, [loadConversation, messageId, syncHasMoreConvs]); // ─── 2. Socket room management ──────────────────────────────────────────── useEffect(() => { @@ -406,16 +393,17 @@ export default function MessageIdPage() { } flex-col w-full md:w-85 shrink-0 sticky top-0 h-[calc(100vh-64px)]`} > -
+
-
@@ -465,4 +453,4 @@ export default function MessageIdPage() {
); -} \ No newline at end of file +} diff --git a/src/pages/social/messages/[messageId]/MessageIdPageGuest.tsx b/src/pages/social/messages/[messageId]/MessageIdPageGuest.tsx index 3c61b351..885d2aa5 100644 --- a/src/pages/social/messages/[messageId]/MessageIdPageGuest.tsx +++ b/src/pages/social/messages/[messageId]/MessageIdPageGuest.tsx @@ -1,7 +1,5 @@ -import React from 'react' +import SigninPage from "@/pages/signin/SigninPage" export default function MessageIdPageGuest() { - return ( -
MessageIdPageGuest
- ) + return } diff --git a/src/services/api/messaging/conversationApi.ts b/src/services/api/messaging/conversationApi.ts index ccce9579..aa7f368d 100644 --- a/src/services/api/messaging/conversationApi.ts +++ b/src/services/api/messaging/conversationApi.ts @@ -639,4 +639,46 @@ export async function getSuggestions( { params: { q }, signal }, ); return data.data; -} \ No newline at end of file +} + + +export interface UserPlaylist { + playlist_id: string; + owner_user_id: string; + name: string; + slug: string | null; + description: string | null; + is_public: boolean; + cover_image: string | null; + track_count: number; + like_count: number; + repost_count: number; + created_at: string; + updated_at: string; +} + +export interface UserPlaylistsResponse { + data: UserPlaylist[]; + pagination: { + limit: number; + offset: number; + total: number; + }; + message: string; +} + +// ─── ADD this function to conversationApi.ts ───────────────────────────────── + +// GET /users/:userId/playlists +export const fetchUserPlaylists = async ( + userId: string, + limit: number = 20, + offset: number = 0, +): Promise => { + const response = await axiosInstance.get( + `/users/${userId}/playlists`, + { params: { limit, offset } }, + ); + return response.data; +}; + \ No newline at end of file diff --git a/src/services/api/search/searchMappers.ts b/src/services/api/search/searchMappers.ts index 40729632..590a36c0 100644 --- a/src/services/api/search/searchMappers.ts +++ b/src/services/api/search/searchMappers.ts @@ -51,7 +51,13 @@ export function mapTrack(t: any): Track { t.user?.displayName ?? t.user?.username ?? "Unknown", - artistUsername: t.user?.username ?? t.artist_username ?? t.username ?? "unknown", + artistUsername: + t.user?.username ?? + t.artist_username ?? + t.artistUsername ?? + t.username ?? + t.user_id ?? + "unknown", // Search backend returns cover_image; other contexts return coverUrl coverUrl: t.cover_image ?? t.coverUrl ?? "", // Search backend returns stream_url; other contexts return audioUrl @@ -66,6 +72,7 @@ export function mapTrack(t: any): Track { waveformData: [], isPrivate: t.is_private ?? t.isPrivate ?? false, trackSlug: t.slug ?? t.track_slug ?? t.trackSlug ?? String(t.id ?? ""), + artistId: String(t.artist_id ?? t.artistId ?? t.user?.id ?? t.user_id ?? ""), }; } @@ -89,4 +96,4 @@ export function mapPlaylist(pl: any): Playlist { isPrivate: pl.is_private ?? pl.isPrivate ?? false, tracks: (pl.preview_tracks ?? pl.tracks ?? []).map(mapTrack), }; -} \ No newline at end of file +}