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,27 @@
+<script lang="ts">
+  import type { AlbumRef } from '$lib/api/types';
+  import { FALLBACK_COVER } from '$lib/media/covers';
+
+  let { album }: { album: AlbumRef } = $props();
+
+  function onImgError(e: Event) {
+    (e.currentTarget as HTMLImageElement).src = FALLBACK_COVER;
+  }
+</script>
+
+<a
+  href={`/albums/${album.id}`}
+  class="group block rounded focus-visible:ring-2 focus-visible:ring-accent"
+>
+  <img
+    src={album.cover_url}
+    alt=""
+    class="aspect-square w-full rounded object-cover transition-transform group-hover:scale-[1.03]"
+    loading="lazy"
+    onerror={onImgError}
+  />
+  <div class="mt-2 truncate text-sm font-medium">{album.title}</div>
+  {#if album.year}
+    <div class="text-xs text-text-secondary">{album.year}</div>
+  {/if}
+</a>
@@ -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);
+  });
+});