diff --git a/.github/workflows/ci.yml b/.github/workflows/ci.yml index 7162bdcb4993..dcf1029cdac8 100644 --- a/.github/workflows/ci.yml +++ b/.github/workflows/ci.yml @@ -19,7 +19,6 @@ 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 07075c88b9f1..e953b2e8a0fe 100644 --- a/.github/workflows/cr.yml +++ b/.github/workflows/cr.yml @@ -41,7 +41,6 @@ jobs: - name: Build run: pnpm build env: - VITEST_GENERATE_UI_TOKEN: 'true' VITE_TEST_WATCHER_DEBUG: 'false' - name: Publish to StackBlitz diff --git a/.github/workflows/publish.yml b/.github/workflows/publish.yml index bee9a3d2523a..1aa5ea80c3ad 100644 --- a/.github/workflows/publish.yml +++ b/.github/workflows/publish.yml @@ -10,7 +10,6 @@ permissions: id-token: write env: - VITEST_GENERATE_UI_TOKEN: 'true' VITE_TEST_WATCHER_DEBUG: 'false' jobs: diff --git a/packages/ui/CONTRIBUTING.md b/packages/ui/CONTRIBUTING.md index 847f71a03306..c22b3e26f064 100644 --- a/packages/ui/CONTRIBUTING.md +++ b/packages/ui/CONTRIBUTING.md @@ -1,25 +1,56 @@ -At project root, create terminals with each of the following commands: +# @vitest/ui Development + +## UI + +Use this setup for developing UI features with Vite HMR. It serves the UI from a separate dev server, so it can differ from the exact `vitest --ui` runtime path. + +Start the UI dev server: + +```bash +# Align with the API port configured in test/unit/vite.config.ts. +VITE_PORT=3023 pnpm -C packages/ui dev:client +``` + +Start a Vitest UI/API server for any test project you want to use as the backend. For example, from the repository root this runs the `test/unit` suite with UI enabled: + +```bash +pnpm test --ui --open=false +``` + +The UI dev server only needs a real Vitest UI/API server to connect to; the backend can be `test/unit`, `packages/ui`, or another suite. + +Open the URL printed by the UI dev server, usually `http://localhost:5173/`. + +The UI dev server connects to the Vitest UI/API server on port `51204` by default. The root `test/unit` suite uses port `3023`, so the command above sets `VITE_PORT=3023`. If you use another backend port, pass the same port to the UI dev server: ```bash -nr ui:dev +VITE_PORT=12345 pnpm -C packages/ui dev:client ``` ```bash -nr test --api +pnpm test --ui --open=false --api=12345 ``` -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, +## Browser Mode UI + +Use this setup for developing Browser Mode UI features with Vite HMR. It serves the Browser Mode UI from the UI dev server and injects state from a real browser-mode Vitest server. + +Start a browser-mode Vitest server: ```bash -VITE_PORT=3200 nr ui:dev +pnpm -C packages/ui test:ui --browser.headless --ui --open=false ``` +Start the UI dev server in browser preview mode: + ```bash -nr test --api=3200 +BROWSER_DEV=true pnpm -C packages/ui dev:client ``` -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. +Open the URL printed by the UI dev server, usually `http://localhost:5173/`. -To preview the browser tab, uncomment the "browser-dev-preview" plugin in `vite.config.ts`. +The UI dev server fetches browser runner state from the browser runner server on port `63315` by default. If Vitest prints a different browser runner port, pass it to the UI dev server: -To configure the browser state, update the `__vitest_browser_runner__` object in `browser.dev.js`. +```bash +BROWSER_DEV_PORT=63316 BROWSER_DEV=true pnpm -C packages/ui dev:client +``` diff --git a/packages/ui/browser.dev.js b/packages/ui/browser.dev.js deleted file mode 100644 index 2381161e627e..000000000000 --- a/packages/ui/browser.dev.js +++ /dev/null @@ -1,11 +0,0 @@ -window.__vitest_browser_runner__ = { - files: [], - config: { - browser: { - name: 'chrome', - }, - }, - type: 'orchestrator', - provider: 'playwright', - wrapModule: () => {}, -} diff --git a/packages/ui/client/constants.ts b/packages/ui/client/constants.ts index bd4db857be19..3e14532c189c 100644 --- a/packages/ui/client/constants.ts +++ b/packages/ui/client/constants.ts @@ -2,6 +2,6 @@ export const PORT = import.meta.hot ? (import.meta.env.VITE_PORT || '51204') : l 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 || '0'}` +}//${HOST}/__vitest_api__?token=${(window as any).VITEST_API_TOKEN}` 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 586e772c6ac2..7f5bfee461d6 100644 --- a/packages/ui/vite.config.ts +++ b/packages/ui/vite.config.ts @@ -1,3 +1,4 @@ +import type { Plugin } from 'vite' import Vue from '@vitejs/plugin-vue' import { resolve } from 'pathe' import { presetAttributify, presetIcons, presetUno, transformerDirectives } from 'unocss' @@ -54,6 +55,7 @@ export default defineConfig({ Pages({ dirs: ['client/pages'], }), + devUiScriptPlugin(), // uncomment to see the HTML reporter preview // { // name: 'debug-html-report', @@ -62,17 +64,6 @@ export default defineConfig({ // 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 @@ -89,3 +80,56 @@ export default defineConfig({ outDir: './dist/client', }, }) + +function devUiScriptPlugin(): Plugin { + const UI_SCRIPT_RE = /