bvandeusenandClaude Opus 5.5
94a9c8cbe3
Merges Renovate's kit 3 (PR #149) and adapter-static 4 (PR #148) bumps, plus the migration they need. The mechanical part is `sv migrate sveltekit-3`, run one task at a time and reviewed: - svelte.config.js is gone. Its options move into sveltekit() in vite.config.ts, exported as kitOptions so vitest.config.ts runs the same kit setup, including the $test-utils alias the tests import. - $lib becomes #lib through package.json "imports". There is no src/lib/index, so only the "#lib/*" entry is kept. - tsconfig extends $app/tsconfig. - Peer floors raised to kit 3's requirements: svelte ^5.57.1, vite ^8.0.12, svelte-check ^4.7.5. By hand, from the codemod's list of non-automated tasks: - goto's replaceState option is now replace; keepFocus becomes reset: false. For the search typeahead, reset: false also stops the scroll-to-top, which is wanted while typing. - The test setup mocks drop pushState/replaceState and $app/paths base/assets, which kit 3 removed, and mock refreshAll in place of invalidateAll. - The other flagged files only read page.url or goto internal routes, so they needed no change. TypeScript goes to ^6, not the ^7 Renovate offers: kit 3 declares typescript ^6 as a peer and svelte-check 4.7 accepts ^5 || ^6. Move to 7 once both accept it. With Tailwind 4 and kit 3 in, `npm audit` on the whole tree reports 0, so the web lane now audits every dependency rather than only what ships to browsers. Co-Authored-By: Claude Opus 5.5 <noreply@anthropic.com>
92 lines
3.5 KiB
TypeScript
92 lines
3.5 KiB
TypeScript
import { describe, expect, test, vi, beforeEach } from 'vitest';
|
|
import { render, screen, fireEvent } from '@testing-library/svelte';
|
|
|
|
vi.mock('#lib/api/listenbrainz.js', () => {
|
|
// 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 })
|
|
};
|
|
});
|
|
|
|
// The Notifications section has its own tests (NotificationSettings.test.ts);
|
|
// here it only needs a settled query so the page renders.
|
|
vi.mock('#lib/api/notifications.js', async (importOriginal) => {
|
|
const mod = await importOriginal<typeof import('#lib/api/notifications.js')>();
|
|
const { mockQuery } = await import('../../test-utils/query');
|
|
return {
|
|
...mod,
|
|
createNotificationSettingsQuery: () =>
|
|
mockQuery({ data: { kinds: [], email_available: true } }),
|
|
putNotificationSettings: vi.fn()
|
|
};
|
|
});
|
|
|
|
// The Volume leveling setting loads on mount; keep it off the network.
|
|
vi.mock('#lib/api/normalization.js', async (importOriginal) => {
|
|
const mod = await importOriginal<typeof import('#lib/api/normalization.js')>();
|
|
return {
|
|
...mod,
|
|
getNormalization: vi.fn().mockResolvedValue(mod.DEFAULT_NORMALIZATION),
|
|
putNormalization: vi.fn()
|
|
};
|
|
});
|
|
|
|
vi.mock('#lib/api/metrics.js', () => ({
|
|
createRecommendationMetricsQuery: () => ({
|
|
subscribe: (run: (v: unknown) => void) => {
|
|
run({ isPending: false, isError: false, data: { window_days: 30, baseline: null, groups: [] } });
|
|
return () => {};
|
|
}
|
|
})
|
|
}));
|
|
|
|
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');
|
|
});
|
|
});
|