feat(utils): use table.title as heading when formatting audit details

Author: matejchalk

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

@@ -19,8 +19,6 @@ exports[`auditDetails > should render complete details section 1`] = `
 "<details>
 <summary>🟩 <b>190ms</b> (score: 99)</summary>
 
-#### Additional Information
-
 |Class Names|Element|
 |:--:|:--:|
 |.btn, .icon|button|
@@ -106,8 +104,6 @@ exports[`generateMdReport > should render complete md report 1`] = `
 <details>
 <summary>🟨 <b>2,7 s</b> (score: 67)</summary>
 
-#### Additional Information
-
 |Phase|% of LCP|Timing|
 |:--:|:--|--:|
 |TTFB|27%|620 ms|

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

@@ -4,28 +4,22 @@ import { Hierarchy, NEW_LINE, SPACE, md } from '../text-formats';
 const { headline, lines, link, section, table } = md;
 
 export function tableSection(
-  tableData: Table | undefined,
-  options?:
-    | {
-        heading?: string;
-        level?: Hierarchy | 0;
-      }
-    | string,
-): string {
-  if (tableData == null) {
-    return '';
-  }
+  tableData: Table,
+  options?: {
+    level?: Hierarchy | 0;
+  },
+) {
   if (tableData.rows.length === 0) {
     return '';
   }
-  const { heading, level = 4 } =
-    typeof options === 'string'
-      ? { heading: options, level: 0 }
-      : options ?? {};
+  const { level = 4 } = options ?? {};
   // if hierarchy is 0 do not apply heading styles
   const render = (h: string, l: Hierarchy | 0) =>
-    l === 0 ? heading : headline(h, l);
-  return lines(heading ? render(heading, level) : false, table(tableData));
+    l === 0 ? h : headline(h, l);
+  return lines(
+    tableData.title && render(tableData.title, level),
+    table(tableData),
+  );
 }
 
 // @TODO extract `Pick<AuditReport, 'docsUrl' | 'description'>` to a reusable schema and type

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

@@ -7,6 +7,7 @@ describe('tableSection', () => {
     expect(
       tableSection(
         {
+          title: 'LCP Breakdown',
           columns: [
             { key: 'phase', label: 'Phase' },
             { key: 'percentageLcp', label: '% of LCP', align: 'left' },
@@ -35,7 +36,7 @@ describe('tableSection', () => {
             },
           ],
         },
-        { heading: 'LCP Breakdown', level: 3 },
+        { level: 3 },
       ),
     ).toMatchSnapshot();
   });

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

@@ -51,6 +51,7 @@ export function auditDetailsIssues(issues: Issue[] = []) {
     return '';
   }
   const detailsTableData = {
+    title: 'Issues',
     columns: issuesTableHeadings,
     rows: issues.map(
       ({ severity: severityVal, message, source: sourceVal }: Issue) => {
@@ -73,7 +74,7 @@ export function auditDetailsIssues(issues: Issue[] = []) {
     ),
   };
 
-  return tableSection(detailsTableData, { heading: 'Issues' });
+  return tableSection(detailsTableData);
 }
 
 export function auditDetails(audit: AuditReport) {
@@ -85,10 +86,7 @@ export function auditDetails(audit: AuditReport) {
     return section(detailsValue);
   }
 
-  const tableSectionContent =
-    table == null
-      ? ''
-      : tableSection(table, { heading: 'Additional Information' });
+  const tableSectionContent = table == null ? '' : tableSection(table);
   const issuesSectionContent =
     issues.length > 0 ? auditDetailsIssues(issues) : '';
 

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

@@ -257,6 +257,7 @@ describe('auditDetails', () => {
       displayValue: '190ms',
       details: {
         table: {
+          title: 'Elements',
           rows: [
             {
               element: 'button',
@@ -269,7 +270,7 @@ describe('auditDetails', () => {
       },
     } as AuditReport);
     expect(md).toMatch('<details>');
-    expect(md).toMatch('#### Additional Information');
+    expect(md).toMatch('#### Elements');
     expect(md).toMatch('|button|');
     expect(md).toMatch('|div|');
     expect(md).not.toMatch('#### Issues');
@@ -364,7 +365,6 @@ describe('auditsSection', () => {
     } as unknown as ScoredReport);
     expect(md).toMatch('#### Issues');
     expect(md).toMatch('|Severity|Message|Source file|Line(s)|');
-    expect(md).toMatch('#### Additional Information');
     expect(md).toMatch('|value|');
   });