303 lines
10 KiB
TypeScript
303 lines
10 KiB
TypeScript
import { describe, expect, test, vi, beforeEach } from 'vitest';
|
|
import { render, screen, fireEvent, waitFor } from '@testing-library/svelte';
|
|
import PlaylistCard from './PlaylistCard.svelte';
|
|
import type { Playlist, PlaylistDetail } from '$lib/api/types';
|
|
|
|
vi.mock('$lib/auth/store.svelte', () => ({
|
|
user: { value: { id: 'u-self', username: 'me', is_admin: false } }
|
|
}));
|
|
|
|
vi.mock('$lib/api/playlists', () => ({
|
|
getPlaylist: vi.fn().mockResolvedValue({
|
|
id: 'p-1',
|
|
user_id: 'u-self',
|
|
owner_username: 'me',
|
|
name: 'Saturday morning',
|
|
description: '',
|
|
is_public: false,
|
|
kind: 'user',
|
|
system_variant: null,
|
|
seed_artist_id: null,
|
|
cover_url: '',
|
|
track_count: 1,
|
|
duration_sec: 60,
|
|
created_at: '2026-01-01T00:00:00Z',
|
|
updated_at: '2026-01-01T00:00:00Z',
|
|
tracks: [
|
|
{
|
|
position: 0,
|
|
track_id: 't-1',
|
|
album_id: 'al-1',
|
|
artist_id: 'ar-1',
|
|
title: 'Test Track',
|
|
artist_name: 'Test Artist',
|
|
album_title: 'Test Album',
|
|
duration_sec: 60,
|
|
stream_url: '/s/t-1',
|
|
added_at: '2026-01-01T00:00:00Z'
|
|
}
|
|
]
|
|
} as PlaylistDetail),
|
|
refreshDiscover: vi.fn().mockResolvedValue({ playlist_id: 'p-1', track_count: 5 }),
|
|
refreshForYou: vi.fn().mockResolvedValue({ playlist_id: 'p-new', track_count: 25, track_ids: ['t-1'] })
|
|
}));
|
|
|
|
vi.mock('$lib/player/store.svelte', () => ({
|
|
playQueue: vi.fn()
|
|
}));
|
|
|
|
vi.mock('$lib/api/queries', () => ({
|
|
qk: {
|
|
playlist: (id: string) => ['playlist', id],
|
|
playlists: (kind?: string) => ['playlists', { kind: kind ?? 'user' }]
|
|
}
|
|
}));
|
|
|
|
const base: Playlist = {
|
|
id: 'p-1',
|
|
user_id: 'u-self',
|
|
owner_username: 'me',
|
|
name: 'Saturday morning',
|
|
description: '',
|
|
is_public: false,
|
|
kind: 'user',
|
|
system_variant: null,
|
|
seed_artist_id: null,
|
|
cover_url: '',
|
|
track_count: 12,
|
|
duration_sec: 0,
|
|
created_at: '',
|
|
updated_at: ''
|
|
};
|
|
|
|
describe('PlaylistCard', () => {
|
|
beforeEach(() => {
|
|
vi.clearAllMocks();
|
|
});
|
|
|
|
test('renders own playlist without owner attribution', () => {
|
|
render(PlaylistCard, { props: { playlist: base } });
|
|
expect(screen.getByText('Saturday morning')).toBeInTheDocument();
|
|
expect(screen.getByText(/12\s+tracks/i)).toBeInTheDocument();
|
|
expect(screen.queryByText(/by /)).not.toBeInTheDocument();
|
|
});
|
|
|
|
test('navigates to playlist when clicking the card', () => {
|
|
render(PlaylistCard, { props: { playlist: base } });
|
|
const link = screen.getByRole('link');
|
|
expect(link).toHaveAttribute('href', '/playlists/p-1');
|
|
});
|
|
|
|
test('renders cover image when cover_url is set', () => {
|
|
// The <img> has alt="" (decorative — the playlist name is in the
|
|
// sibling text below, so duplicating it for screen readers would be
|
|
// noise). Empty alt makes Testing Library expose role="presentation"
|
|
// instead of role="img"; query the DOM directly so the assertion
|
|
// doesn't fight the (correct) a11y choice.
|
|
const { container } = render(PlaylistCard, { props: { playlist: { ...base, cover_url: '/api/playlists/p-1/cover' } } });
|
|
const img = container.querySelector('img');
|
|
expect(img).not.toBeNull();
|
|
expect(img!.getAttribute('src')).toBe('/api/playlists/p-1/cover');
|
|
});
|
|
|
|
test('renders glyph fallback when cover_url is empty', () => {
|
|
render(PlaylistCard, { props: { playlist: base } });
|
|
expect(screen.getByText(/no tracks yet/i)).toBeInTheDocument();
|
|
});
|
|
|
|
test("attributes other users' playlists to the owner", () => {
|
|
render(PlaylistCard, { props: { playlist: { ...base, user_id: 'u-bob', owner_username: 'bob' } } });
|
|
expect(screen.getByText(/by bob/i)).toBeInTheDocument();
|
|
});
|
|
|
|
test('singular "track" when count is 1', () => {
|
|
render(PlaylistCard, { props: { playlist: { ...base, track_count: 1 } } });
|
|
expect(screen.getByText(/1\s+track\b/i)).toBeInTheDocument();
|
|
});
|
|
|
|
test('play button exists with correct aria label', () => {
|
|
render(PlaylistCard, { props: { playlist: base } });
|
|
const playButton = screen.getByLabelText(/Play Saturday morning/i);
|
|
expect(playButton).toBeInTheDocument();
|
|
});
|
|
|
|
test('play button is disabled when track_count is 0', () => {
|
|
render(PlaylistCard, { props: { playlist: { ...base, track_count: 0 } } });
|
|
const playButton = screen.getByLabelText(/Play Saturday morning/i);
|
|
expect(playButton).toBeDisabled();
|
|
});
|
|
|
|
test('play button calls playQueue with tracks when clicked', async () => {
|
|
const { getPlaylist } = await import('$lib/api/playlists');
|
|
const { playQueue } = await import('$lib/player/store.svelte');
|
|
|
|
render(PlaylistCard, { props: { playlist: base } });
|
|
const playButton = screen.getByLabelText(/Play Saturday morning/i);
|
|
|
|
await fireEvent.click(playButton);
|
|
|
|
// Allow promises to resolve
|
|
await new Promise(resolve => setTimeout(resolve, 10));
|
|
|
|
expect(getPlaylist).toHaveBeenCalledWith('p-1');
|
|
expect(playQueue).toHaveBeenCalled();
|
|
});
|
|
|
|
test('shows kebab button only on Discover playlists', () => {
|
|
const discoverPlaylist: Playlist = {
|
|
...base,
|
|
kind: 'system',
|
|
system_variant: 'discover',
|
|
name: 'Discover'
|
|
};
|
|
render(PlaylistCard, { props: { playlist: discoverPlaylist } });
|
|
expect(screen.getByLabelText(/playlist actions/i)).toBeInTheDocument();
|
|
});
|
|
|
|
test('does not show kebab button on for_you playlists', () => {
|
|
const forYouPlaylist: Playlist = {
|
|
...base,
|
|
kind: 'system',
|
|
system_variant: 'for_you',
|
|
name: 'For You'
|
|
};
|
|
render(PlaylistCard, { props: { playlist: forYouPlaylist } });
|
|
expect(screen.queryByLabelText(/playlist actions/i)).not.toBeInTheDocument();
|
|
});
|
|
|
|
test('does not show kebab button on user playlists', () => {
|
|
render(PlaylistCard, { props: { playlist: base } });
|
|
expect(screen.queryByLabelText(/playlist actions/i)).not.toBeInTheDocument();
|
|
});
|
|
|
|
test('Refresh Discover item appears in kebab menu when opened', async () => {
|
|
const discoverPlaylist: Playlist = {
|
|
...base,
|
|
kind: 'system',
|
|
system_variant: 'discover',
|
|
name: 'Discover'
|
|
};
|
|
render(PlaylistCard, { props: { playlist: discoverPlaylist } });
|
|
const kebabBtn = screen.getByLabelText(/playlist actions/i);
|
|
await fireEvent.click(kebabBtn);
|
|
expect(screen.getByRole('menuitem', { name: /refresh discover/i })).toBeInTheDocument();
|
|
});
|
|
|
|
test('Refresh Discover item is absent from for_you card kebab', () => {
|
|
const forYouPlaylist: Playlist = {
|
|
...base,
|
|
kind: 'system',
|
|
system_variant: 'for_you',
|
|
name: 'For You'
|
|
};
|
|
render(PlaylistCard, { props: { playlist: forYouPlaylist } });
|
|
expect(screen.queryByRole('menuitem', { name: /refresh discover/i })).not.toBeInTheDocument();
|
|
});
|
|
|
|
test('clicking Refresh Discover calls refreshDiscover', async () => {
|
|
const { refreshDiscover } = await import('$lib/api/playlists');
|
|
const discoverPlaylist: Playlist = {
|
|
...base,
|
|
kind: 'system',
|
|
system_variant: 'discover',
|
|
name: 'Discover'
|
|
};
|
|
render(PlaylistCard, { props: { playlist: discoverPlaylist } });
|
|
const kebabBtn = screen.getByLabelText(/playlist actions/i);
|
|
await fireEvent.click(kebabBtn);
|
|
const refreshItem = screen.getByRole('menuitem', { name: /refresh discover/i });
|
|
await fireEvent.click(refreshItem);
|
|
await waitFor(() => expect(refreshDiscover).toHaveBeenCalled());
|
|
});
|
|
|
|
test('For-You play button calls refreshForYou before getPlaylist', async () => {
|
|
const { refreshForYou, getPlaylist } = await import('$lib/api/playlists');
|
|
const { playQueue } = await import('$lib/player/store.svelte');
|
|
const forYouPlaylist: Playlist = {
|
|
...base,
|
|
kind: 'system',
|
|
system_variant: 'for_you',
|
|
name: 'For You',
|
|
track_count: 25
|
|
};
|
|
// getPlaylist should return a detail with the NEW id
|
|
(getPlaylist as ReturnType<typeof vi.fn>).mockResolvedValueOnce({
|
|
id: 'p-new',
|
|
user_id: 'u-self',
|
|
owner_username: 'me',
|
|
name: 'For You',
|
|
description: '',
|
|
is_public: false,
|
|
kind: 'system',
|
|
system_variant: 'for_you',
|
|
seed_artist_id: null,
|
|
cover_url: '',
|
|
track_count: 1,
|
|
duration_sec: 60,
|
|
created_at: '2026-01-01T00:00:00Z',
|
|
updated_at: '2026-01-01T00:00:00Z',
|
|
tracks: [
|
|
{
|
|
position: 0,
|
|
track_id: 't-1',
|
|
album_id: 'al-1',
|
|
artist_id: 'ar-1',
|
|
title: 'Test Track',
|
|
artist_name: 'Test Artist',
|
|
album_title: 'Test Album',
|
|
duration_sec: 60,
|
|
stream_url: '/s/t-1',
|
|
added_at: '2026-01-01T00:00:00Z'
|
|
}
|
|
]
|
|
} as PlaylistDetail);
|
|
|
|
render(PlaylistCard, { props: { playlist: forYouPlaylist } });
|
|
const playButton = screen.getByLabelText(/Play For You/i);
|
|
await fireEvent.click(playButton);
|
|
await new Promise(resolve => setTimeout(resolve, 10));
|
|
|
|
expect(refreshForYou).toHaveBeenCalled();
|
|
expect(getPlaylist).toHaveBeenCalledWith('p-new');
|
|
expect(playQueue).toHaveBeenCalled();
|
|
});
|
|
|
|
test('For-You play with empty-library response does not call playQueue', async () => {
|
|
const { refreshForYou } = await import('$lib/api/playlists');
|
|
const { playQueue } = await import('$lib/player/store.svelte');
|
|
(refreshForYou as ReturnType<typeof vi.fn>).mockResolvedValueOnce({
|
|
playlist_id: null,
|
|
track_count: 0,
|
|
track_ids: []
|
|
});
|
|
const forYouPlaylist: Playlist = {
|
|
...base,
|
|
kind: 'system',
|
|
system_variant: 'for_you',
|
|
name: 'For You',
|
|
track_count: 1
|
|
};
|
|
render(PlaylistCard, { props: { playlist: forYouPlaylist } });
|
|
const playButton = screen.getByLabelText(/Play For You/i);
|
|
await fireEvent.click(playButton);
|
|
await new Promise(resolve => setTimeout(resolve, 10));
|
|
|
|
expect(refreshForYou).toHaveBeenCalled();
|
|
expect(playQueue).not.toHaveBeenCalled();
|
|
});
|
|
|
|
test('non-For-You play button does NOT call refreshForYou', async () => {
|
|
const { refreshForYou, getPlaylist } = await import('$lib/api/playlists');
|
|
const { playQueue } = await import('$lib/player/store.svelte');
|
|
|
|
render(PlaylistCard, { props: { playlist: base } });
|
|
const playButton = screen.getByLabelText(/Play Saturday morning/i);
|
|
await fireEvent.click(playButton);
|
|
await new Promise(resolve => setTimeout(resolve, 10));
|
|
|
|
expect(refreshForYou).not.toHaveBeenCalled();
|
|
expect(getPlaylist).toHaveBeenCalledWith('p-1');
|
|
expect(playQueue).toHaveBeenCalled();
|
|
});
|
|
});
|