feat: support opening trace view

.gitignore

@@ -9,5 +9,6 @@ test-results
 .yarn
 .pnp.*
 samples/**/coverage
+samples/**/.vitest
 tests-logs-*
-*.tsbuildinfo
+*.tsbuildinfo

.vscode/launch.json

@@ -38,6 +38,17 @@
       ],
       "outFiles": ["${workspaceFolder}/dist/**/*.js"]
     },
+    {
+      "name": "Run Extension Browser V5 Sample",
+      "type": "extensionHost",
+      "request": "launch",
+      "args": [
+        "--disable-extensions",
+        "--extensionDevelopmentPath=${workspaceFolder}",
+        "${workspaceFolder}/samples/browser-v5"
+      ],
+      "outFiles": ["${workspaceFolder}/dist/**/*.js"]
+    },
     {
       "name": "Run Extension Continuous Sample",
       "type": "extensionHost",

package.json

@@ -121,6 +121,11 @@
         "command": "vitest.openOutput",
         "category": "Vitest"
       },
+      {
+        "title": "Open Trace Report",
+        "command": "vitest.openTraceReport",
+        "category": "Vitest"
+      },
       {
         "title": "Show Shell Terminal",
         "command": "vitest.showShellTerminal",
@@ -189,6 +194,10 @@
         }
       ],
       "commandPalette": [
+        {
+          "command": "vitest.openTraceReport",
+          "when": "false"
+        },
         {
           "command": "vitest.toggleContinuousRun",
           "when": "false"
@@ -203,6 +212,11 @@
         }
       ],
       "testing/item/context": [
+        {
+          "command": "vitest.openTraceReport",
+          "when": "controllerId == 'vitest' && testId in vitest.traceReportTests",
+          "group": "vitest"
+        },
         {
           "command": "vitest.updateSnapshot",
           "when": "controllerId == 'vitest'"
@@ -213,6 +227,11 @@
         }
       ],
       "testing/item/gutter": [
+        {
+          "command": "vitest.openTraceReport",
+          "when": "controllerId == 'vitest' && testId in vitest.traceReportTests",
+          "group": "vitest"
+        },
         {
           "command": "vitest.updateSnapshot",
           "when": "controllerId == 'vitest'"

packages/extension/src/api.ts

@@ -187,13 +187,13 @@ async function createVitestProcessAPI(
   pkg: VitestPackage,
 ): Promise<DiscoveryResult> {
   return withProcess(pkg, async (meta) => {
-    meta.projects.forEach((project) => {
+    meta.config.projects.forEach((project) => {
       if (project.config) {
         usedConfigs.add(project.config)
       }
     })
     const files = await meta.rpc.getFiles()
-    const config = new VitestProjectConfig(pkg, meta.projects, meta.workspaceSource)
+    const config = new VitestProjectConfig(pkg, meta.config)
     const api = new VitestProcessAPI(config)
     return { api, files }
   })

packages/extension/src/apiProcess.ts

@@ -1,4 +1,4 @@
-import type { SerializedProject } from 'vitest-vscode-shared'
+import type { ExtensionWorkerConfig, SerializedProject } from 'vitest-vscode-shared'
 import type { VitestPackage } from './spawn/pkg'
 import { usesJestTestNamePattern } from './spawn/pkg'
 import type { ExtensionWorkerEvents, VitestExtensionRPC } from './spawn/rpc'
@@ -22,8 +22,7 @@ export class VitestProjectConfig {
 
   constructor(
     readonly pkg: VitestPackage,
-    readonly projects: SerializedProject[],
-    readonly workspaceSource: string | false,
+    readonly extensionConfig: ExtensionWorkerConfig,
   ) {
     this.id = normalize(pkg.id)
     this.workspaceFolder = pkg.folder
@@ -42,6 +41,14 @@ export class VitestProjectConfig {
     return this.projects.map((p) => p.config).filter((n) => n != null)
   }
 
+  get projects(): SerializedProject[] {
+    return this.extensionConfig.projects
+  }
+
+  get workspaceSource() {
+    return this.extensionConfig.workspaceSource
+  }
+
   get version() {
     return this.pkg.version
   }
@@ -50,6 +57,10 @@ export class VitestProjectConfig {
     return usesJestTestNamePattern(this.pkg)
   }
 
+  get htmlReportPath() {
+    return this.extensionConfig.htmlReportPath
+  }
+
   get package() {
     return this.pkg
   }
@@ -111,7 +122,7 @@ export class VitestProcessAPI {
    * a handle wrapping the existing process (without closing it).
    */
   static forDebug(pkg: VitestPackage, meta: ResolvedMeta): VitestProcessAPI {
-    const config = new VitestProjectConfig(pkg, meta.projects, meta.workspaceSource)
+    const config = new VitestProjectConfig(pkg, meta.config)
     const api = new VitestProcessAPI(config)
     api.currentMeta = meta
     return api
@@ -321,10 +332,9 @@ export interface RunHandlers {
 
 export interface ResolvedMeta {
   rpc: VitestExtensionRPC
+  config: ExtensionWorkerConfig
   process: ExtensionWorkerProcess
-  workspaceSource: string | false
   pkg: VitestPackage
-  projects: SerializedProject[]
   handlers: {
     onProcessLog: (listener: ExtensionWorkerEvents['onProcessLog']) => void
     onConsoleLog: (listener: ExtensionWorkerEvents['onConsoleLog']) => void

packages/extension/src/extension.ts

@@ -19,6 +19,7 @@ import { ExtensionTerminalProcess } from './spawn/terminal'
 import { ExtensionState } from './state'
 import { TagsManager } from './tagsManager'
 import { TestTree } from './testTree'
+import { TraceReportManager } from './traceReport'
 import { getTestData, TestFile } from './testTreeData'
 import { debounce, showVitestError } from './utils'
 import './polyfills'
@@ -52,6 +53,7 @@ class VitestExtension {
   private debugManager: DebugManager
   private schemaProvider: TransformSchemaProvider
   private importsBreakdownProvider: ImportsBreakdownProvider
+  private traceReports = new TraceReportManager()
 
   /** @internal */
   _debugDisposable: vscode.Disposable | undefined
@@ -106,6 +108,7 @@ class VitestExtension {
   private async _defineTestProfiles(showWarning: boolean, cancelToken?: vscode.CancellationToken) {
     this.importsBreakdownProvider.clear()
     this.testTree.reset([])
+    this.traceReports.clear()
     this.runQueues.forEach((q) => q.dispose())
     this.runQueues.clear()
 
@@ -222,6 +225,7 @@ class VitestExtension {
       vitest,
       this.diagnostic,
       this.importsBreakdownProvider,
+      this.traceReports,
     )
     const runQueueId = `${vitest.id}:run`
     this.runQueues.set(runQueueId, runQueue)
@@ -284,6 +288,7 @@ class VitestExtension {
       vitest,
       this.diagnostic,
       this.importsBreakdownProvider,
+      this.traceReports,
     )
     const coverageQueueId = `${vitest.id}:coverage`
     this.runQueues.set(coverageQueueId, coverageQueue)
@@ -342,6 +347,9 @@ class VitestExtension {
       vscode.commands.registerCommand('vitest.openOutput', () => {
         log.openOutput()
       }),
+      vscode.commands.registerCommand('vitest.openTraceReport', (testItem: vscode.TestItem) =>
+        this.traceReports.open(testItem),
+      ),
       vscode.commands.registerCommand('vitest.runRelatedTests', async (uri?: vscode.Uri) => {
         const currentUri = uri || vscode.window.activeTextEditor?.document.uri
         if (!currentUri) {

packages/extension/src/runQueue.ts

@@ -3,6 +3,7 @@ import type { RunHandle } from './apiProcess'
 import type { ExtensionDiagnostic } from './diagnostic'
 import type { ImportsBreakdownProvider } from './importsBreakdownProvider'
 import type { TestTree } from './testTree'
+import type { TraceReportManager } from './traceReport'
 import { VitestProcessAPI } from './apiProcess'
 import { log } from './log'
 import { ContinuousTestRunner, TestRunner } from './runner'
@@ -33,6 +34,7 @@ export class RunQueue {
     private readonly api: VitestProcessAPI,
     private readonly diagnostic: ExtensionDiagnostic | undefined,
     private readonly importsBreakdown: ImportsBreakdownProvider,
+    private readonly traceReports: TraceReportManager,
   ) {}
 
   public isContinuousTestItem(testItem: vscode.TestItem): boolean {
@@ -205,6 +207,7 @@ export class RunQueue {
       api || this.api,
       this.diagnostic,
       this.importsBreakdown,
+      this.traceReports,
     )
   }
 
@@ -216,6 +219,7 @@ export class RunQueue {
       this.api,
       this.diagnostic,
       this.importsBreakdown,
+      this.traceReports,
       this.testRunProfile,
       this.continuousRequests,
     )

packages/extension/src/runner.ts

@@ -4,6 +4,7 @@ import type { RunHandle, VitestProcessAPI } from './apiProcess'
 import type { ExtensionDiagnostic } from './diagnostic'
 import type { ImportsBreakdownProvider } from './importsBreakdownProvider'
 import type { TestTree } from './testTree'
+import type { TraceReportManager } from './traceReport'
 import crypto from 'node:crypto'
 import path from 'node:path'
 import { stripVTControlCharacters } from 'node:util'
@@ -40,6 +41,7 @@ export class TestRunner extends vscode.Disposable {
     protected readonly api: VitestProcessAPI,
     protected readonly diagnostic: ExtensionDiagnostic | undefined,
     protected readonly importsBreakdown: ImportsBreakdownProvider,
+    protected readonly traceReports?: TraceReportManager,
   ) {
     super(() => {
       log.verbose?.('Disposing test runner')
@@ -110,6 +112,10 @@ export class TestRunner extends vscode.Disposable {
     })
 
     handle.handlers.onTestRunEnd(async (files, unhandledError, collecting, coverage) => {
+      const htmlReportPath = this.api.config.htmlReportPath
+      if (!collecting && htmlReportPath) {
+        await this.traceReports?.update(this.api.id, htmlReportPath, files, this.tree)
+      }
       const testRun = this.testRun
 
       if (!testRun) {
@@ -369,10 +375,11 @@ export class ContinuousTestRunner extends TestRunner {
     api: VitestProcessAPI,
     diagnostic: ExtensionDiagnostic | undefined,
     importsBreakdown: ImportsBreakdownProvider,
+    traceReports: TraceReportManager,
     private readonly testRunProfile: vscode.TestRunProfile,
     private readonly continuousRequests: Set<vscode.TestRunRequest>,
   ) {
-    super(handle, controller, tree, api, diagnostic, importsBreakdown)
+    super(handle, controller, tree, api, diagnostic, importsBreakdown, traceReports)
     handle.handlers.onTestRunStart((files) => {
       this.startTestRun(files)
       log.verbose?.(

packages/extension/src/spawn/terminal.ts

@@ -93,11 +93,10 @@ export async function createVitestTerminalProcess(
   const vitestProcess = new ExtensionTerminalProcess(terminal, server, meta.ws)
   return {
     rpc: meta.rpc,
+    config: meta.config,
     handlers: meta.handlers,
     pkg,
-    workspaceSource: meta.workspaceSource,
     process: vitestProcess,
-    projects: meta.projects,
     dispose: meta.dispose,
   }
 }

packages/extension/src/spawn/ws.ts

@@ -114,14 +114,16 @@ export function onWsConnection(
       }
       onStart({
         rpc: api,
-        workspaceSource: message.workspaceSource,
+        config: {
+          ...message.config,
+          projects: message.config.projects.map((p) => {
+            if (p.dir) {
+              p.dir = resolve(pkg.cwd, p.dir)
+            }
+            return p
+          }),
+        },
         handlers,
-        projects: message.projects.map((p) => {
-          if (p.dir) {
-            p.dir = resolve(pkg.cwd, p.dir)
-          }
-          return p
-        }),
         ws,
         pkg,
         async dispose() {