feat(web): add /library/liked page with three sections

Each section is its own infinite query against /api/likes/{type}.
Empty sections show 'No liked X yet' (gated on total === 0). Reuses
ArtistRow / AlbumCard / TrackRow for rendering — same components as
the search overflow pages.
This commit is contained in:
2026-04-26 17:08:06 -04:00
parent de5320a7b4
commit 457b94005f
2 changed files with 201 additions and 0 deletions
+102
View File
@@ -0,0 +1,102 @@
import { afterEach, describe, expect, test, vi } from 'vitest';
import { render, screen, fireEvent } from '@testing-library/svelte';
import { mockInfiniteQuery } from '../../../test-utils/query';
import type { ArtistRef, AlbumRef, TrackRef, Page } from '$lib/api/types';
import { readable } from 'svelte/store';
vi.mock('$lib/api/likes', () => ({
createLikedIdsQuery: () => readable({
data: { track_ids: [], album_ids: [], artist_ids: [] },
isPending: false,
isError: false
}),
createLikedTracksInfiniteQuery: vi.fn(),
createLikedAlbumsInfiniteQuery: vi.fn(),
createLikedArtistsInfiniteQuery: vi.fn(),
likeEntity: vi.fn(),
unlikeEntity: vi.fn()
}));
vi.mock('@tanstack/svelte-query', async (orig) => {
const actual = (await orig()) as Record<string, unknown>;
return { ...actual, useQueryClient: () => ({}) };
});
vi.mock('$lib/api/client', () => ({ api: { get: vi.fn() } }));
vi.mock('$lib/player/store.svelte', () => ({
playQueue: vi.fn(), enqueueTrack: vi.fn(), enqueueTracks: vi.fn()
}));
import LikedPage from './+page.svelte';
import {
createLikedTracksInfiniteQuery,
createLikedAlbumsInfiniteQuery,
createLikedArtistsInfiniteQuery
} from '$lib/api/likes';
function page<T>(items: T[], total: number, offset = 0, limit = 50): Page<T> {
return { items, total, offset, limit };
}
afterEach(() => vi.clearAllMocks());
describe('liked library page', () => {
test('renders three sections when each has items', () => {
const ar: ArtistRef = { id: 'a1', name: 'X', album_count: 1 };
const al: AlbumRef = {
id: 'al1', title: 'Y', artist_id: 'a1', artist_name: 'X',
year: 2020, track_count: 1, duration_sec: 100, cover_url: '/x'
};
const tr: TrackRef = {
id: 't1', title: 'Z', album_id: 'al1', album_title: 'Y',
artist_id: 'a1', artist_name: 'X',
track_number: 1, disc_number: 1, duration_sec: 100,
stream_url: '/api/tracks/t1/stream'
};
(createLikedArtistsInfiniteQuery as ReturnType<typeof vi.fn>).mockReturnValue(
mockInfiniteQuery({ pages: [page([ar], 1)] })
);
(createLikedAlbumsInfiniteQuery as ReturnType<typeof vi.fn>).mockReturnValue(
mockInfiniteQuery({ pages: [page([al], 1)] })
);
(createLikedTracksInfiniteQuery as ReturnType<typeof vi.fn>).mockReturnValue(
mockInfiniteQuery({ pages: [page([tr], 1)] })
);
render(LikedPage);
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 section renders "No liked X yet" hint', () => {
(createLikedArtistsInfiniteQuery as ReturnType<typeof vi.fn>).mockReturnValue(
mockInfiniteQuery({ pages: [page<ArtistRef>([], 0)] })
);
(createLikedAlbumsInfiniteQuery as ReturnType<typeof vi.fn>).mockReturnValue(
mockInfiniteQuery({ pages: [page<AlbumRef>([], 0)] })
);
(createLikedTracksInfiniteQuery as ReturnType<typeof vi.fn>).mockReturnValue(
mockInfiniteQuery({ pages: [page<TrackRef>([], 0)] })
);
render(LikedPage);
expect(screen.getAllByText(/no liked/i)).toHaveLength(3);
});
test('Load more calls fetchNextPage on each section that has more', async () => {
const fetchTracks = vi.fn();
(createLikedTracksInfiniteQuery as ReturnType<typeof vi.fn>).mockReturnValue(
mockInfiniteQuery({ pages: [page<TrackRef>([], 100)], hasNextPage: true, fetchNextPage: fetchTracks })
);
(createLikedAlbumsInfiniteQuery as ReturnType<typeof vi.fn>).mockReturnValue(
mockInfiniteQuery({ pages: [page<AlbumRef>([], 0)] })
);
(createLikedArtistsInfiniteQuery as ReturnType<typeof vi.fn>).mockReturnValue(
mockInfiniteQuery({ pages: [page<ArtistRef>([], 0)] })
);
render(LikedPage);
const buttons = screen.getAllByRole('button', { name: /load more/i });
expect(buttons).toHaveLength(1);
await fireEvent.click(buttons[0]);
expect(fetchTracks).toHaveBeenCalledTimes(1);
});
});