refactor(plugin-axe,plugin-eslint,utils): streamline formatting and transformation

Author: hanna-skryl

packages/plugin-axe/src/lib/meta/transform.ts

@@ -79,11 +79,15 @@ function getPresetTags(preset: AxePreset): string[] {
   }
 }
 
-function createGroup(slug: string, title: string, ruleIds: string[]): Group {
+function createGroup(
+  slug: string,
+  title: string,
+  rules: axe.RuleMetadata[],
+): Group {
   return {
     slug,
     title,
-    refs: ruleIds.map(ruleId => ({ slug: ruleId, weight: 1 })),
+    refs: rules.map(({ ruleId }) => ({ slug: ruleId, weight: 1 })),
   };
 }
 
@@ -95,26 +99,26 @@ function createWcagGroups(
   const aaTags =
     version === '2.1' ? WCAG_LEVEL_AA_TAGS_21 : WCAG_LEVEL_AA_TAGS_22;
 
-  const levelARuleIds = rules
-    .filter(({ tags }) => tags.some(tag => aTags.includes(tag)))
-    .map(({ ruleId }) => ruleId);
+  const levelARules = rules.filter(({ tags }) =>
+    tags.some(tag => aTags.includes(tag)),
+  );
 
-  const levelAARuleIds = rules
-    .filter(({ tags }) => tags.some(tag => aaTags.includes(tag)))
-    .map(({ ruleId }) => ruleId);
+  const levelAARules = rules.filter(({ tags }) =>
+    tags.some(tag => aaTags.includes(tag)),
+  );
 
   const versionSlug = version.replace('.', '');
 
   return [
     createGroup(
       `wcag${versionSlug}-level-a`,
       `WCAG ${version} Level A`,
-      levelARuleIds,
+      levelARules,
     ),
     createGroup(
       `wcag${versionSlug}-level-aa`,
       `WCAG ${version} Level AA`,
-      levelAARuleIds,
+      levelAARules,
     ),
   ];
 }
@@ -127,20 +131,15 @@ function createCategoryGroups(rules: axe.RuleMetadata[]): Group[] {
   return Array.from(categoryTags).map(tag => {
     const slug = tag.replace('cat.', '');
     const title = formatCategoryTitle(tag, slug);
-    const ruleIds = rules
-      .filter(({ tags }) => tags.includes(tag))
-      .map(({ ruleId }) => ruleId);
+    const categoryRules = rules.filter(({ tags }) => tags.includes(tag));
 
-    return createGroup(slug, title, ruleIds);
+    return createGroup(slug, title, categoryRules);
   });
 }
 
 function formatCategoryTitle(tag: string, slug: string): string {
   if (CATEGORY_TITLES[tag]) {
     return CATEGORY_TITLES[tag];
   }
-  return slug
-    .split('-')
-    .map(word => capitalize(word))
-    .join(' ');
+  return slug.split('-').map(capitalize).join(' ');
 }

packages/plugin-axe/src/lib/runner/run-axe.ts

@@ -1,7 +1,7 @@
 import AxeBuilder from '@axe-core/playwright';
 import { type Browser, chromium } from 'playwright-core';
 import type { AuditOutputs } from '@code-pushup/models';
-import { logger, stringifyError } from '@code-pushup/utils';
+import { logger, pluralizeToken, stringifyError } from '@code-pushup/utils';
 import { toAuditOutputs } from './transform.js';
 
 let browser: Browser | undefined;
@@ -35,9 +35,11 @@ export async function runAxeForUrl(
 
         const results = await axeBuilder.analyze();
 
-        if (results.incomplete.length > 0) {
+        const incompleteCount = results.incomplete.length;
+
+        if (incompleteCount > 0) {
           logger.warn(
-            `Axe returned ${results.incomplete.length} incomplete result(s) for ${url}`,
+            `Axe returned ${pluralizeToken('incomplete result', incompleteCount)} for ${url}`,
           );
         }
 

packages/plugin-axe/src/lib/runner/runner.ts

@@ -6,6 +6,7 @@ import type {
 import {
   addIndex,
   logger,
+  pluralizeToken,
   shouldExpandForUrls,
   stringifyError,
 } from '@code-pushup/utils';
@@ -16,17 +17,18 @@ export function createRunnerFunction(
   ruleIds: string[],
 ): RunnerFunction {
   return async (_runnerArgs?: RunnerArgs): Promise<AuditOutputs> => {
-    const isSingleUrl = !shouldExpandForUrls(urls.length);
+    const urlCount = urls.length;
+    const isSingleUrl = !shouldExpandForUrls(urlCount);
 
     logger.info(
-      `Running Axe accessibility checks for ${urls.length} URL(s)...`,
+      `Running Axe accessibility checks for ${pluralizeToken('URL', urlCount)}...`,
     );
 
     try {
       const allResults = await urls.reduce(async (prev, url, index) => {
         const acc = await prev;
 
-        logger.debug(`Testing URL ${index + 1}/${urls.length}: ${url}`);
+        logger.debug(`Testing URL ${index + 1}/${urlCount}: ${url}`);
 
         try {
           const auditOutputs = await runAxeForUrl(url, ruleIds);
@@ -45,7 +47,9 @@ export function createRunnerFunction(
         }
       }, Promise.resolve<AuditOutputs>([]));
 
-      if (allResults.length === 0) {
+      const totalAuditCount = allResults.length;
+
+      if (totalAuditCount === 0) {
         throw new Error(
           isSingleUrl
             ? 'Axe did not produce any results.'
@@ -54,7 +58,7 @@ export function createRunnerFunction(
       }
 
       logger.info(
-        `Completed Axe accessibility checks with ${allResults.length} audit(s)`,
+        `Completed Axe accessibility checks with ${pluralizeToken('audit', totalAuditCount)}`,
       );
 
       return allResults;

packages/plugin-axe/src/lib/runner/transform.ts

@@ -7,8 +7,8 @@ import type {
   IssueSeverity,
 } from '@code-pushup/models';
 import {
-  countOccurrences,
-  objectToEntries,
+  formatIssueSeverities,
+  getUrlIdentifier,
   pluralizeToken,
   truncateIssueMessage,
 } from '@code-pushup/utils';
@@ -51,7 +51,7 @@ function toAuditOutput(
 
     return {
       ...base,
-      displayValue: formatSeverityCounts(issues),
+      displayValue: formatIssueSeverities(issues),
       details: { issues },
     };
   }
@@ -62,20 +62,6 @@ function toAuditOutput(
   };
 }
 
-function formatSeverityCounts(issues: Issue[]): string {
-  const severityCounts = countOccurrences(
-    issues.map(({ severity }) => severity),
-  );
-
-  return objectToEntries(severityCounts)
-    .toSorted(([a], [b]) => {
-      const order = { error: 0, warning: 1, info: 2 };
-      return order[a] - order[b];
-    })
-    .map(([severity, count = 0]) => pluralizeToken(severity, count))
-    .join(', ');
-}
-
 function formatSelector(selector: axe.CrossTreeSelector): string {
   if (typeof selector === 'string') {
     return selector;
@@ -88,7 +74,7 @@ function toIssue(node: NodeResult, result: Result, url: string): Issue {
   const rawMessage = node.failureSummary || result.help;
   const cleanedMessage = rawMessage.replace(/\s+/g, ' ').trim();
 
-  const message = `[${selector}] ${cleanedMessage} (${url})`;
+  const message = `[\`${selector}\`] ${cleanedMessage} ([${getUrlIdentifier(url)}](${url}))`;
 
   return {
     message: truncateIssueMessage(message),

packages/plugin-axe/src/lib/runner/transform.unit.test.ts

@@ -91,17 +91,17 @@ describe('toAuditOutputs', () => {
           issues: [
             {
               message:
-                '[img] Fix this: Element does not have an alt attribute (https://example.com)',
+                '[`img`] Fix this: Element does not have an alt attribute ([example.com](https://example.com))',
               severity: 'error',
             },
             {
               message:
-                '[.header > img:nth-child(2)] Fix this: Element does not have an alt attribute (https://example.com)',
+                '[`.header > img:nth-child(2)`] Fix this: Element does not have an alt attribute ([example.com](https://example.com))',
               severity: 'error',
             },
             {
               message:
-                '[#main img] Mock help for image-alt (https://example.com)',
+                '[`#main img`] Mock help for image-alt ([example.com](https://example.com))',
               severity: 'error',
             },
           ],
@@ -140,12 +140,12 @@ describe('toAuditOutputs', () => {
           issues: [
             {
               message:
-                '[button] Fix this: Element has insufficient color contrast (https://example.com)',
+                '[`button`] Fix this: Element has insufficient color contrast ([example.com](https://example.com))',
               severity: 'warning',
             },
             {
               message:
-                '[a] Review: Unable to determine contrast ratio (https://example.com)',
+                '[`a`] Review: Unable to determine contrast ratio ([example.com](https://example.com))',
               severity: 'warning',
             },
           ],
@@ -253,7 +253,7 @@ describe('toAuditOutputs', () => {
           issues: [
             {
               message:
-                '[#app >> my-component >> button] Fix this: Element has insufficient color contrast (https://example.com)',
+                '[`#app >> my-component >> button`] Fix this: Element has insufficient color contrast ([example.com](https://example.com))',
               severity: 'error',
             },
           ],
@@ -287,7 +287,7 @@ describe('toAuditOutputs', () => {
           issues: [
             {
               message:
-                '[<div role="invalid-role">Content</div>] Fix this: Ensure all values assigned to role="" correspond to valid ARIA roles (https://example.com)',
+                '[`<div role=\"invalid-role\">Content</div>`] Fix this: Ensure all values assigned to role=\"\" correspond to valid ARIA roles ([example.com](https://example.com))',
               severity: 'error',
             },
           ],

packages/plugin-eslint/src/lib/runner/transform.ts

@@ -1,10 +1,7 @@
 import type { Linter } from 'eslint';
 import type { AuditOutput, Issue, IssueSeverity } from '@code-pushup/models';
 import {
-  compareIssueSeverity,
-  countOccurrences,
-  objectToEntries,
-  pluralizeToken,
+  formatIssueSeverities,
   truncateIssueMessage,
   ui,
 } from '@code-pushup/utils';
@@ -51,20 +48,12 @@ export function lintResultsToAudits({
 
 function toAudit(slug: string, issues: LintIssue[]): AuditOutput {
   const auditIssues = issues.map(convertIssue);
-  const severityCounts = countOccurrences(
-    auditIssues.map(({ severity }) => severity),
-  );
-  const severities = objectToEntries(severityCounts);
-  const summaryText = severities
-    .toSorted((a, b) => -compareIssueSeverity(a[0], b[0]))
-    .map(([severity, count = 0]) => pluralizeToken(severity, count))
-    .join(', ');
 
   return {
     slug,
     score: Number(auditIssues.length === 0),
     value: auditIssues.length,
-    displayValue: summaryText,
+    displayValue: formatIssueSeverities(auditIssues),
     details: {
       issues: auditIssues,
     },

packages/utils/src/index.ts

@@ -91,6 +91,7 @@ export { Logger, logger } from './lib/logger.js';
 export { link, ui, type CliUi, type Column } from './lib/logging.js';
 export { mergeConfigs } from './lib/merge-configs.js';
 export {
+  getUrlIdentifier,
   normalizeUrlInput,
   type PluginUrlContext,
 } from './lib/plugin-url-config.js';
@@ -123,6 +124,7 @@ export {
   listAuditsFromAllPlugins,
   listGroupsFromAllPlugins,
 } from './lib/reports/flatten-plugins.js';
+export { formatIssueSeverities } from './lib/reports/formatting.js';
 export { generateMdReport } from './lib/reports/generate-md-report.js';
 export {
   generateMdReportsDiff,

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

@@ -7,23 +7,28 @@ import {
 import path from 'node:path';
 import type {
   AuditReport,
+  Issue,
+  IssueSeverity,
   SourceFileLocation,
   Table,
   Tree,
 } from '@code-pushup/models';
+import { pluralizeToken } from '../formatting.js';
 import { formatAsciiTree } from '../text-formats/ascii/tree.js';
 import {
   columnsToStringArray,
   getColumnAlignments,
   rowToStringArray,
 } from '../text-formats/table.js';
+import { countOccurrences, objectToEntries } from '../transform.js';
 import { AUDIT_DETAILS_HEADING_LEVEL } from './constants.js';
 import {
   getEnvironmentType,
   getGitHubBaseUrl,
   getGitLabBaseUrl,
 } from './environment-type.js';
 import type { MdReportOptions } from './types.js';
+import { compareIssueSeverity } from './utils.js';
 
 export function tableSection(
   table: Table,
@@ -173,6 +178,30 @@ export function formatFileLink(
   }
 }
 
+export function formatSeverityCounts(
+  severityCounts: Partial<Record<IssueSeverity, number>>,
+): string {
+  return objectToEntries(severityCounts)
+    .toSorted(([a], [b]) => -compareIssueSeverity(a, b))
+    .map(([severity, count = 0]) => pluralizeToken(severity, count))
+    .join(', ');
+}
+
+/**
+ * Formats issues into a human-readable severity summary string.
+ *
+ * @param issues - Array of issues with severity property
+ * @returns Formatted string like "3 errors, 5 warnings, 2 infos"
+ */
+export function formatIssueSeverities(
+  issues: Pick<Issue, 'severity'>[],
+): string {
+  const severityCounts = countOccurrences(
+    issues.map(({ severity }) => severity),
+  );
+  return formatSeverityCounts(severityCounts);
+}
+
 /**
  * Wraps HTML tags in backticks to prevent markdown parsers
  * from interpreting them as actual HTML.