fix(cli): set terminal output to full width (#362)

Author: BioPhoton

e2e/cli-e2e/tests/collect.e2e.test.ts

@@ -3,7 +3,7 @@ import { executeProcess, readJsonFile, readTextFile } from '@code-pushup/utils';
 
 describe('CLI collect', () => {
   const exampleCategoryTitle = 'Code style';
-  const exampleAuditTitle = 'Require `const` declarations for variables';
+  const exampleAuditTitle = 'Disallow unused variables';
 
   /* eslint-disable @typescript-eslint/no-unused-vars */
   const omitVariableData = ({

examples/plugins/project.json

@@ -53,6 +53,14 @@
         "^build",
         { "projects": ["cli"], "target": "build" }
       ]
+    },
+    "run-help": {
+      "command": "npx dist/packages/cli help",
+      "dependsOn": [
+        "build",
+        "^build",
+        { "projects": ["cli"], "target": "build" }
+      ]
     }
   },
   "tags": ["scope:internal", "type:feature"]

packages/cli/project.json

@@ -50,7 +50,7 @@
       "dependsOn": ["build"]
     },
     "run-collect": {
-      "command": "npx ../../dist/packages/cli collect --persist.format=stdout --persist.format=md",
+      "command": "npx ../../dist/packages/cli collect --persist.format=json --persist.format=md",
       "options": {
         "cwd": "examples/react-todos-app"
       },

packages/cli/src/lib/yargs-cli.ts

@@ -8,6 +8,7 @@ import yargs, {
   ParserConfigurationOptions,
 } from 'yargs';
 import { PersistConfig, formatSchema } from '@code-pushup/models';
+import { TERMINAL_WIDTH } from '@code-pushup/utils';
 import { logErrorBeforeThrow } from './implementation/global.utils';
 
 /**
@@ -53,7 +54,9 @@ export function yargsCli<T = unknown>(
     .coerce('config', (config: string | string[]) =>
       Array.isArray(config) ? config.at(-1) : config,
     )
-    .options(options);
+    .options(options)
+    // take full width of the terminal `cli.terminalWidth()`
+    .wrap(TERMINAL_WIDTH);
 
   // usage message
   if (usageMessage) {

packages/utils/src/index.ts

@@ -51,6 +51,7 @@ export {
   compareIssueSeverity,
   loadReport,
 } from './lib/reports/utils';
+export { TERMINAL_WIDTH } from './lib/reports/constants';
 export {
   CliArgsObject,
   countOccurrences,

packages/utils/src/lib/progress.ts

@@ -1,5 +1,6 @@
 import chalk from 'chalk';
 import { CtorOptions, MultiProgressBars } from 'multi-progress-bars';
+import { TERMINAL_WIDTH } from './reports/constants';
 
 type BarStyles = 'active' | 'done' | 'idle';
 type StatusStyles = Record<BarStyles, (s: string) => string>;
@@ -30,6 +31,7 @@ export function getSingletonProgressBars(
 ): MultiProgressBars {
   if (!mpb) {
     mpb = new MultiProgressBars({
+      progressWidth: TERMINAL_WIDTH,
       initMessage: '',
       border: true,
       ...options,

packages/utils/src/lib/reports/__snapshots__/generate-stdout-summary.integration.test.ts.snap

@@ -75,15 +75,15 @@ Lighthouse audits
 
 Categories
 
-┌────────────────┬───────┬────────┐
-│ Category       │ Score │ Audits │
-├────────────────┼───────┼────────┤
-│ Performance    │    92 │      6 │
-├────────────────┼───────┼────────┤
-│ Bug prevention │    68 │     16 │
-├────────────────┼───────┼────────┤
-│ Code style     │    54 │     13 │
-└────────────────┴───────┴────────┘
+┌─────────────────────────────────────────────────────────────┬───────┬────────┐
+│ Category                                                    │ Score │ Audits │
+├─────────────────────────────────────────────────────────────┼───────┼────────┤
+│ Performance                                                 │    92 │      6 │
+├─────────────────────────────────────────────────────────────┼───────┼────────┤
+│ Bug prevention                                              │    68 │     16 │
+├─────────────────────────────────────────────────────────────┼───────┼────────┤
+│ Code style                                                  │    54 │     13 │
+└─────────────────────────────────────────────────────────────┴───────┴────────┘
 
 Made with ❤ by code-pushup.dev
 "

packages/utils/src/lib/reports/constants.ts

@@ -1,3 +1,4 @@
+// https://stackoverflow.com/questions/4651012/why-is-the-default-terminal-width-80-characters/4651037#4651037
 export const TERMINAL_WIDTH = 80;
 export const NEW_LINE = '\n';
 

packages/utils/src/lib/reports/generate-stdout-summary.ts

@@ -73,6 +73,8 @@ function reportToOverviewSection({
   plugins,
 }: ScoredReport): string {
   const table = new CliTable3({
+    // eslint-disable-next-line no-magic-numbers
+    colWidths: [TERMINAL_WIDTH - 7 - 8 - 4, 7, 8],
     head: reportRawOverviewTableHeaders,
     colAligns: ['left', 'right', 'right'],
     style: {