Skip to content

Commit 48c502f

Browse files
sheremet-vasheremet-va
authored
fix(ui): show correct module graph and project name in a Vitest workspace (#5792)
1 parent 7b2f64c commit 48c502f

File tree

8 files changed

+57
-27
lines changed

8 files changed

+57
-27
lines changed

‎packages/ui/client/components/FileDetails.vue‎

Lines changed: 2 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -15,7 +15,8 @@ debouncedWatch(
1515
current,
1616
async (c, o) => {
1717
if (c && c.filepath !== o?.filepath) {
18-
data.value = await client.rpc.getModuleGraph(c.filepath)
18+
const project = c.file.projectName || ''
19+
data.value = await client.rpc.getModuleGraph(project, c.filepath)
1920
graph.value = getModuleGraph(data.value, c.filepath)
2021
}
2122
},

‎packages/ui/client/components/TaskItem.vue‎

Lines changed: 22 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -9,6 +9,21 @@ const duration = computed(() => {
99
const { result } = props.task
1010
return result && Math.round(result.duration || 0)
1111
})
12+
13+
function getProjectNameColor(name: string | undefined) {
14+
if (!name)
15+
return ''
16+
const index = name.split('').reduce((acc, v, idx) => acc + v.charCodeAt(0) + idx, 0)
17+
const colors = [
18+
'blue',
19+
'yellow',
20+
'cyan',
21+
'green',
22+
'magenta',
23+
]
24+
return colors[index % colors.length]
25+
}
26+
1227
</script>
1328

1429
<template>
@@ -24,7 +39,13 @@ const duration = computed(() => {
2439
<StatusIcon :task="task" mr-2 />
2540
<div v-if="task.type === 'suite' && task.meta.typecheck" i-logos:typescript-icon flex-shrink-0 mr-2 />
2641
<div flex items-end gap-2 :text="task?.result?.state === 'fail' ? 'red-500' : ''">
27-
<span text-sm truncate font-light>{{ task.name }}</span>
42+
<span text-sm truncate font-light>
43+
<!-- only show [] in files view -->
44+
<span v-if="task.filepath && task.file.projectName" :style="{ color: getProjectNameColor(task.file.projectName) }">
45+
[{{ task.file.projectName }}]
46+
</span>
47+
{{ task.name }}
48+
</span>
2849
<span v-if="typeof duration === 'number'" text="xs" op20 style="white-space: nowrap">
2950
{{ duration > 0 ? duration : '< 1' }}ms
3051
</span>

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

Lines changed: 3 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -9,7 +9,7 @@ interface HTMLReportMetadata {
99
paths: string[]
1010
files: File[]
1111
config: ResolvedConfig
12-
moduleGraph: Record<string, ModuleGraphData>
12+
moduleGraph: Record<string, Record<string, ModuleGraphData>>
1313
unhandledErrors: unknown[]
1414
}
1515

@@ -39,8 +39,8 @@ export function createStaticClient(): VitestClient {
3939
getConfig: () => {
4040
return metadata.config
4141
},
42-
getModuleGraph: async (id) => {
43-
return metadata.moduleGraph[id]
42+
getModuleGraph: async (projectName, id) => {
43+
return metadata.moduleGraph[projectName]?.[id]
4444
},
4545
getUnhandledErrors: () => {
4646
return metadata.unhandledErrors

‎packages/ui/node/reporter.ts‎

Lines changed: 4 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -28,7 +28,7 @@ interface HTMLReportData {
2828
paths: string[]
2929
files: File[]
3030
config: ResolvedConfig
31-
moduleGraph: Record<string, ModuleGraphData>
31+
moduleGraph: Record<string, Record<string, ModuleGraphData>>
3232
unhandledErrors: unknown[]
3333
}
3434

@@ -59,7 +59,9 @@ export default class HTMLReporter implements Reporter {
5959
}
6060
await Promise.all(
6161
result.files.map(async (file) => {
62-
result.moduleGraph[file.filepath] = await getModuleGraph(this.ctx as any, file.filepath)
62+
const projectName = file.projectName || ''
63+
result.moduleGraph[projectName] ??= {}
64+
result.moduleGraph[projectName][file.filepath] = await getModuleGraph(this.ctx as any, projectName, file.filepath)
6365
}),
6466
)
6567
await this.writeReport(stringify(result))

‎packages/vitest/src/api/setup.ts‎

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -77,8 +77,8 @@ export function setup(ctx: Vitest, _server?: ViteDevServer) {
7777
return result
7878
}
7979
},
80-
async getModuleGraph(id: string): Promise<ModuleGraphData> {
81-
return getModuleGraph(ctx, id)
80+
async getModuleGraph(project: string, id: string): Promise<ModuleGraphData> {
81+
return getModuleGraph(ctx, project, id)
8282
},
8383
updateSnapshot(file?: File) {
8484
if (!file)

‎packages/vitest/src/api/types.ts‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -15,7 +15,7 @@ export interface WebSocketHandlers {
1515
getTestFiles: () => Promise<[{ name: string; root: string }, file: string][]>
1616
getPaths: () => string[]
1717
getConfig: () => ResolvedConfig
18-
getModuleGraph: (id: string) => Promise<ModuleGraphData>
18+
getModuleGraph: (projectName: string, id: string) => Promise<ModuleGraphData>
1919
getTransformResult: (id: string) => Promise<TransformResultWithSource | undefined>
2020
readTestFile: (id: string) => Promise<string | null>
2121
saveTestFile: (id: string, content: string) => Promise<void>

‎packages/vitest/src/utils/graph.ts‎

Lines changed: 5 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -1,11 +1,13 @@
11
import type { ModuleNode } from 'vite'
22
import type { ModuleGraphData, Vitest } from '../types'
33

4-
export async function getModuleGraph(ctx: Vitest, id: string): Promise<ModuleGraphData> {
4+
export async function getModuleGraph(ctx: Vitest, projectName: string, id: string): Promise<ModuleGraphData> {
55
const graph: Record<string, string[]> = {}
66
const externalized = new Set<string>()
77
const inlined = new Set<string>()
88

9+
const project = ctx.getProjectByName(projectName)
10+
911
function clearId(id?: string | null) {
1012
return id?.replace(/\?v=\w+$/, '') || ''
1113
}
@@ -16,7 +18,7 @@ export async function getModuleGraph(ctx: Vitest, id: string): Promise<ModuleGra
1618
return seen.get(mod)
1719
let id = clearId(mod.id)
1820
seen.set(mod, id)
19-
const rewrote = await ctx.vitenode.shouldExternalize(id)
21+
const rewrote = await project.vitenode.shouldExternalize(id)
2022
if (rewrote) {
2123
id = rewrote
2224
externalized.add(id)
@@ -29,7 +31,7 @@ export async function getModuleGraph(ctx: Vitest, id: string): Promise<ModuleGra
2931
graph[id] = (await Promise.all(mods.map(m => get(m, seen)))).filter(Boolean) as string[]
3032
return id
3133
}
32-
await get(ctx.server.moduleGraph.getModuleById(id))
34+
await get(project.server.moduleGraph.getModuleById(id))
3335
return {
3436
graph,
3537
externalized: Array.from(externalized),

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

Lines changed: 18 additions & 14 deletions
Original file line numberDiff line numberDiff line change
@@ -78,14 +78,16 @@ exports[`html reporter > resolves to "failing" status for test file "json-fail"
7878
},
7979
],
8080
"moduleGraph": {
81-
"<rootDir>/test/reporters/fixtures/json-fail.test.ts": {
82-
"externalized": [],
83-
"graph": {
84-
"<rootDir>/test/reporters/fixtures/json-fail.test.ts": [],
81+
"": {
82+
"<rootDir>/test/reporters/fixtures/json-fail.test.ts": {
83+
"externalized": [],
84+
"graph": {
85+
"<rootDir>/test/reporters/fixtures/json-fail.test.ts": [],
86+
},
87+
"inlined": [
88+
"<rootDir>/test/reporters/fixtures/json-fail.test.ts",
89+
],
8590
},
86-
"inlined": [
87-
"<rootDir>/test/reporters/fixtures/json-fail.test.ts",
88-
],
8991
},
9092
},
9193
"paths": [
@@ -152,14 +154,16 @@ exports[`html reporter > resolves to "passing" status for test file "all-passing
152154
},
153155
],
154156
"moduleGraph": {
155-
"<rootDir>/test/reporters/fixtures/all-passing-or-skipped.test.ts": {
156-
"externalized": [],
157-
"graph": {
158-
"<rootDir>/test/reporters/fixtures/all-passing-or-skipped.test.ts": [],
157+
"": {
158+
"<rootDir>/test/reporters/fixtures/all-passing-or-skipped.test.ts": {
159+
"externalized": [],
160+
"graph": {
161+
"<rootDir>/test/reporters/fixtures/all-passing-or-skipped.test.ts": [],
162+
},
163+
"inlined": [
164+
"<rootDir>/test/reporters/fixtures/all-passing-or-skipped.test.ts",
165+
],
159166
},
160-
"inlined": [
161-
"<rootDir>/test/reporters/fixtures/all-passing-or-skipped.test.ts",
162-
],
163167
},
164168
},
165169
"paths": [

0 commit comments

Comments
 (0)