fix: project color label on html reporter (#10142)

Author: hi-ogawa

packages/ui/client/composables/client/index.ts

@@ -4,7 +4,7 @@ import type {
   RunnerTaskEventPack,
   RunnerTaskResultPack,
   RunnerTestFile,
-  SerializedConfig,
+  SerializedRootConfig,
   TestAnnotation,
 } from 'vitest'
 import type { BrowserRunnerState } from '../../../types'
@@ -67,7 +67,7 @@ export const client = (function createVitestClient() {
   }
 })()
 
-export const config = shallowRef<Partial<SerializedConfig>>({} as any)
+export const config = shallowRef<Partial<SerializedRootConfig>>({} as any)
 export const status = ref<WebSocketStatus>('CONNECTING')
 export const availableProjects = shallowRef<string[]>([])
 
@@ -171,12 +171,15 @@ watch(
     ws.addEventListener('open', async () => {
       status.value = 'OPEN'
       client.state.filesMap.clear()
-      let [files, _config, errors, projects] = await Promise.all([
+      let [files, _config, errors] = await Promise.all([
         client.rpc.getFiles(),
         client.rpc.getConfig(),
         client.rpc.getUnhandledErrors(),
-        client.rpc.getResolvedProjectLabels(),
       ])
+      const projects = _config.projects.map(project => ({
+        name: project.name || '',
+        color: project.color,
+      }))
       if (_config.standalone) {
         const filenames = await client.rpc.getTestFiles()
         files = filenames.map(([{ name, root }, filepath]) => {

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

@@ -3,7 +3,7 @@ import type { BirpcReturn } from 'birpc'
 import type {
   ModuleGraphData,
   RunnerTestFile,
-  SerializedConfig,
+  SerializedRootConfig,
   WebSocketEvents,
   WebSocketHandlers,
 } from 'vitest'
@@ -15,8 +15,7 @@ import { StateManager } from '../../../../ws-client/src/state'
 interface HTMLReportMetadata {
   paths: string[]
   files: RunnerTestFile[]
-  config: SerializedConfig
-  projects: string[]
+  config: SerializedRootConfig
   moduleGraph: Record<string, Record<string, ModuleGraphData>>
   unhandledErrors: unknown[]
   // filename -> source
@@ -49,12 +48,6 @@ export function createStaticClient(): VitestClient {
     getConfig: () => {
       return metadata.config
     },
-    getResolvedProjectNames: () => {
-      return metadata.projects
-    },
-    getResolvedProjectLabels: () => {
-      return []
-    },
     getModuleGraph: async (projectName, id) => {
       return metadata.moduleGraph[projectName]?.[id]
     },
@@ -85,7 +78,7 @@ export function createStaticClient(): VitestClient {
     saveTestFile: asyncNoop,
     getProvidedContext: () => ({}),
     getTestFiles: asyncNoop,
-  } as WebSocketHandlers
+  } as Omit<WebSocketHandlers, 'getResolvedProjectLabels'>
 
   ctx.rpc = rpc as any as BirpcReturn<WebSocketHandlers, WebSocketEvents>
 

packages/ui/node/reporter.ts

@@ -1,4 +1,4 @@
-import type { ModuleGraphData, RunnerTestFile, SerializedConfig } from 'vitest'
+import type { ModuleGraphData, RunnerTestFile, SerializedRootConfig } from 'vitest'
 import type { HTMLOptions, Reporter, Vitest } from 'vitest/node'
 import { existsSync, promises as fs } from 'node:fs'
 import { fileURLToPath } from 'node:url'
@@ -29,8 +29,7 @@ function getOutputFile(config: PotentialConfig | undefined) {
 interface HTMLReportData {
   paths: string[]
   files: RunnerTestFile[]
-  config: SerializedConfig
-  projects: string[]
+  config: SerializedRootConfig
   moduleGraph: Record<string, Record<string, ModuleGraphData>>
   unhandledErrors: unknown[]
   // filename -> source
@@ -69,9 +68,8 @@ export default class HTMLReporter implements Reporter {
     const result: HTMLReportData = {
       paths: this.ctx.state.getPaths(),
       files: this.ctx.state.getFiles(),
-      config: this.ctx.getRootProject().serializedConfig,
+      config: this.ctx.serializedRootConfig,
       unhandledErrors: this.ctx.state.getUnhandledErrors(),
-      projects: this.ctx.projects.map(p => p.name),
       moduleGraph: {},
       sources: {},
     }

packages/vitest/src/api/setup.ts

@@ -98,7 +98,7 @@ export function setup(ctx: Vitest, _server?: ViteDevServer): void {
           await ctx.rerunTask(id)
         },
         getConfig() {
-          return ctx.getRootProject().serializedConfig
+          return ctx.serializedRootConfig
         },
         getResolvedProjectLabels(): { name: string; color?: LabelColor }[] {
           return ctx.projects.map(p => ({ name: p.name, color: p.color }))

packages/vitest/src/api/types.ts

@@ -1,7 +1,7 @@
 import type { File, TaskEventPack, TaskResultPack, TestAnnotation, TestArtifact } from '@vitest/runner'
 import type { Awaitable } from '@vitest/utils'
 import type { BirpcReturn } from 'birpc'
-import type { SerializedConfig } from '../runtime/config'
+import type { SerializedRootConfig } from '../runtime/config'
 import type { SerializedTestSpecification } from '../runtime/types/utils'
 import type { LabelColor, ModuleGraphData, UserConsoleLog } from '../types/general'
 import type { ModuleDefinitionDurationsDiagnostic, UntrackedModuleDefinitionDiagnostic } from '../types/module-locations'
@@ -39,7 +39,10 @@ export interface WebSocketHandlers {
   getFiles: () => File[]
   getTestFiles: () => Promise<SerializedTestSpecification[]>
   getPaths: () => string[]
-  getConfig: () => SerializedConfig
+  getConfig: () => SerializedRootConfig
+  /**
+   * @deprecated Use `getConfig().projects` instead.
+   */
   getResolvedProjectLabels: () => { name: string; color?: LabelColor }[]
   getModuleGraph: (
     projectName: string,

packages/vitest/src/node/config/serializeConfig.ts

@@ -1,5 +1,6 @@
+import type { SerializedConfig } from '../../runtime/config'
 import type { TestProject } from '../project'
-import type { ApiConfig, SerializedConfig } from '../types/config'
+import type { ApiConfig } from '../types/config'
 import { configDefaults } from '../../defaults'
 import { isAgent } from '../../utils/env'
 
@@ -46,6 +47,7 @@ export function serializeConfig(project: TestProject): SerializedConfig {
     disableConsoleIntercept: config.disableConsoleIntercept,
     root: config.root,
     name: config.name,
+    color: config.color,
     globals: config.globals,
     snapshotEnvironment: config.snapshotEnvironment,
     passWithNoTests: config.passWithNoTests,

packages/vitest/src/node/core.ts

@@ -3,7 +3,7 @@ import type { Awaitable } from '@vitest/utils'
 import type { Writable } from 'node:stream'
 import type { ViteDevServer } from 'vite'
 import type { ModuleRunner } from 'vite/module-runner'
-import type { SerializedCoverageConfig } from '../runtime/config'
+import type { SerializedCoverageConfig, SerializedRootConfig } from '../runtime/config'
 import type { ArgumentsType, ProvidedContext, UserConsoleLog } from '../types/general'
 import type { SourceModuleDiagnostic, SourceModuleLocations } from '../types/module-locations'
 import type { CliOptions } from './cli/cli-api'
@@ -503,6 +503,13 @@ export class Vitest {
     return this.coreWorkspaceProject
   }
 
+  public get serializedRootConfig(): SerializedRootConfig {
+    return {
+      ...this.getRootProject().serializedConfig,
+      projects: this.projects.map(project => project.serializedConfig),
+    }
+  }
+
   public getProjectByName(name: string): TestProject {
     const project = this.projects.find(p => p.name === name)
       || this.coreWorkspaceProject

packages/vitest/src/public/index.ts

@@ -40,6 +40,7 @@ export type {
   RuntimeConfig,
   SerializedConfig,
   SerializedCoverageConfig,
+  SerializedRootConfig,
 } from '../runtime/config'
 
 export { VitestEvaluatedModules as EvaluatedModules } from '../runtime/moduleRunner/evaluatedModules'

packages/vitest/src/runtime/config.ts

@@ -3,12 +3,14 @@ import type { PrettyFormatOptions } from '@vitest/pretty-format'
 import type { SequenceHooks, SequenceSetupFiles, SerializableRetry, TestTagDefinition } from '@vitest/runner'
 import type { SnapshotEnvironment, SnapshotUpdateState } from '@vitest/snapshot'
 import type { SerializedDiffOptions } from '@vitest/utils/diff'
+import type { LabelColor } from '../types/general'
 
 /**
  * Config that tests have access to.
  */
 export interface SerializedConfig {
   name: string | undefined
+  color?: LabelColor
   globals: boolean
   base: string | undefined
   snapshotEnvironment?: string
@@ -158,6 +160,10 @@ export interface SerializedCoverageConfig {
   customProviderModule: string | undefined
 }
 
+export interface SerializedRootConfig extends SerializedConfig {
+  projects: SerializedConfig[]
+}
+
 export type RuntimeConfig = Pick<
   SerializedConfig,
   | 'allowOnly'

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

@@ -109,9 +109,6 @@ exports[`html reporter > resolves to "failing" status for test file "json-fail"
   "paths": [
     "<rootDir>/test/cli/fixtures/reporters/json-fail.test.ts",
   ],
-  "projects": [
-    "",
-  ],
   "sources": {
     "<rootDir>/test/cli/fixtures/reporters/json-fail.test.ts": "import { expect, test } from 'vitest'
 
@@ -218,9 +215,6 @@ exports[`html reporter > resolves to "passing" status for test file "all-passing
   "paths": [
     "<rootDir>/test/cli/fixtures/reporters/all-passing-or-skipped.test.ts",
   ],
-  "projects": [
-    "",
-  ],
   "sources": {
     "<rootDir>/test/cli/fixtures/reporters/all-passing-or-skipped.test.ts": "import { expect, test } from 'vitest'