feat(web/m7-365): HistoryRow component with click-to-play

2026-05-04 06:19:59 -04:00
parent 4dee5922d9
commit da39ff847b
2 changed files with 117 additions and 0 deletions
@@ -0,0 +1,53 @@
+import { describe, it, expect, vi, beforeEach } from 'vitest';
+import { render, screen, fireEvent } from '@testing-library/svelte';
+import HistoryRow from './HistoryRow.svelte';
+import type { HistoryEvent } from '$lib/api/history';
+import type { TrackRef } from '$lib/api/types';
+
+const playQueue = vi.fn();
+
+vi.mock('$lib/player/store.svelte', () => ({
+  playQueue: (...args: unknown[]) => playQueue(...args)
+}));
+
+const sampleTrack: TrackRef = {
+  id: 'track-1',
+  title: 'Song Title',
+  album_id: 'album-1',
+  album_title: 'Album',
+  artist_id: 'artist-1',
+  artist_name: 'Artist Name',
+  duration_sec: 200,
+  stream_url: '/stream/track-1'
+};
+
+const sampleEvent: HistoryEvent = {
+  id: 'event-1',
+  played_at: new Date(Date.now() - 10 * 60 * 1000).toISOString(),
+  track: sampleTrack
+};
+
+describe('HistoryRow', () => {
+  beforeEach(() => {
+    playQueue.mockClear();
+  });
+
+  it('renders track title, artist, and album', () => {
+    render(HistoryRow, { props: { event: sampleEvent } });
+    expect(screen.getByText('Song Title')).toBeInTheDocument();
+    expect(screen.getByText(/Artist Name/)).toBeInTheDocument();
+    expect(screen.getByText(/Album/)).toBeInTheDocument();
+  });
+
+  it('clicking the row calls playQueue([track], 0)', async () => {
+    render(HistoryRow, { props: { event: sampleEvent } });
+    const row = screen.getByRole('button', { name: /play song title/i });
+    await fireEvent.click(row);
+    expect(playQueue).toHaveBeenCalledWith([sampleTrack], 0);
+  });
+
+  it('renders a relative timestamp for events under 1 hour ago', () => {
+    render(HistoryRow, { props: { event: sampleEvent } });
+    expect(screen.getByText(/\d+m ago/)).toBeInTheDocument();
+  });
+});