feat(web): add ArtistCard (circular) with play-shuffle overlay

Co-Authored-By: Claude Sonnet 4.6 <noreply@anthropic.com>
2026-05-01 20:18:05 -04:00
parent b5741e59b7
commit c7e7dd269b
2 changed files with 136 additions and 0 deletions
@@ -0,0 +1,65 @@
+import { afterEach, describe, expect, test, vi } from 'vitest';
+import { render, screen, fireEvent } from '@testing-library/svelte';
+import type { ArtistRef, TrackRef } from '$lib/api/types';
+
+vi.mock('$lib/api/client', () => ({
+  api: { get: vi.fn() }
+}));
+vi.mock('$lib/player/store.svelte', () => ({
+  playQueue: vi.fn()
+}));
+
+import ArtistCard from './ArtistCard.svelte';
+import { api } from '$lib/api/client';
+import { playQueue } from '$lib/player/store.svelte';
+
+const artist: ArtistRef = {
+  id: 'art-1',
+  name: 'Boards of Canada',
+  sort_name: 'Boards of Canada',
+  album_count: 5,
+  cover_url: '/api/albums/cov-1/cover'
+};
+
+afterEach(() => vi.clearAllMocks());
+
+describe('ArtistCard', () => {
+  test('renders cover img inside link to /artists/:id', () => {
+    const { container } = render(ArtistCard, { props: { artist } });
+    const link = screen.getByRole('link');
+    expect(link).toHaveAttribute('href', '/artists/art-1');
+    const img = container.querySelector('img') as HTMLImageElement;
+    expect(img.src).toContain('/api/albums/cov-1/cover');
+  });
+
+  test('falls back to Disc3 glyph when cover_url is empty', () => {
+    const { container } = render(ArtistCard, {
+      props: { artist: { ...artist, cover_url: '' } }
+    });
+    expect(container.querySelector('img')).not.toBeInTheDocument();
+    expect(container.querySelector('svg')).toBeInTheDocument();
+  });
+
+  test('play overlay fetches tracks, shuffles, calls playQueue', async () => {
+    const tracks: TrackRef[] = [
+      { id: 't1', title: 'A', album_id: 'al-1', album_title: 'X',
+        artist_id: 'art-1', artist_name: 'BoC',
+        track_number: 1, disc_number: 1, duration_sec: 1, stream_url: '/x' },
+      { id: 't2', title: 'B', album_id: 'al-1', album_title: 'X',
+        artist_id: 'art-1', artist_name: 'BoC',
+        track_number: 2, disc_number: 1, duration_sec: 1, stream_url: '/x' }
+    ];
+    (api.get as ReturnType<typeof vi.fn>).mockResolvedValueOnce(tracks);
+
+    render(ArtistCard, { props: { artist } });
+    await fireEvent.click(screen.getByRole('button', { name: /play boards of canada/i }));
+    expect(api.get).toHaveBeenCalledWith('/api/artists/art-1/tracks');
+    await Promise.resolve();
+    await Promise.resolve();
+    expect(playQueue).toHaveBeenCalledOnce();
+    const [calledTracks, idx] = (playQueue as ReturnType<typeof vi.fn>).mock.calls[0];
+    expect(calledTracks).toHaveLength(2);
+    expect(idx).toBe(0);
+    expect(calledTracks.map((t: TrackRef) => t.id).sort()).toEqual(['t1', 't2']);
+  });
+});