import { afterEach, describe, expect, test, vi } from 'vitest'; import { render, screen } from '@testing-library/svelte'; import { readable } from 'svelte/store'; import { mockQuery } from '../../test-utils/query'; import type { ArtistRef, AlbumRef, TrackRef, SearchResponse } from '$lib/api/types'; const state = vi.hoisted(() => ({ pageUrl: new URL('http://localhost/search') })); vi.mock('$app/state', () => ({ page: { get url() { return state.pageUrl; } } })); vi.mock('$lib/api/queries', () => ({ createSearchQuery: vi.fn() })); vi.mock('$lib/player/store.svelte', () => ({ playQueue: vi.fn(), playRadio: vi.fn(), enqueueTrack: vi.fn(), enqueueTracks: vi.fn() })); vi.mock('$lib/api/client', () => ({ api: { get: vi.fn() } })); vi.mock('$lib/api/likes', () => ({ createLikedIdsQuery: () => readable({ data: { track_ids: [], album_ids: [], artist_ids: [] }, isPending: false, isError: false }), likeEntity: vi.fn(), unlikeEntity: vi.fn() })); import SearchPage from './+page.svelte'; import { createSearchQuery } from '$lib/api/queries'; function emptyResp(): SearchResponse { return { artists: { items: [], total: 0, limit: 10, offset: 0 }, albums: { items: [], total: 0, limit: 10, offset: 0 }, tracks: { items: [], total: 0, limit: 10, offset: 0 } }; } const artist: ArtistRef = { id: 'a1', name: 'Miles Davis', sort_name: 'Miles Davis', album_count: 12, cover_url: '' }; const album: AlbumRef = { id: 'al1', title: 'Kind of Blue', sort_title: 'Kind of Blue', artist_id: 'a1', artist_name: 'Miles Davis', year: 1959, track_count: 5, duration_sec: 2630, cover_url: '/api/albums/al1/cover', cover_art_source: null }; const track: TrackRef = { id: 't1', title: 'So What', album_id: 'al1', album_title: 'Kind of Blue', artist_id: 'a1', artist_name: 'Miles Davis', track_number: 1, disc_number: 1, duration_sec: 545, stream_url: '/api/tracks/t1/stream' }; afterEach(() => { vi.clearAllMocks(); state.pageUrl = new URL('http://localhost/search'); }); describe('search page', () => { test('empty ?q= shows the "Start typing" prompt and fires no query', () => { state.pageUrl = new URL('http://localhost/search'); render(SearchPage); expect(screen.getByText(/start typing/i)).toBeInTheDocument(); expect(createSearchQuery).not.toHaveBeenCalled(); }); test('all three sections render when all three facets have items', () => { state.pageUrl = new URL('http://localhost/search?q=miles'); const resp: SearchResponse = { ...emptyResp(), artists: { items: [artist], total: 1, limit: 10, offset: 0 }, albums: { items: [album], total: 1, limit: 10, offset: 0 }, tracks: { items: [track], total: 1, limit: 10, offset: 0 } }; (createSearchQuery as ReturnType).mockReturnValue(mockQuery({ data: resp })); render(SearchPage); expect(screen.getByRole('heading', { name: /artists/i })).toBeInTheDocument(); expect(screen.getByRole('heading', { name: /albums/i })).toBeInTheDocument(); expect(screen.getByRole('heading', { name: /tracks/i })).toBeInTheDocument(); }); test('empty facets are hidden', () => { state.pageUrl = new URL('http://localhost/search?q=miles'); const resp: SearchResponse = { ...emptyResp(), tracks: { items: [track], total: 1, limit: 10, offset: 0 } }; (createSearchQuery as ReturnType).mockReturnValue(mockQuery({ data: resp })); render(SearchPage); expect(screen.queryByRole('heading', { name: /artists/i })).not.toBeInTheDocument(); expect(screen.queryByRole('heading', { name: /albums/i })).not.toBeInTheDocument(); expect(screen.getByRole('heading', { name: /tracks/i })).toBeInTheDocument(); }); test('"See all N →" link renders when total > items.length', () => { state.pageUrl = new URL('http://localhost/search?q=miles'); const resp: SearchResponse = { ...emptyResp(), artists: { items: [artist], total: 47, limit: 10, offset: 0 } }; (createSearchQuery as ReturnType).mockReturnValue(mockQuery({ data: resp })); render(SearchPage); const link = screen.getByRole('link', { name: /see all 47/i }); expect(link).toHaveAttribute('href', '/search/artists?q=miles'); }); test('"See all" link omitted when total === items.length', () => { state.pageUrl = new URL('http://localhost/search?q=miles'); const resp: SearchResponse = { ...emptyResp(), tracks: { items: [track], total: 1, limit: 10, offset: 0 } }; (createSearchQuery as ReturnType).mockReturnValue(mockQuery({ data: resp })); render(SearchPage); expect(screen.queryByRole('link', { name: /see all/i })).not.toBeInTheDocument(); }); test('all three facets empty renders "No matches"', () => { state.pageUrl = new URL('http://localhost/search?q=zzz'); (createSearchQuery as ReturnType).mockReturnValue( mockQuery({ data: emptyResp() }) ); render(SearchPage); expect(screen.getByText(/no matches for/i)).toBeInTheDocument(); expect(screen.getByText(/zzz/)).toBeInTheDocument(); }); test('error state renders ApiErrorBanner', () => { state.pageUrl = new URL('http://localhost/search?q=miles'); (createSearchQuery as ReturnType).mockReturnValue( mockQuery({ isError: true, error: { code: 'server_error', message: 'boom' } }) ); render(SearchPage); expect(screen.getByRole('alert')).toBeInTheDocument(); }); });