From d49ac46a7457e67479a9a62893434ad283ff3a89 Mon Sep 17 00:00:00 2001 From: Kai Salmen Date: Fri, 27 Sep 2024 10:53:47 +0200 Subject: [PATCH] Update vitest/vscode config to support debugging. Use playwright only for debugging, webdriver-io for GHA --- .vscode/extensions.json | 1 + .vscode/launch.json | 21 ++++++ package-lock.json | 88 +++++++++++++++++++------ package.json | 13 ++-- vite.config.ts | 140 +++++++++++++++++----------------------- vitest.config.ts | 51 +++++++++++++++ vitest.debug.config.ts | 25 +++++++ vitest.workspace.ts | 2 +- 8 files changed, 234 insertions(+), 107 deletions(-) create mode 100644 vitest.config.ts create mode 100644 vitest.debug.config.ts diff --git a/.vscode/extensions.json b/.vscode/extensions.json index 0ac3ff8da..9e513465e 100644 --- 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 index e3d4f6cad..c3eca6c2b 100644 --- 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 index 7dd9116bc..3312d1b0d 100644 --- a/package-lock.json +++ b/package-lock.json @@ -15,8 +15,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", @@ -31,11 +31,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" } }, "node_modules/@ampproject/remapping": { @@ -2478,9 +2479,9 @@ } }, "node_modules/@types/node": { - "version": "20.16.5", - "resolved": "https://registry.npmjs.org/@types/node/-/node-20.16.5.tgz", - "integrity": "sha512-VwYCweNo3ERajwy0IUlqqcyZ8/A7Zwa9ZP3MnENWcB11AejO+tLy3pu850goUW2FC/IJMdZUfKpX/yxL1gymCA==", + "version": "20.16.9", + "resolved": "https://registry.npmjs.org/@types/node/-/node-20.16.9.tgz", + "integrity": "sha512-rkvIVJxsOfBejxK7I0FO5sa2WxFmJCzoDwcd88+fq/CUfynNywTo/1/T6hyFz22CyztsnLS9nVlHOnTI36RH5w==", "dev": true, "license": "MIT", "dependencies": { @@ -2506,9 +2507,9 @@ "dev": true }, "node_modules/@types/react": { - "version": "18.3.8", - "resolved": "https://registry.npmjs.org/@types/react/-/react-18.3.8.tgz", - "integrity": "sha512-syBUrW3/XpnW4WJ41Pft+I+aPoDVbrBVQGEnbD7NijDGlVC+8gV/XKRY+7vMDlfPpbwYt0l1vd/Sj8bJGMbs9Q==", + "version": "18.3.9", + "resolved": "https://registry.npmjs.org/@types/react/-/react-18.3.9.tgz", + "integrity": "sha512-+BpAVyTpJkNWWSSnaLBk6ePpHLOGJKnEQNbINNovPWzvEUyAe3e+/d494QdEh71RekM/qV7lw6jzf1HGrJyAtQ==", "dev": true, "license": "MIT", "dependencies": { @@ -8174,6 +8175,53 @@ "url": "https://github.com/sponsors/jonschlinkert" } }, + "node_modules/playwright": { + "version": "1.47.2", + "resolved": "https://registry.npmjs.org/playwright/-/playwright-1.47.2.tgz", + "integrity": "sha512-nx1cLMmQWqmA3UsnjaaokyoUpdVaaDhJhMoxX2qj3McpjnsqFHs516QAKYhqHAgOP+oCFTEOCOAaD1RgD/RQfA==", + "dev": true, + "license": "Apache-2.0", + "dependencies": { + "playwright-core": "1.47.2" + }, + "bin": { + "playwright": "cli.js" + }, + "engines": { + "node": ">=18" + }, + "optionalDependencies": { + "fsevents": "2.3.2" + } + }, + "node_modules/playwright-core": { + "version": "1.47.2", + "resolved": "https://registry.npmjs.org/playwright-core/-/playwright-core-1.47.2.tgz", + "integrity": "sha512-3JvMfF+9LJfe16l7AbSmU555PaTl2tPyQsVInqm3id16pdDfvZ8TTZ/pyzmkbDrZTQefyzU7AIHlZqQnxpqHVQ==", + "dev": true, + "license": "Apache-2.0", + "bin": { + "playwright-core": "cli.js" + }, + "engines": { + "node": ">=18" + } + }, + "node_modules/playwright/node_modules/fsevents": { + "version": "2.3.2", + "resolved": "https://registry.npmjs.org/fsevents/-/fsevents-2.3.2.tgz", + "integrity": "sha512-xiqMQR4xAeHTuB9uWm+fFRcIOgKBMiOBP+eXiyT7jsgVCq1bkVygt00oASowB7EdtpOHaaPgKt812P9ab+DDKA==", + "dev": true, + "hasInstallScript": true, + "license": "MIT", + "optional": true, + "os": [ + "darwin" + ], + "engines": { + "node": "^8.16.0 || ^10.6.0 || >=11.0.0" + } + }, "node_modules/portfinder": { "version": "1.0.32", "resolved": "https://registry.npmjs.org/portfinder/-/portfinder-1.0.32.tgz", @@ -9956,9 +10004,9 @@ } }, "node_modules/vite": { - "version": "5.4.7", - "resolved": "https://registry.npmjs.org/vite/-/vite-5.4.7.tgz", - "integrity": "sha512-5l2zxqMEPVENgvzTuBpHer2awaetimj2BGkhBPdnwKbPNOlHsODU+oiazEZzLK7KhAnOrO+XGYJYn4ZlUhDtDQ==", + "version": "5.4.8", + "resolved": "https://registry.npmjs.org/vite/-/vite-5.4.8.tgz", + "integrity": "sha512-FqrItQ4DT1NC4zCUqMB4c4AZORMKIa0m8/URVCZ77OZ/QSNeJ54bU1vrFADbDsuwfIPcgknRkmqakQcgnL4GiQ==", "dev": true, "license": "MIT", "dependencies": { @@ -10670,9 +10718,9 @@ } }, "node_modules/webdriver": { - "version": "9.1.0", - "resolved": "https://registry.npmjs.org/webdriver/-/webdriver-9.1.0.tgz", - "integrity": "sha512-cdTAJ3OFyAEsQVDNqwP8f21I/xaazIotSHrLGcIgIwgfe4rzQpnpXxz2UnXQTtSjjnVmVoYOUAmYhScO02+uww==", + "version": "9.1.1", + "resolved": "https://registry.npmjs.org/webdriver/-/webdriver-9.1.1.tgz", + "integrity": "sha512-XRZitu+W3xpnuA6gFgiSGBCt2P8m4g2Yzt+zXgPqlKiDGwr27F5m40pP2AnlQBlQO7hw0OJJa68QR1KW2D9cHA==", "dev": true, "license": "MIT", "dependencies": { @@ -10691,9 +10739,9 @@ } }, "node_modules/webdriverio": { - "version": "9.1.0", - "resolved": "https://registry.npmjs.org/webdriverio/-/webdriverio-9.1.0.tgz", - "integrity": "sha512-6wJ7emnLhxJ3F10cUGaBjzgaabZCByAdNA59/J0Ctg/i40lOdsmHpoYVktlbXYUeOdqUC0raVLi6pngBOSqL1g==", + "version": "9.1.1", + "resolved": "https://registry.npmjs.org/webdriverio/-/webdriverio-9.1.1.tgz", + "integrity": "sha512-jREz3Vy7ItpNn0HG/vh5oZYAzSv4PGGy8mxht7j4BXkcUjkPCBfHtAAXHRwwJVxu1rWJLzn4QhfjLIaEFe73NA==", "dev": true, "license": "MIT", "dependencies": { @@ -10723,7 +10771,7 @@ "rgb2hex": "0.2.5", "serialize-error": "^11.0.3", "urlpattern-polyfill": "^10.0.0", - "webdriver": "9.1.0" + "webdriver": "9.1.1" }, "engines": { "node": ">=18.20.0" diff --git a/package.json b/package.json index 30e372b15..53e2566ee 100644 --- 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 index b94de5e43..9de75895b 100644 --- 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); diff --git a/vitest.config.ts b/vitest.config.ts new file mode 100644 index 000000000..7889b113e --- /dev/null +++ b/vitest.config.ts @@ -0,0 +1,51 @@ +/* -------------------------------------------------------------------------------------------- + * Copyright (c) 2024 TypeFox and others. + * Licensed under the MIT License. See LICENSE in the package root for license information. + * ------------------------------------------------------------------------------------------ */ + +import { defineConfig, defineConfig as vitestDefineConfig, mergeConfig, UserConfig } from 'vitest/config'; +import viteConfig from './vite.config.js'; + +export const vitestConfig: UserConfig = { + test: { + testTimeout: 10000, + pool: 'threads', + poolOptions: { + threads: { + isolate: true + } + }, + browser: { + enabled: true, + headless: true, + name: 'chrome', + provider: 'webdriverio', + api: { + port: 20101, + } + }, + include: [ + '**/client/test/tools/index.test.ts', + '**/wrapper/test/vscode/services.test.ts', + '**/wrapper/test/editorAppBase.test.ts', + '**/wrapper/test/editorAppClassic.test.ts', + '**/wrapper/test/editorAppExtended.test.ts', + '**/wrapper/test/languageClientWrapper.test.ts', + '**/wrapper/test/utils.test.ts', + '**/wrapper/test/wrapper.test.ts', + '**/wrapper-react/test/index.test.tsx' + ] + } +}; + +export default defineConfig(configEnv => { + + console.log('vitestConfig:', vitestConfig); + + const mergedConfig = mergeConfig( + viteConfig(configEnv), + vitestDefineConfig(vitestConfig) + ); + + return mergedConfig; +}); diff --git a/vitest.debug.config.ts b/vitest.debug.config.ts new file mode 100644 index 000000000..75a4de6bf --- /dev/null +++ b/vitest.debug.config.ts @@ -0,0 +1,25 @@ +/* -------------------------------------------------------------------------------------------- + * Copyright (c) 2024 TypeFox and others. + * Licensed under the MIT License. See LICENSE in the package root for license information. + * ------------------------------------------------------------------------------------------ */ + +import { defineConfig, mergeConfig } from 'vitest/config'; +import viteConfig from './vite.config.js'; +import { vitestConfig } from './vitest.config.js'; + +export default defineConfig(configEnv => { + + const vitestDebugConfig = vitestConfig; + vitestDebugConfig.test!.browser!.name = 'chromium'; + vitestDebugConfig.test!.browser!.provider = 'playwright'; + + console.log('vitestDebugConfig:', vitestDebugConfig); + + const mergedConfig = mergeConfig( + viteConfig(configEnv), + defineConfig(vitestDebugConfig) + ); + + return mergedConfig; + +}); diff --git a/vitest.workspace.ts b/vitest.workspace.ts index 6e737db6c..0d797a68a 100644 --- a/vitest.workspace.ts +++ b/vitest.workspace.ts @@ -7,5 +7,5 @@ import * as path from 'path'; import { defineWorkspace } from 'vitest/config'; export default defineWorkspace([ - path.resolve(__dirname, './vite.config.ts') + path.resolve(__dirname, './vitest.config.ts') ]);