fix(browser): always clean up iframes on rerun (#5827)

sheremet-va · web-flow · commit 087fa87c33e9 · 2024-06-03T13:21:24.000+02:00
diff --git 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
@@ -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
@@ -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
@@ -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
@@ -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
@@ -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
+  }
 }

Original file line number	Diff line number	Diff line change
`@@ -104,8 +104,9 @@ export default (project: WorkspaceProject, base = '/'): Plugin[] => {`
`104`	`104`	`}`
`105`	`105`
`106`	`106`	`const decodedTestFile = decodeURIComponent(url.pathname.slice(testerPrefix.length))`
	`107`	`+ const testFiles = await project.globTestFiles()`
`107`	`108`	`// if decoded test file is "__vitest_all__" or not in the list of known files, run all tests`
`108`		`- const tests = decodedTestFile === '__vitest_all__' \|\| !files.includes(decodedTestFile) ? '__vitest_browser_runner__.files' : JSON.stringify([decodedTestFile])`
	`109`	`+ const tests = decodedTestFile === '__vitest_all__' \|\| !testFiles.includes(decodedTestFile) ? '__vitest_browser_runner__.files' : JSON.stringify([decodedTestFile])`
`109`	`110`	`const iframeId = JSON.stringify(decodedTestFile)`
`110`	`111`
`111`	`112`	`if (!testerScripts)`
Original file line number	Diff line number	Diff line change
`@@ -18,7 +18,7 @@ export class PreviewBrowserProvider implements BrowserProvider {`
`18`	`18`	`this.ctx = ctx`
`19`	`19`	`this.open = false`
`20`	`20`	`if (ctx.config.browser.headless)`
`21`		`- throw new Error('You\'ve enabled headless mode for "preview" provider but it doesn\'t support it.')`
	`21`	`+ 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')`
`22`	`22`	`}`
`23`	`23`
`24`	`24`	`async openPage(_url: string) {`
Original file line number	Diff line number	Diff line change
`@@ -14,6 +14,7 @@ export function createBrowserPool(ctx: Vitest): ProcessPool {`
`14`	`14`	`files,`
`15`	`15`	`resolve: () => {`
`16`	`16`	`defer.resolve()`
	`17`	`+ project.browserState = undefined`
`17`	`18`	`},`
`18`	`19`	`reject: defer.reject,`
`19`	`20`	`}`