refactor: use bg* colors in reporter instead of reversing (#7785)

Author: sheremet-va

packages/vitest/src/node/cli/cac.ts

@@ -308,8 +308,8 @@ async function start(mode: VitestRunMode, cliFilters: string[], options: CliOpti
     }
   }
   catch (e) {
-    const { divider } = await import('../reporters/renderers/utils')
-    console.error(`\n${c.red(divider(c.bold(c.inverse(' Startup Error '))))}`)
+    const { errorBanner } = await import('../reporters/renderers/utils')
+    console.error(`\n${errorBanner('Startup Error')}`)
     console.error(e)
     console.error('\n\n')
 
@@ -365,8 +365,8 @@ async function collect(mode: VitestRunMode, cliFilters: string[], options: CliOp
     await ctx.close()
   }
   catch (e) {
-    const { divider } = await import('../reporters/renderers/utils')
-    console.error(`\n${c.red(divider(c.bold(c.inverse(' Collect Error '))))}`)
+    const { errorBanner } = await import('../reporters/renderers/utils')
+    console.error(`\n${errorBanner('Collect Error')}`)
     console.error(e)
     console.error('\n\n')
 

packages/vitest/src/node/error.ts

@@ -17,7 +17,7 @@ import {
   positionToOffset,
 } from '../utils/source-map'
 import { F_POINTER } from './reporters/renderers/figures'
-import { divider, truncateString } from './reporters/renderers/utils'
+import { divider, errorBanner, truncateString } from './reporters/renderers/utils'
 
 type ErrorLogger = Pick<Logger, 'error' | 'highlight'>
 
@@ -246,7 +246,7 @@ function printErrorInner(
 }
 
 function printErrorType(type: string, ctx: Vitest) {
-  ctx.logger.error(`\n${c.red(divider(c.bold(c.inverse(` ${type} `))))}`)
+  ctx.logger.error(`\n${errorBanner(type)}`)
 }
 
 const skipErrorProperties = new Set([

packages/vitest/src/node/logger.ts

@@ -9,7 +9,7 @@ import { toArray } from '@vitest/utils'
 import c from 'tinyrainbow'
 import { highlightCode } from '../utils/colors'
 import { printError } from './error'
-import { divider, formatProjectName, withLabel } from './reporters/renderers/utils'
+import { divider, errorBanner, formatProjectName, withLabel } from './reporters/renderers/utils'
 import { RandomSequencer } from './sequencers/RandomSequencer'
 
 export interface ErrorOptions {
@@ -262,7 +262,7 @@ export class Logger {
         + '\nThis might cause false positive tests. Resolve unhandled errors to make sure your tests are not affected.',
       ),
     )
-    this.error(c.red(divider(c.bold(c.inverse(' Unhandled Errors ')))))
+    this.error(errorBanner('Unhandled Errors'))
     this.error(errorMessage)
     errors.forEach((err) => {
       this.printError(err, {
@@ -281,7 +281,7 @@ export class Logger {
         } not related to your test files.`,
       ),
     )
-    this.log(c.red(divider(c.bold(c.inverse(' Source Errors ')))))
+    this.log(errorBanner('Source Errors'))
     this.log(errorMessage)
     errors.forEach((err) => {
       this.printError(err, { fullStack: true })

packages/vitest/src/node/reporters/base.ts

@@ -12,7 +12,7 @@ import c from 'tinyrainbow'
 import { isTTY } from '../../utils/env'
 import { hasFailedSnapshot } from '../../utils/tasks'
 import { F_CHECK, F_POINTER, F_RIGHT } from './renderers/figures'
-import { countTestErrors, divider, formatProjectName, formatTime, formatTimeString, getStateString, getStateSymbol, padSummaryTitle, renderSnapshotSummary, taskFail, withLabel } from './renderers/utils'
+import { countTestErrors, divider, errorBanner, formatProjectName, formatTime, formatTimeString, getStateString, getStateSymbol, padSummaryTitle, renderSnapshotSummary, taskFail, withLabel } from './renderers/utils'
 
 const BADGE_PADDING = '       '
 
@@ -609,7 +609,7 @@ export abstract class BaseReporter implements Reporter {
         }
 
         this.ctx.logger.error(
-          `${c.red(c.bold(c.inverse(' FAIL ')))} ${formatProjectName(projectName)}${name}`,
+          `${c.bgRed(c.bold(' FAIL '))} ${formatProjectName(projectName)}${name}`,
         )
       }
 
@@ -627,10 +627,6 @@ export abstract class BaseReporter implements Reporter {
   }
 }
 
-function errorBanner(message: string) {
-  return c.red(divider(c.bold(c.inverse(` ${message} `))))
-}
-
 function sum<T>(items: T[], cb: (_next: T) => number | undefined) {
   return items.reduce((total, next) => {
     return total + Math.max(cb(next) || 0, 0)

packages/vitest/src/node/reporters/basic.ts

@@ -12,7 +12,7 @@ export class BasicReporter extends BaseReporter {
   onInit(ctx: Vitest): void {
     super.onInit(ctx)
 
-    ctx.logger.log(c.inverse(c.bold(c.yellow(' DEPRECATED '))), c.yellow(
+    ctx.logger.log(c.bold(c.bgYellow(' DEPRECATED ')), c.yellow(
       `'basic' reporter is deprecated and will be removed in Vitest v3.\n`
       + `Remove 'basic' from 'reporters' option. To match 'basic' reporter 100%, use configuration:\n${
         JSON.stringify({ test: { reporters: [['default', { summary: false }]] } }, null, 2)}`,

packages/vitest/src/node/reporters/renderers/utils.ts

@@ -1,5 +1,6 @@
 import type { Task } from '@vitest/runner'
 import type { SnapshotSummary } from '@vitest/snapshot'
+import type { Formatter } from 'tinyrainbow'
 import { stripVTControlCharacters } from 'node:util'
 import { slash } from '@vitest/utils'
 import { basename, dirname, isAbsolute, relative } from 'pathe'
@@ -30,8 +31,18 @@ function getCols(delta = 0) {
   return Math.max(length + delta, 0)
 }
 
-export function divider(text?: string, left?: number, right?: number): string {
+export function errorBanner(message: string): string {
+  return divider(c.bold(c.bgRed(` ${message} `)), null, null, c.red)
+}
+
+export function divider(
+  text?: string,
+  left?: number | null,
+  right?: number | null,
+  color?: Formatter,
+): string {
   const cols = getCols()
+  const c = color || ((text: string) => text)
 
   if (text) {
     const textLength = stripVTControlCharacters(text).length
@@ -44,7 +55,7 @@ export function divider(text?: string, left?: number, right?: number): string {
     }
     left = Math.max(0, left)
     right = Math.max(0, right)
-    return `${F_LONG_DASH.repeat(left)}${text}${F_LONG_DASH.repeat(right)}`
+    return `${c(F_LONG_DASH.repeat(left))}${text}${c(F_LONG_DASH.repeat(right))}`
   }
   return F_LONG_DASH.repeat(cols)
 }
@@ -229,7 +240,8 @@ export function formatProjectName(name: string | undefined, suffix = ' '): strin
 }
 
 export function withLabel(color: 'red' | 'green' | 'blue' | 'cyan' | 'yellow', label: string, message?: string) {
-  return `${c.bold(c.inverse(c[color](` ${label} `)))} ${message ? c[color](message) : ''}`
+  const bgColor = `bg${color.charAt(0).toUpperCase()}${color.slice(1)}` as `bg${Capitalize<typeof color>}`
+  return `${c.bold(c[bgColor](` ${label} `))} ${message ? c[color](message) : ''}`
 }
 
 export function padSummaryTitle(str: string): string {