refactor(plugin-lighthouse): format audit value (#794)

Author: hanna-skryl

packages/plugin-lighthouse/src/lib/runner/utils.ts

@@ -1,12 +1,18 @@
 import { bold } from 'ansis';
-import type { Config } from 'lighthouse';
+import type { Config, FormattedIcu } from 'lighthouse';
 import log from 'lighthouse-logger';
 import desktopConfig from 'lighthouse/core/config/desktop-config.js';
 import experimentalConfig from 'lighthouse/core/config/experimental-config.js';
 import perfConfig from 'lighthouse/core/config/perf-config.js';
+import Details from 'lighthouse/types/lhr/audit-details';
 import { Result } from 'lighthouse/types/lhr/audit-result';
 import { AuditOutput, AuditOutputs } from '@code-pushup/models';
-import { importModule, readJsonFile, ui } from '@code-pushup/utils';
+import {
+  formatReportScore,
+  importModule,
+  readJsonFile,
+  ui,
+} from '@code-pushup/utils';
 import type { LighthouseOptions } from '../types';
 import { logUnsupportedDetails, toAuditDetails } from './details/details';
 import { LighthouseCliFlags } from './types';
@@ -38,43 +44,58 @@ export class LighthouseAuditParsingError extends Error {
   }
 }
 
+function formatBaseAuditOutput(lhrAudit: Result): AuditOutput {
+  const {
+    id: slug,
+    score,
+    numericValue,
+    displayValue,
+    scoreDisplayMode,
+  } = lhrAudit;
+  return {
+    slug,
+    score: score ?? 1,
+    value: numericValue ?? score ?? 0,
+    displayValue:
+      displayValue ??
+      (scoreDisplayMode === 'binary'
+        ? score === 1
+          ? 'passed'
+          : 'failed'
+        : score
+        ? `${formatReportScore(score)}%`
+        : undefined),
+  };
+}
+
+function processAuditDetails(
+  auditOutput: AuditOutput,
+  details: FormattedIcu<Details>,
+): AuditOutput {
+  try {
+    const parsedDetails = toAuditDetails(details);
+    return Object.keys(parsedDetails).length > 0
+      ? { ...auditOutput, details: parsedDetails }
+      : auditOutput;
+  } catch (error) {
+    throw new LighthouseAuditParsingError(auditOutput.slug, error as Error);
+  }
+}
+
 export function toAuditOutputs(
   lhrAudits: Result[],
   { verbose = false }: { verbose?: boolean } = {},
 ): AuditOutputs {
   if (verbose) {
     logUnsupportedDetails(lhrAudits);
   }
+  return lhrAudits.map(audit => {
+    const auditOutput = formatBaseAuditOutput(audit);
 
-  return lhrAudits.map(
-    ({
-      id: slug,
-      score,
-      numericValue: value = 0, // not every audit has a numericValue
-      details,
-      displayValue,
-    }: Result) => {
-      const auditOutput: AuditOutput = {
-        slug,
-        score: score ?? 1, // score can be null
-        value,
-        displayValue,
-      };
-
-      if (details != null) {
-        try {
-          const parsedDetails = toAuditDetails(details);
-          return Object.keys(parsedDetails).length > 0
-            ? { ...auditOutput, details: parsedDetails }
-            : auditOutput;
-        } catch (error) {
-          throw new LighthouseAuditParsingError(slug, error as Error);
-        }
-      }
-
-      return auditOutput;
-    },
-  );
+    return audit.details == null
+      ? auditOutput
+      : processAuditDetails(auditOutput, audit.details);
+  });
 }
 
 export type LighthouseLogLevel =

packages/plugin-lighthouse/src/lib/runner/utils.unit.test.ts

@@ -128,6 +128,80 @@ describe('toAuditOutputs', () => {
     );
   });
 
+  it('should set displayValue to "passed" when binary score equals 1', () => {
+    expect(
+      toAuditOutputs([
+        {
+          id: 'image-aspect-ratio',
+          title: 'Displays images with correct aspect ratio',
+          description:
+            'Image display dimensions should match natural aspect ratio. [Learn more about image aspect ratio](https://developer.chrome.com/docs/lighthouse/best-practices/image-aspect-ratio/).',
+          score: 1,
+          scoreDisplayMode: 'binary',
+        },
+      ]),
+    ).toStrictEqual(
+      expect.arrayContaining([
+        expect.objectContaining({ displayValue: 'passed' }),
+      ]),
+    );
+  });
+
+  it('should set displayValue to "failed" when binary score equals 0', () => {
+    expect(
+      toAuditOutputs([
+        {
+          id: 'image-aspect-ratio',
+          title: 'Displays images with correct aspect ratio',
+          description:
+            'Image display dimensions should match natural aspect ratio. [Learn more about image aspect ratio](https://developer.chrome.com/docs/lighthouse/best-practices/image-aspect-ratio/).',
+          score: 0,
+          scoreDisplayMode: 'binary',
+        },
+      ]),
+    ).toStrictEqual(
+      expect.arrayContaining([
+        expect.objectContaining({ displayValue: 'failed' }),
+      ]),
+    );
+  });
+
+  it('should set audit value to its score when numericValue is missing', () => {
+    expect(
+      toAuditOutputs([
+        {
+          id: 'image-aspect-ratio',
+          title: 'Displays images with correct aspect ratio',
+          description:
+            'Image display dimensions should match natural aspect ratio. [Learn more about image aspect ratio](https://developer.chrome.com/docs/lighthouse/best-practices/image-aspect-ratio/).',
+          score: 1,
+          scoreDisplayMode: 'binary',
+        },
+      ]),
+    ).toStrictEqual(
+      expect.arrayContaining([expect.objectContaining({ value: 1 })]),
+    );
+  });
+
+  it('should set audit displayValue to formatted score when displayValue is missing and scoreDisplayMode is not binary', () => {
+    expect(
+      toAuditOutputs([
+        {
+          id: 'unsized-images',
+          title: 'Image elements do not have explicit `width` and `height`',
+          description:
+            'Set an explicit width and height on image elements to reduce layout shifts and improve CLS. [Learn how to set image dimensions](https://web.dev/articles/optimize-cls#images_without_dimensions)',
+          score: 0.5,
+          scoreDisplayMode: 'metricSavings',
+        },
+      ]),
+    ).toStrictEqual(
+      expect.arrayContaining([
+        expect.objectContaining({ displayValue: '50%' }),
+      ]),
+    );
+  });
+
   it('should not parse given audit details', () => {
     expect(
       toAuditOutputs(

packages/utils/src/index.ts

@@ -81,7 +81,11 @@ export {
   ScoredGroup,
   ScoredReport,
 } from './lib/reports/types';
-export { calcDuration, compareIssueSeverity } from './lib/reports/utils';
+export {
+  calcDuration,
+  compareIssueSeverity,
+  formatReportScore,
+} from './lib/reports/utils';
 export { isSemver, normalizeSemver, sortSemvers } from './lib/semver';
 export * from './lib/text-formats';
 export {