From 6912dadf2bfb6a7bda55c8afee87aef0417c35d7 Mon Sep 17 00:00:00 2001
From: Bryan Van Deusen <bryan.vandeusen@fabledsword.com>
Date: Wed, 15 Jul 2026 13:12:37 -0400
Subject: [PATCH] =?UTF-8?q?fix(test):=20order=20likes=20mock=20before=20co?=
 =?UTF-8?q?mponent=20import=20in=20queue=20tests=20=E2=80=94=20#1596?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

The prior test fix registered the emptyLikesMock stub but imported it
(and the component under test) in the wrong order: importing QueueTrackRow
/ QueueDrawer transitively loads LikeButton → the mocked $lib/api/likes,
whose hoisted factory runs before the emptyLikesMock import initialized —
"Cannot access '__vi_import_N__' before initialization".

Move the emptyLikesMock import above, and the component import below, the
vi.mock call — matching the ArtistMenu/PlayerBar test layout so the
factory's binding is ready when the component graph loads.

Co-Authored-By: Claude Opus 4.8 (1M context) <noreply@anthropic.com>
---
 web/src/lib/components/QueueDrawer.test.ts   | 10 +++++++---
 web/src/lib/components/QueueTrackRow.test.ts |  8 ++++++--
 2 files changed, 13 insertions(+), 5 deletions(-)

diff --git a/web/src/lib/components/QueueDrawer.test.ts b/web/src/lib/components/QueueDrawer.test.ts
index dc1182c6..ec82c755 100644
--- a/web/src/lib/components/QueueDrawer.test.ts
+++ b/web/src/lib/components/QueueDrawer.test.ts
@@ -1,13 +1,15 @@
 import { describe, it, expect, vi, beforeEach } from 'vitest';
 import { render, screen, fireEvent } from '@testing-library/svelte';
-import QueueDrawer from './QueueDrawer.svelte';
+import { emptyLikesMock } from '../../test-utils/mocks/likes';
 import type { TrackRef } from '$lib/api/types';
 import { makeTrack } from '$test-utils/fixtures/track';
-import { emptyLikesMock } from '../../test-utils/mocks/likes';
 
 // QueueTrackRow (rendered inside QueueDrawer → QueueList) now renders a
 // LikeButton, which reads createLikedIdsQuery. Stub the likes API so the
-// rows don't need a real QueryClient in context.
+// rows don't need a real QueryClient in context. Both mocks — and the
+// emptyLikesMock import — must precede the QueueDrawer import below, since
+// loading the component evaluates the mocked modules and the hoisted
+// factories need their referenced bindings already initialized.
 vi.mock('$lib/api/likes', () => emptyLikesMock());
 
 const closeQueueDrawer = vi.fn();
@@ -29,6 +31,8 @@ vi.mock('$lib/player/store.svelte', () => ({
   moveQueueItem: vi.fn()
 }));
 
+import QueueDrawer from './QueueDrawer.svelte';
+
 const t = (id: string): TrackRef => makeTrack({ id, title: `Song ${id}` });
 
 describe('QueueDrawer', () => {
diff --git a/web/src/lib/components/QueueTrackRow.test.ts b/web/src/lib/components/QueueTrackRow.test.ts
index 038b3d5a..05c3db09 100644
--- a/web/src/lib/components/QueueTrackRow.test.ts
+++ b/web/src/lib/components/QueueTrackRow.test.ts
@@ -1,13 +1,17 @@
 import { describe, it, expect, vi, beforeEach } from 'vitest';
 import { render, screen, fireEvent } from '@testing-library/svelte';
-import QueueTrackRow from './QueueTrackRow.svelte';
-import { makeTrack } from '$test-utils/fixtures/track';
 import { emptyLikesMock } from '../../test-utils/mocks/likes';
+import { makeTrack } from '$test-utils/fixtures/track';
 
 // QueueTrackRow now renders a LikeButton, which reads createLikedIdsQuery.
 // Stub the likes API so the row doesn't need a real QueryClient in context.
+// The mock (and its emptyLikesMock import) must precede the component import
+// below: importing QueueTrackRow transitively loads LikeButton → the mocked
+// module, and the hoisted factory needs emptyLikesMock already initialized.
 vi.mock('$lib/api/likes', () => emptyLikesMock());
 
+import QueueTrackRow from './QueueTrackRow.svelte';
+
 const playFromQueueIndex = vi.fn();
 const removeFromQueue = vi.fn();
 const moveQueueItem = vi.fn();