diff --git a/web/src/lib/components/ArtistMenu.svelte b/web/src/lib/components/ArtistMenu.svelte new file mode 100644 index 00000000..b801dbb4 --- /dev/null +++ b/web/src/lib/components/ArtistMenu.svelte @@ -0,0 +1,121 @@ + + + { menuOpen = false; addOpen = false; }} onkeydown={onKeydown} /> + +
+ + + {#if menuOpen} + + {/if} + + {#if addOpen && cachedTracks} + + {/if} +
diff --git a/web/src/lib/components/ArtistMenu.test.ts b/web/src/lib/components/ArtistMenu.test.ts new file mode 100644 index 00000000..e729e401 --- /dev/null +++ b/web/src/lib/components/ArtistMenu.test.ts @@ -0,0 +1,90 @@ +import { afterEach, describe, expect, test, vi } from 'vitest'; +import { render, screen, fireEvent, waitFor } from '@testing-library/svelte'; +import { readable } from 'svelte/store'; +import type { TrackRef } from '$lib/api/types'; + +vi.mock('$app/navigation', () => ({ goto: vi.fn() })); + +vi.mock('$lib/api/likes', () => ({ + createLikedIdsQuery: () => + readable({ data: { track_ids: [], album_ids: [], artist_ids: [] }, isPending: false, isError: false }), + likeEntity: vi.fn().mockResolvedValue(undefined), + unlikeEntity: vi.fn().mockResolvedValue(undefined) +})); + +vi.mock('$lib/api/artists', () => ({ + listArtistTracks: vi.fn().mockResolvedValue([]) +})); + +vi.mock('$lib/api/playlists', () => ({ + createPlaylistsQuery: () => + readable({ data: { owned: [], public: [] }, isPending: false, isError: false }), + appendTracks: vi.fn().mockResolvedValue({ id: 'p1', tracks: [] }), + createPlaylist: vi.fn().mockResolvedValue({ id: 'p1', name: 'New' }) +})); + +vi.mock('$lib/player/store.svelte', () => ({ + enqueueTracks: vi.fn() +})); + +vi.mock('@tanstack/svelte-query', async (orig) => { + const actual = (await orig()) as Record; + return { ...actual, useQueryClient: () => ({ invalidateQueries: vi.fn() }) }; +}); + +import ArtistMenu from './ArtistMenu.svelte'; +import { enqueueTracks } from '$lib/player/store.svelte'; +import { listArtistTracks } from '$lib/api/artists'; +import { likeEntity, unlikeEntity } from '$lib/api/likes'; + +const TRACKS: TrackRef[] = [ + { id: 't1', title: 'A', album_id: 'al1', album_title: 'X', artist_id: 'a1', artist_name: 'Test', duration_sec: 100, stream_url: '/s/t1' }, + { id: 't2', title: 'B', album_id: 'al1', album_title: 'X', artist_id: 'a1', artist_name: 'Test', duration_sec: 100, stream_url: '/s/t2' } +]; + +afterEach(() => { + vi.clearAllMocks(); +}); + +describe('ArtistMenu', () => { + test('kebab opens menu with action items', async () => { + render(ArtistMenu, { props: { artistId: 'a1', artistName: 'Test', tracks: TRACKS } }); + const kebab = screen.getByRole('button', { name: /artist actions for test/i }); + await fireEvent.click(kebab); + expect(await screen.findByText(/Like artist/i)).toBeInTheDocument(); + expect(screen.getByText(/Add all to queue/i)).toBeInTheDocument(); + expect(screen.getByText(/Add all to playlist/i)).toBeInTheDocument(); + }); + + test('Add all to queue uses cached tracks when provided', async () => { + render(ArtistMenu, { props: { artistId: 'a1', artistName: 'Test', tracks: TRACKS } }); + await fireEvent.click(screen.getByRole('button', { name: /artist actions for test/i })); + await fireEvent.click(screen.getByText(/Add all to queue/i)); + expect(enqueueTracks).toHaveBeenCalledWith(TRACKS); + expect(listArtistTracks).not.toHaveBeenCalled(); + }); + + test('Add all to queue lazily fetches when no cached tracks', async () => { + (listArtistTracks as unknown as ReturnType).mockResolvedValueOnce(TRACKS); + render(ArtistMenu, { props: { artistId: 'a1', artistName: 'Test' } }); + await fireEvent.click(screen.getByRole('button', { name: /artist actions for test/i })); + await fireEvent.click(screen.getByText(/Add all to queue/i)); + await waitFor(() => expect(enqueueTracks).toHaveBeenCalledWith(TRACKS)); + expect(listArtistTracks).toHaveBeenCalledWith('a1'); + }); + + test('Like item calls likeEntity', async () => { + render(ArtistMenu, { props: { artistId: 'a1', artistName: 'Test', tracks: TRACKS } }); + await fireEvent.click(screen.getByRole('button', { name: /artist actions for test/i })); + await fireEvent.click(screen.getByText(/Like artist/i)); + expect(likeEntity).toHaveBeenCalled(); + }); + + test('Escape key closes the menu', async () => { + render(ArtistMenu, { props: { artistId: 'a1', artistName: 'Test', tracks: TRACKS } }); + await fireEvent.click(screen.getByRole('button', { name: /artist actions for test/i })); + expect(screen.getByRole('menu')).toBeInTheDocument(); + await fireEvent.keyDown(window, { key: 'Escape' }); + expect(screen.queryByRole('menu')).not.toBeInTheDocument(); + }); +});