feat(utils): implement markdown diff formatting

Author: matejchalk

packages/utils/src/lib/formatting.ts

@@ -12,7 +12,11 @@ export function slugify(text: string): string {
     .replace(/[^a-z\d-]/g, '');
 }
 
-export function pluralize(text: string): string {
+export function pluralize(text: string, amount?: number): string {
+  if (amount != null && Math.abs(amount) === 1) {
+    return text;
+  }
+
   if (text.endsWith('y')) {
     return `${text.slice(0, -1)}ies`;
   }
@@ -41,7 +45,7 @@ export function formatBytes(bytes: number, decimals = 2) {
   }`;
 }
 
-export function pluralizeToken(token: string, times = 0): string {
+export function pluralizeToken(token: string, times: number): string {
   return `${times} ${Math.abs(times) === 1 ? token : pluralize(token)}`;
 }
 

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

@@ -31,6 +31,14 @@ describe('pluralize', () => {
   ])('should pluralize "%s" as "%s"', (singular, plural) => {
     expect(pluralize(singular)).toBe(plural);
   });
+
+  it('should not pluralize if 1 passed in as amount', () => {
+    expect(pluralize('audit', 1)).toBe('audit');
+  });
+
+  it('should pluralize if amount is other than 1/-1', () => {
+    expect(pluralize('audit', 2)).toBe('audits');
+  });
 });
 
 describe('formatBytes', () => {
@@ -53,7 +61,6 @@ describe('formatBytes', () => {
 
 describe('pluralizeToken', () => {
   it.each([
-    [undefined, '0 files'],
     [-2, '-2 files'],
     [-1, '-1 file'],
     [0, '0 files'],

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

@@ -73,7 +73,9 @@ Performance metrics [📖 Docs](https://developers.google.com/web/fundamentals/p
 
 <details>
 <summary>🟥 <b>6 warnings</b> (score: 0)</summary>
+
 <h4>Issues</h4><table><tr><th>Severity</th><th>Message</th><th>Source file</th><th>Line(s)</th></tr><tr><td>⚠️ <i>warning</i></td><td>'onCreate' is missing in props validation</td><td><code>src/components/CreateTodo.jsx</code></td><td>15</td></tr><tr><td>⚠️ <i>warning</i></td><td>'setQuery' is missing in props validation</td><td><code>src/components/TodoFilter.jsx</code></td><td>10</td></tr><tr><td>⚠️ <i>warning</i></td><td>'setHideComplete' is missing in props validation</td><td><code>src/components/TodoFilter.jsx</code></td><td>18</td></tr><tr><td>⚠️ <i>warning</i></td><td>'todos' is missing in props validation</td><td><code>src/components/TodoList.jsx</code></td><td>6</td></tr><tr><td>⚠️ <i>warning</i></td><td>'todos.map' is missing in props validation</td><td><code>src/components/TodoList.jsx</code></td><td>6</td></tr><tr><td>⚠️ <i>warning</i></td><td>'onEdit' is missing in props validation</td><td><code>src/components/TodoList.jsx</code></td><td>13</td></tr></table>
+
 </details>
 
 
@@ -83,7 +85,9 @@ ESLint rule **prop-types**, from _react_ plugin. [📖 Docs](https://github.com/
 
 <details>
 <summary>🟥 <b>3 warnings</b> (score: 0)</summary>
+
 <h4>Issues</h4><table><tr><th>Severity</th><th>Message</th><th>Source file</th><th>Line(s)</th></tr><tr><td>⚠️ <i>warning</i></td><td>'data' is already declared in the upper scope on line 5 column 10.</td><td><code>src/hooks/useTodos.js</code></td><td>11</td></tr><tr><td>⚠️ <i>warning</i></td><td>'data' is already declared in the upper scope on line 5 column 10.</td><td><code>src/hooks/useTodos.js</code></td><td>29</td></tr><tr><td>⚠️ <i>warning</i></td><td>'data' is already declared in the upper scope on line 5 column 10.</td><td><code>src/hooks/useTodos.js</code></td><td>41</td></tr></table>
+
 </details>
 
 
@@ -93,7 +97,9 @@ ESLint rule **no-shadow**. [📖 Docs](https://eslint.org/docs/latest/rules/no-s
 
 <details>
 <summary>🟥 <b>3 warnings</b> (score: 0)</summary>
+
 <h4>Issues</h4><table><tr><th>Severity</th><th>Message</th><th>Source file</th><th>Line(s)</th></tr><tr><td>⚠️ <i>warning</i></td><td>Expected property shorthand.</td><td><code>src/hooks/useTodos.js</code></td><td>19</td></tr><tr><td>⚠️ <i>warning</i></td><td>Expected property shorthand.</td><td><code>src/hooks/useTodos.js</code></td><td>32</td></tr><tr><td>⚠️ <i>warning</i></td><td>Expected property shorthand.</td><td><code>src/hooks/useTodos.js</code></td><td>33</td></tr></table>
+
 </details>
 
 
@@ -103,7 +109,9 @@ ESLint rule **object-shorthand**. [📖 Docs](https://eslint.org/docs/latest/rul
 
 <details>
 <summary>🟥 <b>2 warnings</b> (score: 0)</summary>
+
 <h4>Issues</h4><table><tr><th>Severity</th><th>Message</th><th>Source file</th><th>Line(s)</th></tr><tr><td>⚠️ <i>warning</i></td><td>React Hook useCallback does nothing when called with only one argument. Did you forget to pass an array of dependencies?</td><td><code>src/hooks/useTodos.js</code></td><td>17</td></tr><tr><td>⚠️ <i>warning</i></td><td>React Hook useCallback does nothing when called with only one argument. Did you forget to pass an array of dependencies?</td><td><code>src/hooks/useTodos.js</code></td><td>40</td></tr></table>
+
 </details>
 
 
@@ -113,7 +121,9 @@ ESLint rule **exhaustive-deps**, from _react-hooks_ plugin. [📖 Docs](https://
 
 <details>
 <summary>🟥 <b>1 warning</b> (score: 0)</summary>
+
 <h4>Issues</h4><table><tr><th>Severity</th><th>Message</th><th>Source file</th><th>Line(s)</th></tr><tr><td>⚠️ <i>warning</i></td><td>Missing "key" prop for element in iterator</td><td><code>src/components/TodoList.jsx</code></td><td>7-28</td></tr></table>
+
 </details>
 
 
@@ -123,7 +133,9 @@ ESLint rule **jsx-key**, from _react_ plugin. [📖 Docs](https://github.com/jsx
 
 <details>
 <summary>🟥 <b>1 warning</b> (score: 0)</summary>
+
 <h4>Issues</h4><table><tr><th>Severity</th><th>Message</th><th>Source file</th><th>Line(s)</th></tr><tr><td>⚠️ <i>warning</i></td><td>'loading' is assigned a value but never used.</td><td><code>src/App.jsx</code></td><td>8</td></tr></table>
+
 </details>
 
 
@@ -133,7 +145,9 @@ ESLint rule **no-unused-vars**. [📖 Docs](https://eslint.org/docs/latest/rules
 
 <details>
 <summary>🟥 <b>1 warning</b> (score: 0)</summary>
+
 <h4>Issues</h4><table><tr><th>Severity</th><th>Message</th><th>Source file</th><th>Line(s)</th></tr><tr><td>⚠️ <i>warning</i></td><td>Arrow function has too many lines (71). Maximum allowed is 50.</td><td><code>src/hooks/useTodos.js</code></td><td>3-73</td></tr></table>
+
 </details>
 
 
@@ -143,7 +157,9 @@ ESLint rule **max-lines-per-function**. [📖 Docs](https://eslint.org/docs/late
 
 <details>
 <summary>🟥 <b>1 warning</b> (score: 0)</summary>
+
 <h4>Issues</h4><table><tr><th>Severity</th><th>Message</th><th>Source file</th><th>Line(s)</th></tr><tr><td>⚠️ <i>warning</i></td><td>'root' is never reassigned. Use 'const' instead.</td><td><code>src/index.jsx</code></td><td>5</td></tr></table>
+
 </details>
 
 
@@ -153,7 +169,9 @@ ESLint rule **prefer-const**. [📖 Docs](https://eslint.org/docs/latest/rules/p
 
 <details>
 <summary>🟥 <b>1 warning</b> (score: 0)</summary>
+
 <h4>Issues</h4><table><tr><th>Severity</th><th>Message</th><th>Source file</th><th>Line(s)</th></tr><tr><td>⚠️ <i>warning</i></td><td>Unexpected block statement surrounding arrow body; move the returned value immediately after the \`=>\`.</td><td><code>src/components/TodoFilter.jsx</code></td><td>3-25</td></tr></table>
+
 </details>
 
 
@@ -163,7 +181,9 @@ ESLint rule **arrow-body-style**. [📖 Docs](https://eslint.org/docs/latest/rul
 
 <details>
 <summary>🟥 <b>1 warning</b> (score: 0)</summary>
+
 <h4>Issues</h4><table><tr><th>Severity</th><th>Message</th><th>Source file</th><th>Line(s)</th></tr><tr><td>⚠️ <i>warning</i></td><td>Expected '===' and instead saw '=='.</td><td><code>src/hooks/useTodos.js</code></td><td>41</td></tr></table>
+
 </details>
 
 
@@ -450,7 +470,9 @@ exports[`generateMdReport > should not contain category sections when categories
 
 <details>
 <summary>🟥 <b>6 warnings</b> (score: 0)</summary>
+
 <h4>Issues</h4><table><tr><th>Severity</th><th>Message</th><th>Source file</th><th>Line(s)</th></tr><tr><td>⚠️ <i>warning</i></td><td>'onCreate' is missing in props validation</td><td><code>src/components/CreateTodo.jsx</code></td><td>15</td></tr><tr><td>⚠️ <i>warning</i></td><td>'setQuery' is missing in props validation</td><td><code>src/components/TodoFilter.jsx</code></td><td>10</td></tr><tr><td>⚠️ <i>warning</i></td><td>'setHideComplete' is missing in props validation</td><td><code>src/components/TodoFilter.jsx</code></td><td>18</td></tr><tr><td>⚠️ <i>warning</i></td><td>'todos' is missing in props validation</td><td><code>src/components/TodoList.jsx</code></td><td>6</td></tr><tr><td>⚠️ <i>warning</i></td><td>'todos.map' is missing in props validation</td><td><code>src/components/TodoList.jsx</code></td><td>6</td></tr><tr><td>⚠️ <i>warning</i></td><td>'onEdit' is missing in props validation</td><td><code>src/components/TodoList.jsx</code></td><td>13</td></tr></table>
+
 </details>
 
 
@@ -460,7 +482,9 @@ ESLint rule **prop-types**, from _react_ plugin. [📖 Docs](https://github.com/
 
 <details>
 <summary>🟥 <b>3 warnings</b> (score: 0)</summary>
+
 <h4>Issues</h4><table><tr><th>Severity</th><th>Message</th><th>Source file</th><th>Line(s)</th></tr><tr><td>⚠️ <i>warning</i></td><td>'data' is already declared in the upper scope on line 5 column 10.</td><td><code>src/hooks/useTodos.js</code></td><td>11</td></tr><tr><td>⚠️ <i>warning</i></td><td>'data' is already declared in the upper scope on line 5 column 10.</td><td><code>src/hooks/useTodos.js</code></td><td>29</td></tr><tr><td>⚠️ <i>warning</i></td><td>'data' is already declared in the upper scope on line 5 column 10.</td><td><code>src/hooks/useTodos.js</code></td><td>41</td></tr></table>
+
 </details>
 
 
@@ -470,7 +494,9 @@ ESLint rule **no-shadow**. [📖 Docs](https://eslint.org/docs/latest/rules/no-s
 
 <details>
 <summary>🟥 <b>3 warnings</b> (score: 0)</summary>
+
 <h4>Issues</h4><table><tr><th>Severity</th><th>Message</th><th>Source file</th><th>Line(s)</th></tr><tr><td>⚠️ <i>warning</i></td><td>Expected property shorthand.</td><td><code>src/hooks/useTodos.js</code></td><td>19</td></tr><tr><td>⚠️ <i>warning</i></td><td>Expected property shorthand.</td><td><code>src/hooks/useTodos.js</code></td><td>32</td></tr><tr><td>⚠️ <i>warning</i></td><td>Expected property shorthand.</td><td><code>src/hooks/useTodos.js</code></td><td>33</td></tr></table>
+
 </details>
 
 
@@ -480,7 +506,9 @@ ESLint rule **object-shorthand**. [📖 Docs](https://eslint.org/docs/latest/rul
 
 <details>
 <summary>🟥 <b>2 warnings</b> (score: 0)</summary>
+
 <h4>Issues</h4><table><tr><th>Severity</th><th>Message</th><th>Source file</th><th>Line(s)</th></tr><tr><td>⚠️ <i>warning</i></td><td>React Hook useCallback does nothing when called with only one argument. Did you forget to pass an array of dependencies?</td><td><code>src/hooks/useTodos.js</code></td><td>17</td></tr><tr><td>⚠️ <i>warning</i></td><td>React Hook useCallback does nothing when called with only one argument. Did you forget to pass an array of dependencies?</td><td><code>src/hooks/useTodos.js</code></td><td>40</td></tr></table>
+
 </details>
 
 
@@ -490,7 +518,9 @@ ESLint rule **exhaustive-deps**, from _react-hooks_ plugin. [📖 Docs](https://
 
 <details>
 <summary>🟥 <b>1 warning</b> (score: 0)</summary>
+
 <h4>Issues</h4><table><tr><th>Severity</th><th>Message</th><th>Source file</th><th>Line(s)</th></tr><tr><td>⚠️ <i>warning</i></td><td>Missing "key" prop for element in iterator</td><td><code>src/components/TodoList.jsx</code></td><td>7-28</td></tr></table>
+
 </details>
 
 
@@ -500,7 +530,9 @@ ESLint rule **jsx-key**, from _react_ plugin. [📖 Docs](https://github.com/jsx
 
 <details>
 <summary>🟥 <b>1 warning</b> (score: 0)</summary>
+
 <h4>Issues</h4><table><tr><th>Severity</th><th>Message</th><th>Source file</th><th>Line(s)</th></tr><tr><td>⚠️ <i>warning</i></td><td>'loading' is assigned a value but never used.</td><td><code>src/App.jsx</code></td><td>8</td></tr></table>
+
 </details>
 
 
@@ -510,7 +542,9 @@ ESLint rule **no-unused-vars**. [📖 Docs](https://eslint.org/docs/latest/rules
 
 <details>
 <summary>🟥 <b>1 warning</b> (score: 0)</summary>
+
 <h4>Issues</h4><table><tr><th>Severity</th><th>Message</th><th>Source file</th><th>Line(s)</th></tr><tr><td>⚠️ <i>warning</i></td><td>Arrow function has too many lines (71). Maximum allowed is 50.</td><td><code>src/hooks/useTodos.js</code></td><td>3-73</td></tr></table>
+
 </details>
 
 
@@ -520,7 +554,9 @@ ESLint rule **max-lines-per-function**. [📖 Docs](https://eslint.org/docs/late
 
 <details>
 <summary>🟥 <b>1 warning</b> (score: 0)</summary>
+
 <h4>Issues</h4><table><tr><th>Severity</th><th>Message</th><th>Source file</th><th>Line(s)</th></tr><tr><td>⚠️ <i>warning</i></td><td>'root' is never reassigned. Use 'const' instead.</td><td><code>src/index.jsx</code></td><td>5</td></tr></table>
+
 </details>
 
 
@@ -530,7 +566,9 @@ ESLint rule **prefer-const**. [📖 Docs](https://eslint.org/docs/latest/rules/p
 
 <details>
 <summary>🟥 <b>1 warning</b> (score: 0)</summary>
+
 <h4>Issues</h4><table><tr><th>Severity</th><th>Message</th><th>Source file</th><th>Line(s)</th></tr><tr><td>⚠️ <i>warning</i></td><td>Unexpected block statement surrounding arrow body; move the returned value immediately after the \`=>\`.</td><td><code>src/components/TodoFilter.jsx</code></td><td>3-25</td></tr></table>
+
 </details>
 
 
@@ -540,7 +578,9 @@ ESLint rule **arrow-body-style**. [📖 Docs](https://eslint.org/docs/latest/rul
 
 <details>
 <summary>🟥 <b>1 warning</b> (score: 0)</summary>
+
 <h4>Issues</h4><table><tr><th>Severity</th><th>Message</th><th>Source file</th><th>Line(s)</th></tr><tr><td>⚠️ <i>warning</i></td><td>Expected '===' and instead saw '=='.</td><td><code>src/hooks/useTodos.js</code></td><td>41</td></tr></table>
+
 </details>
 
 

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

@@ -0,0 +1,53 @@
+// Vitest Snapshot v1, https://vitest.dev/guide/snapshot.html
+
+exports[`generateMdReportsDiff > should format Markdown comment summarizing changes between reports 1`] = `
+"# Code PushUp
+
+🙌 Code PushUp report has **improved** – 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|🟢 **95**|🟡 68|<span style="color: green">▲ **+27**</span>|
+|Code style|🟢 **100**|🟡 54|<span style="color: green">▲ **+46**</span>|
+
+## 🎗️ Groups
+
+<details>
+<summary>👍 <strong>2</strong> groups improved</summary>
+
+|🔌 Plugin|🎗️ Group|⭐ Current score|⭐ Previous score|🗠 Score change|
+|:--|:--|:--:|:--:|:--:|
+|ESLint|Maximum lines limitation|🟢 **100**|🟡 50|<span style="color: green">▲ **+50**</span>|
+|Lighthouse|Performance|🟢 **94**|🟢 92|<span style="color: green">▲ **+2**</span>|
+
+</details>
+
+
+## 🛡️ Audits
+
+<details>
+<summary>👍 <strong>12</strong> audits improved</summary>
+
+|🔌 Plugin|🛡️ Audit|📏 Current value|📏 Previous value|🗠 Value change|
+|:--|:--|:--:|:--:|:--:|
+|ESLint|Disallow unused variables|🟩 **passed**|🟥 1 warning|<span style="color: green">▼ **-100%**</span>|
+|ESLint|Require braces around arrow function bodies|🟩 **passed**|🟥 1 warning|<span style="color: green">▼ **-100%**</span>|
+|ESLint|Require the use of \`===\` and \`!==\`|🟩 **passed**|🟥 1 warning|<span style="color: green">▼ **-100%**</span>|
+|ESLint|Enforce a maximum number of lines of code in a function|🟩 **passed**|🟥 1 warning|<span style="color: green">▼ **-100%**</span>|
+|ESLint|Disallow variable declarations from shadowing variables declared in the outer scope|🟩 **passed**|🟥 3 warnings|<span style="color: green">▼ **-100%**</span>|
+|ESLint|Require or disallow method and property shorthand syntax for object literals|🟩 **passed**|🟥 3 warnings|<span style="color: green">▼ **-100%**</span>|
+|ESLint|Require \`const\` declarations for variables that are never reassigned after declared|🟩 **passed**|🟥 1 warning|<span style="color: green">▼ **-100%**</span>|
+|ESLint|Disallow missing \`key\` props in iterators/collection literals|🟩 **passed**|🟥 1 warning|<span style="color: green">▼ **-100%**</span>|
+|ESLint|verifies the list of dependencies for Hooks like useEffect and similar|🟩 **passed**|🟥 2 warnings|<span style="color: green">▼ **-100%**</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>|
+
+Other 40 audits are unchanged.
+
+</details>
+"
+`;

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

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