feat(web): add artist detail page at /artists/:id

Renders the artist name + album count and a responsive AlbumCard grid from the nested ArtistDetail response. 404 surfaces a distinct non-retryable 'not found' state; other errors share the retry banner.
2026-04-23 20:12:57 -04:00
parent 25d44a180c
commit 2e49335aab
2 changed files with 144 additions and 0 deletions
@@ -0,0 +1,93 @@
+import { afterEach, describe, expect, test, vi } from 'vitest';
+import { render, screen } from '@testing-library/svelte';
+import { flushSync } from 'svelte';
+import { mockQuery } from '../../../test-utils/query';
+import type { ArtistDetail, AlbumRef } from '$lib/api/types';
+
+const state = vi.hoisted(() => ({ pageParams: { id: 'abc' } as Record<string, string> }));
+
+vi.mock('$app/state', () => ({
+  page: {
+    get params() { return state.pageParams; },
+    get url() { return new URL('http://localhost/artists/' + state.pageParams.id); }
+  }
+}));
+
+vi.mock('$lib/api/queries', () => ({
+  qk: { artist: (id: string) => ['artist', id] },
+  createArtistQuery: vi.fn()
+}));
+
+import ArtistPage from './+page.svelte';
+import { createArtistQuery } from '$lib/api/queries';
+
+function album(id: string, title: string, year?: number): AlbumRef {
+  return {
+    id, title,
+    artist_id: 'abc', artist_name: 'Alice',
+    year, track_count: 10, duration_sec: 2400,
+    cover_url: `/api/albums/${id}/cover`
+  };
+}
+
+afterEach(() => {
+  vi.clearAllMocks();
+  state.pageParams = { id: 'abc' };
+});
+
+describe('artist detail page', () => {
+  test('renders artist name, subtitle, and one AlbumCard per album', () => {
+    const detail: ArtistDetail = {
+      id: 'abc', name: 'Alice', album_count: 2,
+      albums: [album('a1', 'First', 2020), album('a2', 'Second')]
+    };
+    (createArtistQuery as ReturnType<typeof vi.fn>).mockReturnValue(mockQuery({ data: detail }));
+    render(ArtistPage);
+    expect(screen.getByRole('heading', { level: 1 })).toHaveTextContent('Alice');
+    expect(screen.getByText(/2 albums/i)).toBeInTheDocument();
+    expect(screen.getByRole('link', { name: /First/ })).toHaveAttribute('href', '/albums/a1');
+    expect(screen.getByRole('link', { name: /Second/ })).toHaveAttribute('href', '/albums/a2');
+  });
+
+  test('back link points to Library', () => {
+    (createArtistQuery as ReturnType<typeof vi.fn>).mockReturnValue(mockQuery({
+      data: { id: 'abc', name: 'Alice', album_count: 0, albums: [] }
+    }));
+    render(ArtistPage);
+    const back = screen.getByRole('link', { name: /library/i });
+    expect(back).toHaveAttribute('href', '/');
+  });
+
+  test('404 renders non-retryable "Artist not found" with back link', () => {
+    (createArtistQuery as ReturnType<typeof vi.fn>).mockReturnValue(mockQuery({
+      isError: true,
+      error: { code: 'not_found', message: 'nope', status: 404 }
+    }));
+    render(ArtistPage);
+    expect(screen.getByText(/artist not found/i)).toBeInTheDocument();
+    expect(screen.queryByRole('button', { name: /try again/i })).not.toBeInTheDocument();
+  });
+
+  test('non-404 error renders the retry banner', () => {
+    (createArtistQuery as ReturnType<typeof vi.fn>).mockReturnValue(mockQuery({
+      isError: true,
+      error: { code: 'server_error', message: 'boom', status: 500 }
+    }));
+    render(ArtistPage);
+    expect(screen.getByRole('alert')).toHaveTextContent('boom');
+    expect(screen.getByRole('button', { name: /try again/i })).toBeInTheDocument();
+  });
+
+  test('pending (after delay) renders the grid skeleton', () => {
+    (createArtistQuery as ReturnType<typeof vi.fn>).mockReturnValue(mockQuery({ isPending: true }));
+    vi.useFakeTimers();
+    try {
+      render(ArtistPage);
+      vi.advanceTimersByTime(200);
+      flushSync();
+      expect(screen.getByTestId('skeleton-grid')).toBeInTheDocument();
+    } finally {
+      vi.useRealTimers();
+    }
+  });
+});