feat(utils): improve reports diff formatting

Author: matejchalk

packages/utils/src/lib/reports/__snapshots__/generate-md-reports-diff.integration.test.ts.snap

@@ -1,6 +1,6 @@
 // Vitest Snapshot v1, https://vitest.dev/guide/snapshot.html
 
-exports[`generateMdReportsDiff > should format Markdown comment summarizing changes between reports 1`] = `
+exports[`generateMdReportsDiff > should format Markdown comment for improved reports diff 1`] = `
 "# Code PushUp
 
 🙌 Code PushUp report has **improved** – compared target commit \`0123456\` with source commit \`abcdef0\`.
@@ -46,7 +46,59 @@ exports[`generateMdReportsDiff > should format Markdown comment summarizing chan
 |Lighthouse|Largest Contentful Paint|🟨 **1.4 s**|🟨 1.5 s|<span style="color: green">▼ **-8%**</span>|
 |Lighthouse|Speed Index|🟩 **1.1 s**|🟩 1.2 s|<span style="color: green">▼ **-4%**</span>|
 
-Other 40 audits are unchanged.
+40 other audits are unchanged.
+
+</details>
+"
+`;
+
+exports[`generateMdReportsDiff > should format Markdown comment for mixed reports diff 1`] = `
+"# Code PushUp
+
+😐 Code PushUp report has both **improved and regressed** – compared target commit \`0123456\` with source commit \`abcdef0\`.
+
+## 🏷️ Categories
+
+|🏷️ Category|⭐ Current score|⭐ Previous score|🗠 Score change|
+|:--|:--:|:--:|:--:|
+|Performance|🟢 **94**|🟢 92|<span style="color: green">▲ **+2**</span>|
+|Bug prevention|🟡 **63**|🟡 68|<span style="color: red">▼ **-5**</span>|
+
+<details>
+<summary>1 other category is unchanged.</summary>
+
+- Code style: 🟡 **54**
+
+</details>
+
+
+## 🎗️ Groups
+
+<details>
+<summary>👍 <strong>1</strong> group improved</summary>
+
+|🔌 Plugin|🎗️ Group|⭐ Current score|⭐ Previous score|🗠 Score change|
+|:--|:--|:--:|:--:|:--:|
+|Lighthouse|Performance|🟢 **94**|🟢 92|<span style="color: green">▲ **+2**</span>|
+
+1 other group is unchanged.
+
+</details>
+
+
+## 🛡️ Audits
+
+<details>
+<summary>👍 <strong>3</strong> audits improved, 👎 <strong>1</strong> audit regressed</summary>
+
+|🔌 Plugin|🛡️ Audit|📏 Current value|📏 Previous value|🗠 Value change|
+|:--|:--|:--:|:--:|:--:|
+|ESLint|Disallow unused variables|🟥 **1 error**|🟩 passed|<span style="color: red">▲ **+∞%**</span>|
+|Lighthouse|First Contentful Paint|🟨 **1.1 s**|🟨 1.2 s|<span style="color: green">▼ **-4%**</span>|
+|Lighthouse|Largest Contentful Paint|🟨 **1.4 s**|🟨 1.5 s|<span style="color: green">▼ **-8%**</span>|
+|Lighthouse|Speed Index|🟩 **1.1 s**|🟩 1.2 s|<span style="color: green">▼ **-4%**</span>|
+
+48 other audits are unchanged.
 
 </details>
 "

packages/utils/src/lib/reports/generate-md-reports-diff.integration.test.ts

@@ -1,8 +1,12 @@
-import { reportsDiffMock } from '@code-pushup/test-utils';
+import { reportsDiffAltMock, reportsDiffMock } from '@code-pushup/test-utils';
 import { generateMdReportsDiff } from './generate-md-reports-diff';
 
 describe('generateMdReportsDiff', () => {
-  it('should format Markdown comment summarizing changes between reports', () => {
+  it('should format Markdown comment for improved reports diff', () => {
     expect(generateMdReportsDiff(reportsDiffMock())).toMatchSnapshot();
   });
+
+  it('should format Markdown comment for mixed reports diff', () => {
+    expect(generateMdReportsDiff(reportsDiffAltMock())).toMatchSnapshot();
+  });
 });

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

@@ -198,8 +198,9 @@ function summarizeUnchanged(
   { changed, unchanged }: { changed: unknown[]; unchanged: unknown[] },
 ): string {
   return [
-    changed.length > 0 ? 'Other' : 'All',
-    pluralizeToken(token, unchanged.length),
+    changed.length > 0
+      ? pluralizeToken(`other ${token}`, unchanged.length)
+      : `All of ${pluralizeToken(token, unchanged.length)}`,
     unchanged.length > 1 ? 'are' : 'is',
     'unchanged.',
   ].join(' ');

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

@@ -68,6 +68,12 @@ export function colorByScoreDiff(text: string, diff: number): string {
 }
 
 export function formatDiffNumber(diff: number): string {
+  if (diff === Number.POSITIVE_INFINITY) {
+    return '+∞';
+  }
+  if (diff === Number.NEGATIVE_INFINITY) {
+    return '-∞';
+  }
   if (diff > 0) {
     return `+${diff}`;
   }