feat(web): add AlbumCard component

Grid card used on the artist detail page. Cover image, title, year. Broken covers swap to FALLBACK_COVER via onerror.
2026-04-23 18:39:42 -04:00
parent a1252c1ef4
commit e9b482da0c
2 changed files with 69 additions and 0 deletions
@@ -0,0 +1,42 @@
+import { describe, expect, test } from 'vitest';
+import { render, screen, fireEvent } from '@testing-library/svelte';
+import AlbumCard from './AlbumCard.svelte';
+import type { AlbumRef } from '$lib/api/types';
+import { FALLBACK_COVER } from '$lib/media/covers';
+
+const album: AlbumRef = {
+  id: 'xyz',
+  title: 'Kind of Blue',
+  artist_id: 'm-davis',
+  artist_name: 'Miles Davis',
+  year: 1959,
+  track_count: 5,
+  duration_sec: 2630,
+  cover_url: '/api/albums/xyz/cover',
+};
+
+describe('AlbumCard', () => {
+  test('renders cover, title, year inside a link to /albums/:id', () => {
+    const { container } = render(AlbumCard, { props: { album } });
+    const link = screen.getByRole('link');
+    expect(link).toHaveAttribute('href', '/albums/xyz');
+    expect(link).toHaveTextContent('Kind of Blue');
+    expect(link).toHaveTextContent('1959');
+
+    const img = container.querySelector('img') as HTMLImageElement;
+    expect(img.src).toContain('/api/albums/xyz/cover');
+  });
+
+  test('year is omitted when not present', () => {
+    render(AlbumCard, { props: { album: { ...album, year: undefined } } });
+    // No crash; no year text.
+    expect(screen.queryByText(/1959/)).not.toBeInTheDocument();
+  });
+
+  test('broken cover falls back to FALLBACK_COVER data URL', async () => {
+    const { container } = render(AlbumCard, { props: { album } });
+    const img = container.querySelector('img') as HTMLImageElement;
+    await fireEvent.error(img);
+    expect(img.src).toBe(FALLBACK_COVER);
+  });
+});