feat: add browser.ui option (#5771)

vitest-dev · May 24, 2024 · a50330e · a50330e
1 parent a431887
commit a50330e
Show file tree

Hide file tree

Showing 7 changed files with 30 additions and 3 deletions.
diff --git a/docs/config/index.md b/docs/config/index.md
@@ -1626,6 +1626,14 @@ This option has no effect on tests running inside Node.js.
 
 If you rely on spying on ES modules with `vi.spyOn`, you can enable this experimental feature to allow spying on module exports.
 
+#### browser.ui {#browser-ui}
+
+- **Type:** `boolean`
+- **Default:** `!isCI`
+- **CLI:** `--browser.ui=false`
+
+Should Vitest UI be injected into the page. By default, injects UI iframe during development.
+
 #### browser.indexScripts {#browser-indexscripts}
 
 - **Type:** `BrowserScript[]`

diff --git a/packages/browser/src/client/index.html b/packages/browser/src/client/index.html
@@ -25,7 +25,7 @@
     {__VITEST_SCRIPTS__}
   </head>
   <body>
-    <iframe id="vitest-ui" src="/__vitest__/"></iframe>
+    {__VITEST_UI__}
     <script type="module" src="/main.ts"></script>
     <div id="vitest-tester"></div>
   </body>

diff --git a/packages/browser/src/client/tester.ts b/packages/browser/src/client/tester.ts
@@ -92,7 +92,7 @@ async function prepareTestEnvironment(files: string[]) {
     rpc,
     durations: {
       environment: 0,
-      prepare: 0,
+      prepare: performance.now(),
     },
     providedContext,
   }
@@ -169,6 +169,8 @@ async function runTests(files: string[]) {
 
   const { config, runner, state, setupCommonEnv, startTests } = preparedData
 
+  state.durations.prepare = performance.now() - state.durations.prepare
+
   try {
     await setupCommonEnv(config)
     for (const file of files)

diff --git a/packages/browser/src/node/index.ts b/packages/browser/src/node/index.ts
@@ -73,6 +73,9 @@ export default (project: WorkspaceProject, base = '/'): Plugin[] => {
               __VITEST_TITLE__: 'Vitest Browser Runner',
               __VITEST_SCRIPTS__: indexScripts,
               __VITEST_INJECTOR__: injector,
+              __VITEST_UI__: project.config.browser.ui
+                ? '<iframe id="vitest-ui" src="/__vitest__/"></iframe>'
+                : '',
             })
             res.write(html, 'utf-8')
             res.end()

diff --git a/packages/vitest/src/node/cli/cli-config.ts b/packages/vitest/src/node/cli/cli-config.ts
@@ -347,6 +347,9 @@ export const cliOptionsConfig: VitestCLIOptions = {
       isolate: {
         description: 'Run every browser test file in isolation. To disable isolation, use `--browser.isolate=false` (default: `true`)',
       },
+      ui: {
+        description: 'Show Vitest UI when running tests',
+      },
       fileParallelism: {
         description: 'Should all test files run in parallel. Use `--browser.file-parallelism=false` to disable (default: same as `--file-parallelism`)',
       },

diff --git a/packages/vitest/src/node/config.ts b/packages/vitest/src/node/config.ts
@@ -520,7 +520,9 @@ export function resolveConfig(
     ...resolved.typecheck,
   }
 
-  resolved.environmentMatchGlobs = (resolved.environmentMatchGlobs || []).map(i => [resolve(resolved.root, i[0]), i[1]])
+  resolved.environmentMatchGlobs = (resolved.environmentMatchGlobs || []).map(i =>
+    [resolve(resolved.root, i[0]), i[1]],
+  )
 
   resolved.typecheck ??= {} as any
   resolved.typecheck.enabled ??= false
@@ -533,6 +535,7 @@ export function resolveConfig(
   resolved.browser.headless ??= isCI
   resolved.browser.slowHijackESM ??= false
   resolved.browser.isolate ??= true
+  resolved.browser.ui ??= !isCI
 
   if (resolved.browser.enabled && stdProvider === 'stackblitz')
     resolved.browser.provider = 'none'

diff --git a/packages/vitest/src/types/browser.ts b/packages/vitest/src/types/browser.ts
@@ -87,6 +87,13 @@ export interface BrowserConfigOptions {
    */
   isolate?: boolean
 
+  /**
+   * Show Vitest UI
+   *
+   * @default !process.env.CI
+   */
+  ui?: boolean
+
   /**
    * Run test files in parallel. Fallbacks to `test.fileParallelism`.
    *
@@ -156,4 +163,5 @@ export interface ResolvedBrowserOptions extends BrowserConfigOptions {
   headless: boolean
   isolate: boolean
   api: ApiConfig
+  ui: boolean
 }