diff --git a/apps/app/src/components-v2/layout/__tests__/AppSidebar.spec.ts b/apps/app/src/components-v2/layout/__tests__/AppSidebar.spec.ts index 0f7c4b40..32cce9b2 100644 --- a/apps/app/src/components-v2/layout/__tests__/AppSidebar.spec.ts +++ b/apps/app/src/components-v2/layout/__tests__/AppSidebar.spec.ts @@ -21,12 +21,16 @@ import { mount } from '@vue/test-utils' import { ref } from 'vue' import { beforeEach, describe, expect, it, vi } from 'vitest' import { useShellUiStore } from '@/stores/useShellUiStore' +import AppSidebar from '@/components-v2/layout/AppSidebar.vue' import type { V2NavGroup } from '@/types/v2/nav' // --------------------------------------------------------------------------- // Mock @vueuse/core so we can control `isMobile` per test. // AppSidebar uses useBreakpoints(breakpointsTailwind).smaller('lg'). -// We return an object whose .smaller() method returns a controllable ref. +// Vitest hoists vi.mock() above all imports, so the mock is registered +// before AppSidebar's transitive @vueuse/core import resolves; the +// factory only dereferences mockIsMobileRef inside .smaller(), invoked +// at component-mount time (well after this const initialises). // --------------------------------------------------------------------------- const mockIsMobileRef = ref(false) @@ -38,13 +42,6 @@ vi.mock('@vueuse/core', () => ({ }), })) -// --------------------------------------------------------------------------- -// Import component AFTER mock is set up -// --------------------------------------------------------------------------- - -// eslint-disable-next-line import/first -- intentional: mock must be declared first -import AppSidebar from '@/components-v2/layout/AppSidebar.vue' - // --------------------------------------------------------------------------- // A minimal nav group fixture // --------------------------------------------------------------------------- diff --git a/apps/app/src/components-v2/layout/__tests__/AppTopbar.spec.ts b/apps/app/src/components-v2/layout/__tests__/AppTopbar.spec.ts index e4907549..2eb2da90 100644 --- a/apps/app/src/components-v2/layout/__tests__/AppTopbar.spec.ts +++ b/apps/app/src/components-v2/layout/__tests__/AppTopbar.spec.ts @@ -24,12 +24,14 @@ import { mount } from '@vue/test-utils' import { beforeEach, describe, expect, it, vi } from 'vitest' import { useShellUiStore } from '@/stores/useShellUiStore' import { useAuthStore } from '@/stores/useAuthStore' +import AppTopbar from '@/components-v2/layout/AppTopbar.vue' // --------------------------------------------------------------------------- -// Mock vue-router (useBreadcrumb calls useRoute internally) -// vi.hoisted() is required so these vi.fn() instances are initialised -// before the vi.mock() factory runs (vi.mock is hoisted to top of file by -// the Vitest transform, but const declarations are not). +// Mock vue-router (useBreadcrumb calls useRoute internally). +// vi.hoisted() initialises these vi.fn() instances before the vi.mock() +// factory runs. Vitest hoists vi.hoisted() + vi.mock() above all imports, +// so the mock is registered before AppTopbar's transitive vue-router +// import resolves — physical import order here is irrelevant to that. // --------------------------------------------------------------------------- const { mockRouterPush, mockUseRoute } = vi.hoisted(() => ({ @@ -44,13 +46,6 @@ vi.mock('vue-router', () => ({ }), })) -// --------------------------------------------------------------------------- -// Import component AFTER mocks -// --------------------------------------------------------------------------- - -// eslint-disable-next-line import/first -- intentional: mocks must precede import -import AppTopbar from '@/components-v2/layout/AppTopbar.vue' - // --------------------------------------------------------------------------- // Stubs for PrimeVue components // --------------------------------------------------------------------------- diff --git a/apps/app/src/components-v2/layout/__tests__/SidebarHeader.spec.ts b/apps/app/src/components-v2/layout/__tests__/SidebarHeader.spec.ts index 8dd07cea..39a4c6c9 100644 --- a/apps/app/src/components-v2/layout/__tests__/SidebarHeader.spec.ts +++ b/apps/app/src/components-v2/layout/__tests__/SidebarHeader.spec.ts @@ -16,11 +16,15 @@ import { mount } from '@vue/test-utils' import { ref } from 'vue' import { beforeEach, describe, expect, it, vi } from 'vitest' import { useShellUiStore } from '@/stores/useShellUiStore' +import SidebarHeader from '@/components-v2/layout/SidebarHeader.vue' // --------------------------------------------------------------------------- // Mock @vueuse/core so we can control `isMobile` per test. // The component uses useBreakpoints(breakpointsTailwind).smaller('lg'). -// We return an object whose .smaller() method returns a controllable ref. +// Vitest hoists vi.mock() above all imports, so the mock is registered +// before SidebarHeader's transitive @vueuse/core import resolves; the +// factory only dereferences mockIsMobileRef inside .smaller(), invoked +// at component-mount time (well after this const initialises). // --------------------------------------------------------------------------- const mockIsMobileRef = ref(false) @@ -32,13 +36,6 @@ vi.mock('@vueuse/core', () => ({ }), })) -// --------------------------------------------------------------------------- -// Import component AFTER mock is set up -// --------------------------------------------------------------------------- - -// eslint-disable-next-line import/first -- intentional: mock must be declared first -import SidebarHeader from '@/components-v2/layout/SidebarHeader.vue' - // --------------------------------------------------------------------------- // Stubs — keep tests fast and focused on logic, not child rendering // ---------------------------------------------------------------------------