test: add mountWithVuexy helper, install axe-core, segment vitest configs
Foundation for the upcoming component / integration / a11y tests.
vitest.config.ts now declares two projects:
- "unit" — pure-logic tests under tests/unit/, src/**/__tests__/,
and tests/*.spec.ts (the legacy sanity test).
happy-dom, no Vuetify, fast path.
- "component" — tests under tests/component/, tests/integration/,
tests/a11y/. jsdom, Vuetify inlined via SSR noExternal,
CSS imports processed (so :root token sheet loads), and
no global vue-router mock so the real router can run.
Both share the same alias map and AutoImport bag.
tests/utils/mountWithVuexy.ts (new):
- Real Vuetify with the Crewli theme tokens
- createTestingPinia (actions execute by default; stubActions opt-in)
- vue-router with memory history at the configured initialPath + ?query
- Fresh QueryClient per call (zero cross-test cache leak)
- Notification mock injected via Pinia plugin so any useNotificationStore()
resolves to { show: vi.fn(), hide: vi.fn() } — matches the actual
NotificationStore API surface (per Phase A finding A4)
- Imports `@/styles/tokens/_timetable.css` at module load so JSDOM resolves
var(--tt-…) when components call getComputedStyle()
tests/setup.component.ts (new):
- vitest-axe matcher registration
- JSDOM polyfills: scrollIntoView, ResizeObserver, visualViewport, body
bounding rect — Vuetify menus / overlays would crash without them
- Deterministic crypto polyfill (mirrors tests/setup.ts so
generateIdempotencyKey() is stable, but without the router mock)
tests/component/_smoke.test.ts (new):
- Mounts a trivial component → asserts wrapper, queryClient, pinia,
router, notificationMock all populated
- Calls getComputedStyle(documentElement).getPropertyValue('--tt-status-confirmed-bg')
→ asserts '#e8f8f0' (proves the CSS token sheet really loaded)
devDependencies added: jsdom, axe-core, vitest-axe, @pinia/testing.
Total: 319 → 321 tests; 42 → 43 files. Both projects green.
Co-Authored-By: Claude Opus 4.7 (1M context) <noreply@anthropic.com>
This commit is contained in:
@@ -81,6 +81,7 @@
|
||||
"@iconify/utils": "2.3.0",
|
||||
"@iconify/vue": "4.1.2",
|
||||
"@intlify/unplugin-vue-i18n": "11.0.1",
|
||||
"@pinia/testing": "^1.0.3",
|
||||
"@stylistic/eslint-plugin-js": "0.0.4",
|
||||
"@stylistic/eslint-plugin-ts": "0.0.4",
|
||||
"@stylistic/stylelint-config": "1.0.1",
|
||||
@@ -101,6 +102,7 @@
|
||||
"@vitejs/plugin-vue": "6.0.1",
|
||||
"@vitejs/plugin-vue-jsx": "5.1.1",
|
||||
"@vue/test-utils": "^2.4.9",
|
||||
"axe-core": "^4.11.4",
|
||||
"baseline-browser-mapping": "^2.10.16",
|
||||
"eslint": "8.57.1",
|
||||
"eslint-config-airbnb-base": "15.0.0",
|
||||
@@ -127,6 +129,7 @@
|
||||
"eslint-plugin-vue": "9.33.0",
|
||||
"eslint-plugin-yml": "1.19.0",
|
||||
"happy-dom": "^20.9.0",
|
||||
"jsdom": "^29.1.1",
|
||||
"msw": "2.6.8",
|
||||
"postcss-html": "1.8.0",
|
||||
"postcss-scss": "4.0.9",
|
||||
@@ -148,6 +151,7 @@
|
||||
"vite-plugin-vuetify": "2.1.2",
|
||||
"vite-svg-loader": "5.1.0",
|
||||
"vitest": "^4.1.5",
|
||||
"vitest-axe": "^0.1.0",
|
||||
"vue-eslint-parser": "9.4.3",
|
||||
"vue-shepherd": "3.0.0",
|
||||
"vue-tsc": "3.1.2"
|
||||
|
||||
Reference in New Issue
Block a user