fix(ui): show correct module graph and project name in a Vitest workspace (#5792)

Author: sheremet-va

packages/ui/client/components/FileDetails.vue

@@ -15,7 +15,8 @@ debouncedWatch(
   current,
   async (c, o) => {
     if (c && c.filepath !== o?.filepath) {
-      data.value = await client.rpc.getModuleGraph(c.filepath)
+      const project = c.file.projectName || ''
+      data.value = await client.rpc.getModuleGraph(project, c.filepath)
       graph.value = getModuleGraph(data.value, c.filepath)
     }
   },

packages/ui/client/components/TaskItem.vue

@@ -9,6 +9,21 @@ const duration = computed(() => {
   const { result } = props.task
   return result && Math.round(result.duration || 0)
 })
+
+function getProjectNameColor(name: string | undefined) {
+  if (!name)
+    return ''
+  const index = name.split('').reduce((acc, v, idx) => acc + v.charCodeAt(0) + idx, 0)
+  const colors = [
+    'blue',
+    'yellow',
+    'cyan',
+    'green',
+    'magenta',
+  ]
+  return colors[index % colors.length]
+}
+
 </script>
 
 <template>
@@ -24,7 +39,13 @@ const duration = computed(() => {
     <StatusIcon :task="task" mr-2 />
     <div v-if="task.type === 'suite' && task.meta.typecheck" i-logos:typescript-icon flex-shrink-0 mr-2 />
     <div flex items-end gap-2 :text="task?.result?.state === 'fail' ? 'red-500' : ''">
-      <span text-sm truncate font-light>{{ task.name }}</span>
+      <span text-sm truncate font-light>
+        <!-- only show [] in files view -->
+        <span v-if="task.filepath && task.file.projectName" :style="{ color: getProjectNameColor(task.file.projectName) }">
+          [{{ task.file.projectName }}]
+        </span>
+        {{ task.name }}
+      </span>
       <span v-if="typeof duration === 'number'" text="xs" op20 style="white-space: nowrap">
         {{ duration > 0 ? duration : '< 1' }}ms
       </span>

packages/ui/client/composables/client/static.ts

@@ -9,7 +9,7 @@ interface HTMLReportMetadata {
   paths: string[]
   files: File[]
   config: ResolvedConfig
-  moduleGraph: Record<string, ModuleGraphData>
+  moduleGraph: Record<string, Record<string, ModuleGraphData>>
   unhandledErrors: unknown[]
 }
 
@@ -39,8 +39,8 @@ export function createStaticClient(): VitestClient {
     getConfig: () => {
       return metadata.config
     },
-    getModuleGraph: async (id) => {
-      return metadata.moduleGraph[id]
+    getModuleGraph: async (projectName, id) => {
+      return metadata.moduleGraph[projectName]?.[id]
     },
     getUnhandledErrors: () => {
       return metadata.unhandledErrors

packages/ui/node/reporter.ts

@@ -28,7 +28,7 @@ interface HTMLReportData {
   paths: string[]
   files: File[]
   config: ResolvedConfig
-  moduleGraph: Record<string, ModuleGraphData>
+  moduleGraph: Record<string, Record<string, ModuleGraphData>>
   unhandledErrors: unknown[]
 }
 
@@ -59,7 +59,9 @@ export default class HTMLReporter implements Reporter {
     }
     await Promise.all(
       result.files.map(async (file) => {
-        result.moduleGraph[file.filepath] = await getModuleGraph(this.ctx as any, file.filepath)
+        const projectName = file.projectName || ''
+        result.moduleGraph[projectName] ??= {}
+        result.moduleGraph[projectName][file.filepath] = await getModuleGraph(this.ctx as any, projectName, file.filepath)
       }),
     )
     await this.writeReport(stringify(result))

packages/vitest/src/api/setup.ts

@@ -77,8 +77,8 @@ export function setup(ctx: Vitest, _server?: ViteDevServer) {
             return result
           }
         },
-        async getModuleGraph(id: string): Promise<ModuleGraphData> {
-          return getModuleGraph(ctx, id)
+        async getModuleGraph(project: string, id: string): Promise<ModuleGraphData> {
+          return getModuleGraph(ctx, project, id)
         },
         updateSnapshot(file?: File) {
           if (!file)

packages/vitest/src/api/types.ts

@@ -15,7 +15,7 @@ export interface WebSocketHandlers {
   getTestFiles: () => Promise<[{ name: string; root: string }, file: string][]>
   getPaths: () => string[]
   getConfig: () => ResolvedConfig
-  getModuleGraph: (id: string) => Promise<ModuleGraphData>
+  getModuleGraph: (projectName: string, id: string) => Promise<ModuleGraphData>
   getTransformResult: (id: string) => Promise<TransformResultWithSource | undefined>
   readTestFile: (id: string) => Promise<string | null>
   saveTestFile: (id: string, content: string) => Promise<void>

packages/vitest/src/utils/graph.ts

@@ -1,11 +1,13 @@
 import type { ModuleNode } from 'vite'
 import type { ModuleGraphData, Vitest } from '../types'
 
-export async function getModuleGraph(ctx: Vitest, id: string): Promise<ModuleGraphData> {
+export async function getModuleGraph(ctx: Vitest, projectName: string, id: string): Promise<ModuleGraphData> {
   const graph: Record<string, string[]> = {}
   const externalized = new Set<string>()
   const inlined = new Set<string>()
 
+  const project = ctx.getProjectByName(projectName)
+
   function clearId(id?: string | null) {
     return id?.replace(/\?v=\w+$/, '') || ''
   }
@@ -16,7 +18,7 @@ export async function getModuleGraph(ctx: Vitest, id: string): Promise<ModuleGra
       return seen.get(mod)
     let id = clearId(mod.id)
     seen.set(mod, id)
-    const rewrote = await ctx.vitenode.shouldExternalize(id)
+    const rewrote = await project.vitenode.shouldExternalize(id)
     if (rewrote) {
       id = rewrote
       externalized.add(id)
@@ -29,7 +31,7 @@ export async function getModuleGraph(ctx: Vitest, id: string): Promise<ModuleGra
     graph[id] = (await Promise.all(mods.map(m => get(m, seen)))).filter(Boolean) as string[]
     return id
   }
-  await get(ctx.server.moduleGraph.getModuleById(id))
+  await get(project.server.moduleGraph.getModuleById(id))
   return {
     graph,
     externalized: Array.from(externalized),

test/reporters/tests/__snapshots__/html.test.ts.snap

@@ -78,14 +78,16 @@ exports[`html reporter > resolves to "failing" status for test file "json-fail"
     },
   ],
   "moduleGraph": {
-    "<rootDir>/test/reporters/fixtures/json-fail.test.ts": {
-      "externalized": [],
-      "graph": {
-        "<rootDir>/test/reporters/fixtures/json-fail.test.ts": [],
+    "": {
+      "<rootDir>/test/reporters/fixtures/json-fail.test.ts": {
+        "externalized": [],
+        "graph": {
+          "<rootDir>/test/reporters/fixtures/json-fail.test.ts": [],
+        },
+        "inlined": [
+          "<rootDir>/test/reporters/fixtures/json-fail.test.ts",
+        ],
       },
-      "inlined": [
-        "<rootDir>/test/reporters/fixtures/json-fail.test.ts",
-      ],
     },
   },
   "paths": [
@@ -152,14 +154,16 @@ exports[`html reporter > resolves to "passing" status for test file "all-passing
     },
   ],
   "moduleGraph": {
-    "<rootDir>/test/reporters/fixtures/all-passing-or-skipped.test.ts": {
-      "externalized": [],
-      "graph": {
-        "<rootDir>/test/reporters/fixtures/all-passing-or-skipped.test.ts": [],
+    "": {
+      "<rootDir>/test/reporters/fixtures/all-passing-or-skipped.test.ts": {
+        "externalized": [],
+        "graph": {
+          "<rootDir>/test/reporters/fixtures/all-passing-or-skipped.test.ts": [],
+        },
+        "inlined": [
+          "<rootDir>/test/reporters/fixtures/all-passing-or-skipped.test.ts",
+        ],
       },
-      "inlined": [
-        "<rootDir>/test/reporters/fixtures/all-passing-or-skipped.test.ts",
-      ],
     },
   },
   "paths": [