feat(web/m7-377): AlbumCard gains bottom-right kebab
This commit is contained in:
@@ -5,6 +5,7 @@
|
|||||||
import { enqueueTracks, playQueue } from '$lib/player/store.svelte';
|
import { enqueueTracks, playQueue } from '$lib/player/store.svelte';
|
||||||
import { Plus, Play } from 'lucide-svelte';
|
import { Plus, Play } from 'lucide-svelte';
|
||||||
import LikeButton from './LikeButton.svelte';
|
import LikeButton from './LikeButton.svelte';
|
||||||
|
import AlbumMenu from './AlbumMenu.svelte';
|
||||||
|
|
||||||
let { album }: { album: AlbumRef } = $props();
|
let { album }: { album: AlbumRef } = $props();
|
||||||
|
|
||||||
@@ -68,6 +69,14 @@
|
|||||||
<Plus size={16} strokeWidth={1} />
|
<Plus size={16} strokeWidth={1} />
|
||||||
</button>
|
</button>
|
||||||
</div>
|
</div>
|
||||||
|
<div class="absolute right-2 bottom-2 z-10">
|
||||||
|
<AlbumMenu
|
||||||
|
albumId={album.id}
|
||||||
|
albumTitle={album.title}
|
||||||
|
artistId={album.artist_id}
|
||||||
|
artistName={album.artist_name}
|
||||||
|
/>
|
||||||
|
</div>
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
<style>
|
<style>
|
||||||
|
|||||||
@@ -27,6 +27,25 @@ vi.mock('@tanstack/svelte-query', async (orig) => {
|
|||||||
return { ...actual, useQueryClient: () => ({}) };
|
return { ...actual, useQueryClient: () => ({}) };
|
||||||
});
|
});
|
||||||
|
|
||||||
|
vi.mock('$app/navigation', () => ({ goto: vi.fn() }));
|
||||||
|
|
||||||
|
vi.mock('$lib/api/albums', async (orig) => {
|
||||||
|
const actual = (await orig()) as Record<string, unknown>;
|
||||||
|
return { ...actual, listAlbumTracks: vi.fn().mockResolvedValue([]) };
|
||||||
|
});
|
||||||
|
|
||||||
|
vi.mock('$lib/api/playlists', async (orig) => {
|
||||||
|
const { readable } = await import('svelte/store');
|
||||||
|
const actual = (await orig()) as Record<string, unknown>;
|
||||||
|
return {
|
||||||
|
...actual,
|
||||||
|
createPlaylistsQuery: () =>
|
||||||
|
readable({ data: { owned: [], public: [] }, isPending: false, isError: false }),
|
||||||
|
appendTracks: vi.fn().mockResolvedValue({ id: 'p1', tracks: [] }),
|
||||||
|
createPlaylist: vi.fn().mockResolvedValue({ id: 'p1', name: 'New' })
|
||||||
|
};
|
||||||
|
});
|
||||||
|
|
||||||
import AlbumCard from './AlbumCard.svelte';
|
import AlbumCard from './AlbumCard.svelte';
|
||||||
import { api } from '$lib/api/client';
|
import { api } from '$lib/api/client';
|
||||||
import { enqueueTracks, playQueue } from '$lib/player/store.svelte';
|
import { enqueueTracks, playQueue } from '$lib/player/store.svelte';
|
||||||
@@ -111,4 +130,9 @@ describe('AlbumCard', () => {
|
|||||||
await Promise.resolve();
|
await Promise.resolve();
|
||||||
expect(playQueue).toHaveBeenCalledWith(tracks, 0);
|
expect(playQueue).toHaveBeenCalledWith(tracks, 0);
|
||||||
});
|
});
|
||||||
|
|
||||||
|
test('renders the bottom-right kebab menu trigger', () => {
|
||||||
|
render(AlbumCard, { props: { album } });
|
||||||
|
expect(screen.getByRole('button', { name: /Album actions for Kind of Blue/i })).toBeInTheDocument();
|
||||||
|
});
|
||||||
});
|
});
|
||||||
|
|||||||
Reference in New Issue
Block a user