Add vitest support

Author: mythz

MyApp.Client/package.json

@@ -6,7 +6,10 @@
   "scripts": {
     "dev": "vite",
     "build": "vue-tsc -b && vite build",
-    "preview": "vite preview"
+    "preview": "vite preview",
+    "test": "vitest",
+    "test:ui": "vitest --ui",
+    "test:run": "vitest run"
   },
   "dependencies": {
     "@servicestack/client": "^2.1.13",
@@ -19,9 +22,13 @@
   "devDependencies": {
     "@types/node": "^24.10.1",
     "@vitejs/plugin-vue": "^6.0.1",
+    "@vitest/ui": "^4.0.15",
+    "@vue/test-utils": "^2.4.6",
     "@vue/tsconfig": "^0.8.1",
+    "happy-dom": "^20.0.11",
     "typescript": "~5.9.3",
     "vite": "^7.2.4",
+    "vitest": "^4.0.15",
     "vue-tsc": "^3.1.4"
   }
 }

MyApp.Client/src/lib/auth.test.ts

@@ -0,0 +1,51 @@
+import { describe, it, expect } from 'vitest'
+import { createAttrs } from './auth'
+
+describe('auth utilities', () => {
+  describe('createAttrs', () => {
+    it('should return empty array for null auth', () => {
+      const result = createAttrs(null)
+      expect(result).toEqual([])
+    })
+
+    it('should return empty array for undefined auth', () => {
+      const result = createAttrs(undefined)
+      expect(result).toEqual([])
+    })
+
+    it('should return auth attr for authenticated user with no roles or permissions', () => {
+      const result = createAttrs({})
+      expect(result).toEqual(['auth'])
+    })
+
+    it('should include roles with role: prefix', () => {
+      const result = createAttrs({
+        roles: ['Admin', 'Manager']
+      })
+      expect(result).toEqual(['auth', 'role:Admin', 'role:Manager'])
+    })
+
+    it('should include permissions with perm: prefix', () => {
+      const result = createAttrs({
+        permissions: ['ReadData', 'WriteData']
+      })
+      expect(result).toEqual(['auth', 'perm:ReadData', 'perm:WriteData'])
+    })
+
+    it('should include both roles and permissions', () => {
+      const result = createAttrs({
+        roles: ['Admin'],
+        permissions: ['ReadData', 'WriteData']
+      })
+      expect(result).toEqual(['auth', 'role:Admin', 'perm:ReadData', 'perm:WriteData'])
+    })
+
+    it('should handle empty roles and permissions arrays', () => {
+      const result = createAttrs({
+        roles: [],
+        permissions: []
+      })
+      expect(result).toEqual(['auth'])
+    })
+  })
+})

MyApp.Client/src/main.ts

@@ -6,7 +6,6 @@ import '../styles/style.css'
 import App from '@/App.vue'
 import Index from '@/index.vue'
 import Profile from '@/profile.vue'
-import Test from '@/test.vue'
 import { isServerRoute, useApp } from '@/lib/gateway'
 import { configRouter } from '@/lib/auth'
 
@@ -21,7 +20,6 @@ if (colorScheme === 'dark') {
 export const router = configRouter(createRouter({
     history: createWebHistory(),
     routes: [
-        { path: '/test', component: Test },
         { path: '/profile', component: Profile },
         { path: '/:pathMatch(.*)*', component: Index }
     ],

MyApp.Client/src/test.vue

@@ -1,4 +1,4 @@
-import { defineConfig } from 'vite'
+import { defineConfig } from 'vitest/config'
 import tailwindcss from '@tailwindcss/vite'
 import { fileURLToPath } from 'url'
 
@@ -21,5 +21,9 @@ export default defineConfig({
   server: {
     host: true, // Listen on all interfaces (both IPv4 and IPv6)
     open: false,
+  },
+  test: {
+    environment: 'happy-dom',
+    globals: true,
   }
 })