From 910892ed937681c82465f51f657904578adb8ae9 Mon Sep 17 00:00:00 2001 From: Vladimir Date: Thu, 29 May 2025 10:37:58 +0200 Subject: [PATCH] chore: simplify working with UI package in dev (#8044) --- .github/workflows/ci.yml | 1 + .github/workflows/cr.yml | 3 +- .github/workflows/publish.yml | 3 +- packages/browser/src/client/client.ts | 2 +- packages/ui/README.md | 14 +++++++++ packages/ui/browser.dev.js | 11 +++++++ .../components/dashboard/ErrorEntry.vue | 8 ++--- .../ui/client/composables/client/index.ts | 12 -------- packages/ui/client/constants.ts | 4 +-- packages/ui/vite.config.ts | 29 ++++++++++++------- packages/vite-node/rollup.config.js | 2 +- packages/vitest/rollup.config.js | 14 ++++++++- .../vitest/src/node/config/resolveConfig.ts | 2 +- packages/vitest/src/shims.dev.d.ts | 5 ++++ scripts/publish-ci.ts | 4 +++ test/core/test/cli-test.test.ts | 3 ++ test/test-utils/index.ts | 2 ++ 17 files changed, 85 insertions(+), 34 deletions(-) create mode 100644 packages/ui/browser.dev.js create mode 100644 packages/vitest/src/shims.dev.d.ts diff --git a/.github/workflows/ci.yml b/.github/workflows/ci.yml index 0c0018377..ca359cf69 100644 --- a/.github/workflows/ci.yml +++ b/.github/workflows/ci.yml @@ -19,6 +19,7 @@ concurrency: env: PLAYWRIGHT_BROWSERS_PATH: ${{ github.workspace }}/.cache/ms-playwright + VITEST_GENERATE_UI_TOKEN: 'true' jobs: lint: diff --git a/.github/workflows/cr.yml b/.github/workflows/cr.yml index e66110b4f..216e55fee 100644 --- a/.github/workflows/cr.yml +++ b/.github/workflows/cr.yml @@ -41,7 +41,8 @@ jobs: - name: Build run: pnpm build env: - NO_VITE_TEST_WATCHER_DEBUG: '1' + VITEST_GENERATE_UI_TOKEN: 'true' + VITE_TEST_WATCHER_DEBUG: 'false' - name: Publish to StackBlitz run: pnpx pkg-pr-new publish --compact --no-template --pnpm './packages/*' diff --git a/.github/workflows/publish.yml b/.github/workflows/publish.yml index 542f84db3..cc8d8d2c9 100644 --- a/.github/workflows/publish.yml +++ b/.github/workflows/publish.yml @@ -37,7 +37,8 @@ jobs: - name: Build run: pnpm build env: - NO_VITE_TEST_WATCHER_DEBUG: '1' + VITEST_GENERATE_UI_TOKEN: 'true' + VITE_TEST_WATCHER_DEBUG: 'false' - name: Publish to npm run: pnpm run publish-ci ${{ github.ref_name }} diff --git a/packages/browser/src/client/client.ts b/packages/browser/src/client/client.ts index 60fddb107..fa9a72d39 100644 --- a/packages/browser/src/client/client.ts +++ b/packages/browser/src/client/client.ts @@ -18,7 +18,7 @@ export const RPC_ID: string const METHOD = getBrowserState().method export const ENTRY_URL: string = `${ location.protocol === 'https:' ? 'wss:' : 'ws:' -}//${HOST}/__vitest_browser_api__?type=${PAGE_TYPE}&rpcId=${RPC_ID}&sessionId=${getBrowserState().sessionId}&projectName=${getBrowserState().config.name || ''}&method=${METHOD}&token=${(window as any).VITEST_API_TOKEN}` +}//${HOST}/__vitest_browser_api__?type=${PAGE_TYPE}&rpcId=${RPC_ID}&sessionId=${getBrowserState().sessionId}&projectName=${getBrowserState().config.name || ''}&method=${METHOD}&token=${(window as any).VITEST_API_TOKEN || '0'}` let setCancel = (_: CancelReason) => {} export const onCancel: Promise = new Promise((resolve) => { diff --git a/packages/ui/README.md b/packages/ui/README.md index ae9d1e81a..76bb591c8 100644 --- a/packages/ui/README.md +++ b/packages/ui/README.md @@ -13,3 +13,17 @@ nr ui:dev ```bash nr test --api ``` + +As the last command, you can use any of the available tests suites instead. Make sure that they run at 51204 port or specify a custom port with `VITE_PORT` environmental variable when running the first command. For example, + +```bash +VITE_PORT=3200 nr ui:dev +``` + +```bash +nr test --api=3200 +``` + +Open the browser at the URL printed by the first command. For example, `http://localhost:5173/`. If you see a connection error, it means the port is specified incorrectly. + +To preview the browser tab, uncomment the "browser-dev-preview" plugin in `vite.config.ts`. To configure the browser state, update the `__vitest_browser_runner__` object in `browser.dev.js`. diff --git a/packages/ui/browser.dev.js b/packages/ui/browser.dev.js new file mode 100644 index 000000000..2381161e6 --- /dev/null +++ b/packages/ui/browser.dev.js @@ -0,0 +1,11 @@ +window.__vitest_browser_runner__ = { + files: [], + config: { + browser: { + name: 'chrome', + }, + }, + type: 'orchestrator', + provider: 'playwright', + wrapModule: () => {}, +} diff --git a/packages/ui/client/components/dashboard/ErrorEntry.vue b/packages/ui/client/components/dashboard/ErrorEntry.vue index 295f4791b..88801f970 100644 --- a/packages/ui/client/components/dashboard/ErrorEntry.vue +++ b/packages/ui/client/components/dashboard/ErrorEntry.vue @@ -19,7 +19,7 @@ defineProps<{

This error originated in {{ error.VITEST_TEST_PATH }} test file. It doesn't mean the error was thrown inside the file itself, but while it was running.

-

+

The latest test that might've caused the error is {{ error.VITEST_TEST_NAME }}. It might mean one of the following:
  • @@ -29,8 +29,8 @@ defineProps<{ If the error occurred after the test had been completed, this was the last documented test before it was thrown.
-

-

+

+
This error was caught after test environment was torn down. Make sure to cancel any running tasks before test finishes:
  • @@ -40,5 +40,5 @@ defineProps<{ Wait for promises to resolve using the await keyword.
-

+
diff --git a/packages/ui/client/composables/client/index.ts b/packages/ui/client/composables/client/index.ts index 2b7571e3a..c440838b6 100644 --- a/packages/ui/client/composables/client/index.ts +++ b/packages/ui/client/composables/client/index.ts @@ -134,18 +134,6 @@ export function runCurrent() { } } -// for testing during dev -// export const browserState: BrowserRunnerState = { -// files: [], -// config: { -// browser: { -// name: 'chrome', -// } -// } as any, -// type: 'orchestrator', -// provider: 'webdriverio', -// wrapModule: () => {}, -// } // @ts-expect-error not typed global export const browserState = window.__vitest_browser_runner__ as | BrowserRunnerState diff --git a/packages/ui/client/constants.ts b/packages/ui/client/constants.ts index 582860c23..573a17278 100644 --- a/packages/ui/client/constants.ts +++ b/packages/ui/client/constants.ts @@ -1,9 +1,9 @@ // @ts-expect-error not typed global const browserState = window.__vitest_browser_runner__ -export const PORT = import.meta.hot && !browserState ? '51204' : location.port +export const PORT = import.meta.hot && !browserState ? (import.meta.env.VITE_PORT || '51204') : location.port export const HOST = [location.hostname, PORT].filter(Boolean).join(':') export const ENTRY_URL = `${ location.protocol === 'https:' ? 'wss:' : 'ws:' -}//${HOST}/__vitest_api__?token=${(window as any).VITEST_API_TOKEN}` +}//${HOST}/__vitest_api__?token=${(window as any).VITEST_API_TOKEN || '0'}` export const isReport = !!window.METADATA_PATH export const BASE_PATH = isReport ? import.meta.env.BASE_URL : __BASE_PATH__ diff --git a/packages/ui/vite.config.ts b/packages/ui/vite.config.ts index 5dbaec0c7..ad9ee9016 100644 --- a/packages/ui/vite.config.ts +++ b/packages/ui/vite.config.ts @@ -1,4 +1,3 @@ -import type { UserConfig } from 'vite' import Vue from '@vitejs/plugin-vue' import { resolve } from 'pathe' import { presetAttributify, presetIcons, presetUno, transformerDirectives } from 'unocss' @@ -13,14 +12,14 @@ import Pages from 'vite-plugin-pages' // and ui using the link to load the report json data // const debugLink = 'http://127.0.0.1:4173/__vitest__' -export const config: UserConfig = { - root: __dirname, +export default defineConfig({ + root: import.meta.dirname, base: './', resolve: { dedupe: ['vue'], alias: { - '~/': `${resolve(__dirname, 'client')}/`, - '@vitest/ws-client': `${resolve(__dirname, '../ws-client/src/index.ts')}`, + '~/': `${resolve(import.meta.dirname, 'client')}/`, + '@vitest/ws-client': `${resolve(import.meta.dirname, '../ws-client/src/index.ts')}`, }, }, define: { @@ -57,13 +56,13 @@ export const config: UserConfig = { }), Components({ dirs: ['client/components'], - dts: resolve(__dirname, './client/components.d.ts'), + dts: resolve(import.meta.dirname, './client/components.d.ts'), }), Pages({ dirs: ['client/pages'], }), AutoImport({ - dts: resolve(__dirname, './client/auto-imports.d.ts'), + dts: resolve(import.meta.dirname, './client/auto-imports.d.ts'), dirs: ['./client/composables'], imports: ['vue', 'vue-router', '@vueuse/core'], injectAtEnd: true, @@ -73,6 +72,7 @@ export const config: UserConfig = { /\.git/, ], }), + // uncomment to see the HTML reporter preview // { // name: 'debug-html-report', // apply: 'serve', @@ -80,6 +80,17 @@ export const config: UserConfig = { // return html.replace('', ``) // }, // }, + + // uncomment to see the browser tab + // { + // name: 'browser-dev-preview', + // apply: 'serve', + // transformIndexHtml() { + // return [ + // { tag: 'script', attrs: { src: './browser.dev.js' } }, + // ] + // }, + // }, { // workaround `crossorigin` issues on some browsers // https://github.com/vitejs/vite/issues/6648 @@ -101,6 +112,4 @@ export const config: UserConfig = { provider: 'playwright', }, }, -} - -export default defineConfig(config) +}) diff --git a/packages/vite-node/rollup.config.js b/packages/vite-node/rollup.config.js index 6cbf99afb..309d44558 100644 --- a/packages/vite-node/rollup.config.js +++ b/packages/vite-node/rollup.config.js @@ -44,7 +44,7 @@ const plugins = [ oxc({ transform: { target: 'node14', - define: process.env.NO_VITE_TEST_WATCHER_DEBUG + define: process.env.VITE_TEST_WATCHER_DEBUG === 'false' ? { 'process.env.VITE_TEST_WATCHER_DEBUG': 'false' } : {}, }, diff --git a/packages/vitest/rollup.config.js b/packages/vitest/rollup.config.js index 7b18ca7eb..136be87d0 100644 --- a/packages/vitest/rollup.config.js +++ b/packages/vitest/rollup.config.js @@ -103,7 +103,19 @@ const plugins = [ json(), commonjs(), oxc({ - transform: { target: 'node18' }, + transform: { + target: 'node18', + define: { + // __VITEST_GENERATE_UI_TOKEN__ is set as a global to catch accidental leaking, + // in the release version the "if" with this condition should not be present + __VITEST_GENERATE_UI_TOKEN__: process.env.VITEST_GENERATE_UI_TOKEN === 'true' ? 'true' : 'false', + ...(process.env.VITE_TEST_WATCHER_DEBUG === 'false' + ? { + 'process.env.VITE_TEST_WATCHER_DEBUG': 'false', + } + : {}), + }, + }, sourcemap: true, }), ] diff --git a/packages/vitest/src/node/config/resolveConfig.ts b/packages/vitest/src/node/config/resolveConfig.ts index 2e4f750bc..bf0dad29f 100644 --- a/packages/vitest/src/node/config/resolveConfig.ts +++ b/packages/vitest/src/node/config/resolveConfig.ts @@ -654,7 +654,7 @@ export function resolveConfig( // the server has been created, we don't need to override vite.server options const api = resolveApiServerConfig(options, defaultPort) - resolved.api = { ...api, token: crypto.randomUUID() } + resolved.api = { ...api, token: __VITEST_GENERATE_UI_TOKEN__ ? crypto.randomUUID() : '0' } if (options.related) { resolved.related = toArray(options.related).map(file => diff --git a/packages/vitest/src/shims.dev.d.ts b/packages/vitest/src/shims.dev.d.ts new file mode 100644 index 000000000..291b2a311 --- /dev/null +++ b/packages/vitest/src/shims.dev.d.ts @@ -0,0 +1,5 @@ +declare global { + const __VITEST_GENERATE_UI_TOKEN__: boolean +} + +export {} diff --git a/scripts/publish-ci.ts b/scripts/publish-ci.ts index abcbbf177..10e4d9511 100644 --- a/scripts/publish-ci.ts +++ b/scripts/publish-ci.ts @@ -4,6 +4,10 @@ import { readFileSync } from 'node:fs' import { fileURLToPath } from 'node:url' import { $ } from 'zx' +if (process.env.VITEST_GENERATE_UI_TOKEN !== 'true' || process.env.VITE_TEST_WATCHER_DEBUG !== 'false') { + throw new Error(`Cannot release Vitest without VITEST_GENERATE_UI_TOKEN and VITE_TEST_WATCHER_DEBUG environment variable.`) +} + let version = process.argv[2] if (!version) { diff --git a/test/core/test/cli-test.test.ts b/test/core/test/cli-test.test.ts index cd93fcee8..98f79d27c 100644 --- a/test/core/test/cli-test.test.ts +++ b/test/core/test/cli-test.test.ts @@ -4,6 +4,9 @@ import { ReportersMap } from 'vitest/reporters' import { createCLI, parseCLI } from '../../../packages/vitest/src/node/cli/cac.js' import { resolveConfig } from '../../../packages/vitest/src/node/config/resolveConfig.js' +// @ts-expect-error not typed global +globalThis.__VITEST_GENERATE_UI_TOKEN__ = true + const vitestCli = createCLI() function parseArguments(commands: string, full = false) { diff --git a/test/test-utils/index.ts b/test/test-utils/index.ts index 5864b41b8..b280f0fa8 100644 --- a/test/test-utils/index.ts +++ b/test/test-utils/index.ts @@ -18,6 +18,8 @@ import { Cli } from './cli' // override default colors to disable them in tests Object.assign(tinyrainbow.default, tinyrainbow.getDefaultColors()) +// @ts-expect-error not typed global +globalThis.__VITEST_GENERATE_UI_TOKEN__ = true export interface VitestRunnerCLIOptions { std?: 'inherit' -- 2.51.2