fix(utils): sort groups and category refs correctly in report

Author: Tlacenka

packages/utils/perf/score-report/optimized0.ts

@@ -4,8 +4,7 @@ import {
   GroupRef,
   Report,
 } from '@code-pushup/models';
-import { ScoredReport } from '../../src';
-import { EnrichedScoredGroup } from '../../src/lib/reports/scoring';
+import { EnrichedScoredGroup, ScoredReport } from '../../src/lib/reports/utils';
 
 function groupRefToScore(audits: AuditReport[]) {
   return (ref: GroupRef) => {

packages/utils/perf/score-report/optimized1.ts

@@ -1,11 +1,11 @@
 /* eslint-disable @typescript-eslint/no-unsafe-member-access, @typescript-eslint/no-unsafe-return, @typescript-eslint/no-unsafe-assignment */
 // Note: The plugins of the ScoredReport are not structured correctly, hence the ESLint disables.
 import { Report } from '@code-pushup/models';
-import { ScoredReport } from '../../src';
+import { GroupRefInvalidError } from '../../src/lib/reports/scoring';
 import {
-  GroupRefInvalidError,
   ScoredCategoryConfig,
-} from '../../src/lib/reports/scoring';
+  ScoredReport,
+} from '../../src/lib/reports/utils';
 
 export function calculateScore<T extends { weight: number }>(
   refs: T[],

packages/utils/perf/score-report/optimized2.ts

@@ -1,11 +1,11 @@
 /* eslint-disable @typescript-eslint/no-unsafe-member-access, @typescript-eslint/no-unsafe-return, @typescript-eslint/no-unsafe-assignment */
 // Note: The plugins of the ScoredReport are not structured correctly, hence the ESLint disables.
 import { CategoryRef, GroupRef, Report } from '@code-pushup/models';
-import { ScoredReport } from '../../src';
+import { GroupRefInvalidError } from '../../src/lib/reports/scoring';
 import {
-  GroupRefInvalidError,
   ScoredCategoryConfig,
-} from '../../src/lib/reports/scoring';
+  ScoredReport,
+} from '../../src/lib/reports/utils';
 
 export function calculateScore<T extends { weight: number }>(
   refs: T[],

packages/utils/perf/score-report/optimized3.ts

@@ -7,11 +7,11 @@ import {
   Report,
 } from '@code-pushup/models';
 import { ScoredReport } from '../../src';
+import { GroupRefInvalidError } from '../../src/lib/reports/scoring';
 import {
   EnrichedScoredGroup,
-  GroupRefInvalidError,
   ScoredCategoryConfig,
-} from '../../src/lib/reports/scoring';
+} from '../../src/lib/reports/utils';
 
 export function calculateScore<T extends { weight: number }>(
   refs: T[],

packages/utils/src/index.ts

@@ -55,12 +55,13 @@ export { ProgressBar, getProgressBar } from './lib/progress';
 export { TERMINAL_WIDTH } from './lib/reports/constants';
 export { generateMdReport } from './lib/reports/generate-md-report';
 export { generateStdoutSummary } from './lib/reports/generate-stdout-summary';
-export { ScoredReport, scoreReport } from './lib/reports/scoring';
+export { scoreReport } from './lib/reports/scoring';
 export { sortReport } from './lib/reports/sorting';
 export {
   CODE_PUSHUP_DOMAIN,
   FOOTER_PREFIX,
   README_LINK,
+  ScoredReport,
   calcDuration,
   compareIssueSeverity,
   loadReport,

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

@@ -5,7 +5,7 @@ exports[`generateMdReport > should contain all sections when using the fixture r
 
 |🏷 Category|⭐ Score|🛡 Audits|
 |:--|:--:|:--:|
-|[Performance](#performance)|🟢 **92**|6|
+|[Performance](#performance)|🟡 **74**|8|
 |[Bug prevention](#bug-prevention)|🟡 **68**|16|
 |[Code style](#code-style)|🟡 **54**|13|
 
@@ -15,14 +15,18 @@ exports[`generateMdReport > should contain all sections when using the fixture r
 
 Performance metrics [📖 Docs](https://developers.google.com/web/fundamentals/performance)
 
-🟢 Score:  **92**
+🟡 Score:  **74**
 - 🟢 Performance (_Lighthouse_)
   - 🟩 [Total Blocking Time](#total-blocking-time-lighthouse) - **0 ms**
   - 🟨 [Largest Contentful Paint](#largest-contentful-paint-lighthouse) - **1.5 s**
   - 🟩 [Cumulative Layout Shift](#cumulative-layout-shift-lighthouse) - **0**
   - 🟨 [First Contentful Paint](#first-contentful-paint-lighthouse) - **1.2 s**
   - 🟩 [Speed Index](#speed-index-lighthouse) - **1.2 s**
 
+- 🔴 ESLint performance rules (_ESLint_)
+  - 🟥 [Disallow unused variables](#disallow-unused-variables-eslint) - **1 warning**
+  - 🟥 [Enforce a maximum number of lines of code in a function](#enforce-a-maximum-number-of-lines-of-code-in-a-function-eslint) - **1 warning**
+
 - 🟥 [Disallow missing \`key\` props in iterators/collection literals](#disallow-missing-key-props-in-iterators-collection-literals-eslint) (_ESLint_) - **1 warning**
 
 ### Bug prevention

packages/utils/src/lib/reports/__snapshots__/generate-stdout-summary.integration.test.ts.snap

@@ -78,7 +78,7 @@ Categories
 ┌─────────────────────────────────────────────────────────────┬───────┬────────┐
 │ Category                                                    │ Score │ Audits │
 ├─────────────────────────────────────────────────────────────┼───────┼────────┤
-│ Performance                                                 │    92 │      6 │
+│ Performance                                                 │    74 │      8 │
 ├─────────────────────────────────────────────────────────────┼───────┼────────┤
 │ Bug prevention                                              │    68 │     16 │
 ├─────────────────────────────────────────────────────────────┼───────┼────────┤

packages/utils/src/lib/reports/__snapshots__/sorting.integration.test.ts.snap

@@ -42,6 +42,12 @@ exports[`sortReport > should sort the audits and audit groups in categories, plu
           "type": "audit",
           "weight": 1,
         },
+        {
+          "plugin": "eslint",
+          "slug": "typescript-eslint-extra",
+          "type": "group",
+          "weight": 0,
+        },
         {
           "plugin": "eslint",
           "slug": "eslint-cypress",
@@ -207,6 +213,18 @@ exports[`sortReport > should sort the audits and audit groups in categories, plu
           "slug": "typescript-eslint",
           "title": "TypeScript ESLint",
         },
+        {
+          "plugin": "eslint",
+          "refs": [
+            {
+              "slug": "typescript-eslint-experimental",
+              "weight": 1,
+            },
+          ],
+          "score": 0,
+          "slug": "typescript-eslint-extra",
+          "title": "TypeScript ESLint Extra",
+        },
       ],
       "icon": "eslint",
       "slug": "eslint",

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

@@ -15,12 +15,10 @@ import {
 } from './md';
 import {
   EnrichedScoredGroupWithAudits,
-  ScoredReport,
-  WeighedAuditReport,
-} from './scoring';
-import {
   FOOTER_PREFIX,
   README_LINK,
+  ScoredReport,
+  WeighedAuditReport,
   countCategoryAudits,
   detailsTableHeaders,
   formatReportScore,
@@ -97,7 +95,7 @@ function reportToCategoriesSection(report: ScoredReport): string {
     const categoryDocs = getDocsAndDescription(category);
     const categoryMDItems = category.refs.reduce((refAcc, ref) => {
       if (ref.type === 'group') {
-        const group = getGroupWithAudits(ref.slug, ref.plugin, plugins);
+        const group = getGroupWithAudits(ref, plugins);
         const mdGroupItem = groupItemToCategorySection(group, plugins);
         return refAcc + mdGroupItem + NEW_LINE;
       } else {

packages/utils/src/lib/reports/generate-stdout-summary.ts

@@ -2,10 +2,10 @@ import cliui from '@isaacs/cliui';
 import chalk from 'chalk';
 import CliTable3 from 'cli-table3';
 import { NEW_LINE, SCORE_COLOR_RANGE, TERMINAL_WIDTH } from './constants';
-import { ScoredReport } from './scoring';
 import {
   CODE_PUSHUP_DOMAIN,
   FOOTER_PREFIX,
+  ScoredReport,
   countCategoryAudits,
   formatReportScore,
   reportHeadlineText,

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

@@ -1,32 +1,11 @@
 import {
   AuditReport,
-  CategoryConfig,
   CategoryRef,
-  Group,
   GroupRef,
-  PluginReport,
   Report,
 } from '@code-pushup/models';
 import { deepClone } from '../transform';
-
-export type WeighedAuditReport = AuditReport & { weight: number };
-export type EnrichedScoredGroupWithAudits = EnrichedScoredGroup & {
-  audits: AuditReport[];
-};
-export type ScoredCategoryConfig = CategoryConfig & { score: number };
-
-export type EnrichedScoredGroup = Group & {
-  plugin: string;
-  score: number;
-};
-
-export type ScoredReport = Omit<Report, 'plugins' | 'categories'> & {
-  plugins: (Omit<PluginReport, 'audits' | 'groups'> & {
-    audits: AuditReport[];
-    groups: EnrichedScoredGroup[];
-  })[];
-  categories: ScoredCategoryConfig[];
-};
+import { EnrichedScoredGroup, ScoredReport } from './utils';
 
 export class GroupRefInvalidError extends Error {
   constructor(auditSlug: string, pluginSlug: string) {

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

@@ -1,13 +1,11 @@
 import { AuditReport, CategoryRef, PluginReport } from '@code-pushup/models';
 import {
   EnrichedScoredGroup,
-  EnrichedScoredGroupWithAudits,
   ScoredReport,
   WeighedAuditReport,
-} from './scoring';
-import {
+  WeighedScoredGroup,
   compareAudits,
-  compareCategoryAudits,
+  compareCategoryAuditsAndGroups,
   compareIssues,
   getAuditByRef,
   getGroupWithAudits,
@@ -20,34 +18,31 @@ export function sortReport(report: ScoredReport): ScoredReport {
       (
         acc: {
           audits: WeighedAuditReport[];
-          groups: EnrichedScoredGroupWithAudits[];
+          groups: WeighedScoredGroup[];
         },
         ref: CategoryRef,
       ) => ({
         ...acc,
         ...(ref.type === 'group'
           ? {
-              groups: [
-                ...acc.groups,
-                getGroupWithAudits(ref.slug, ref.plugin, plugins),
-              ],
+              groups: [...acc.groups, getGroupWithAudits(ref, plugins)],
             }
           : {
               audits: [...acc.audits, getAuditByRef(ref, plugins)],
             }),
       }),
       { groups: [], audits: [] },
     );
-    const sortedAuditsAndGroups = [
-      ...groups,
-      ...[...audits].sort(compareCategoryAudits),
-    ];
+    const sortedAuditsAndGroups = [...audits, ...groups].sort(
+      compareCategoryAuditsAndGroups,
+    );
+
     const sortedRefs = [...category.refs].sort((a, b) => {
       const aIndex = sortedAuditsAndGroups.findIndex(
-        ref => ref.slug === a.slug,
+        ref => ref.slug === a.slug && ref.plugin === a.plugin,
       );
       const bIndex = sortedAuditsAndGroups.findIndex(
-        ref => ref.slug === b.slug,
+        ref => ref.slug === b.slug && ref.plugin === b.plugin,
       );
       return aIndex - bIndex;
     });

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

@@ -1,12 +1,14 @@
 import { join } from 'node:path';
 import {
   AuditReport,
+  CategoryConfig,
   CategoryRef,
   IssueSeverity as CliIssueSeverity,
   Format,
   Group,
   Issue,
   PersistConfig,
+  PluginReport,
   Report,
   reportSchema,
 } from '@code-pushup/models';
@@ -16,11 +18,32 @@ import {
   readTextFile,
 } from '../file-system';
 import { SCORE_COLOR_RANGE } from './constants';
-import {
-  EnrichedScoredGroupWithAudits,
-  ScoredReport,
-  WeighedAuditReport,
-} from './scoring';
+
+export type WeighedScoredGroup = EnrichedScoredGroupWithAudits & {
+  weight: number;
+};
+
+export type WeighedAuditReport = AuditReport & {
+  weight: number;
+  plugin: string;
+};
+export type EnrichedScoredGroupWithAudits = EnrichedScoredGroup & {
+  audits: AuditReport[];
+};
+export type ScoredCategoryConfig = CategoryConfig & { score: number };
+
+export type EnrichedScoredGroup = Group & {
+  plugin: string;
+  score: number;
+};
+
+export type ScoredReport = Omit<Report, 'plugins' | 'categories'> & {
+  plugins: (Omit<PluginReport, 'audits' | 'groups'> & {
+    audits: AuditReport[];
+    groups: EnrichedScoredGroup[];
+  })[];
+  categories: ScoredCategoryConfig[];
+};
 
 export const FOOTER_PREFIX = 'Made with ❤ by'; // replace ❤️ with ❤, because of ❤️ has output issues
 export const CODE_PUSHUP_DOMAIN = 'code-pushup.dev';
@@ -152,44 +175,46 @@ export function getAuditByRef(
   return {
     ...audit,
     weight,
+    plugin,
   };
 }
 
 export function getGroupWithAudits(
-  refSlug: string,
-  refPlugin: string,
+  ref: CategoryRef,
   plugins: ScoredReport['plugins'],
-): EnrichedScoredGroupWithAudits {
-  const plugin = plugins.find(({ slug }) => slug === refPlugin);
+): WeighedScoredGroup {
+  const plugin = plugins.find(({ slug }) => slug === ref.plugin);
   if (!plugin) {
-    throwIsNotPresentError(`Plugin ${refPlugin}`, 'report');
+    throwIsNotPresentError(`Plugin ${ref.plugin}`, 'report');
   }
-  const groupWithAudits = plugin.groups?.find(({ slug }) => slug === refSlug);
+  const groupWithAudits = plugin.groups?.find(({ slug }) => slug === ref.slug);
 
   if (!groupWithAudits) {
-    throwIsNotPresentError(`Group ${refSlug}`, plugin.slug);
+    throwIsNotPresentError(`Group ${ref.slug}`, plugin.slug);
   }
   const groupAudits = groupWithAudits.refs.reduce<WeighedAuditReport[]>(
-    (acc: WeighedAuditReport[], ref) => {
+    (acc: WeighedAuditReport[], groupRef) => {
       const audit = getAuditByRef(
-        { ...ref, plugin: refPlugin, type: 'audit' },
+        { ...groupRef, plugin: ref.plugin, type: 'audit' },
         plugins,
       );
       return [...acc, audit];
     },
     [],
   );
-  const audits = [...groupAudits].sort(compareCategoryAudits);
+  const audits = [...groupAudits].sort(compareCategoryAuditsAndGroups);
 
   return {
     ...groupWithAudits,
     audits,
+    weight: ref.weight,
+    plugin: ref.plugin,
   };
 }
 
-export function compareCategoryAudits(
-  a: WeighedAuditReport,
-  b: WeighedAuditReport,
+export function compareCategoryAuditsAndGroups(
+  a: WeighedAuditReport | WeighedScoredGroup,
+  b: WeighedAuditReport | WeighedScoredGroup,
 ): number {
   if (a.weight !== b.weight) {
     return b.weight - a.weight;
@@ -199,7 +224,7 @@ export function compareCategoryAudits(
     return a.score - b.score;
   }
 
-  if (a.value !== b.value) {
+  if ('value' in a && 'value' in b && a.value !== b.value) {
     return b.value - a.value;
   }