feat(web): make TrackRow click-to-play; pass tracks+index from album page
TrackRow becomes a <button> that dispatches playQueue(tracks, index). Album page supplies the full track list + each index so the rest of the album enqueues automatically when the user clicks a track. Co-Authored-By: Claude Opus 4.7 <noreply@anthropic.com>
This commit is contained in:
@@ -1,31 +1,50 @@
|
||||
import { describe, expect, test } from 'vitest';
|
||||
import { render, screen } from '@testing-library/svelte';
|
||||
import TrackRow from './TrackRow.svelte';
|
||||
import { afterEach, describe, expect, test, vi } from 'vitest';
|
||||
import { render, screen, fireEvent } from '@testing-library/svelte';
|
||||
import type { TrackRef } from '$lib/api/types';
|
||||
|
||||
const track: 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',
|
||||
};
|
||||
vi.mock('$lib/player/store.svelte', () => ({
|
||||
playQueue: vi.fn()
|
||||
}));
|
||||
|
||||
import TrackRow from './TrackRow.svelte';
|
||||
import { playQueue } from '$lib/player/store.svelte';
|
||||
|
||||
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'
|
||||
},
|
||||
{
|
||||
id: 't2', title: 'Freddie Freeloader',
|
||||
album_id: 'xyz', album_title: 'Kind of Blue',
|
||||
artist_id: 'm-davis', artist_name: 'Miles Davis',
|
||||
track_number: 2, disc_number: 1,
|
||||
duration_sec: 565, stream_url: '/api/tracks/t2/stream'
|
||||
}
|
||||
];
|
||||
|
||||
afterEach(() => vi.clearAllMocks());
|
||||
|
||||
describe('TrackRow', () => {
|
||||
test('renders track number, title, formatted duration', () => {
|
||||
render(TrackRow, { props: { track } });
|
||||
render(TrackRow, { props: { tracks, index: 0 } });
|
||||
expect(screen.getByText('1')).toBeInTheDocument();
|
||||
expect(screen.getByText('So What')).toBeInTheDocument();
|
||||
expect(screen.getByText('9:05')).toBeInTheDocument();
|
||||
});
|
||||
|
||||
test('track number falls back to dash when missing', () => {
|
||||
render(TrackRow, { props: { track: { ...track, track_number: undefined } } });
|
||||
const noNum = [{ ...tracks[0], track_number: undefined }];
|
||||
render(TrackRow, { props: { tracks: noNum, index: 0 } });
|
||||
expect(screen.getByText('—')).toBeInTheDocument();
|
||||
});
|
||||
|
||||
test('clicking the row calls playQueue(tracks, index)', async () => {
|
||||
render(TrackRow, { props: { tracks, index: 1 } });
|
||||
await fireEvent.click(screen.getByRole('button'));
|
||||
expect(playQueue).toHaveBeenCalledWith(tracks, 1);
|
||||
});
|
||||
});
|
||||
|
||||
Reference in New Issue
Block a user