feat(utils): generate ascii tree in full markdown report's audit details

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

@@ -1,3 +1,5 @@
+import { HIERARCHY } from '../text-formats/index.js';
+
 // https://stackoverflow.com/questions/4651012/why-is-the-default-terminal-width-80-characters/4651037#4651037
 export const TERMINAL_WIDTH = 80;
 
@@ -20,3 +22,5 @@
   'Score',
   'Audits',
 ];
+
+export const AUDIT_DETAILS_HEADING_LEVEL = HIERARCHY.level_4;

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

@@ -9,13 +9,15 @@
   AuditReport,
   SourceFileLocation,
   Table,
+  Tree,
 } from '@code-pushup/models';
-import { HIERARCHY } from '../text-formats/index.js';
+import { formatAsciiTree } from '../text-formats/ascii/tree.js';
 import {
   columnsToStringArray,
   getColumnAlignments,
   rowToStringArray,
 } from '../text-formats/table.js';
+import { AUDIT_DETAILS_HEADING_LEVEL } from './constants.js';
 import {
   getEnvironmentType,
   getGitHubBaseUrl,
@@ -24,19 +26,19 @@
 import type { MdReportOptions } from './types.js';
 
 export function tableSection(
-  tableData: Table,
+  table: Table,
   options?: {
     level?: HeadingLevel;
   },
 ): MarkdownDocument | null {
-  if (tableData.rows.length === 0) {
+  if (table.rows.length === 0) {
     return null;
   }
-  const { level = HIERARCHY.level_4 } = options ?? {};
-  const columns = columnsToStringArray(tableData);
-  const alignments = getColumnAlignments(tableData);
-  const rows = rowToStringArray(tableData);
-  return new MarkdownDocument().heading(level, tableData.title).table(
+  const { level = AUDIT_DETAILS_HEADING_LEVEL } = options ?? {};
+  const columns = columnsToStringArray(table);
+  const alignments = getColumnAlignments(table);
+  const rows = rowToStringArray(table);
+  return new MarkdownDocument().heading(level, table.title).table(
     columns.map((heading, i) => {
       const alignment = alignments[i];
       if (alignment) {
@@ -48,6 +50,18 @@
   );
 }
 
+export function treeSection(
+  tree: Tree,
+  options?: {
+    level?: HeadingLevel;
+  },
+): MarkdownDocument {
+  const { level = AUDIT_DETAILS_HEADING_LEVEL } = options ?? {};
+  return new MarkdownDocument()
+    .heading(level, tree.title)
+    .code(formatAsciiTree(tree));
+}
+
 // @TODO extract `Pick<AuditReport, 'docsUrl' | 'description'>` to a reusable schema and type
 export function metaDescription(
   audit: Pick<AuditReport, 'docsUrl' | 'description'>,

packages/utils/src/lib/reports/generate-md-report.ts

@@ -3,6 +3,7 @@
 import { formatDate, formatDuration } from '../formatting.js';
 import { HIERARCHY } from '../text-formats/index.js';
 import {
+  AUDIT_DETAILS_HEADING_LEVEL,
   FOOTER_PREFIX,
   README_LINK,
   REPORT_HEADLINE_TEXT,
@@ -12,6 +13,7 @@
   linkToLocalSourceForIde,
   metaDescription,
   tableSection,
+  treeSection,
 } from './formatting.js';
 import {
   categoriesDetailsSection,
@@ -73,48 +75,57 @@
   if (issues.length === 0) {
     return null;
   }
-  return new MarkdownDocument().heading(HIERARCHY.level_4, 'Issues').table(
-    [
-      { heading: 'Severity', alignment: 'center' },
-      { heading: 'Message', alignment: 'left' },
-      { heading: 'Source file', alignment: 'left' },
-      { heading: 'Line(s)', alignment: 'center' },
-    ],
-    issues.map(({ severity: level, message, source }: Issue) => {
-      const severity = md`${severityMarker(level)} ${md.italic(level)}`;
+  return new MarkdownDocument()
+    .heading(AUDIT_DETAILS_HEADING_LEVEL, 'Issues')
+    .table(
+      [
+        { heading: 'Severity', alignment: 'center' },
+        { heading: 'Message', alignment: 'left' },
+        { heading: 'Source file', alignment: 'left' },
+        { heading: 'Line(s)', alignment: 'center' },
+      ],
+      issues.map(({ severity: level, message, source }: Issue) => {
+        const severity = md`${severityMarker(level)} ${md.italic(level)}`;
 
-      if (!source) {
-        return [severity, message];
-      }
-      const file = linkToLocalSourceForIde(source, options);
-      if (!source.position) {
-        return [severity, message, file];
-      }
-      const line = formatSourceLine(source.position);
-      return [severity, message, file, line];
-    }),
-  );
+        if (!source) {
+          return [severity, message];
+        }
+        const file = linkToLocalSourceForIde(source, options);
+        if (!source.position) {
+          return [severity, message, file];
+        }
+        const line = formatSourceLine(source.position);
+        return [severity, message, file, line];
+      }),
+    );
 }
 
 export function auditDetails(
   audit: AuditReport,
   options?: MdReportOptions,
 ): MarkdownDocument {
-  const { table, issues = [] } = audit.details ?? {};
+  const { table, issues = [], trees = [] } = audit.details ?? {};
   const detailsValue = auditDetailsAuditValue(audit);
 
   // undefined details OR empty details (undefined issues OR empty issues AND empty table)
-  if (issues.length === 0 && !table?.rows.length) {
+  if (issues.length === 0 && !table?.rows.length && trees.length === 0) {
     return new MarkdownDocument().paragraph(detailsValue);
   }
 
   const tableSectionContent = table && tableSection(table);
   const issuesSectionContent =
     issues.length > 0 && auditDetailsIssues(issues, options);
+  const treesSectionContent =
+    trees.length > 0 &&
+    new MarkdownDocument().$concat(...trees.map(tree => treeSection(tree)));
 
   return new MarkdownDocument().details(
     detailsValue,
-    new MarkdownDocument().$concat(tableSectionContent, issuesSectionContent),
+    new MarkdownDocument().$concat(
+      tableSectionContent,
+      treesSectionContent,
+      issuesSectionContent,
+    ),
   );
 }
 

packages/utils/src/lib/reports/generate-md-report.unit.test.ts

@@ -339,6 +339,56 @@ describe('auditDetails', () => {
     expect(md).not.toMatch('#### Issues');
   });
 
+  it('should display tree section if trees are present', () => {
+    const md = auditDetails({
+      slug: 'line-coverage',
+      title: 'Line coverage',
+      score: 0.7,
+      value: 70,
+      displayValue: '70 %',
+      details: {
+        trees: [
+          {
+            type: 'coverage',
+            title: 'Line coverage',
+            root: {
+              name: '.',
+              values: { coverage: 0.7 },
+              children: [
+                {
+                  name: 'src',
+                  values: { coverage: 0.7 },
+                  children: [
+                    {
+                      name: 'App.tsx',
+                      values: {
+                        coverage: 0.8,
+                        missing: [{ startLine: 42, endLine: 50 }],
+                      },
+                    },
+                    {
+                      name: 'index.ts',
+                      values: {
+                        coverage: 0,
+                        missing: [{ startLine: 1, endLine: 10 }],
+                      },
+                    },
+                  ],
+                },
+              ],
+            },
+          },
+        ],
+      },
+    } as AuditReport).toString();
+    expect(md).toMatch('<details>');
+    expect(md).toMatch('#### Line coverage');
+    expect(md).toContain('```');
+    expect(md).toContain('└── src');
+    expect(md).toContain('├── App.tsx');
+    expect(md).not.toMatch('#### Issues');
+  });
+
   it('should render complete details section', () => {
     expect(
       auditDetails({

packages/utils/src/lib/text-formats/ascii/__snapshots__/basic-tree.txt

@@ -0,0 +1,3 @@
+https://example.com
+├── https://example.com/styles/base.css
+└── https://example.com/styles/theme.css

packages/utils/src/lib/text-formats/ascii/__snapshots__/basic-tree.with-nesting.txt

@@ -0,0 +1,15 @@
+.
+└── src
+    ├── app
+    │   ├── components
+    │   │   ├── login
+    │   │   │   └── login.component.ts
+    │   │   └── platform
+    │   │       └── platform.component.ts
+    │   ├── services
+    │   │   ├── api-client.service.ts
+    │   │   └── auth.service.ts
+    │   ├── app.component.ts
+    │   ├── app.config.ts
+    │   └── app.routes.ts
+    └── main.ts

packages/utils/src/lib/text-formats/ascii/__snapshots__/basic-tree.with-values.txt

@@ -0,0 +1,3 @@
+https://example.com
+├── https://example.com/styles/base.css      2 kB   20
+└── https://example.com/styles/theme.css    10 kB  100

packages/utils/src/lib/text-formats/ascii/__snapshots__/coverage-tree.txt

@@ -0,0 +1,15 @@
+.                                             72.00 %
+└── src                                       72.00 %
+    ├── app                                   88.00 %
+    │   ├── components                        68.00 %
+    │   │   ├── login                         48.00 %
+    │   │   │   └── login.component.ts        48.00 %
+    │   │   └── platform                      74.00 %
+    │   │       └── platform.component.ts     74.00 %
+    │   ├── services                          97.00 %
+    │   │   ├── api-client.service.ts         99.00 %
+    │   │   └── auth.service.ts               94.00 %
+    │   ├── app.component.ts                  92.00 %
+    │   ├── app.config.ts                    100.00 %
+    │   └── app.routes.ts                    100.00 %
+    └── main.ts                                0.00 %

packages/utils/src/lib/text-formats/ascii/__snapshots__/coverage-tree.with-missing-lines.txt

@@ -0,0 +1,8 @@
+.                              70.00 %
+└── src                        45.39 %
+    ├── components             97.36 %
+    │   ├── CreateTodo.jsx    100.00 %
+    │   ├── TodoFilter.jsx     90.90 %  18
+    │   └── TodoList.jsx      100.00 %
+    └── hooks                   0.00 %
+        └── useTodos.js         0.00 %  1-73

packages/utils/src/lib/text-formats/ascii/__snapshots__/coverage-tree.with-missing-named.txt

@@ -0,0 +1,7 @@
+.                          70.00 %
+└── src                    70.00 %
+    ├── components         80.00 %
+    │   ├── App.tsx        75.00 %  login (42-50), logout (52-55)
+    │   └── Layout.tsx    100.00 %
+    ├── index.ts          100.00 %
+    └── utils.ts            0.00 %  ErrorBoundary (1-10)