Files
minstrel/web/src/lib/components/AlbumCard.test.ts
T
bvandeusen 564e0bf7ca feat(web): use static SVG asset for album fallback cover
Replaces the hand-rolled inline-data-URL placeholder with a static SVG
asset at /placeholders/album-fallback.svg. SvelteKit's adapter-static
publishes everything in web/static/ at the URL root and the Go binary
embeds the build output, so this resolves identically in dev and prod.

Operator can swap the artwork by replacing the file — no code changes.

Test updated to use toContain rather than strict equality, since jsdom
resolves relative URLs against the test origin.

Co-Authored-By: Claude Opus 4.7 (1M context) <noreply@anthropic.com>
2026-05-01 23:21:25 -04:00

115 lines
4.0 KiB
TypeScript

import { afterEach, describe, expect, test, vi } from 'vitest';
import { render, screen, fireEvent } from '@testing-library/svelte';
import type { AlbumRef, AlbumDetail, TrackRef } from '$lib/api/types';
import { FALLBACK_COVER } from '$lib/media/covers';
import { readable } from 'svelte/store';
vi.mock('$lib/api/client', () => ({
api: { get: vi.fn() }
}));
vi.mock('$lib/player/store.svelte', () => ({
enqueueTracks: vi.fn(),
playQueue: vi.fn()
}));
vi.mock('$lib/api/likes', () => ({
createLikedIdsQuery: () => readable({
data: { track_ids: [], album_ids: [], artist_ids: [] },
isPending: false,
isError: false
}),
likeEntity: vi.fn(),
unlikeEntity: vi.fn()
}));
vi.mock('@tanstack/svelte-query', async (orig) => {
const actual = (await orig()) as Record<string, unknown>;
return { ...actual, useQueryClient: () => ({}) };
});
import AlbumCard from './AlbumCard.svelte';
import { api } from '$lib/api/client';
import { enqueueTracks, playQueue } from '$lib/player/store.svelte';
const album: AlbumRef = {
id: 'xyz',
title: 'Kind of Blue',
sort_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',
};
afterEach(() => vi.clearAllMocks());
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 } } });
expect(screen.queryByText(/1959/)).not.toBeInTheDocument();
});
test('broken cover falls back to FALLBACK_COVER asset', async () => {
const { container } = render(AlbumCard, { props: { album } });
const img = container.querySelector('img') as HTMLImageElement;
await fireEvent.error(img);
// jsdom resolves relative URLs against the test origin; assert containment
// rather than strict equality to keep the test agnostic of the host.
expect(img.src).toContain(FALLBACK_COVER);
});
test('+ queue button fetches album detail and calls enqueueTracks', async () => {
const tracks: TrackRef[] = [
{
id: 't1', title: 'So What',
album_id: 'xyz', album_title: 'Kind of Blue',
artist_id: 'm-davis', artist_name: 'Miles Davis',
track_number: 1, disc_number: 1, duration_sec: 545,
stream_url: '/api/tracks/t1/stream'
}
];
const detail: AlbumDetail = { ...album, tracks };
(api.get as ReturnType<typeof vi.fn>).mockResolvedValueOnce(detail);
render(AlbumCard, { props: { album } });
await fireEvent.click(screen.getByRole('button', { name: /add to queue/i }));
expect(api.get).toHaveBeenCalledWith('/api/albums/xyz');
await Promise.resolve();
await Promise.resolve();
expect(enqueueTracks).toHaveBeenCalledWith(tracks);
});
test('play overlay click fetches album detail and calls playQueue at index 0', async () => {
const tracks: TrackRef[] = [
{ id: 't1', title: 'So What',
album_id: 'xyz', album_title: 'Kind of Blue',
artist_id: 'm-davis', artist_name: 'Miles Davis',
track_number: 1, disc_number: 1, duration_sec: 545,
stream_url: '/api/tracks/t1/stream' }
];
const detail: AlbumDetail = { ...album, tracks };
(api.get as ReturnType<typeof vi.fn>).mockResolvedValueOnce(detail);
render(AlbumCard, { props: { album } });
await fireEvent.click(screen.getByRole('button', { name: /play kind of blue/i }));
expect(api.get).toHaveBeenCalledWith('/api/albums/xyz');
await Promise.resolve();
await Promise.resolve();
expect(playQueue).toHaveBeenCalledWith(tracks, 0);
});
});