From 4a8c678f7fc226e61d7216ee5106f5a547498854 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Mat=C4=9Bj=20Chalk?= Date: Fri, 12 Apr 2024 13:54:47 +0200 Subject: [PATCH] feat(utils): format titles as links if docsUrl available in report-diff.md --- .../__snapshots__/compare.report-diff.md | 8 ++-- .../__snapshots__/report-diff-added.md | 2 +- .../__snapshots__/report-diff-improved.md | 28 +++++++------- .../__snapshots__/report-diff-mixed.md | 8 ++-- .../lib/reports/generate-md-reports-diff.ts | 38 +++++++++++++++---- 5 files changed, 53 insertions(+), 31 deletions(-) diff --git a/e2e/cli-e2e/tests/__snapshots__/compare.report-diff.md b/e2e/cli-e2e/tests/__snapshots__/compare.report-diff.md index b994d6c53..4b6d37cc5 100644 --- a/e2e/cli-e2e/tests/__snapshots__/compare.report-diff.md +++ b/e2e/cli-e2e/tests/__snapshots__/compare.report-diff.md @@ -16,7 +16,7 @@ |🔌 Plugin|🗃️ Group|⭐ Current score|⭐ Previous score|🔄 Score change| |:--|:--|:--:|:--:|:--:| -|ESLint|Suggestions|🟡 **71**|🟡 50|![↑ +21.4](https://img.shields.io/badge/%E2%86%91%20%2B21.4-green)| +|[ESLint](https://www.npmjs.com/package/@code-pushup/eslint-plugin)|Suggestions|🟡 **71**|🟡 50|![↑ +21.4](https://img.shields.io/badge/%E2%86%91%20%2B21.4-green)| 3 other groups are unchanged. @@ -30,9 +30,9 @@ |🔌 Plugin|🛡️ Audit|📏 Current value|📏 Previous value|🔄 Value change| |:--|:--|:--:|:--:|:--:| -|ESLint|Require or disallow method and property shorthand syntax for object literals|🟩 **passed**|🟥 3 warnings|![↓ −100 %](https://img.shields.io/badge/%E2%86%93%20%E2%88%92100%E2%80%89%25-green)| -|ESLint|Require braces around arrow function bodies|🟩 **passed**|🟥 1 warning|![↓ −100 %](https://img.shields.io/badge/%E2%86%93%20%E2%88%92100%E2%80%89%25-green)| -|ESLint|Require `const` declarations for variables that are never reassigned after declared|🟩 **passed**|🟥 1 warning|![↓ −100 %](https://img.shields.io/badge/%E2%86%93%20%E2%88%92100%E2%80%89%25-green)| +|[ESLint](https://www.npmjs.com/package/@code-pushup/eslint-plugin)|[Require or disallow method and property shorthand syntax for object literals](https://eslint.org/docs/latest/rules/object-shorthand)|🟩 **passed**|🟥 3 warnings|![↓ −100 %](https://img.shields.io/badge/%E2%86%93%20%E2%88%92100%E2%80%89%25-green)| +|[ESLint](https://www.npmjs.com/package/@code-pushup/eslint-plugin)|[Require braces around arrow function bodies](https://eslint.org/docs/latest/rules/arrow-body-style)|🟩 **passed**|🟥 1 warning|![↓ −100 %](https://img.shields.io/badge/%E2%86%93%20%E2%88%92100%E2%80%89%25-green)| +|[ESLint](https://www.npmjs.com/package/@code-pushup/eslint-plugin)|[Require `const` declarations for variables that are never reassigned after declared](https://eslint.org/docs/latest/rules/prefer-const)|🟩 **passed**|🟥 1 warning|![↓ −100 %](https://img.shields.io/badge/%E2%86%93%20%E2%88%92100%E2%80%89%25-green)| 44 other audits are unchanged. diff --git a/packages/utils/src/lib/reports/__snapshots__/report-diff-added.md b/packages/utils/src/lib/reports/__snapshots__/report-diff-added.md index 52c029a64..e62ca48ee 100644 --- a/packages/utils/src/lib/reports/__snapshots__/report-diff-added.md +++ b/packages/utils/src/lib/reports/__snapshots__/report-diff-added.md @@ -23,7 +23,7 @@ All of 1 group is unchanged. |🔌 Plugin|🛡️ Audit|📏 Current value|📏 Previous value|🔄 Value change| |:--|:--|:--:|:--:|:--:| -|ESLint|Disallow unused variables|🟥 **1 error**|🟩 passed|![↑ +∞ %](https://img.shields.io/badge/%E2%86%91%20%2B%E2%88%9E%E2%80%89%25-red)| +|[ESLint](https://www.npmjs.com/package/@code-pushup/eslint-plugin)|[Disallow unused variables](https://eslint.org/docs/latest/rules/no-unused-vars)|🟥 **1 error**|🟩 passed|![↑ +∞ %](https://img.shields.io/badge/%E2%86%91%20%2B%E2%88%9E%E2%80%89%25-red)| 48 other audits are unchanged. diff --git a/packages/utils/src/lib/reports/__snapshots__/report-diff-improved.md b/packages/utils/src/lib/reports/__snapshots__/report-diff-improved.md index 0fe5400bf..8af182f59 100644 --- a/packages/utils/src/lib/reports/__snapshots__/report-diff-improved.md +++ b/packages/utils/src/lib/reports/__snapshots__/report-diff-improved.md @@ -8,7 +8,7 @@ |:--|:--:|:--:|:--:| |Code style|🟢 **100**|🟡 54|![↑ +46](https://img.shields.io/badge/%E2%86%91%20%2B46-green)| |Bug prevention|🟢 **95**|🟡 68|![↑ +27](https://img.shields.io/badge/%E2%86%91%20%2B27-green)| -|Performance|🟢 **94**|🟢 92|![↑ +2](https://img.shields.io/badge/%E2%86%91%20%2B2-green)| +|[Performance](https://developers.google.com/web/fundamentals/performance)|🟢 **94**|🟢 92|![↑ +2](https://img.shields.io/badge/%E2%86%91%20%2B2-green)| ## 🗃️ Groups @@ -17,7 +17,7 @@ |🔌 Plugin|🗃️ Group|⭐ Current score|⭐ Previous score|🔄 Score change| |:--|:--|:--:|:--:|:--:| -|ESLint|Maximum lines limitation|🟢 **100**|🟡 50|![↑ +50](https://img.shields.io/badge/%E2%86%91%20%2B50-green)| +|[ESLint](https://www.npmjs.com/package/@code-pushup/eslint-plugin)|Maximum lines limitation|🟢 **100**|🟡 50|![↑ +50](https://img.shields.io/badge/%E2%86%91%20%2B50-green)| |Lighthouse|Performance|🟢 **94**|🟢 92|![↑ +2](https://img.shields.io/badge/%E2%86%91%20%2B2-green)| @@ -30,18 +30,18 @@ |🔌 Plugin|🛡️ Audit|📏 Current value|📏 Previous value|🔄 Value change| |:--|:--|:--:|:--:|:--:| -|ESLint|Disallow variable declarations from shadowing variables declared in the outer scope|🟩 **passed**|🟥 3 warnings|![↓ −100 %](https://img.shields.io/badge/%E2%86%93%20%E2%88%92100%E2%80%89%25-green)| -|ESLint|Require or disallow method and property shorthand syntax for object literals|🟩 **passed**|🟥 3 warnings|![↓ −100 %](https://img.shields.io/badge/%E2%86%93%20%E2%88%92100%E2%80%89%25-green)| -|ESLint|verifies the list of dependencies for Hooks like useEffect and similar|🟩 **passed**|🟥 2 warnings|![↓ −100 %](https://img.shields.io/badge/%E2%86%93%20%E2%88%92100%E2%80%89%25-green)| -|ESLint|Disallow unused variables|🟩 **passed**|🟥 1 warning|![↓ −100 %](https://img.shields.io/badge/%E2%86%93%20%E2%88%92100%E2%80%89%25-green)| -|ESLint|Require braces around arrow function bodies|🟩 **passed**|🟥 1 warning|![↓ −100 %](https://img.shields.io/badge/%E2%86%93%20%E2%88%92100%E2%80%89%25-green)| -|ESLint|Require the use of `===` and `!==`|🟩 **passed**|🟥 1 warning|![↓ −100 %](https://img.shields.io/badge/%E2%86%93%20%E2%88%92100%E2%80%89%25-green)| -|ESLint|Enforce a maximum number of lines of code in a function|🟩 **passed**|🟥 1 warning|![↓ −100 %](https://img.shields.io/badge/%E2%86%93%20%E2%88%92100%E2%80%89%25-green)| -|ESLint|Require `const` declarations for variables that are never reassigned after declared|🟩 **passed**|🟥 1 warning|![↓ −100 %](https://img.shields.io/badge/%E2%86%93%20%E2%88%92100%E2%80%89%25-green)| -|ESLint|Disallow missing `key` props in iterators/collection literals|🟩 **passed**|🟥 1 warning|![↓ −100 %](https://img.shields.io/badge/%E2%86%93%20%E2%88%92100%E2%80%89%25-green)| -|Lighthouse|Largest Contentful Paint|🟨 **1.4 s**|🟨 1.5 s|![↓ −8 %](https://img.shields.io/badge/%E2%86%93%20%E2%88%928%E2%80%89%25-green)| -|Lighthouse|First Contentful Paint|🟨 **1.1 s**|🟨 1.2 s|![↓ −4 %](https://img.shields.io/badge/%E2%86%93%20%E2%88%924%E2%80%89%25-green)| -|Lighthouse|Speed Index|🟩 **1.1 s**|🟩 1.2 s|![↓ −4 %](https://img.shields.io/badge/%E2%86%93%20%E2%88%924%E2%80%89%25-green)| +|[ESLint](https://www.npmjs.com/package/@code-pushup/eslint-plugin)|[Disallow variable declarations from shadowing variables declared in the outer scope](https://eslint.org/docs/latest/rules/no-shadow)|🟩 **passed**|🟥 3 warnings|![↓ −100 %](https://img.shields.io/badge/%E2%86%93%20%E2%88%92100%E2%80%89%25-green)| +|[ESLint](https://www.npmjs.com/package/@code-pushup/eslint-plugin)|[Require or disallow method and property shorthand syntax for object literals](https://eslint.org/docs/latest/rules/object-shorthand)|🟩 **passed**|🟥 3 warnings|![↓ −100 %](https://img.shields.io/badge/%E2%86%93%20%E2%88%92100%E2%80%89%25-green)| +|[ESLint](https://www.npmjs.com/package/@code-pushup/eslint-plugin)|[verifies the list of dependencies for Hooks like useEffect and similar](https://github.com/facebook/react/issues/14920)|🟩 **passed**|🟥 2 warnings|![↓ −100 %](https://img.shields.io/badge/%E2%86%93%20%E2%88%92100%E2%80%89%25-green)| +|[ESLint](https://www.npmjs.com/package/@code-pushup/eslint-plugin)|[Disallow unused variables](https://eslint.org/docs/latest/rules/no-unused-vars)|🟩 **passed**|🟥 1 warning|![↓ −100 %](https://img.shields.io/badge/%E2%86%93%20%E2%88%92100%E2%80%89%25-green)| +|[ESLint](https://www.npmjs.com/package/@code-pushup/eslint-plugin)|[Require braces around arrow function bodies](https://eslint.org/docs/latest/rules/arrow-body-style)|🟩 **passed**|🟥 1 warning|![↓ −100 %](https://img.shields.io/badge/%E2%86%93%20%E2%88%92100%E2%80%89%25-green)| +|[ESLint](https://www.npmjs.com/package/@code-pushup/eslint-plugin)|[Require the use of `===` and `!==`](https://eslint.org/docs/latest/rules/eqeqeq)|🟩 **passed**|🟥 1 warning|![↓ −100 %](https://img.shields.io/badge/%E2%86%93%20%E2%88%92100%E2%80%89%25-green)| +|[ESLint](https://www.npmjs.com/package/@code-pushup/eslint-plugin)|[Enforce a maximum number of lines of code in a function](https://eslint.org/docs/latest/rules/max-lines-per-function)|🟩 **passed**|🟥 1 warning|![↓ −100 %](https://img.shields.io/badge/%E2%86%93%20%E2%88%92100%E2%80%89%25-green)| +|[ESLint](https://www.npmjs.com/package/@code-pushup/eslint-plugin)|[Require `const` declarations for variables that are never reassigned after declared](https://eslint.org/docs/latest/rules/prefer-const)|🟩 **passed**|🟥 1 warning|![↓ −100 %](https://img.shields.io/badge/%E2%86%93%20%E2%88%92100%E2%80%89%25-green)| +|[ESLint](https://www.npmjs.com/package/@code-pushup/eslint-plugin)|[Disallow missing `key` props in iterators/collection literals](https://github.com/jsx-eslint/eslint-plugin-react/tree/master/docs/rules/jsx-key.md)|🟩 **passed**|🟥 1 warning|![↓ −100 %](https://img.shields.io/badge/%E2%86%93%20%E2%88%92100%E2%80%89%25-green)| +|Lighthouse|[Largest Contentful Paint](https://developer.chrome.com/docs/lighthouse/performance/largest-contentful-paint/)|🟨 **1.4 s**|🟨 1.5 s|![↓ −8 %](https://img.shields.io/badge/%E2%86%93%20%E2%88%928%E2%80%89%25-green)| +|Lighthouse|[First Contentful Paint](https://developer.chrome.com/docs/lighthouse/performance/first-contentful-paint/)|🟨 **1.1 s**|🟨 1.2 s|![↓ −4 %](https://img.shields.io/badge/%E2%86%93%20%E2%88%924%E2%80%89%25-green)| +|Lighthouse|[Speed Index](https://developer.chrome.com/docs/lighthouse/performance/speed-index/)|🟩 **1.1 s**|🟩 1.2 s|![↓ −4 %](https://img.shields.io/badge/%E2%86%93%20%E2%88%924%E2%80%89%25-green)| 40 other audits are unchanged. diff --git a/packages/utils/src/lib/reports/__snapshots__/report-diff-mixed.md b/packages/utils/src/lib/reports/__snapshots__/report-diff-mixed.md index 3c0b834a4..d4ba7b768 100644 --- a/packages/utils/src/lib/reports/__snapshots__/report-diff-mixed.md +++ b/packages/utils/src/lib/reports/__snapshots__/report-diff-mixed.md @@ -31,10 +31,10 @@ |🔌 Plugin|🛡️ Audit|📏 Current value|📏 Previous value|🔄 Value change| |:--|:--|:--:|:--:|:--:| -|ESLint|Disallow unused variables|🟥 **1 error**|🟩 passed|![↑ +∞ %](https://img.shields.io/badge/%E2%86%91%20%2B%E2%88%9E%E2%80%89%25-red)| -|Lighthouse|Largest Contentful Paint|🟨 **1.4 s**|🟨 1.5 s|![↓ −8 %](https://img.shields.io/badge/%E2%86%93%20%E2%88%928%E2%80%89%25-green)| -|Lighthouse|First Contentful Paint|🟨 **1.1 s**|🟨 1.2 s|![↓ −4 %](https://img.shields.io/badge/%E2%86%93%20%E2%88%924%E2%80%89%25-green)| -|Lighthouse|Speed Index|🟩 **1.1 s**|🟩 1.2 s|![↓ −4 %](https://img.shields.io/badge/%E2%86%93%20%E2%88%924%E2%80%89%25-green)| +|[ESLint](https://www.npmjs.com/package/@code-pushup/eslint-plugin)|[Disallow unused variables](https://eslint.org/docs/latest/rules/no-unused-vars)|🟥 **1 error**|🟩 passed|![↑ +∞ %](https://img.shields.io/badge/%E2%86%91%20%2B%E2%88%9E%E2%80%89%25-red)| +|Lighthouse|[Largest Contentful Paint](https://developer.chrome.com/docs/lighthouse/performance/largest-contentful-paint/)|🟨 **1.4 s**|🟨 1.5 s|![↓ −8 %](https://img.shields.io/badge/%E2%86%93%20%E2%88%928%E2%80%89%25-green)| +|Lighthouse|[First Contentful Paint](https://developer.chrome.com/docs/lighthouse/performance/first-contentful-paint/)|🟨 **1.1 s**|🟨 1.2 s|![↓ −4 %](https://img.shields.io/badge/%E2%86%93%20%E2%88%924%E2%80%89%25-green)| +|Lighthouse|[Speed Index](https://developer.chrome.com/docs/lighthouse/performance/speed-index/)|🟩 **1.1 s**|🟩 1.2 s|![↓ −4 %](https://img.shields.io/badge/%E2%86%93%20%E2%88%924%E2%80%89%25-green)| 48 other audits are unchanged. diff --git a/packages/utils/src/lib/reports/generate-md-reports-diff.ts b/packages/utils/src/lib/reports/generate-md-reports-diff.ts index 6fc53c4d1..72db6c8dc 100644 --- a/packages/utils/src/lib/reports/generate-md-reports-diff.ts +++ b/packages/utils/src/lib/reports/generate-md-reports-diff.ts @@ -1,7 +1,16 @@ import { AuditDiff, ReportsDiff } from '@code-pushup/models'; import { pluralize, pluralizeToken } from '../formatting'; import { objectToEntries } from '../transform'; -import { Alignment, details, h1, h2, paragraphs, style, tableMd } from './md'; +import { + Alignment, + details, + h1, + h2, + link, + paragraphs, + style, + tableMd, +} from './md'; import { DiffOutcome } from './types'; import { colorByScoreDiff, @@ -73,19 +82,19 @@ function formatDiffCategoriesSection(diff: ReportsDiff): string { '🔄 Score change', ], ...sortChanges(changed).map(category => [ - category.title, + formatTitle(category), formatScoreWithColor(category.scores.after), formatScoreWithColor(category.scores.before, { skipBold: true }), formatScoreChange(category.scores.diff), ]), ...added.map(category => [ - category.title, + formatTitle(category), formatScoreWithColor(category.score), style('n/a (\\*)', ['i']), style('n/a (\\*)', ['i']), ]), ...unchanged.map(category => [ - category.title, + formatTitle(category), formatScoreWithColor(category.score), formatScoreWithColor(category.score, { skipBold: true }), '–', @@ -112,8 +121,8 @@ function formatDiffGroupsSection(diff: ReportsDiff): string { '🔄 Score change', ], rows: sortChanges(diff.groups.changed).map(group => [ - group.plugin.title, - group.title, + formatTitle(group.plugin), + formatTitle(group), formatScoreWithColor(group.scores.after), formatScoreWithColor(group.scores.before, { skipBold: true }), formatScoreChange(group.scores.diff), @@ -135,8 +144,8 @@ function formatDiffAuditsSection(diff: ReportsDiff): string { '🔄 Value change', ], rows: sortChanges(diff.audits.changed).map(audit => [ - audit.plugin.title, - audit.title, + formatTitle(audit.plugin), + formatTitle(audit), `${getSquaredScoreMarker(audit.scores.after)} ${style( audit.displayValues.after || audit.values.after.toString(), )}`, @@ -235,6 +244,19 @@ function summarizeDiffOutcomes(outcomes: DiffOutcome[], token: string): string { .join(', '); } +function formatTitle({ + title, + docsUrl, +}: { + title: string; + docsUrl?: string; +}): string { + if (docsUrl) { + return link(docsUrl, title); + } + return title; +} + type Change = { scores: { diff: number }; values?: { diff: number };