fix(frontend): fix tests

Author: sifferhans

frontend/pnpm-lock.yaml

@@ -14,26 +14,20 @@ const {
   authReadyMock,
   updateTeamMock,
   assignLeadMock,
-  routeMock,
-  routerMock,
   nowMock,
 } = vi.hoisted(() => ({
   queryMock: vi.fn(),
   authMock: vi.fn(),
   authReadyMock: vi.fn(),
   updateTeamMock: vi.fn(),
   assignLeadMock: vi.fn(),
-  routeMock: vi.fn(),
-  routerMock: vi.fn(),
   nowMock: vi.fn(),
 }))
 mockNuxtImport('useStandingsUnitPageQuery', () => queryMock)
 mockNuxtImport('useAuth', () => authMock)
 mockNuxtImport('useAuthReady', () => authReadyMock)
 mockNuxtImport('useUpdateTeamMutation', () => updateTeamMock)
 mockNuxtImport('useAssignTeamLeadMutation', () => assignLeadMock)
-mockNuxtImport('useRoute', () => routeMock)
-mockNuxtImport('useRouter', () => routerMock)
 mockNuxtImport('useNow', () => nowMock)
 
 type Member = { id: string; name: string; rank?: number; tags?: string[] }
@@ -74,8 +68,6 @@ function mountWith(state: QueryState) {
   })
   updateTeamMock.mockReturnValue({ executeMutation: vi.fn() })
   assignLeadMock.mockReturnValue({ executeMutation: vi.fn() })
-  routeMock.mockReturnValue({ query: {} })
-  routerMock.mockReturnValue({ replace: vi.fn() })
   nowMock.mockReturnValue(ref(new Date('2020-01-01T00:00:00Z')))
   // All child components render for real; only the data composables are mocked.
   return mountSuspended(StandingsUnit)

frontend/test/component/StandingsUnit.test.ts

@@ -16,33 +16,37 @@ const {
   authReadyMock,
   updateTeamMock,
   assignLeadMock,
-  routeMock,
-  routerMock,
   nowMock,
+  routerReplace,
 } = vi.hoisted(() => ({
   queryMock: vi.fn(),
   authMock: vi.fn(),
   authReadyMock: vi.fn(),
   updateTeamMock: vi.fn(),
   assignLeadMock: vi.fn(),
-  routeMock: vi.fn(),
-  routerMock: vi.fn(),
   nowMock: vi.fn(),
+  routerReplace: vi.fn(),
 }))
 mockNuxtImport('useStandingsUnitPageQuery', () => queryMock)
 mockNuxtImport('useAuth', () => authMock)
 mockNuxtImport('useAuthReady', () => authReadyMock)
 mockNuxtImport('useUpdateTeamMutation', () => updateTeamMock)
 mockNuxtImport('useAssignTeamLeadMutation', () => assignLeadMock)
-mockNuxtImport('useRoute', () => routeMock)
-mockNuxtImport('useRouter', () => routerMock)
 mockNuxtImport('useNow', () => nowMock)
+// v4 (@nuxt/test-utils 4) inits Nuxt in beforeAll, so its router plugin calls
+// beforeEach/options on useRouter() during setup. Wrap the *real* router (via
+// the original passed to the factory) and only override replace with our spy,
+// rather than replacing the whole router with a bare stub.
+mockNuxtImport('useRouter', (original) => () => {
+  const router = original()
+  router.replace = routerReplace
+  return router
+})
 
 // Spies we assert against.
 const updateTeam = vi.fn()
 const assignLead = vi.fn()
 const refetch = vi.fn()
-const routerReplace = vi.fn()
 
 // --- Stubs -------------------------------------------------------------------
 // Only two child components are stubbed, and both for a concrete reason:
@@ -96,8 +100,6 @@ async function mountEdit(opts: { now?: Date } = {}) {
   })
   updateTeamMock.mockReturnValue({ executeMutation: updateTeam })
   assignLeadMock.mockReturnValue({ executeMutation: assignLead })
-  routeMock.mockReturnValue({ query: {} })
-  routerMock.mockReturnValue({ replace: routerReplace })
   nowMock.mockReturnValue(ref(opts.now ?? new Date('2030-01-01T00:00:00Z')))
 
   const wrapper = await mountSuspended(StandingsUnit, { global: { stubs } })

frontend/test/component/StandingsUnitEdit.test.ts

@@ -20,6 +20,25 @@ vi.mock('@sentry/nuxt', () => ({
   addBreadcrumb: vi.fn(),
 }))
 
+// The firebase client plugin (app/plugins/5.firebase.client.ts) statically
+// imports firebase/firestore, which pulls in the Node Firestore SDK (grpc +
+// protobufjs) — irrelevant to component rendering and prone to CJS/ESM interop
+// crashes in the test env. Stub the firebase entry points so nothing loads it.
+vi.mock('firebase/app', () => ({
+  initializeApp: vi.fn(() => ({})),
+  getApps: vi.fn(() => []),
+}))
+vi.mock('firebase/auth', () => ({
+  getAuth: vi.fn(() => ({})),
+  signInWithCustomToken: vi.fn(),
+  signOut: vi.fn(),
+}))
+vi.mock('firebase/firestore', () => ({
+  getFirestore: vi.fn(() => ({})),
+  doc: vi.fn(),
+  onSnapshot: vi.fn(() => vi.fn()),
+}))
+
 vi.mock('@auth0/auth0-vue', () => ({
   // The auth0 plugin (app/plugins/1.auth0.ts) installs this as a Vue plugin.
   createAuth0: () => ({ install: () => {} }),

frontend/test/component/setup.ts

@@ -26,6 +26,9 @@ export default defineConfig({
           include: ['test/component/**/*.{test,spec}.ts'],
           environment: 'nuxt',
           setupFiles: ['test/component/setup.ts'],
+          // The Nuxt test env (setupNuxt) builds on first run; 10s is too short.
+          hookTimeout: 120000,
+          testTimeout: 30000,
         },
       }),
     ],