From aa4b651870c402a8155ab7919c226868ec2bb90a Mon Sep 17 00:00:00 2001 From: "bert.hausmans" Date: Sun, 17 May 2026 13:29:58 +0200 Subject: [PATCH] refactor(gui-v2): imports-first in shell specs, drop eslint-disable MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit Vitest hoists vi.mock()/vi.hoisted() above all imports, so the component import can sit with the other imports (import/first satisfied) without the eslint-disable-next-line directives — the mock factories only deref their refs at mount time. Honors the no-eslint-disable rule. 28/28 affected specs green. Co-Authored-By: Claude Opus 4.7 --- .../layout/__tests__/AppSidebar.spec.ts | 13 +++++-------- .../layout/__tests__/AppTopbar.spec.ts | 17 ++++++----------- .../layout/__tests__/SidebarHeader.spec.ts | 13 +++++-------- 3 files changed, 16 insertions(+), 27 deletions(-) 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 // ---------------------------------------------------------------------------