Files
minstrel/web/src/routes/settings/settings.test.ts
T
bvandeusen 1a7515e6ea
test-go / test (push) Successful in 33s
test-web / test (push) Successful in 41s
test-go / integration (push) Successful in 4m24s
feat(taste): phase 4 — recommendation observability (#796)
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>
2026-06-12 00:28:30 -04:00

204 lines
8.8 KiB
TypeScript

import { afterEach, describe, expect, test, vi } from 'vitest';
import { render, screen, fireEvent, waitFor } from '@testing-library/svelte';
import { readable, writable } from 'svelte/store';
import type { LBStatus } from '$lib/api/listenbrainz';
vi.mock('$lib/api/listenbrainz', () => ({
createLBStatusQuery: vi.fn(),
createTokenMutation: vi.fn(),
createEnabledMutation: vi.fn(),
setListenBrainzToken: vi.fn(),
setListenBrainzEnabled: vi.fn()
}));
vi.mock('$lib/api/me', () => ({
updateProfile: vi.fn(),
changePassword: vi.fn(),
// Default to a resolved value so the page's $effect doesn't crash
// on `.then()` of undefined when individual tests don't override.
getAPIToken: vi.fn().mockResolvedValue({ api_token: '' }),
regenerateAPIToken: vi.fn()
}));
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
}));
import SettingsPage from './+page.svelte';
import {
createLBStatusQuery,
createTokenMutation,
createEnabledMutation,
setListenBrainzToken,
setListenBrainzEnabled
} from '$lib/api/listenbrainz';
import {
updateProfile,
changePassword,
getAPIToken,
regenerateAPIToken
} from '$lib/api/me';
function mockStatusStore(data: LBStatus) {
return readable({ data, isPending: false, isError: false });
}
function mockMutationStore(mutateFn: (vars: unknown) => void = vi.fn()) {
return readable({ isPending: false, mutate: mutateFn, mutateAsync: vi.fn() });
}
afterEach(() => vi.clearAllMocks());
describe('Settings page — ListenBrainz', () => {
test('token-not-set state renders input + Save button', async () => {
(createLBStatusQuery as ReturnType<typeof vi.fn>).mockReturnValue(
mockStatusStore({ enabled: false, token_set: false, last_scrobbled_at: null })
);
(createTokenMutation as ReturnType<typeof vi.fn>).mockReturnValue(mockMutationStore());
(createEnabledMutation as ReturnType<typeof vi.fn>).mockReturnValue(mockMutationStore());
render(SettingsPage);
await waitFor(() =>
expect(screen.getByPlaceholderText(/paste your lb token/i)).toBeInTheDocument()
);
expect(screen.getByRole('button', { name: /^save$/i })).toBeInTheDocument();
});
test('token-set state renders masked + Clear button', async () => {
(createLBStatusQuery as ReturnType<typeof vi.fn>).mockReturnValue(
mockStatusStore({ enabled: false, token_set: true, last_scrobbled_at: null })
);
(createTokenMutation as ReturnType<typeof vi.fn>).mockReturnValue(mockMutationStore());
(createEnabledMutation as ReturnType<typeof vi.fn>).mockReturnValue(mockMutationStore());
render(SettingsPage);
await waitFor(() => expect(screen.getByText(/\(set\)/)).toBeInTheDocument());
expect(screen.getByText('clear')).toBeInTheDocument();
});
test('Save button calls setListenBrainzToken with typed value', async () => {
(createLBStatusQuery as ReturnType<typeof vi.fn>).mockReturnValue(
mockStatusStore({ enabled: false, token_set: false, last_scrobbled_at: null })
);
const mutateFn = vi.fn();
(createTokenMutation as ReturnType<typeof vi.fn>).mockReturnValue(mockMutationStore(mutateFn));
(createEnabledMutation as ReturnType<typeof vi.fn>).mockReturnValue(mockMutationStore());
render(SettingsPage);
const input = await screen.findByPlaceholderText(/paste your lb token/i);
await fireEvent.input(input, { target: { value: 'mytoken' } });
await fireEvent.click(screen.getByRole('button', { name: /^save$/i }));
await waitFor(() => expect(mutateFn).toHaveBeenCalledWith('mytoken', expect.anything()));
});
test('Enabled checkbox is disabled when no token', async () => {
(createLBStatusQuery as ReturnType<typeof vi.fn>).mockReturnValue(
mockStatusStore({ enabled: false, token_set: false, last_scrobbled_at: null })
);
(createTokenMutation as ReturnType<typeof vi.fn>).mockReturnValue(mockMutationStore());
(createEnabledMutation as ReturnType<typeof vi.fn>).mockReturnValue(mockMutationStore());
render(SettingsPage);
const checkbox = await screen.findByRole('checkbox');
expect(checkbox).toBeDisabled();
});
test('Last-scrobbled-at renders when present', async () => {
(createLBStatusQuery as ReturnType<typeof vi.fn>).mockReturnValue(
mockStatusStore({ enabled: true, token_set: true, last_scrobbled_at: '2026-04-28T03:00:00Z' })
);
(createTokenMutation as ReturnType<typeof vi.fn>).mockReturnValue(mockMutationStore());
(createEnabledMutation as ReturnType<typeof vi.fn>).mockReturnValue(mockMutationStore());
render(SettingsPage);
await waitFor(() =>
expect(screen.getByText(/last scrobbled:/i)).toBeInTheDocument()
);
});
});
// Shared setup for cards that don't need LB state
function setupPage() {
(createLBStatusQuery as ReturnType<typeof vi.fn>).mockReturnValue(
mockStatusStore({ enabled: false, token_set: false, last_scrobbled_at: null })
);
(createTokenMutation as ReturnType<typeof vi.fn>).mockReturnValue(mockMutationStore());
(createEnabledMutation as ReturnType<typeof vi.fn>).mockReturnValue(mockMutationStore());
(getAPIToken as ReturnType<typeof vi.fn>).mockResolvedValue({ api_token: 'tok_abc123' });
}
describe('Settings page — Profile card', () => {
test('Save profile calls updateProfile with form values', async () => {
setupPage();
(updateProfile as ReturnType<typeof vi.fn>).mockResolvedValue({});
render(SettingsPage);
await fireEvent.input(screen.getByLabelText(/display name/i), { target: { value: 'Alice' } });
await fireEvent.input(screen.getByLabelText(/email/i), { target: { value: 'alice@example.com' } });
await fireEvent.click(screen.getByRole('button', { name: /save profile/i }));
await waitFor(() =>
expect(updateProfile).toHaveBeenCalledWith(
expect.objectContaining({ display_name: 'Alice', email: 'alice@example.com' })
)
);
});
test('Save profile shows toast on success', async () => {
setupPage();
(updateProfile as ReturnType<typeof vi.fn>).mockResolvedValue({});
render(SettingsPage);
await fireEvent.click(screen.getByRole('button', { name: /save profile/i }));
await waitFor(() => expect(screen.getByTestId('toast').textContent).toMatch(/profile saved/i));
});
});
describe('Settings page — Password card', () => {
test('mismatched passwords show toast and do not call changePassword', async () => {
setupPage();
render(SettingsPage);
await fireEvent.input(screen.getByLabelText(/current password/i), { target: { value: 'oldpw1234' } });
await fireEvent.input(screen.getByLabelText(/new password/i), { target: { value: 'newpw1234' } });
await fireEvent.input(screen.getByLabelText(/confirm/i), { target: { value: 'different1' } });
await fireEvent.click(screen.getByRole('button', { name: /change password/i }));
expect(changePassword).not.toHaveBeenCalled();
await waitFor(() => expect(screen.getByTestId('toast').textContent).toMatch(/do not match/i));
});
test('matched passwords call changePassword(current, new)', async () => {
setupPage();
(changePassword as ReturnType<typeof vi.fn>).mockResolvedValue(undefined);
render(SettingsPage);
await fireEvent.input(screen.getByLabelText(/current password/i), { target: { value: 'oldpw1234' } });
await fireEvent.input(screen.getByLabelText(/new password/i), { target: { value: 'newpw1234' } });
await fireEvent.input(screen.getByLabelText(/confirm/i), { target: { value: 'newpw1234' } });
await fireEvent.click(screen.getByRole('button', { name: /change password/i }));
await waitFor(() =>
expect(changePassword).toHaveBeenCalledWith('oldpw1234', 'newpw1234')
);
});
});
describe('Settings page — API Token card', () => {
test('first click on Regenerate shows "Click again to confirm"', async () => {
setupPage();
render(SettingsPage);
await fireEvent.click(screen.getByRole('button', { name: /regenerate/i }));
await waitFor(() =>
expect(screen.getByRole('button', { name: /click again to confirm/i })).toBeInTheDocument()
);
expect(regenerateAPIToken).not.toHaveBeenCalled();
});
test('second click within 5s calls regenerateAPIToken', async () => {
setupPage();
(regenerateAPIToken as ReturnType<typeof vi.fn>).mockResolvedValue({ api_token: 'new_tok_xyz' });
render(SettingsPage);
await fireEvent.click(screen.getByRole('button', { name: /regenerate/i }));
await waitFor(() =>
expect(screen.getByRole('button', { name: /click again to confirm/i })).toBeInTheDocument()
);
await fireEvent.click(screen.getByRole('button', { name: /click again to confirm/i }));
await waitFor(() => expect(regenerateAPIToken).toHaveBeenCalled());
});
});