chore: stabilize vitest setup and fix failing tests (CircuitVerse#871)

Author: senutpal

.github/workflows/vitest.yml

@@ -0,0 +1,35 @@
+name: Tests
+
+on:
+    push:
+        branches:
+            - main
+    pull_request:
+
+permissions: {}
+
+concurrency:
+    group: ci-${{ github.event.pull_request.number || github.ref }}
+    cancel-in-progress: true
+
+jobs:
+    test:
+        name: Run Tests
+        runs-on: ubuntu-latest
+        timeout-minutes: 10
+
+        steps:
+            - name: Checkout repository
+              uses: actions/checkout@v4
+
+            - name: Setup Node.js
+              uses: actions/setup-node@v4
+              with:
+                  node-version: '22'
+                  cache: 'npm'
+
+            - name: Install dependencies
+              run: npm ci
+
+            - name: Run tests
+              run: npm run test -- --reporter=github-actions

package.json

@@ -11,7 +11,7 @@
         "lint": "eslint --ext .js,.vue --ignore-path .gitignore --fix src",
         "format": "prettier .  --write",
         "postinstall": "husky install",
-        "test": "vitest"
+        "test": "vitest --silent"
     },
     "dependencies": {
         "@fortawesome/fontawesome-free": "^6.5.1",

src/simulator/spec/vitestSetup.ts

@@ -1,3 +1,5 @@
+import { vi, afterEach } from 'vitest';
+
 global.window = window;
 global.jQuery = require('jquery');
 global.DPR = true;
@@ -9,3 +11,35 @@ window.$ = require('jquery');
 window.restrictedElements = [];
 window.userSignedIn = true;
 window.embed = false;
+
+vi.useFakeTimers()
+
+afterEach(() => {
+	vi.runOnlyPendingTimers()
+	vi.clearAllTimers()
+})
+
+vi.mock('@tauri-apps/api/event', () => ({
+	listen: vi.fn(() => Promise.resolve(() => {})),
+}))
+
+global.ResizeObserver = vi.fn().mockImplementation(() => ({
+	observe: vi.fn(),
+    unobserve: vi.fn(),
+    disconnect: vi.fn(),
+}))
+
+HTMLCanvasElement.prototype.getContext = vi.fn(() => ({
+    clearRect: vi.fn(),
+    fillRect: vi.fn(),
+    fillText: vi.fn(),
+    strokeRect: vi.fn(),
+    beginPath: vi.fn(),
+    moveTo: vi.fn(),
+    lineTo: vi.fn(),
+    stroke: vi.fn(),
+    closePath: vi.fn(),
+    arc: vi.fn(),
+    fill: vi.fn(),
+    rect: vi.fn(),
+})) 

v1/src/simulator/spec/vitestSetup.ts

@@ -1,3 +1,5 @@
+import { vi, afterEach } from 'vitest';
+
 global.window = window;
 global.jQuery = require('jquery');
 global.DPR = true;
@@ -9,3 +11,35 @@ window.$ = require('jquery');
 window.restrictedElements = [];
 window.userSignedIn = true;
 window.embed = false;
+
+vi.useFakeTimers()
+
+afterEach(() => {
+	vi.runOnlyPendingTimers()
+	vi.clearAllTimers()
+})
+
+vi.mock('@tauri-apps/api/event', () => ({
+	listen: vi.fn(() => Promise.resolve(() => {})),
+}))
+
+global.ResizeObserver = vi.fn().mockImplementation(() => ({
+	observe: vi.fn(),
+    unobserve: vi.fn(),
+    disconnect: vi.fn(),
+}))
+
+HTMLCanvasElement.prototype.getContext = vi.fn(() => ({
+    clearRect: vi.fn(),
+    fillRect: vi.fn(),
+    fillText: vi.fn(),
+    strokeRect: vi.fn(),
+    beginPath: vi.fn(),
+    moveTo: vi.fn(),
+    lineTo: vi.fn(),
+    stroke: vi.fn(),
+    closePath: vi.fn(),
+    arc: vi.fn(),
+    fill: vi.fn(),
+    rect: vi.fn(),
+})) 

vite.config.ts

@@ -56,16 +56,6 @@ export default defineConfig(() => {
                 },
             },
         },
-        test: {
-            globals: true,
-            environment: 'jsdom',
-            server: {
-                deps: {
-                    inline: ['vuetify'],
-                },
-            },
-            setupFiles: './src/simulator/spec/vitestSetup.ts',
-        },
         server: {
             port: 4000,
         },

vitest.workspace.ts

@@ -0,0 +1,79 @@
+import { defineWorkspace, defineConfig } from 'vitest/config'
+import { fileURLToPath, URL } from 'url'
+
+import vue from '@vitejs/plugin-vue'
+import vuetify from 'vite-plugin-vuetify'
+import { vueI18n } from '@intlify/vite-plugin-vue-i18n'
+import cssInjectedByJsPlugin from 'vite-plugin-css-injected-by-js'
+
+const createWorkspaceConfig = (version) =>
+    defineConfig({
+        plugins: [
+            vue(),
+            vuetify({ autoImport: true }),
+            cssInjectedByJsPlugin(),
+            vueI18n({
+                include: fileURLToPath(
+                    new URL(
+                        version === 'src'
+                            ? './src/locales/**'
+                            : `./${version}/src/locales/**`,
+                        import.meta.url
+                    )
+                ),
+            }),
+        ],
+
+        resolve: {
+            alias: {
+                '#': fileURLToPath(
+                    new URL(
+                        version === 'src' ? './src' : `./${version}/src`,
+                        import.meta.url
+                    )
+                ),
+                '@': fileURLToPath(
+                    new URL(
+                        version === 'src'
+                            ? './src/components'
+                            : `./${version}/src/components`,
+                        import.meta.url
+                    )
+                ),
+            },
+        },
+
+        test: {
+            name: version,
+            globals: true,
+            environment: 'jsdom',
+
+            include: [
+                version === 'src'
+                    ? 'src/**/*.{spec,test}.{js,ts}'
+                    : `${version}/src/**/*.{spec,test}.{js,ts}`,
+            ],
+
+            exclude:
+                version === 'src'
+                    ? ['v0/**/*', 'v1/**/*']
+                    : ['src/**/*', version === 'v0' ? 'v1/**/*' : 'v0/**/*'],
+
+            setupFiles: [
+                version === 'src'
+                    ? './src/simulator/spec/vitestSetup.ts'
+                    : `./${version}/src/simulator/spec/vitestSetup.ts`,
+            ],
+
+            server: {
+                deps: {
+                    inline: ['vuetify'],
+                },
+            },
+        },
+    })
+
+export default defineWorkspace([
+    createWorkspaceConfig('src'),
+    createWorkspaceConfig('v1'),
+])