feat(utils): implement a new design for stdout (#206)

Closes #190

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

@@ -6,8 +6,7 @@ import { cleanFolderPutGitKeep } from '../mocks/fs.mock';
 
 describe('CLI collect', () => {
   const exampleCategoryTitle = 'Code style';
-  const exampleAuditTitle =
-    'Require `const` declarations for variables that are never reassigned after declared';
+  const exampleAuditTitle = 'Require `const` declarations for variables';
 
   const omitVariableData = ({
     date,

package.json

@@ -15,6 +15,7 @@
     "@swc/helpers": "~0.5.0",
     "bundle-require": "^4.0.1",
     "chalk": "^5.3.0",
+    "cli-table3": "^0.6.3",
     "cliui": "^8.0.1",
     "multi-progress-bars": "^5.0.3",
     "simple-git": "^3.20.0",

packages/core/src/lib/implementation/persist.spec.ts

@@ -12,6 +12,7 @@ import {
 import {
   CODE_PUSHUP_DOMAIN,
   FOOTER_PREFIX,
+  NEW_LINE,
   README_LINK,
 } from '@code-pushup/utils';
 import { mockConsole, unmockConsole } from '../../../test';
@@ -76,7 +77,9 @@ describe('persistReport', () => {
 
   it('should stdout as format by default`', async () => {
     await persistReport(dummyReport, dummyConfig);
-    expect(logs).toContain(`${FOOTER_PREFIX} ${CODE_PUSHUP_DOMAIN}`);
+    expect(logs.join(NEW_LINE)).toContain(
+      `${FOOTER_PREFIX} ${CODE_PUSHUP_DOMAIN}`,
+    );
 
     expect(() => readReport('json')).not.toThrow();
     expect(() => readReport('md')).toThrow('no such file or directory');
@@ -89,7 +92,9 @@ describe('persistReport', () => {
       ...dummyConfig,
       persist,
     });
-    expect(logs).toContain(`${FOOTER_PREFIX} ${CODE_PUSHUP_DOMAIN}`);
+    expect(logs.join(NEW_LINE)).toContain(
+      `${FOOTER_PREFIX} ${CODE_PUSHUP_DOMAIN}`,
+    );
 
     expect(() => readReport('json')).not.toThrow('no such file or directory');
     expect(() => readReport('md')).toThrow('no such file or directory');
@@ -143,7 +148,9 @@ describe('persistReport', () => {
       `${FOOTER_PREFIX} [Code PushUp](${README_LINK})`,
     );
 
-    expect(logs).toContain(`${FOOTER_PREFIX} ${CODE_PUSHUP_DOMAIN}`);
+    expect(logs.join(NEW_LINE)).toContain(
+      `${FOOTER_PREFIX} ${CODE_PUSHUP_DOMAIN}`,
+    );
   });
 
   it('should persist some formats`', async () => {
@@ -162,7 +169,9 @@ describe('persistReport', () => {
       `${FOOTER_PREFIX} [Code PushUp](${README_LINK})`,
     );
 
-    expect(logs).toContain(`${FOOTER_PREFIX} ${CODE_PUSHUP_DOMAIN}`);
+    expect(logs.join(NEW_LINE)).toMatch(
+      `${FOOTER_PREFIX} ${CODE_PUSHUP_DOMAIN}`,
+    );
   });
 
   // @TODO: should throw PersistDirError

packages/core/src/lib/implementation/persist.ts

@@ -35,7 +35,7 @@ export async function persistReport(
   let scoredReport;
   if (format.includes('stdout')) {
     scoredReport = scoreReport(report);
-    reportToStdout(scoredReport);
+    console.log(reportToStdout(scoredReport));
   }
 
   // collect physical format outputs

packages/utils/package.json

@@ -7,6 +7,7 @@
     "chalk": "^5.3.0",
     "cliui": "^8.0.1",
     "simple-git": "^3.20.0",
-    "multi-progress-bars": "^5.0.3"
+    "multi-progress-bars": "^5.0.3",
+    "cli-table3": "^0.6.3"
   }
 }

packages/utils/src/index.ts

@@ -42,3 +42,4 @@ export {
   distinct,
   slugify,
 } from './lib/transformation';
+export { NEW_LINE } from './lib/md';

packages/utils/src/lib/__snapshots__/report-to-md.spec.ts.snap

@@ -436,5 +436,5 @@ The following plugins were run:
 |ESLint|47|\`0.1.0\`|368 ms|
 |Lighthouse|5|\`0.1.0\`|1.23 s|
 
-Made with ❤️ by [Code PushUp](https://github.com/flowup/quality-metrics-cli#readme)"
+Made with ❤ by [Code PushUp](https://github.com/flowup/quality-metrics-cli#readme)"
 `;

packages/utils/src/lib/__snapshots__/report-to-stdout.spec.ts.snap

@@ -1,28 +1,90 @@
 // Vitest Snapshot v1, https://vitest.dev/guide/snapshot.html
 
 exports[`report-to-stdout > should contain all sections when using the fixture report 1`] = `
-"Code PushUp Report - @code-pushup/core@0.1.0
----
-Package Name: @code-pushup/core
-Version: 0.1.0
-Commit: feat(cli): add logic for markdown report - 7eba125ad5643c2f90cb21389fc3442d786f43f9
-Date: today
-Duration: 42ms
-Plugins: 1
-Audits: 1
----
+"Code PushUp Report - @code-pushup/core@0.0.1
 
 
- 🏷 Category          ⭐ Score             🛡 Audits
- Category 1          0                   1/1
+ESLint audits
 
+● Disallow assignment operators in conditional expressions            0
+● Disallow reassigning \`const\` variables                              0
+● Disallow the use of \`debugger\`                                      0
+● Disallow invalid regular expression strings in \`RegExp\` construct   0
+  ors
+● Disallow the use of undeclared variables unless mentioned in \`/*g   0
+  lobal */\` comments
+● Disallow loops with a body that allows only one iteration           0
+● Disallow negating the left operand of relational operators          0
+● Disallow use of optional chaining in contexts where the \`undefine   0
+  d\` value is not allowed
+● Disallow unused variables                                           1 warning
+● Require calls to \`isNaN()\` when checking for \`NaN\`                  0
+● Enforce comparing \`typeof\` expressions against valid strings        0
+● Require braces around arrow function bodies                         1 warning
+● Enforce camelcase naming convention                                 0
+● Enforce consistent brace style for all control statements           0
+● Require the use of \`===\` and \`!==\`                                  1 warning
+● Enforce a maximum number of lines of code in a function             1 warning
+● Enforce a maximum number of lines per file                          0
+● Disallow variable declarations from shadowing variables declared    3 warnings
+  in the outer scope
+● Require \`let\` or \`const\` instead of \`var\`                           0
+● Require or disallow method and property shorthand syntax for obje   3 warnings
+  ct literals
+● Require using arrow functions for callbacks                         0
+● Require \`const\` declarations for variables that are never reassig   1 warning
+  ned after declared
+● Disallow using Object.assign with an object literal as the first    0
+  argument and prefer the use of object spread instead
+● Require or disallow \\"Yoda\\" conditions                               0
+● Disallow missing \`key\` props in iterators/collection literals       1 warning
+● Disallow missing props validation in a React component definition   6 warnings
+● Disallow missing React when using JSX                               0
+● enforces the Rules of Hooks                                         0
+● verifies the list of dependencies for Hooks like useEffect and si   2 warnings
+  milar
+● Disallow missing displayName in a React component definition        0
+● Disallow comments from being inserted as text nodes                 0
+● Disallow duplicate properties in JSX                                0
+● Disallow \`target=\\"_blank\\"\` attribute without \`rel=\\"noreferrer\\"\`     0
+● Disallow undeclared variables in JSX                                0
+● Disallow React to be incorrectly marked as unused                   0
+● Disallow variables used in JSX to be incorrectly marked as unused   0
+● Disallow passing of children as props                               0
+● Disallow when a DOM element is using both children and dangerousl   0
+  ySetInnerHTML
+● Disallow usage of deprecated methods                                0
+● Disallow direct mutation of this.state                              0
+● Disallow usage of findDOMNode                                       0
+● Disallow usage of isMounted                                         0
+● Disallow usage of the return value of ReactDOM.render               0
+● Disallow using string references                                    0
+● Disallow unescaped HTML entities from appearing in markup           0
+● Disallow usage of unknown DOM property                              0
+● Enforce ES5 or ES6 class for returning value in render function     0
 
-Category 1 0
-- Audit Title (1)
-  audit description
-  http://www.my-docs.dev 
 
+Lighthouse audits
 
+● First Contentful Paint                                              1.2 s
+● Largest Contentful Paint                                            1.5 s
+● Total Blocking Time                                                 0 ms
+● Cumulative Layout Shift                                             0
+● Speed Index                                                         1.2 s
 
-Made with ❤️ by code-pushup.dev"
+
+Categories
+
+┌────────────────┬───────┬────────┐
+│ Category       │ Score │ Audits │
+├────────────────┼───────┼────────┤
+│ Performance    │    92 │      6 │
+├────────────────┼───────┼────────┤
+│ Bug prevention │    68 │     16 │
+├────────────────┼───────┼────────┤
+│ Code style     │    54 │     13 │
+└────────────────┴───────┴────────┘
+
+Made with ❤ by code-pushup.dev
+"
 `;

packages/utils/src/lib/report-to-stdout.spec.ts

@@ -1,23 +1,14 @@
-import { afterEach, beforeEach, describe } from 'vitest';
-import { minimalReport } from '@code-pushup/models/testing';
-import { mockConsole, unmockConsole } from '../../test';
+import { describe } from 'vitest';
+import { report } from '@code-pushup/models/testing';
 import { reportToStdout } from './report-to-stdout';
 import { scoreReport } from './scoring';
 
-let logs: string[];
-
 describe('report-to-stdout', () => {
-  beforeEach(async () => {
-    logs = [];
-    mockConsole(msg => logs.push(msg));
-  });
-  afterEach(() => {
-    unmockConsole();
-  });
-
   it('should contain all sections when using the fixture report', () => {
-    reportToStdout(scoreReport(minimalReport('tmp')));
-    const logOutput = logs.join('\n');
-    expect(logOutput).toMatchSnapshot();
+    const logOutput = reportToStdout(scoreReport(report()));
+    // logOutput.replace(/\u001B\[\d+m/g, '') removes all color codes from the output
+    // for snapshot readability
+    // eslint-disable-next-line no-control-regex
+    expect(logOutput.replace(/\u001B\[\d+m/g, '')).toMatchSnapshot();
   });
 });