feat(utils): implement a new design for stdout

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();
  });
 });