bvandeusenandClaude Opus 4.8
cde74b5965
test-web / test (push) Successful in 40s
QueueList now follows the now-playing row as the track auto-advances (only while it's in view), centers it on open, and surfaces a 'Jump to current' pill once the user scrolls it off-screen. Header gains a clear-queue action backed by a new store clearQueue() that empties the queue and stops playback. Co-Authored-By: Claude Opus 4.8 (1M context) <noreply@anthropic.com>
104 lines
3.7 KiB
TypeScript
104 lines
3.7 KiB
TypeScript
import { describe, it, expect, vi, beforeEach } from 'vitest';
|
|
import { render, screen, fireEvent } from '@testing-library/svelte';
|
|
import { emptyLikesMock } from '../../test-utils/mocks/likes';
|
|
import type { TrackRef } from '$lib/api/types';
|
|
import { makeTrack } from '$test-utils/fixtures/track';
|
|
|
|
// QueueTrackRow (rendered inside QueueDrawer → QueueList) now renders a
|
|
// LikeButton, which reads createLikedIdsQuery. Stub the likes API so the
|
|
// rows don't need a real QueryClient in context. Both mocks — and the
|
|
// emptyLikesMock import — must precede the QueueDrawer import below, since
|
|
// loading the component evaluates the mocked modules and the hoisted
|
|
// factories need their referenced bindings already initialized.
|
|
vi.mock('$lib/api/likes', () => emptyLikesMock());
|
|
|
|
const closeQueueDrawer = vi.fn();
|
|
let queueValue: TrackRef[] = [];
|
|
let indexValue = 0;
|
|
let openValue = true;
|
|
|
|
vi.mock('$lib/player/store.svelte', () => ({
|
|
closeQueueDrawer: (...args: unknown[]) => closeQueueDrawer(...args),
|
|
player: {
|
|
get queue() { return queueValue; },
|
|
get index() { return indexValue; },
|
|
get queueDrawerOpen() { return openValue; }
|
|
},
|
|
// QueueTrackRow imports these from the store; provide stubs so its
|
|
// module-load doesn't break when QueueDrawer renders rows. QueueList
|
|
// imports clearQueue for its header action.
|
|
playFromQueueIndex: vi.fn(),
|
|
removeFromQueue: vi.fn(),
|
|
moveQueueItem: vi.fn(),
|
|
clearQueue: vi.fn()
|
|
}));
|
|
|
|
import QueueDrawer from './QueueDrawer.svelte';
|
|
|
|
const t = (id: string): TrackRef => makeTrack({ id, title: `Song ${id}` });
|
|
|
|
describe('QueueDrawer', () => {
|
|
beforeEach(() => {
|
|
closeQueueDrawer.mockClear();
|
|
queueValue = [];
|
|
indexValue = 0;
|
|
openValue = true;
|
|
});
|
|
|
|
it('renders Queue title and track-count summary', () => {
|
|
queueValue = [t('a'), t('b'), t('c')];
|
|
render(QueueDrawer);
|
|
expect(screen.getByText(/^Queue$/i)).toBeInTheDocument();
|
|
expect(screen.getByText(/3 tracks/i)).toBeInTheDocument();
|
|
});
|
|
|
|
it('renders one row per queue entry', () => {
|
|
queueValue = [t('a'), t('b')];
|
|
render(QueueDrawer);
|
|
expect(screen.getByText('Song a')).toBeInTheDocument();
|
|
expect(screen.getByText('Song b')).toBeInTheDocument();
|
|
});
|
|
|
|
it('shows empty-state copy when queue is empty', () => {
|
|
queueValue = [];
|
|
render(QueueDrawer);
|
|
expect(screen.getByText(/no tracks queued/i)).toBeInTheDocument();
|
|
});
|
|
|
|
it('clicking the close button calls closeQueueDrawer', async () => {
|
|
render(QueueDrawer);
|
|
const close = screen.getByLabelText('Close queue');
|
|
await fireEvent.click(close);
|
|
expect(closeQueueDrawer).toHaveBeenCalled();
|
|
});
|
|
|
|
it('clicking the backdrop calls closeQueueDrawer', async () => {
|
|
render(QueueDrawer);
|
|
const backdrop = screen.getByLabelText(/close queue backdrop/i);
|
|
await fireEvent.click(backdrop);
|
|
expect(closeQueueDrawer).toHaveBeenCalled();
|
|
});
|
|
|
|
it('drawer is hidden (aria-hidden=true) when queueDrawerOpen is false', () => {
|
|
openValue = false;
|
|
queueValue = [t('a')];
|
|
render(QueueDrawer);
|
|
const aside = document.querySelector('aside[aria-label="Playback queue"]');
|
|
expect(aside).not.toBeNull();
|
|
expect(aside!.getAttribute('aria-hidden')).toBe('true');
|
|
});
|
|
|
|
it('drawer is inert when closed', () => {
|
|
openValue = false;
|
|
queueValue = [t('a')];
|
|
render(QueueDrawer);
|
|
const aside = document.querySelector('aside[aria-label="Playback queue"]');
|
|
expect(aside).not.toBeNull();
|
|
// Svelte 5 + jsdom uses property binding for `inert`, not attribute. Check both
|
|
// to be robust regardless of which jsdom version handles the mirror.
|
|
const inertProp = (aside as unknown as { inert?: boolean }).inert === true;
|
|
const inertAttr = aside!.hasAttribute('inert');
|
|
expect(inertProp || inertAttr).toBe(true);
|
|
});
|
|
});
|