Update vitest/vscode config to support debugging. Use playwright only…

… for debugging, webdriver-io for GHA
TypeFox · Sep 27, 2024 · d49ac46 · d49ac46
1 parent 72447e8
commit d49ac46
Show file tree

Hide file tree

Showing 8 changed files with 234 additions and 107 deletions.
diff --git a/.vscode/extensions.json b/.vscode/extensions.json
@@ -2,6 +2,7 @@
   "recommendations": [
     "dbaeumer.vscode-eslint",
     "editorconfig.editorconfig",
+    "davidanson.vscode-markdownlint",
     "vitest.explorer"
   ]
 }
diff --git a/.vscode/launch.json b/.vscode/launch.json
@@ -29,6 +29,27 @@
           "url": "http://localhost:20001",
           "webRoot": "${workspaceFolder}",
           "userDataDir": "${workspaceFolder}/.vscode/profile"
+        },
+        {
+          "type": "node",
+          "request": "launch",
+          "name": "Run Vitest Browser Debug",
+          "program": "${workspaceRoot}/node_modules/vitest/vitest.mjs",
+          "args": ["--config", "vitest.debug.config.ts", "--inspect-brk=20222", "--browser", "--no-file-parallelism"],
+          "console": "integratedTerminal"
+        },
+        {
+          "type": "chrome",
+          "request": "attach",
+          "name": "Attach to Playwright Chromium",
+          "port": 20222
         }
+    ],
+    "compounds": [
+      {
+        "name": "Debug Vitest Browser",
+        "configurations": ["Attach to Playwright Chromium", "Run Vitest Browser Debug"],
+        "stopAll": true
+      }
     ]
 }
diff --git a/package-lock.json b/package-lock.json
diff --git a/package.json b/package.json
@@ -5,8 +5,8 @@
     "@codingame/esbuild-import-meta-url-plugin": "~1.0.2",
     "@codingame/monaco-vscode-rollup-vsix-plugin": "~9.0.3",
     "@testing-library/react": "~16.0.1",
-    "@types/node": "~20.16.5",
-    "@types/react": "~18.3.8",
+    "@types/node": "~20.16.9",
+    "@types/react": "~18.3.9",
     "@types/react-dom": "~18.3.0",
     "@types/vscode": "~1.93.0",
     "@typescript-eslint/eslint-plugin": "~7.18.0",
@@ -21,11 +21,12 @@
     "eslint-plugin-unused-imports": "~3.2.0",
     "http-server": "~14.1.1",
     "minimatch": "~10.0.1",
+    "playwright": "~1.47.2",
     "typescript": "~5.5.4",
-    "vite": "~5.4.7",
+    "vite": "~5.4.8",
     "vite-node": "~2.1.1",
     "vitest": "~2.1.1",
-    "webdriverio": "~9.1.0"
+    "webdriverio": "~9.1.1"
   },
   "volta": {
     "node": "20.17.0",
@@ -56,7 +57,9 @@
     "release:prepare": "npm run reset:repo && npm ci && npm run build && npm run lint && npm run test:run",
     "reset:repo": "git clean -f -X -d",
     "test": "vitest",
-    "test:run": "vitest --run"
+    "test:run": "vitest --run",
+    "test:debug": "vitest --config vitest.debug.config.ts --inspect-brk=20222 --browser --no-file-parallelism",
+    "test:install": "playwright install"
   },
   "workspaces": [
     "packages/client",

diff --git a/vite.config.ts b/vite.config.ts
@@ -3,99 +3,77 @@
  * Licensed under the MIT License. See LICENSE in the package root for license information.
  * ------------------------------------------------------------------------------------------ */
 
-import { defineConfig as defineViteConfig, mergeConfig } from 'vite';
-import { defineConfig as defineVitestConfig } from 'vitest/config';
+import { defineConfig } from 'vite';
 import * as path from 'path';
-// import * as fs from 'fs';
 import importMetaUrlPlugin from '@codingame/esbuild-import-meta-url-plugin';
 import vsixPlugin from '@codingame/monaco-vscode-rollup-vsix-plugin';
 import react from '@vitejs/plugin-react';
 
-const viteConfig = defineViteConfig({
-    build: {
-        target: 'esnext',
-        rollupOptions: {
-            input: {
-                index: path.resolve(__dirname, 'index.html'),
-                // bare monaco-languageclient
-                bare: path.resolve(__dirname, 'packages/examples/bare.html'),
+export default defineConfig(({ command }) => {
+    console.log(`Running: ${command}`);
+    return {
+        build: {
+            target: 'esnext',
+            rollupOptions: {
+                input: {
+                    index: path.resolve(__dirname, 'index.html'),
+                    // bare monaco-languageclient
+                    bare: path.resolve(__dirname, 'packages/examples/bare.html'),
 
-                // monaco-editor-wrapper
-                // json
-                wrapperWebSocket: path.resolve(__dirname, 'packages/examples/json.html'),
-                browser: path.resolve(__dirname, 'packages/examples/browser.html'),
-                // langium
-                wrapperStatemachine: path.resolve(__dirname, 'packages/examples/statemachine.html'),
-                wrapperLangium: path.resolve(__dirname, 'packages/examples/langium.html'),
-                // python
-                python: path.resolve(__dirname, 'packages/examples/python.html'),
-                // grrovy
-                groovy: path.resolve(__dirname, 'packages/examples/groovy.html'),
+                    // monaco-editor-wrapper
+                    // json
+                    wrapperWebSocket: path.resolve(__dirname, 'packages/examples/json.html'),
+                    browser: path.resolve(__dirname, 'packages/examples/browser.html'),
+                    // langium
+                    wrapperStatemachine: path.resolve(__dirname, 'packages/examples/statemachine.html'),
+                    wrapperLangium: path.resolve(__dirname, 'packages/examples/langium.html'),
+                    // python
+                    python: path.resolve(__dirname, 'packages/examples/python.html'),
+                    // grrovy
+                    groovy: path.resolve(__dirname, 'packages/examples/groovy.html'),
 
-                // json & python
-                twoLangaugeClients: path.resolve(__dirname, 'packages/examples/two_langauge_clients.html'),
+                    // json & python
+                    twoLangaugeClients: path.resolve(__dirname, 'packages/examples/two_langauge_clients.html'),
 
-                // monaco-editor-react
-                // langium
-                reactStatemachine: path.resolve(__dirname, 'packages/examples/react_statemachine.html'),
-                // python
-                reactPython: path.resolve(__dirname, 'packages/examples/react_python.html'),
+                    // monaco-editor-react
+                    // langium
+                    reactStatemachine: path.resolve(__dirname, 'packages/examples/react_statemachine.html'),
+                    // python
+                    reactPython: path.resolve(__dirname, 'packages/examples/react_python.html'),
 
-                // other examples
-                wrapperTs: path.resolve(__dirname, 'packages/examples/ts.html')
+                    // other examples
+                    wrapperTs: path.resolve(__dirname, 'packages/examples/ts.html')
+                }
             }
-        }
-    },
-    resolve: {
-        // not needed here, see https://github.com/TypeFox/monaco-languageclient#vite-dev-server-troubleshooting
-        // dedupe: ['vscode']
-    },
-    server: {
-        origin: 'http://localhost:20001',
-        port: 20001
-    },
-    optimizeDeps: {
-        esbuildOptions: {
-            plugins: [
-                importMetaUrlPlugin
+        },
+        resolve: {
+            // not needed here, see https://github.com/TypeFox/monaco-languageclient#vite-dev-server-troubleshooting
+            // dedupe: ['vscode']
+        },
+        server: {
+            origin: 'http://localhost:20001',
+            port: 20001
+        },
+        optimizeDeps: {
+            esbuildOptions: {
+                plugins: [
+                    importMetaUrlPlugin
+                ]
+            },
+            include: [
+                'vscode-textmate',
+                'vscode-oniguruma'
             ]
         },
-        include: [
-            'vscode-textmate',
-            'vscode-oniguruma'
-        ]
-    },
-    plugins: [
-        vsixPlugin(),
-        react(),
-    ],
-    define: {
-        rootDirectory: JSON.stringify(__dirname)
-    },
-    worker: {
-        format: 'es'
-    }
-});
-
-const vitestConfig = defineVitestConfig({
-    test: {
-        testTimeout: 10000,
-        pool: 'threads',
-        poolOptions: {
-            threads: {
-                isolate: true
-            }
+        plugins: [
+            vsixPlugin(),
+            react(),
+        ],
+        define: {
+            rootDirectory: JSON.stringify(__dirname)
         },
-        browser: {
-            enabled: true,
-            headless: true,
-            name: 'chrome',
-            provider: 'webdriverio',
-            api: {
-                port: 20101
-            }
+        worker: {
+            format: 'es'
         }
-    }
+    };
 });
-
-export default mergeConfig(viteConfig, vitestConfig);