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>

web/src/lib/components/AdminTabs.test.ts

@@ -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', () => ({
+vi.mock('$app/state', () => pageUrlModule(state));
-  page: { get url() { return state.pageUrl; } }
-}));
 
 import AdminTabs from './AdminTabs.svelte';
 

web/src/lib/components/DiscoverTabs.test.ts

@@ -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', () => ({
+vi.mock('$app/state', () => pageUrlModule(state));
-  page: { get url() { return state.pageUrl; } }
-}));
 
 import DiscoverTabs from './DiscoverTabs.svelte';
 

web/src/lib/components/SearchInput.test.ts

@@ -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', () => ({
+vi.mock('$app/state', () => pageUrlModule(state));
-  page: { get url() { return state.pageUrl; } }
-}));
 
 vi.mock('$app/navigation', () => ({
   goto: vi.fn()

web/src/routes/login/login.test.ts

@@ -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', () => ({
+vi.mock('$app/state', () => pageUrlModule(state));
-  page: {
-    get url() { return state.pageUrl; }
-  }
-}));
 
 vi.mock('$app/navigation', () => ({
   goto: vi.fn()

web/src/routes/search/albums/albums.test.ts

@@ -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', () => ({
+vi.mock('$app/state', () => pageUrlModule(state));
-  page: { get url() { return state.pageUrl; } }
-}));
 
 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', () => ({
+vi.mock('$lib/api/likes', () => emptyLikesMock());
-  createLikedIdsQuery: () => readable({
-    data: { track_ids: [], album_ids: [], artist_ids: [] },
-    isPending: false,
-    isError: false
-  }),
-  likeEntity: vi.fn(),
-  unlikeEntity: vi.fn()
-}));
 
 import AlbumsOverflow from './+page.svelte';
 import { createSearchAlbumsInfiniteQuery } from '$lib/api/queries';

web/src/routes/search/artists/artists.test.ts

@@ -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', () => ({
+vi.mock('$app/state', () => pageUrlModule(state));
-  page: { get url() { return state.pageUrl; } }
-}));
 
 vi.mock('$lib/api/queries', () => ({
   createSearchArtistsInfiniteQuery: vi.fn()
 }));
 
-vi.mock('$lib/api/likes', () => ({
+vi.mock('$lib/api/likes', () => emptyLikesMock());
-  createLikedIdsQuery: () => readable({
-    data: { track_ids: [], album_ids: [], artist_ids: [] },
-    isPending: false,
-    isError: false
-  }),
-  likeEntity: vi.fn(),
-  unlikeEntity: vi.fn()
-}));
 
 import ArtistsOverflow from './+page.svelte';
 import { createSearchArtistsInfiniteQuery } from '$lib/api/queries';

web/src/routes/search/search.test.ts

@@ -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', () => ({
+vi.mock('$app/state', () => pageUrlModule(state));
-  page: { get url() { return state.pageUrl; } }
-}));
 
 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', () => ({
+vi.mock('$lib/api/likes', () => emptyLikesMock());
-  createLikedIdsQuery: () => readable({
-    data: { track_ids: [], album_ids: [], artist_ids: [] },
-    isPending: false,
-    isError: false
-  }),
-  likeEntity: vi.fn(),
-  unlikeEntity: vi.fn()
-}));
 
 import SearchPage from './+page.svelte';
 import { createSearchQuery } from '$lib/api/queries';

web/src/routes/search/tracks/tracks.test.ts

@@ -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', () => ({
+vi.mock('$app/state', () => pageUrlModule(state));
-  page: { get url() { return state.pageUrl; } }
-}));
 
 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', () => ({
+vi.mock('$lib/api/likes', () => emptyLikesMock());
-  createLikedIdsQuery: () => readable({
-    data: { track_ids: [], album_ids: [], artist_ids: [] },
-    isPending: false,
-    isError: false
-  }),
-  likeEntity: vi.fn(),
-  unlikeEntity: vi.fn()
-}));
 
-vi.mock('$lib/api/quarantine', () => ({
+vi.mock('$lib/api/quarantine', () => emptyQuarantineMock());
-  flagTrack: vi.fn(),
-  unflagTrack: vi.fn(),
-  listMyQuarantine: vi.fn().mockResolvedValue([]),
-  createMyQuarantineQuery: vi.fn()
-}));
 
 import TracksOverflow from './+page.svelte';
 import { createSearchTracksInfiniteQuery } from '$lib/api/queries';

web/svelte.config.js

@@ -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/*'
     }
   }
 };