Skip to content

Commit

Permalink
fix(ui): show correct module graph and project name in a Vitest works…
Browse files Browse the repository at this point in the history
…pace (#5792)
  • Loading branch information
sheremet-va authored May 31, 2024
1 parent 7b2f64c commit 48c502f
Show file tree
Hide file tree
Showing 8 changed files with 57 additions and 27 deletions.
3 changes: 2 additions & 1 deletion packages/ui/client/components/FileDetails.vue
Original file line number Diff line number Diff line change
Expand Up @@ -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)
}
},
Expand Down
23 changes: 22 additions & 1 deletion packages/ui/client/components/TaskItem.vue
Original file line number Diff line number Diff line change
Expand Up @@ -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>
Expand All @@ -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>
Expand Down
6 changes: 3 additions & 3 deletions packages/ui/client/composables/client/static.ts
Original file line number Diff line number Diff line change
Expand Up @@ -9,7 +9,7 @@ interface HTMLReportMetadata {
paths: string[]
files: File[]
config: ResolvedConfig
moduleGraph: Record<string, ModuleGraphData>
moduleGraph: Record<string, Record<string, ModuleGraphData>>
unhandledErrors: unknown[]
}

Expand Down Expand Up @@ -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
Expand Down
6 changes: 4 additions & 2 deletions packages/ui/node/reporter.ts
Original file line number Diff line number Diff line change
Expand Up @@ -28,7 +28,7 @@ interface HTMLReportData {
paths: string[]
files: File[]
config: ResolvedConfig
moduleGraph: Record<string, ModuleGraphData>
moduleGraph: Record<string, Record<string, ModuleGraphData>>
unhandledErrors: unknown[]
}

Expand Down Expand Up @@ -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))
Expand Down
4 changes: 2 additions & 2 deletions packages/vitest/src/api/setup.ts
Original file line number Diff line number Diff line change
Expand Up @@ -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)
Expand Down
2 changes: 1 addition & 1 deletion packages/vitest/src/api/types.ts
Original file line number Diff line number Diff line change
Expand Up @@ -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>
Expand Down
8 changes: 5 additions & 3 deletions packages/vitest/src/utils/graph.ts
Original file line number Diff line number Diff line change
@@ -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+$/, '') || ''
}
Expand All @@ -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)
Expand All @@ -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),
Expand Down
32 changes: 18 additions & 14 deletions test/reporters/tests/__snapshots__/html.test.ts.snap
Original file line number Diff line number Diff line change
Expand Up @@ -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": [
Expand Down Expand Up @@ -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": [
Expand Down

0 comments on commit 48c502f

Please sign in to comment.