bvandeusen
1a7515e6ea
Per-source play outcomes so the operator can see whether each recommendation
surface is landing and tune the now-operator-tunable taste weights.
Server:
- query RecommendationSourceMetricsForUser: groups the user's play_events by
source (system-playlist surface), reporting plays / skips / avg completion
over a window; NULL-source (library/radio) plays excluded.
- GET /api/me/recommendation-metrics?days=30 (default 30, capped 365) →
{window_days, sources:[{source, plays, skips, skip_rate, avg_completion}]}.
- handler test: 401 unauth; per-source aggregation + NULL-source exclusion +
skip_rate / avg_completion math.
Web:
- lib/api/metrics.ts: query + friendly source labels.
- settings page gains a "Recommendation metrics" card (table of surface / plays
/ skip rate / avg completion), with loading/error/empty states.
- settings tests mock the new query (manual subscribe-store, hoisting-safe).
Note: You-might-like plays aren't source-tagged (it's a Home row, not a system
playlist), so this covers For-You / Discover / the mixes. Tagging YML plays
would be a client follow-up.
Co-Authored-By: Claude Opus 4.8 (1M context) <noreply@anthropic.com>
70 lines
2.6 KiB
TypeScript
70 lines
2.6 KiB
TypeScript
import { describe, expect, test, vi, beforeEach } from 'vitest';
|
|
import { render, screen, fireEvent } from '@testing-library/svelte';
|
|
|
|
vi.mock('$lib/api/listenbrainz', () => {
|
|
// Mocks must look like a Svelte readable store. The page reads e.g.
|
|
// $status.isPending, which is shorthand for "subscribe to status,
|
|
// then read .isPending on the emitted value." Returning an object
|
|
// that ALSO carries isPending/etc. as bare properties (without a
|
|
// working subscribe) makes $status resolve to undefined.
|
|
const stub = <T extends Record<string, unknown>>(value: T) => ({
|
|
subscribe: (run: (v: T) => void) => {
|
|
run(value);
|
|
return () => {};
|
|
}
|
|
});
|
|
return {
|
|
createLBStatusQuery: () =>
|
|
stub({
|
|
isPending: false,
|
|
isError: false,
|
|
data: { token_set: false, enabled: false }
|
|
}),
|
|
createTokenMutation: () => stub({ mutate: vi.fn(), isPending: false }),
|
|
createEnabledMutation: () => stub({ mutate: vi.fn(), isPending: false })
|
|
};
|
|
});
|
|
|
|
vi.mock('$lib/api/metrics', () => ({
|
|
createRecommendationMetricsQuery: () => ({
|
|
subscribe: (run: (v: unknown) => void) => {
|
|
run({ isPending: false, isError: false, data: { window_days: 30, sources: [] } });
|
|
return () => {};
|
|
}
|
|
}),
|
|
sourceLabel: (s: string) => s
|
|
}));
|
|
|
|
beforeEach(() => {
|
|
globalThis.localStorage.clear();
|
|
document.documentElement.removeAttribute('data-theme');
|
|
});
|
|
|
|
import SettingsPage from './+page.svelte';
|
|
|
|
describe('Settings → Appearance', () => {
|
|
test('renders three theme options', () => {
|
|
render(SettingsPage);
|
|
expect(screen.getByText(/^Appearance$/)).toBeInTheDocument();
|
|
expect(screen.getByLabelText('dark', { exact: false })).toBeInTheDocument();
|
|
expect(screen.getByLabelText('light', { exact: false })).toBeInTheDocument();
|
|
expect(screen.getByLabelText('system', { exact: false })).toBeInTheDocument();
|
|
});
|
|
|
|
test('clicking light writes localStorage and sets data-theme', async () => {
|
|
render(SettingsPage);
|
|
const lightRadio = screen.getByLabelText('light', { exact: false }) as HTMLInputElement;
|
|
await fireEvent.click(lightRadio);
|
|
expect(localStorage.getItem('minstrel:theme')).toBe('light');
|
|
expect(document.documentElement.getAttribute('data-theme')).toBe('light');
|
|
});
|
|
|
|
test('clicking dark writes localStorage and sets data-theme', async () => {
|
|
render(SettingsPage);
|
|
const darkRadio = screen.getByLabelText('dark', { exact: false }) as HTMLInputElement;
|
|
await fireEvent.click(darkRadio);
|
|
expect(localStorage.getItem('minstrel:theme')).toBe('dark');
|
|
expect(document.documentElement.getAttribute('data-theme')).toBe('dark');
|
|
});
|
|
});
|