fix(ui): use execution time from ws reporter (onFinished) (#8975)

Author: userquin

packages/ui/client/composables/client/index.ts

@@ -40,8 +40,11 @@ export const client = (function createVitestClient() {
           explorerTree.resumeRun(packs, events)
           testRunState.value = 'running'
         },
-        onFinished(_files, errors) {
-          explorerTree.endRun()
+        onSpecsCollected(_specs, startTime) {
+          explorerTree.startTime = startTime || performance.now()
+        },
+        onFinished(_files, errors, _coverage, executionTime) {
+          explorerTree.endRun(executionTime)
           // don't change the testRunState.value here:
           // - when saving the file in the codemirror requires explorer tree endRun to finish (multiple microtasks)
           // - if we change here the state before the tasks states are updated, the cursor position will be lost

packages/ui/client/composables/explorer/collector.ts

@@ -90,6 +90,7 @@ export function runCollect(
   summary: CollectorInfo,
   search: string,
   filter: Filter,
+  executionTime: number,
 ) {
   if (start) {
     resetCollectorInfo(summary)
@@ -106,7 +107,7 @@ export function runCollect(
   })
 
   queueMicrotask(() => {
-    collectData(summary)
+    collectData(summary, executionTime)
   })
 
   queueMicrotask(() => {
@@ -290,13 +291,16 @@ export function resetCollectorInfo(summary: CollectorInfo) {
   summary.failedSnapshotEnabled = false
 }
 
-function collectData(summary: CollectorInfo) {
+function collectData(
+  summary: CollectorInfo,
+  time: number,
+) {
   const idMap = client.state.idMap
   const filesMap = new Map(explorerTree.root.tasks.filter(f => idMap.has(f.id)).map(f => [f.id, f]))
   const useFiles = Array.from(filesMap.values()).map(file => [file.id, findById(file.id)] as const)
   const data = {
     files: filesMap.size,
-    time: '',
+    time: time > 1000 ? `${(time / 1000).toFixed(2)}s` : `${Math.round(time)}ms`,
     filesFailed: 0,
     filesSuccess: 0,
     filesIgnore: 0,
@@ -314,27 +318,10 @@ function collectData(summary: CollectorInfo) {
     failedSnapshotEnabled: false,
   } satisfies CollectorInfo
 
-  let time = 0
-  for (const [id, f] of useFiles) {
+  for (const [_, f] of useFiles) {
     if (!f) {
       continue
     }
-    const file = filesMap.get(id)
-    if (file) {
-      file.mode = f.mode
-      file.setupDuration = f.setupDuration
-      file.prepareDuration = f.prepareDuration
-      file.environmentLoad = f.environmentLoad
-      file.collectDuration = f.collectDuration
-      file.duration = f.result?.duration != null ? Math.round(f.result?.duration) : undefined
-      file.state = f.result?.state
-    }
-    time += Math.max(0, f.collectDuration || 0)
-    time += Math.max(0, f.setupDuration || 0)
-    time += Math.max(0, f.result?.duration || 0)
-    time += Math.max(0, f.environmentLoad || 0)
-    time += Math.max(0, f.prepareDuration || 0)
-    data.time = time > 1000 ? `${(time / 1000).toFixed(2)}s` : `${Math.round(time)}ms`
     if (f.result?.state === 'fail') {
       data.filesFailed++
     }

packages/ui/client/composables/explorer/tree.ts

@@ -20,6 +20,8 @@ import {
 export class ExplorerTree {
   private rafCollector: ReturnType<typeof useRafFn>
   private resumeEndRunId: ReturnType<typeof setTimeout> | undefined
+  public startTime: number = 0
+  public executionTime: number = 0
   constructor(
     public projects: string[] = [],
     public colors = new Map<string, string | undefined>(),
@@ -76,6 +78,7 @@ export class ExplorerTree {
   }
 
   startRun() {
+    this.startTime = performance.now()
     this.resumeEndRunId = setTimeout(() => this.endRun(), this.resumeEndTimeout)
     this.collect(true, false)
   }
@@ -100,7 +103,8 @@ export class ExplorerTree {
     }
   }
 
-  endRun() {
+  endRun(executionTime = performance.now() - this.startTime) {
+    this.executionTime = executionTime
     this.rafCollector.pause()
     this.onTaskUpdateCalled = false
     this.collect(false, true)
@@ -124,6 +128,7 @@ export class ExplorerTree {
             skipped: filter.skipped,
             onlyTests: filter.onlyTests,
           },
+          end ? this.executionTime : performance.now() - this.startTime,
         )
       })
     }
@@ -139,6 +144,7 @@ export class ExplorerTree {
           skipped: filter.skipped,
           onlyTests: filter.onlyTests,
         },
+        end ? this.executionTime : performance.now() - this.startTime,
       )
     }
   }

packages/vitest/src/api/setup.ts

@@ -15,6 +15,7 @@ import type {
   WebSocketRPC,
 } from './types'
 import { existsSync, promises as fs } from 'node:fs'
+import { performance } from 'node:perf_hooks'
 import { noop } from '@vitest/utils/helpers'
 import { createBirpc } from 'birpc'
 import { parse, stringify } from 'flatted'
@@ -157,6 +158,8 @@ export function setup(ctx: Vitest, _server?: ViteDevServer): void {
 }
 
 export class WebSocketReporter implements Reporter {
+  private start = 0
+  private end = 0
   constructor(
     public ctx: Vitest,
     public wss: WebSocketServer,
@@ -178,8 +181,8 @@ export class WebSocketReporter implements Reporter {
       return
     }
 
+    this.start = performance.now()
     const serializedSpecs = specifications.map(spec => spec.toJSON())
-
     this.clients.forEach((client) => {
       client.onSpecsCollected?.(serializedSpecs)?.catch?.(noop)
     })
@@ -205,6 +208,12 @@ export class WebSocketReporter implements Reporter {
     })
   }
 
+  private sum<T>(items: T[], cb: (_next: T) => number | undefined) {
+    return items.reduce((total, next) => {
+      return total + Math.max(cb(next) || 0, 0)
+    }, 0)
+  }
+
   onTestRunEnd(testModules: ReadonlyArray<TestModule>, unhandledErrors: ReadonlyArray<SerializedError>): void {
     if (!this.clients.size) {
       return
@@ -213,8 +222,13 @@ export class WebSocketReporter implements Reporter {
     const files = testModules.map(testModule => testModule.task)
     const errors = [...unhandledErrors]
 
+    this.end = performance.now()
+    const blobs = this.ctx.state.blobs
+    // Execution time is either sum of all runs of `--merge-reports` or the current run's time
+    const executionTime = blobs?.executionTimes ? this.sum(blobs.executionTimes, time => time) : this.end - this.start
+
     this.clients.forEach((client) => {
-      client.onFinished?.(files, errors)?.catch?.(noop)
+      client.onFinished?.(files, errors, undefined, executionTime)?.catch?.(noop)
     })
   }
 

packages/vitest/src/api/types.ts

@@ -58,12 +58,13 @@ export interface WebSocketEvents {
     files: File[],
     errors: unknown[],
     coverage?: unknown,
+    executionTime?: number,
   ) => Awaitable<void>
   onTestAnnotate?: (testId: string, annotation: TestAnnotation) => Awaitable<void>
   onTaskUpdate?: (packs: TaskResultPack[], events: TaskEventPack[]) => Awaitable<void>
   onUserConsoleLog?: (log: UserConsoleLog) => Awaitable<void>
   onPathsCollected?: (paths?: string[]) => Awaitable<void>
-  onSpecsCollected?: (specs?: SerializedTestSpecification[]) => Awaitable<void>
+  onSpecsCollected?: (specs?: SerializedTestSpecification[], startTime?: number) => Awaitable<void>
   onFinishedReportCoverage: () => void
 }
 

packages/ws-client/src/index.ts

@@ -54,11 +54,11 @@ export function createClient(url: string, options: VitestClientOptions = {}): Vi
     onTestAnnotate(testId, annotation) {
       handlers.onTestAnnotate?.(testId, annotation)
     },
-    onSpecsCollected(specs) {
+    onSpecsCollected(specs, startTime) {
       specs?.forEach(([config, file]) => {
         ctx.state.clearFiles({ config }, [file])
       })
-      handlers.onSpecsCollected?.(specs)
+      handlers.onSpecsCollected?.(specs, startTime)
     },
     onPathsCollected(paths) {
       ctx.state.collectPaths(paths)
@@ -76,8 +76,8 @@ export function createClient(url: string, options: VitestClientOptions = {}): Vi
       ctx.state.updateUserLog(log)
       handlers.onUserConsoleLog?.(log)
     },
-    onFinished(files, errors) {
-      handlers.onFinished?.(files, errors)
+    onFinished(files, errors, coverage, executionTime) {
+      handlers.onFinished?.(files, errors, coverage, executionTime)
     },
     onFinishedReportCoverage() {
       handlers.onFinishedReportCoverage?.()