Add color to displayName in project configuration.

packages/jest-config/src/ValidConfig.ts

@@ -41,7 +41,11 @@ const initialOptions: Config.InitialOptions = {
   // @ts-ignore: Missing from initial options... https://github.com/facebook/jest/pull/7923
   cwd: '/root',
   dependencyExtractor: '<rootDir>/dependencyExtractor.js',
-  displayName: 'project-name',
+  // @ts-ignore TODO: type this properly
+  displayName: multipleValidOptions('test-config', {
+    color: 'blue',
+    name: 'test-config',
+  }),
   errorOnDeprecated: false,
   expand: false,
   extraGlobals: [],

packages/jest-config/src/__tests__/__snapshots__/normalize.test.js.snap

@@ -17,6 +17,66 @@ exports[`Upgrade help logs a warning when \`scriptPreprocessor\` and/or \`prepro
 <yellow></>"
 `;
 
+exports[`displayName should throw an error when displayName is is an empty object 1`] = `
+"<red><bold><bold>● <bold>Validation Error</>:</>
+<red></>
+<red>  Option \\"<bold>displayName</>\\" must be of type</>
+<red>  {</>
+<red>    name: string;</>
+<red>    color: string;</>
+<red>  }</>
+<red></>
+<red></>
+<red>  <bold>Configuration Documentation:</></>
+<red>  https://jestjs.io/docs/configuration.html</>
+<red></>"
+`;
+
+exports[`displayName should throw an error when displayName is missing color 1`] = `
+"<red><bold><bold>● <bold>Validation Error</>:</>
+<red></>
+<red>  Option \\"<bold>displayName</>\\" must be of type</>
+<red>  {</>
+<red>    name: string;</>
+<red>    color: string;</>
+<red>  }</>
+<red></>
+<red></>
+<red>  <bold>Configuration Documentation:</></>
+<red>  https://jestjs.io/docs/configuration.html</>
+<red></>"
+`;
+
+exports[`displayName should throw an error when displayName is missing name 1`] = `
+"<red><bold><bold>● <bold>Validation Error</>:</>
+<red></>
+<red>  Option \\"<bold>displayName</>\\" must be of type</>
+<red>  {</>
+<red>    name: string;</>
+<red>    color: string;</>
+<red>  }</>
+<red></>
+<red></>
+<red>  <bold>Configuration Documentation:</></>
+<red>  https://jestjs.io/docs/configuration.html</>
+<red></>"
+`;
+
+exports[`displayName should throw an error when displayName is using invalid values 1`] = `
+"<red><bold><bold>● <bold>Validation Error</>:</>
+<red></>
+<red>  Option \\"<bold>displayName</>\\" must be of type</>
+<red>  {</>
+<red>    name: string;</>
+<red>    color: string;</>
+<red>  }</>
+<red></>
+<red></>
+<red>  <bold>Configuration Documentation:</></>
+<red>  https://jestjs.io/docs/configuration.html</>
+<red></>"
+`;
+
 exports[`preset throws when module was found but no "jest-preset.js" or "jest-preset.json" files 1`] = `
 "<red><bold><bold>● <bold>Validation Error</>:</>
 <red></>

packages/jest-config/src/__tests__/normalize.test.js

@@ -1519,3 +1519,26 @@ describe('Defaults', () => {
     expect(console.warn).not.toHaveBeenCalled();
   });
 });
+
+describe('displayName', () => {
+  test.each`
+    displayName             | description
+    ${{}}                   | ${'is an empty object'}
+    ${{name: 'hello'}}      | ${'missing color'}
+    ${{color: 'green'}}     | ${'missing name'}
+    ${{color: 2, name: []}} | ${'using invalid values'}
+  `(
+    'should throw an error when displayName is $description',
+    ({displayName}) => {
+      expect(() => {
+        normalize(
+          {
+            rootDir: '/root/',
+            displayName,
+          },
+          {},
+        );
+      }).toThrowErrorMatchingSnapshot();
+    },
+  );
+});

packages/jest-config/src/normalize.ts

@@ -745,6 +745,52 @@ export default function normalize(
         }
         break;
       }
+      case 'displayName': {
+        const displayName = oldOptions[key] as Config.DisplayName;
+        const isDisplayNameAnObject =
+          typeof displayName === 'object' && !Array.isArray(displayName);
+        if (typeof displayName === 'string') {
+          value = displayName;
+          break;
+        }
+        /**
+         * Ensuring that displayName shape is correct here so that the
+         * reporters can trust the shape of the data
+         * TODO: Normalize "displayName" such that given a config option
+         * {
+         *  "displayName": "Test"
+         * }
+         * becomes
+         * {
+         *   displayName: {
+         *     name: "Test",
+         *     color: "white"
+         *   }
+         * }
+         *
+         * This can't be done now since this will be a breaking change
+         * for custom reporters
+         */
+        if (isDisplayNameAnObject) {
+          const errorMessage =
+            `  Option "${chalk.bold('displayName')}" must be of type\n` +
+            '  {\n' +
+            '    name: string;\n' +
+            '    color: string;\n' +
+            '  }\n';
+          const {name, color} = displayName;
+          if (
+            !name ||
+            !color ||
+            typeof name !== 'string' ||
+            typeof color !== 'string'
+          ) {
+            throw createConfigError(errorMessage);
+          }
+        }
+        value = oldOptions[key];
+        break;
+      }
       case 'automock':
       case 'browser':
       case 'cache':
@@ -756,7 +802,6 @@ export default function normalize(
       case 'coverageThreshold':
       case 'detectLeaks':
       case 'detectOpenHandles':
-      case 'displayName':
       case 'errorOnDeprecated':
       case 'expand':
       case 'extraGlobals':

packages/jest-reporters/src/utils.ts

@@ -17,14 +17,20 @@ const PROGRESS_BAR_WIDTH = 40;
 
 export const printDisplayName = (config: Config.ProjectConfig) => {
   const {displayName} = config;
+  const white = chalk.reset.inverse.white;
+  if (!displayName) {
+    return '';
+  }
 
-  if (displayName) {
-    return chalk.supportsColor
-      ? chalk.reset.inverse.white(` ${displayName} `)
-      : displayName;
+  if (typeof displayName === 'string') {
+    return chalk.supportsColor ? white(` ${displayName} `) : displayName;
   }
 
-  return '';
+  const {name, color} = displayName;
+  const chosenColor = chalk.reset.inverse[color]
+    ? chalk.reset.inverse[color]
+    : white;
+  return chalk.supportsColor ? chosenColor(` ${name} `) : name;
 };
 
 export const trimAndFormatPath = (

packages/jest-test-result/src/types.ts

@@ -8,6 +8,7 @@
 // eslint-disable-next-line import/no-extraneous-dependencies
 import {CoverageMap, CoverageMapData} from 'istanbul-lib-coverage';
 import {ConsoleBuffer} from '@jest/console';
+import {Config} from '@jest/types';
 
 export type SerializableError = {
   code?: unknown;
@@ -102,7 +103,7 @@ export type Suite = {
 export type TestResult = {
   console?: ConsoleBuffer | null;
   coverage?: CoverageMapData;
-  displayName?: string | null;
+  displayName?: Config.DisplayName;
   failureMessage?: string | null;
   leaks: boolean;
   memoryUsage?: Bytes;

packages/jest-types/src/Config.ts

@@ -105,6 +105,13 @@ export type DefaultOptions = {
   watchman: boolean;
 };
 
+export type DisplayName =
+  | string
+  | {
+      name: string;
+      color: DisplayNameColor;
+    };
+
 export type InitialOptions = {
   automock?: boolean;
   bail?: boolean | number;
@@ -130,7 +137,7 @@ export type InitialOptions = {
   dependencyExtractor?: string;
   detectLeaks?: boolean;
   detectOpenHandles?: boolean;
-  displayName?: string;
+  displayName?: DisplayName;
   expand?: boolean;
   extraGlobals?: Array<string>;
   filter?: Path;
@@ -224,6 +231,47 @@ type NotifyMode =
   | 'success-change'
   | 'failure-change';
 
+/**
+ * Hard coding this until
+ * https://github.com/chalk/chalk/pull/336
+ * gets merged
+ */
+type DisplayNameColor =
+  | 'black'
+  | 'red'
+  | 'green'
+  | 'yellow'
+  | 'blue'
+  | 'magenta'
+  | 'cyan'
+  | 'white'
+  | 'gray'
+  | 'grey'
+  | 'blackBright'
+  | 'redBright'
+  | 'greenBright'
+  | 'yellowBright'
+  | 'blueBright'
+  | 'magentaBright'
+  | 'cyanBright'
+  | 'whiteBright'
+  | 'bgBlack'
+  | 'bgRed'
+  | 'bgGreen'
+  | 'bgYellow'
+  | 'bgBlue'
+  | 'bgMagenta'
+  | 'bgCyan'
+  | 'bgWhite'
+  | 'bgBlackBright'
+  | 'bgRedBright'
+  | 'bgGreenBright'
+  | 'bgYellowBright'
+  | 'bgBlueBright'
+  | 'bgMagentaBright'
+  | 'bgCyanBright'
+  | 'bgWhiteBright';
+
 type CoverageThreshold = {
   [path: string]: {
     [key: string]: number;
@@ -319,7 +367,7 @@ export type ProjectConfig = {
   dependencyExtractor?: string;
   detectLeaks: boolean;
   detectOpenHandles: boolean;
-  displayName: string | null | undefined;
+  displayName?: DisplayName;
   errorOnDeprecated: boolean;
   extraGlobals: Array<keyof NodeJS.Global>;
   filter: Path | null | undefined;