feat(browser): do not reload the page during watch mode (#5810)

Author: sheremet-va

packages/browser/src/client/client.ts

@@ -5,12 +5,14 @@ import { parse, stringify } from 'flatted'
 import type { VitestBrowserClientMocker } from './mocker'
 import { getBrowserState } from './utils'
 
+const PAGE_TYPE = getBrowserState().type
+
 export const PORT = import.meta.hot ? '51204' : location.port
 export const HOST = [location.hostname, PORT].filter(Boolean).join(':')
 export const SESSION_ID = crypto.randomUUID()
 export const ENTRY_URL = `${
   location.protocol === 'https:' ? 'wss:' : 'ws:'
-}//${HOST}/__vitest_browser_api__?type=${getBrowserState().type}&sessionId=${SESSION_ID}`
+}//${HOST}/__vitest_browser_api__?type=${PAGE_TYPE}&sessionId=${SESSION_ID}`
 
 let setCancel = (_: CancelReason) => {}
 export const onCancel = new Promise<CancelReason>((resolve) => {
@@ -51,6 +53,11 @@ function createClient() {
       const exports = await mocker.resolve(id)
       return Object.keys(exports)
     },
+    async createTesters(files: string[]) {
+      if (PAGE_TYPE !== 'orchestrator')
+        return
+      getBrowserState().createTesters?.(files)
+    },
   }, {
     post: msg => ctx.ws.send(msg),
     on: fn => (onMessage = fn),

packages/browser/src/client/orchestrator.ts

@@ -12,6 +12,15 @@ const ID_ALL = '__vitest_all__'
 
 const iframes = new Map<string, HTMLIFrameElement>()
 
+let promiseTesters: Promise<void> | undefined
+getBrowserState().createTesters = async (files) => {
+  await promiseTesters
+  promiseTesters = createTesters(files).finally(() => {
+    promiseTesters = undefined
+  })
+  await promiseTesters
+}
+
 function debug(...args: unknown[]) {
   const debug = getConfig().env.VITEST_BROWSER_DEBUG
   if (debug && debug !== 'false')
@@ -20,7 +29,7 @@ function debug(...args: unknown[]) {
 
 function createIframe(container: HTMLDivElement, file: string) {
   if (iframes.has(file)) {
-    container.removeChild(iframes.get(file)!)
+    iframes.get(file)!.remove()
     iframes.delete(file)
   }
 
@@ -75,7 +84,6 @@ async function getContainer(config: ResolvedConfig): Promise<HTMLDivElement> {
 }
 
 client.ws.addEventListener('open', async () => {
-  const config = getConfig()
   const testFiles = getBrowserState().files
 
   debug('test files', testFiles.join(', '))
@@ -86,7 +94,6 @@ client.ws.addEventListener('open', async () => {
     return
   }
 
-  const container = await getContainer(config)
   const runningFiles = new Set<string>(testFiles)
 
   channel.addEventListener('message', async (e: MessageEvent<IframeChannelEvent>): Promise<void> => {
@@ -137,6 +144,13 @@ client.ws.addEventListener('open', async () => {
     }
   })
 
+  await createTesters(testFiles)
+})
+
+async function createTesters(testFiles: string[]) {
+  const config = getConfig()
+  const container = await getContainer(config)
+
   if (config.browser.ui) {
     container.className = ''
     container.textContent = ''
@@ -174,7 +188,7 @@ client.ws.addEventListener('open', async () => {
       })
     }
   }
-})
+}
 
 function generateFileId(file: string) {
   const config = getConfig()

packages/browser/src/client/tester.ts

@@ -74,7 +74,7 @@ async function prepareTestEnvironment(files: string[]) {
       worker: './browser.js',
       workerId: 1,
       config,
-      projectName: config.name,
+      projectName: config.name || '',
       files,
       environment: {
         name: 'browser',

packages/browser/src/client/utils.ts

@@ -16,7 +16,8 @@ interface BrowserRunnerState {
   config: ResolvedConfig
   type: 'tester' | 'orchestrator'
   wrapModule: <T>(module: () => T) => T
-  runTests: (tests: string[]) => Promise<void>
+  runTests?: (tests: string[]) => Promise<void>
+  createTesters?: (files: string[]) => Promise<void>
 }
 
 export function getBrowserState(): BrowserRunnerState {

packages/runner/src/types/tasks.ts

@@ -60,7 +60,7 @@ export interface Suite extends TaskBase {
 
 export interface File extends Suite {
   filepath: string
-  projectName: string
+  projectName: string | undefined
   collectDuration?: number
   setupDuration?: number
 }

packages/ui/client/components/FileDetails.vue

@@ -1,6 +1,6 @@
 <script setup lang="ts">
 import type { ModuleGraphData } from 'vitest'
-import { client, current, currentLogs, isReport, browserState } from '~/composables/client'
+import { client, current, currentLogs, isReport, browserState, config } from '~/composables/client'
 import type { Params } from '~/composables/params'
 import { viewMode } from '~/composables/params'
 import type { ModuleGraph } from '~/composables/module-graph'
@@ -43,6 +43,13 @@ const consoleCount = computed(() => {
 function onDraft(value: boolean) {
   draft.value = value
 }
+
+function relativeToRoot(path?: string) {
+  if (!path) return ''
+  if (path.startsWith(config.root))
+    return path.slice(config.root.length)
+  return path
+}
 </script>
 
 <template>
@@ -54,7 +61,7 @@ function onDraft(value: boolean) {
           [{{ current?.file.projectName || '' }}]
         </div>
         <div flex-1 font-light op-50 ws-nowrap truncate text-sm>
-          {{ current?.filepath }}
+          {{ relativeToRoot(current?.filepath) }}
         </div>
         <div class="flex text-lg">
           <IconButton

packages/ui/client/components/TasksList.vue

@@ -36,11 +36,7 @@ const filteredTests: ComputedRef<File[]> = computed(() => isFiltered.value ? fil
 const failed = computed(() => filtered.value.filter(task => task.result?.state === 'fail'))
 const success = computed(() => filtered.value.filter(task => task.result?.state === 'pass'))
 const skipped = computed(() => filtered.value.filter(task => task.mode === 'skip' || task.mode === 'todo'))
-const running = computed(() => filtered.value.filter(task =>
-  !failed.value.includes(task)
-  && !success.value.includes(task)
-  && !skipped.value.includes(task),
-))
+const running = computed(() => filtered.value.filter(task => !task.result || task.result.state === 'run'))
 
 const disableClearSearch = computed(() => search.value === '')
 

packages/ui/client/pages/index.vue

@@ -50,7 +50,7 @@ function resizeMain() {
         <transition v-else>
           <Splitpanes key="detail" @resized="onModuleResized">
             <Pane :size="detailSizes[0]">
-              <BrowserIframe />
+              <BrowserIframe v-once />
             </Pane>
             <Pane :size="detailSizes[1]">
               <Dashboard v-if="dashboardVisible" key="summary" />

packages/vitest/src/api/setup.ts

@@ -91,7 +91,7 @@ export function setup(ctx: Vitest, _server?: ViteDevServer) {
         async getTestFiles() {
           const spec = await ctx.globTestFiles()
           return spec.map(([project, file]) => [{
-            name: project.getName(),
+            name: project.config.name,
             root: project.config.root,
           }, file])
         },

packages/vitest/src/api/types.ts

@@ -62,6 +62,7 @@ export interface WebSocketEvents extends Pick<Reporter, 'onCollected' | 'onFinis
 export interface WebSocketBrowserEvents {
   onCancel: (reason: CancelReason) => void
   startMocking: (id: string) => Promise<string[]>
+  createTesters: (files: string[]) => Promise<void>
 }
 
 export type WebSocketRPC = BirpcReturn<WebSocketEvents, WebSocketHandlers>