refactor(web): sweep 8 test files to use pageUrlModule() (#375)

Centralizes the inline { page: { get url() { return state.pageUrl } } }
mock shape via test-utils/mocks/appState.ts. The vi.hoisted state
declaration remains per-file (vitest mock-hoisting requires module-
level declaration). Adds a $test-utils alias to svelte.config.js so
the helper can be imported without ../../../ chains.

SKIPPED (mock exposes more than url):
- Shell.test.ts, MobileNavDrawer.test.ts, admin.test.ts: static
  page: { url: ... } shape, no hoisted state to centralize.
- album.test.ts, artist.test.ts: page exposes both params and url.
- playlist.test.ts, reset-password.test.ts: page exposes params only.

Co-Authored-By: Claude Opus 4.7 (1M context) <noreply@anthropic.com>
This commit is contained in:
2026-05-10 15:39:25 -04:00
parent 6e0223a9b1
commit dd67f28745
9 changed files with 32 additions and 72 deletions
+2 -3
View File
@@ -1,13 +1,12 @@
import { describe, expect, test, vi } from 'vitest';
import { render, screen } from '@testing-library/svelte';
import { pageUrlModule } from '$test-utils/mocks/appState';
const state = vi.hoisted(() => ({
pageUrl: new URL('http://localhost/admin')
}));
vi.mock('$app/state', () => ({
page: { get url() { return state.pageUrl; } }
}));
vi.mock('$app/state', () => pageUrlModule(state));
import AdminTabs from './AdminTabs.svelte';
+2 -3
View File
@@ -1,13 +1,12 @@
import { describe, expect, test, vi } from 'vitest';
import { render, screen } from '@testing-library/svelte';
import { pageUrlModule } from '$test-utils/mocks/appState';
const state = vi.hoisted(() => ({
pageUrl: new URL('http://localhost/discover')
}));
vi.mock('$app/state', () => ({
page: { get url() { return state.pageUrl; } }
}));
vi.mock('$app/state', () => pageUrlModule(state));
import DiscoverTabs from './DiscoverTabs.svelte';
+2 -3
View File
@@ -1,13 +1,12 @@
import { afterEach, beforeEach, describe, expect, test, vi } from 'vitest';
import { render, screen, fireEvent } from '@testing-library/svelte';
import { pageUrlModule } from '$test-utils/mocks/appState';
const state = vi.hoisted(() => ({
pageUrl: new URL('http://localhost/')
}));
vi.mock('$app/state', () => ({
page: { get url() { return state.pageUrl; } }
}));
vi.mock('$app/state', () => pageUrlModule(state));
vi.mock('$app/navigation', () => ({
goto: vi.fn()
+2 -5
View File
@@ -1,16 +1,13 @@
import { afterEach, describe, expect, test, vi } from 'vitest';
import { render, screen, fireEvent, waitFor } from '@testing-library/svelte';
import { pageUrlModule } from '$test-utils/mocks/appState';
// vi.hoisted avoids the temporal-dead-zone hazard: mock factories are lazy
// and can run before top-level `let` is initialized, since imports are
// hoisted above variable declarations.
const state = vi.hoisted(() => ({ pageUrl: new URL('http://localhost/login') }));
vi.mock('$app/state', () => ({
page: {
get url() { return state.pageUrl; }
}
}));
vi.mock('$app/state', () => pageUrlModule(state));
vi.mock('$app/navigation', () => ({
goto: vi.fn()
+4 -13
View File
@@ -1,14 +1,13 @@
import { afterEach, describe, expect, test, vi } from 'vitest';
import { render, screen, fireEvent } from '@testing-library/svelte';
import { readable } from 'svelte/store';
import { mockInfiniteQuery } from '../../../test-utils/query';
import { emptyLikesMock } from '../../../test-utils/mocks/likes';
import { pageUrlModule } from '$test-utils/mocks/appState';
import type { AlbumRef, Page } from '$lib/api/types';
const state = vi.hoisted(() => ({ pageUrl: new URL('http://localhost/search/albums?q=miles') }));
vi.mock('$app/state', () => ({
page: { get url() { return state.pageUrl; } }
}));
vi.mock('$app/state', () => pageUrlModule(state));
vi.mock('$lib/api/queries', () => ({
createSearchAlbumsInfiniteQuery: vi.fn()
@@ -21,15 +20,7 @@ vi.mock('$lib/player/store.svelte', () => ({
enqueueTracks: vi.fn()
}));
vi.mock('$lib/api/likes', () => ({
createLikedIdsQuery: () => readable({
data: { track_ids: [], album_ids: [], artist_ids: [] },
isPending: false,
isError: false
}),
likeEntity: vi.fn(),
unlikeEntity: vi.fn()
}));
vi.mock('$lib/api/likes', () => emptyLikesMock());
import AlbumsOverflow from './+page.svelte';
import { createSearchAlbumsInfiniteQuery } from '$lib/api/queries';
+4 -13
View File
@@ -1,28 +1,19 @@
import { afterEach, describe, expect, test, vi } from 'vitest';
import { render, screen, fireEvent } from '@testing-library/svelte';
import { readable } from 'svelte/store';
import { mockInfiniteQuery } from '../../../test-utils/query';
import { emptyLikesMock } from '../../../test-utils/mocks/likes';
import { pageUrlModule } from '$test-utils/mocks/appState';
import type { ArtistRef, Page } from '$lib/api/types';
const state = vi.hoisted(() => ({ pageUrl: new URL('http://localhost/search/artists?q=miles') }));
vi.mock('$app/state', () => ({
page: { get url() { return state.pageUrl; } }
}));
vi.mock('$app/state', () => pageUrlModule(state));
vi.mock('$lib/api/queries', () => ({
createSearchArtistsInfiniteQuery: vi.fn()
}));
vi.mock('$lib/api/likes', () => ({
createLikedIdsQuery: () => readable({
data: { track_ids: [], album_ids: [], artist_ids: [] },
isPending: false,
isError: false
}),
likeEntity: vi.fn(),
unlikeEntity: vi.fn()
}));
vi.mock('$lib/api/likes', () => emptyLikesMock());
import ArtistsOverflow from './+page.svelte';
import { createSearchArtistsInfiniteQuery } from '$lib/api/queries';
+4 -13
View File
@@ -1,16 +1,15 @@
import { afterEach, describe, expect, test, vi } from 'vitest';
import { render, screen } from '@testing-library/svelte';
import { readable } from 'svelte/store';
import { mockQuery } from '../../test-utils/query';
import { emptyLikesMock } from '../../test-utils/mocks/likes';
import { pageUrlModule } from '$test-utils/mocks/appState';
import type { ArtistRef, AlbumRef, TrackRef, SearchResponse } from '$lib/api/types';
const state = vi.hoisted(() => ({
pageUrl: new URL('http://localhost/search')
}));
vi.mock('$app/state', () => ({
page: { get url() { return state.pageUrl; } }
}));
vi.mock('$app/state', () => pageUrlModule(state));
vi.mock('$lib/api/queries', () => ({
createSearchQuery: vi.fn()
@@ -27,15 +26,7 @@ vi.mock('$lib/api/client', () => ({
api: { get: vi.fn() }
}));
vi.mock('$lib/api/likes', () => ({
createLikedIdsQuery: () => readable({
data: { track_ids: [], album_ids: [], artist_ids: [] },
isPending: false,
isError: false
}),
likeEntity: vi.fn(),
unlikeEntity: vi.fn()
}));
vi.mock('$lib/api/likes', () => emptyLikesMock());
import SearchPage from './+page.svelte';
import { createSearchQuery } from '$lib/api/queries';
+6 -19
View File
@@ -1,14 +1,14 @@
import { afterEach, describe, expect, test, vi } from 'vitest';
import { render, screen, fireEvent } from '@testing-library/svelte';
import { readable } from 'svelte/store';
import { mockInfiniteQuery } from '../../../test-utils/query';
import { emptyLikesMock } from '../../../test-utils/mocks/likes';
import { emptyQuarantineMock } from '../../../test-utils/mocks/quarantine';
import { pageUrlModule } from '$test-utils/mocks/appState';
import type { TrackRef, Page } from '$lib/api/types';
const state = vi.hoisted(() => ({ pageUrl: new URL('http://localhost/search/tracks?q=miles') }));
vi.mock('$app/state', () => ({
page: { get url() { return state.pageUrl; } }
}));
vi.mock('$app/state', () => pageUrlModule(state));
vi.mock('$lib/api/queries', () => ({
createSearchTracksInfiniteQuery: vi.fn()
@@ -20,22 +20,9 @@ vi.mock('$lib/player/store.svelte', () => ({
enqueueTrack: vi.fn()
}));
vi.mock('$lib/api/likes', () => ({
createLikedIdsQuery: () => readable({
data: { track_ids: [], album_ids: [], artist_ids: [] },
isPending: false,
isError: false
}),
likeEntity: vi.fn(),
unlikeEntity: vi.fn()
}));
vi.mock('$lib/api/likes', () => emptyLikesMock());
vi.mock('$lib/api/quarantine', () => ({
flagTrack: vi.fn(),
unflagTrack: vi.fn(),
listMyQuarantine: vi.fn().mockResolvedValue([]),
createMyQuarantineQuery: vi.fn()
}));
vi.mock('$lib/api/quarantine', () => emptyQuarantineMock());
import TracksOverflow from './+page.svelte';
import { createSearchTracksInfiniteQuery } from '$lib/api/queries';
+6
View File
@@ -13,6 +13,12 @@ export default {
}),
files: {
assets: 'static'
},
alias: {
// test-only helper barrel; resolves the same way $lib does so test
// files can import shared mock factories without ../../../ chains.
'$test-utils': 'src/test-utils',
'$test-utils/*': 'src/test-utils/*'
}
}
};