feat: support custom colors for test.name (#7809)

AriPerkkio · web-flow · commit 4af5df33b56a · 2025-05-05T16:21:24.000+02:00
diff --git a/docs/config/index.md b/docs/config/index.md
@@ -146,9 +146,11 @@ When defined, Vitest will run all matched files with `import.meta.vitest` inside
 
 ### name
 
-- **Type:** `string`
+- **Type:** `string | { label: string, color?: LabelColor }`
+
+Assign a custom name to the test project or Vitest process. The name will be visible in the CLI and UI, and available in the Node.js API via [`project.name`](/advanced/api/test-project#name).
 
-Assign a custom name to the test project or Vitest process. The name will be visible in the CLI and available in the Node.js API via [`project.name`](/advanced/api/test-project#name).
+Color used by CLI and UI can be changed by providing an object with `color` property.
 
 ### server {#server}
 
diff --git a/docs/guide/workspace.md b/docs/guide/workspace.md
@@ -102,7 +102,8 @@ export default defineConfig({
       {
         test: {
           include: ['tests/**/*.{node}.test.{ts,js}'],
-          name: 'node',
+          // color of the name label can be changed
+          name: { label: 'node', color: 'green' },
           environment: 'node',
         }
       }
diff --git a/packages/ui/client/components/explorer/ExplorerItem.vue b/packages/ui/client/components/explorer/ExplorerItem.vue
@@ -158,7 +158,13 @@ const projectNameTextColor = computed(() => {
     case 'blue':
     case 'green':
     case 'magenta':
+    case 'black':
+    case 'red':
       return 'white'
+
+    case 'yellow':
+    case 'cyan':
+    case 'white':
     default:
       return 'black'
   }
diff --git a/packages/ui/client/composables/client/index.ts b/packages/ui/client/composables/client/index.ts
@@ -161,7 +161,7 @@ watch(
         client.rpc.getFiles(),
         client.rpc.getConfig(),
         client.rpc.getUnhandledErrors(),
-        client.rpc.getResolvedProjectNames(),
+        client.rpc.getResolvedProjectLabels(),
       ])
       if (_config.standalone) {
         const filenames = await client.rpc.getTestFiles()
diff --git a/packages/ui/client/composables/client/static.ts b/packages/ui/client/composables/client/static.ts
@@ -51,6 +51,9 @@ export function createStaticClient(): VitestClient {
     getResolvedProjectNames: () => {
       return metadata.projects
     },
+    getResolvedProjectLabels: () => {
+      return []
+    },
     getModuleGraph: async (projectName, id) => {
       return metadata.moduleGraph[projectName]?.[id]
     },
diff --git a/packages/ui/client/composables/explorer/tree.ts b/packages/ui/client/composables/explorer/tree.ts
@@ -19,6 +19,7 @@ export class ExplorerTree {
   private resumeEndRunId: ReturnType<typeof setTimeout> | undefined
   constructor(
     public projects: string[] = [],
+    public colors = new Map<string, string | undefined>(),
     private onTaskUpdateCalled: boolean = false,
     private resumeEndTimeout = 500,
     public root = <RootTreeNode>{
@@ -54,8 +55,10 @@ export class ExplorerTree {
     this.rafCollector = useRafFn(this.runCollect.bind(this), { fpsLimit: 10, immediate: false })
   }
 
-  loadFiles(remoteFiles: File[], projects: string[]) {
-    this.projects.splice(0, this.projects.length, ...projects)
+  loadFiles(remoteFiles: File[], projects: { name: string; color?: string }[]) {
+    this.projects.splice(0, this.projects.length, ...projects.map(p => p.name))
+    this.colors = new Map(projects.map(p => [p.name, p.color]))
+
     runLoadFiles(
       remoteFiles,
       true,
diff --git a/packages/ui/client/composables/explorer/utils.ts b/packages/ui/client/composables/explorer/utils.ts
@@ -71,7 +71,7 @@ export function createOrUpdateFileNode(
       duration: file.result?.duration != null ? Math.round(file.result?.duration) : undefined,
       filepath: file.filepath,
       projectName: file.projectName || '',
-      projectNameColor: getProjectNameColor(file.projectName),
+      projectNameColor: explorerTree.colors.get(file.projectName || '') || getProjectNameColor(file.projectName),
       collectDuration: file.collectDuration,
       setupDuration: file.setupDuration,
       environmentLoad: file.environmentLoad,
diff --git a/packages/vitest/src/api/setup.ts b/packages/vitest/src/api/setup.ts
@@ -6,7 +6,7 @@ import type { WebSocket } from 'ws'
 import type { Vitest } from '../node/core'
 import type { Reporter } from '../node/types/reporter'
 import type { SerializedTestSpecification } from '../runtime/types/utils'
-import type { Awaitable, ModuleGraphData, UserConsoleLog } from '../types/general'
+import type { Awaitable, LabelColor, ModuleGraphData, UserConsoleLog } from '../types/general'
 import type {
   TransformResultWithSource,
   WebSocketEvents,
@@ -90,6 +90,9 @@ export function setup(ctx: Vitest, _server?: ViteDevServer): void {
         getResolvedProjectNames(): string[] {
           return ctx.projects.map(p => p.name)
         },
+        getResolvedProjectLabels(): { name: string; color?: LabelColor }[] {
+          return ctx.projects.map(p => ({ name: p.name, color: p.color }))
+        },
         async getTransformResult(projectName: string, id, browser = false) {
           const project = ctx.getProjectByName(projectName)
           const result: TransformResultWithSource | null | undefined = browser
diff --git a/packages/vitest/src/api/types.ts b/packages/vitest/src/api/types.ts
@@ -2,7 +2,7 @@ import type { File, TaskEventPack, TaskResultPack } from '@vitest/runner'
 import type { BirpcReturn } from 'birpc'
 import type { SerializedConfig } from '../runtime/config'
 import type { SerializedTestSpecification } from '../runtime/types/utils'
-import type { Awaitable, ModuleGraphData, UserConsoleLog } from '../types/general'
+import type { Awaitable, LabelColor, ModuleGraphData, UserConsoleLog } from '../types/general'
 
 interface SourceMap {
   file: string
@@ -32,7 +32,10 @@ export interface WebSocketHandlers {
   getTestFiles: () => Promise<SerializedTestSpecification[]>
   getPaths: () => string[]
   getConfig: () => SerializedConfig
+  // TODO: Remove in v4
+  /** @deprecated -- Use `getResolvedProjectLabels` instead */
   getResolvedProjectNames: () => string[]
+  getResolvedProjectLabels: () => { name: string; color?: LabelColor }[]
   getModuleGraph: (
     projectName: string,
     id: string,
diff --git a/packages/vitest/src/node/config/resolveConfig.ts b/packages/vitest/src/node/config/resolveConfig.ts
@@ -145,6 +145,12 @@ export function resolveConfig(
   resolved.project = toArray(resolved.project)
   resolved.provide ??= {}
 
+  resolved.name = typeof options.name === 'string'
+    ? options.name
+    : (options.name?.label || '')
+
+  resolved.color = typeof options.name !== 'string' ? options.name?.color : undefined
+
   const inspector = resolved.inspect || resolved.inspectBrk
 
   resolved.inspector = {
diff --git a/packages/vitest/src/node/logger.ts b/packages/vitest/src/node/logger.ts
@@ -164,7 +164,7 @@ export class Logger {
       const config = project.config
       const printConfig = !project.isRootProject() && project.name
       if (printConfig) {
-        this.console.error(`\n${formatProjectName(project.name)}\n`)
+        this.console.error(`\n${formatProjectName(project)}\n`)
       }
       if (config.include) {
         this.console.error(
@@ -243,7 +243,7 @@ export class Logger {
 
     const output = project.isRootProject()
       ? ''
-      : formatProjectName(project.name)
+      : formatProjectName(project)
     const provider = project.browser.provider.name
     const providerString = provider === 'preview' ? '' : ` by ${c.reset(c.bold(provider))}`
     this.log(
diff --git a/packages/vitest/src/node/plugins/utils.ts b/packages/vitest/src/node/plugins/utils.ts
@@ -59,7 +59,9 @@ export function resolveOptimizerConfig(
       (n: string) => !exclude.includes(n),
     )
 
-    newConfig.cacheDir = (testConfig.cache !== false && testConfig.cache?.dir) || VitestCache.resolveCacheDir(root, viteCacheDir, testConfig.name)
+    const projectName = typeof testConfig.name === 'string' ? testConfig.name : testConfig.name?.label
+
+    newConfig.cacheDir = (testConfig.cache !== false && testConfig.cache?.dir) || VitestCache.resolveCacheDir(root, viteCacheDir, projectName)
     newConfig.optimizeDeps = {
       ...viteOptions,
       ...testOptions,
diff --git a/packages/vitest/src/node/plugins/workspace.ts b/packages/vitest/src/node/plugins/workspace.ts
@@ -44,7 +44,11 @@ export function WorkspaceVitestPlugin(
         const testConfig = viteConfig.test || {}
 
         const root = testConfig.root || viteConfig.root || options.root
-        let name = testConfig.name
+
+        let { label: name, color } = typeof testConfig.name === 'string'
+          ? { label: testConfig.name }
+          : { label: '', ...testConfig.name }
+
         if (!name) {
           if (typeof options.workspacePath === 'string') {
             // if there is a package.json, read the name from it
@@ -108,7 +112,7 @@ export function WorkspaceVitestPlugin(
             },
           },
           test: {
-            name,
+            name: { label: name, color },
           },
         }
 
diff --git a/packages/vitest/src/node/project.ts b/packages/vitest/src/node/project.ts
@@ -14,6 +14,7 @@ import type { WorkspaceSpec as DeprecatedWorkspaceSpec } from './pool'
 import type { Reporter } from './reporters'
 import type { ParentProjectBrowser, ProjectBrowser } from './types/browser'
 import type {
+  ProjectName,
   ResolvedConfig,
   SerializedConfig,
   TestProjectInlineConfiguration,
@@ -195,6 +196,13 @@ export class TestProject {
     return this.config.name || ''
   }
 
+  /**
+   * The color used when reporting tasks of this project.
+   */
+  public get color(): ProjectName['color'] {
+    return this.config.color
+  }
+
   /**
    * Serialized project configuration. This is the config that tests receive.
    */
diff --git a/packages/vitest/src/node/reporters/base.ts b/packages/vitest/src/node/reporters/base.ts
@@ -235,7 +235,7 @@ export abstract class BaseReporter implements Reporter {
     }
 
     if (testModule.project.name) {
-      title += ` ${formatProjectName(testModule.project.name, '')}`
+      title += ` ${formatProjectName(testModule.project, '')}`
     }
 
     return ` ${title} ${testModule.task.name} ${suffix}`
@@ -560,7 +560,9 @@ export abstract class BaseReporter implements Reporter {
       }
 
       const groupName = getFullName(group, c.dim(' > '))
-      this.log(`  ${formatProjectName(bench.file.projectName)}${bench.name}${c.dim(` - ${groupName}`)}`)
+      const project = this.ctx.projects.find(p => p.name === bench.file.projectName)
+
+      this.log(`  ${formatProjectName(project)}${bench.name}${c.dim(` - ${groupName}`)}`)
 
       const siblings = group.tasks
         .filter(i => i.meta.benchmark && i.result?.benchmark && i !== bench)
@@ -609,6 +611,7 @@ export abstract class BaseReporter implements Reporter {
       for (const task of tasks) {
         const filepath = (task as File)?.filepath || ''
         const projectName = (task as File)?.projectName || task.file?.projectName || ''
+        const project = this.ctx.projects.find(p => p.name === projectName)
 
         let name = getFullName(task, c.dim(' > '))
 
@@ -617,7 +620,7 @@ export abstract class BaseReporter implements Reporter {
         }
 
         this.ctx.logger.error(
-          `${c.bgRed(c.bold(' FAIL '))} ${formatProjectName(projectName)}${name}`,
+          `${c.bgRed(c.bold(' FAIL '))} ${formatProjectName(project)}${name}`,
         )
       }
 
diff --git a/packages/vitest/src/node/reporters/benchmark/reporter.ts b/packages/vitest/src/node/reporters/benchmark/reporter.ts
@@ -65,7 +65,7 @@ export class BenchmarkReporter extends DefaultReporter {
     const duration = testTask.task.result?.duration || 0
 
     if (benches.length > 0 && benches.every(t => t.result?.state !== 'run' && t.result?.state !== 'queued')) {
-      let title = `\n ${getStateSymbol(testTask.task)} ${formatProjectName(testTask.project.name)}${getFullName(testTask.task, c.dim(' > '))}`
+      let title = `\n ${getStateSymbol(testTask.task)} ${formatProjectName(testTask.project)}${getFullName(testTask.task, c.dim(' > '))}`
 
       if (duration != null && duration > this.ctx.config.slowTestThreshold) {
         title += c.yellow(` ${Math.round(duration)}${c.dim('ms')}`)
diff --git a/packages/vitest/src/node/reporters/renderers/utils.ts b/packages/vitest/src/node/reporters/renderers/utils.ts
@@ -1,6 +1,7 @@
 import type { Task } from '@vitest/runner'
 import type { SnapshotSummary } from '@vitest/snapshot'
 import type { Formatter } from 'tinyrainbow'
+import type { TestProject } from '../../project'
 import { stripVTControlCharacters } from 'node:util'
 import { slash } from '@vitest/utils'
 import { basename, dirname, isAbsolute, relative } from 'pathe'
@@ -23,6 +24,8 @@ export const taskFail: string = c.red(F_CROSS)
 export const suiteFail: string = c.red(F_POINTER)
 export const pending: string = c.gray('·')
 
+const labelDefaultColors = [c.bgYellow, c.bgCyan, c.bgGreen, c.bgMagenta] as const
+
 function getCols(delta = 0) {
   let length = process.stdout?.columns
   if (!length || Number.isNaN(length)) {
@@ -223,20 +226,25 @@ export function formatTime(time: number): string {
   return `${Math.round(time)}ms`
 }
 
-export function formatProjectName(name: string | undefined, suffix = ' '): string {
-  if (!name) {
+export function formatProjectName(project?: Pick<TestProject, 'name' | 'color'>, suffix = ' '): string {
+  if (!project?.name) {
     return ''
   }
   if (!c.isColorSupported) {
-    return `|${name}|${suffix}`
+    return `|${project.name}|${suffix}`
   }
-  const index = name
-    .split('')
-    .reduce((acc, v, idx) => acc + v.charCodeAt(0) + idx, 0)
 
-  const colors = [c.bgYellow, c.bgCyan, c.bgGreen, c.bgMagenta]
+  let background = project.color && c[`bg${capitalize(project.color)}`]
+
+  if (!background) {
+    const index = project.name
+      .split('')
+      .reduce((acc, v, idx) => acc + v.charCodeAt(0) + idx, 0)
+
+    background = labelDefaultColors[index % labelDefaultColors.length]
+  }
 
-  return c.black(colors[index % colors.length](` ${name} `)) + suffix
+  return c.black(background(` ${project.name} `)) + suffix
 }
 
 export function withLabel(color: 'red' | 'green' | 'blue' | 'cyan' | 'yellow', label: string, message?: string) {
@@ -257,3 +265,7 @@ export function truncateString(text: string, maxLength: number): string {
 
   return `${plainText.slice(0, maxLength - 1)}…`
 }
+
+function capitalize<T extends string>(text: T) {
+  return `${text[0].toUpperCase()}${text.slice(1)}` as Capitalize<T>
+}
diff --git a/packages/vitest/src/node/reporters/summary.ts b/packages/vitest/src/node/reporters/summary.ts
@@ -34,6 +34,7 @@ interface SlowTask {
 interface RunningModule extends Pick<Counter, 'total' | 'completed'> {
   filename: TestModule['task']['name']
   projectName: TestModule['project']['name']
+  projectColor: TestModule['project']['color']
   hook?: Omit<SlowTask, 'hook'>
   tests: Map<TestCase['id'], SlowTask>
   typecheck: boolean
@@ -278,7 +279,7 @@ export class SummaryReporter implements Reporter {
       const typecheck = testFile.typecheck ? `${c.bgBlue(c.bold(' TS '))} ` : ''
       summary.push(
         c.bold(c.yellow(` ${F_POINTER} `))
-        + formatProjectName(testFile.projectName)
+        + formatProjectName({ name: testFile.projectName, color: testFile.projectColor })
         + typecheck
         + testFile.filename
         + c.dim(!testFile.completed && !testFile.total
@@ -382,6 +383,7 @@ function initializeStats(module: TestModule): RunningModule {
     completed: 0,
     filename: module.task.name,
     projectName: module.project.name,
+    projectColor: module.project.color,
     tests: new Map(),
     typecheck: !!module.task.meta.typecheck,
   }
diff --git a/packages/vitest/src/node/reporters/verbose.ts b/packages/vitest/src/node/reporters/verbose.ts
@@ -38,7 +38,7 @@ export class VerboseReporter extends DefaultReporter {
     let title = ` ${getStateSymbol(test.task)} `
 
     if (test.project.name) {
-      title += formatProjectName(test.project.name)
+      title += formatProjectName(test.project)
     }
 
     title += getFullName(test.task, c.dim(' > '))
diff --git a/packages/vitest/src/node/types/browser.ts b/packages/vitest/src/node/types/browser.ts
@@ -72,6 +72,7 @@ type UnsupportedProperties =
   | 'environmentOptions'
   | 'server'
   | 'benchmark'
+  | 'name'
 
 export interface BrowserInstanceOption extends BrowserProviderOptions,
   Omit<ProjectConfig, UnsupportedProperties>,
@@ -88,6 +89,8 @@ export interface BrowserInstanceOption extends BrowserProviderOptions,
    * Name of the browser
    */
   browser: string
+
+  name?: string
 }
 
 export interface BrowserConfigOptions {
diff --git a/packages/vitest/src/node/types/config.ts b/packages/vitest/src/node/types/config.ts
diff --git a/packages/vitest/src/public/index.ts b/packages/vitest/src/public/index.ts
diff --git a/packages/vitest/src/types/general.ts b/packages/vitest/src/types/general.ts
diff --git a/test/core/vitest.workspace.ts b/test/core/vitest.workspace.ts
diff --git a/test/coverage-test/vitest.workspace.custom.ts b/test/coverage-test/vitest.workspace.custom.ts
diff --git a/test/reporters/fixtures/project-name/example.test.ts b/test/reporters/fixtures/project-name/example.test.ts
diff --git a/test/reporters/fixtures/project-name/vitest.config.ts b/test/reporters/fixtures/project-name/vitest.config.ts
diff --git a/test/reporters/tests/__snapshots__/html.test.ts.snap b/test/reporters/tests/__snapshots__/html.test.ts.snap
diff --git a/test/reporters/tests/default.test.ts b/test/reporters/tests/default.test.ts
diff --git a/test/test-utils/index.ts b/test/test-utils/index.ts

Original file line number	Diff line number	Diff line change
`@@ -102,7 +102,8 @@ export default defineConfig({`
`102`	`102`	`{`
`103`	`103`	`test: {`
`104`	`104`	`include: ['tests/*/.{node}.test.{ts,js}'],`
`105`		`- name: 'node',`
	`105`	`+ // color of the name label can be changed`
	`106`	`+ name: { label: 'node', color: 'green' },`
`106`	`107`	`environment: 'node',`
`107`	`108`	`}`
`108`	`109`	`}`