From 087fa87c33e958c2e50aff4498a976bb17c7459b Mon Sep 17 00:00:00 2001
From: Vladimir <sleuths.slews0s@icloud.com>
Date: Mon, 3 Jun 2024 13:21:24 +0200
Subject: [PATCH] fix(browser): always clean up iframes on rerun (#5827)

---
 packages/browser/src/client/orchestrator.ts    | 14 ++++++++++++--
 packages/browser/src/node/index.ts             |  3 ++-
 packages/browser/src/node/providers/preview.ts |  2 +-
 packages/ui/client/components/TasksList.vue    |  8 ++++++--
 packages/vitest/src/node/pools/browser.ts      |  1 +
 packages/vitest/src/utils/serialization.ts     | 14 +++++++++++---
 6 files changed, 33 insertions(+), 9 deletions(-)

diff --git a/packages/browser/src/client/orchestrator.ts b/packages/browser/src/client/orchestrator.ts
index 98e3f0beba88..eb3963db550f 100644
--- a/packages/browser/src/client/orchestrator.ts
+++ b/packages/browser/src/client/orchestrator.ts
@@ -76,7 +76,11 @@ interface IframeViewportEvent {
   id: string
 }
 
-type IframeChannelEvent = IframeDoneEvent | IframeErrorEvent | IframeViewportEvent
+interface IframeViewportChannelEvent {
+  type: 'viewport:done' | 'viewport:fail'
+}
+
+type IframeChannelEvent = IframeDoneEvent | IframeErrorEvent | IframeViewportEvent | IframeViewportChannelEvent
 
 async function getContainer(config: ResolvedConfig): Promise<HTMLDivElement> {
   if (config.browser.ui) {
@@ -93,12 +97,15 @@ async function getContainer(config: ResolvedConfig): Promise<HTMLDivElement> {
   return document.querySelector('#vitest-tester') as HTMLDivElement
 }
 
+const runningFiles = new Set<string>()
+
 client.ws.addEventListener('open', async () => {
   const testFiles = getBrowserState().files
 
   debug('test files', testFiles.join(', '))
 
-  const runningFiles = new Set<string>(testFiles)
+  runningFiles.clear()
+  testFiles.forEach(file => runningFiles.add(file))
 
   channel.addEventListener('message', async (e: MessageEvent<IframeChannelEvent>): Promise<void> => {
     debug('channel event', JSON.stringify(e.data))
@@ -171,6 +178,9 @@ client.ws.addEventListener('open', async () => {
 })
 
 async function createTesters(testFiles: string[]) {
+  runningFiles.clear()
+  testFiles.forEach(file => runningFiles.add(file))
+
   const config = getConfig()
   const container = await getContainer(config)
 
diff --git a/packages/browser/src/node/index.ts b/packages/browser/src/node/index.ts
index 500d4b13fbc7..2702a90cf097 100644
--- a/packages/browser/src/node/index.ts
+++ b/packages/browser/src/node/index.ts
@@ -104,8 +104,9 @@ export default (project: WorkspaceProject, base = '/'): Plugin[] => {
           }
 
           const decodedTestFile = decodeURIComponent(url.pathname.slice(testerPrefix.length))
+          const testFiles = await project.globTestFiles()
           // if decoded test file is "__vitest_all__" or not in the list of known files, run all tests
-          const tests = decodedTestFile === '__vitest_all__' || !files.includes(decodedTestFile) ? '__vitest_browser_runner__.files' : JSON.stringify([decodedTestFile])
+          const tests = decodedTestFile === '__vitest_all__' || !testFiles.includes(decodedTestFile) ? '__vitest_browser_runner__.files' : JSON.stringify([decodedTestFile])
           const iframeId = JSON.stringify(decodedTestFile)
 
           if (!testerScripts)
diff --git a/packages/browser/src/node/providers/preview.ts b/packages/browser/src/node/providers/preview.ts
index 1ba86445452d..4ed5c939656b 100644
--- a/packages/browser/src/node/providers/preview.ts
+++ b/packages/browser/src/node/providers/preview.ts
@@ -18,7 +18,7 @@ export class PreviewBrowserProvider implements BrowserProvider {
     this.ctx = ctx
     this.open = false
     if (ctx.config.browser.headless)
-      throw new Error('You\'ve enabled headless mode for "preview" provider but it doesn\'t support it.')
+      throw new Error('You\'ve enabled headless mode for "preview" provider but it doesn\'t support it. Use "playwright" or "webdriverio" instead: https://vitest.dev/guide/browser#configuration')
   }
 
   async openPage(_url: string) {
diff --git a/packages/ui/client/components/TasksList.vue b/packages/ui/client/components/TasksList.vue
index 97a17374204b..83ff7f4d93fb 100644
--- a/packages/ui/client/components/TasksList.vue
+++ b/packages/ui/client/components/TasksList.vue
@@ -36,7 +36,11 @@ 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 => !task.result || task.result.state === 'run'))
+const running = computed(() => filtered.value.filter(task =>
+  !failed.value.includes(task)
+  && !success.value.includes(task)
+  && !skipped.value.includes(task),
+))
 
 const disableClearSearch = computed(() => search.value === '')
 
@@ -128,7 +132,7 @@ function matchTasks(tasks: Task[], search: string): boolean {
             :on-item-click="onItemClick"
           />
         </DetailsPanel>
-        <DetailsPanel v-if="running.length || testRunState === 'running'">
+        <DetailsPanel v-if="throttledRunning.length">
           <template #summary>
             <div text-yellow5>
               RUNNING ({{ throttledRunning.length }})
diff --git a/packages/vitest/src/node/pools/browser.ts b/packages/vitest/src/node/pools/browser.ts
index 367e8ac249d8..3d0e2b2c1977 100644
--- a/packages/vitest/src/node/pools/browser.ts
+++ b/packages/vitest/src/node/pools/browser.ts
@@ -14,6 +14,7 @@ export function createBrowserPool(ctx: Vitest): ProcessPool {
       files,
       resolve: () => {
         defer.resolve()
+        project.browserState = undefined
       },
       reject: defer.reject,
     }
diff --git a/packages/vitest/src/utils/serialization.ts b/packages/vitest/src/utils/serialization.ts
index d620c78f8c3a..0f5a364731c5 100644
--- a/packages/vitest/src/utils/serialization.ts
+++ b/packages/vitest/src/utils/serialization.ts
@@ -15,8 +15,16 @@ function cloneByOwnProperties(value: any) {
  * flatted.stringify().
  */
 export function stringifyReplace(key: string, value: any) {
-  if (value instanceof Error)
-    return cloneByOwnProperties(value)
-  else
+  if (value instanceof Error) {
+    const cloned = cloneByOwnProperties(value)
+    return {
+      name: value.name,
+      message: value.message,
+      stack: value.stack,
+      ...cloned,
+    }
+  }
+  else {
     return value
+  }
 }