feat(plugin-lighthouse): add audit details to lighthouse plugin

e2e/cli-e2e/tests/__snapshots__/collect.e2e.test.ts.snap

@@ -1798,6 +1798,7 @@ exports[`CLI collect > should run Lighthouse plugin that runs lighthouse CLI and
         },
       ],
       "icon": "lighthouse",
+      "packageName": "@code-pushup/lighthouse-plugin",
       "slug": "lighthouse",
       "title": "Lighthouse",
     },

packages/core/src/lib/implementation/report-to-gql.ts

@@ -125,10 +125,10 @@ export function tableToGQL(table: Table): PortalTable {
     }),
     rows: table.rows.map((row): PortalTableCell[] =>
       Array.isArray(row)
-        ? row.map(content => ({ content: content.toString() }))
+        ? row.map(content => ({ content: content?.toString() ?? '' }))
         : Object.entries(row).map(([key, content]) => ({
             key,
-            content: content.toString(),
+            content: content?.toString() ?? '',
           })),
     ),
   };

packages/models/src/index.ts

@@ -1,6 +1,6 @@
 export {
   PrimitiveValue,
-  primitiveValueSchema,
+  tableCellValueSchema,
 } from './lib/implementation/schemas';
 
 export { Audit, auditSchema } from './lib/audit';

packages/models/src/lib/implementation/schemas.ts

@@ -7,8 +7,10 @@ import {
 } from './limits';
 import { filenameRegex, slugRegex } from './utils';
 
-export const primitiveValueSchema = z.union([z.string(), z.number()]);
-export type PrimitiveValue = z.infer<typeof primitiveValueSchema>;
+export const tableCellValueSchema = z
+  .union([z.string(), z.number(), z.boolean(), z.null()])
+  .default(null);
+export type PrimitiveValue = z.infer<typeof tableCellValueSchema>;
 
 /**
  * Schema for execution meta date

packages/models/src/lib/implementation/schemas.unit.test.ts

@@ -1,15 +1,15 @@
 import { describe, expect, it } from 'vitest';
-import { PrimitiveValue, primitiveValueSchema, weightSchema } from './schemas';
+import { PrimitiveValue, tableCellValueSchema, weightSchema } from './schemas';
 
 describe('primitiveValueSchema', () => {
   it('should accept a valid union', () => {
     const value: PrimitiveValue = 'test';
-    expect(() => primitiveValueSchema.parse(value)).not.toThrow();
+    expect(() => tableCellValueSchema.parse(value)).not.toThrow();
   });
 
   it('should throw for a invalid union', () => {
     const value = new Date();
-    expect(() => primitiveValueSchema.parse(value)).toThrow('invalid_union');
+    expect(() => tableCellValueSchema.parse(value)).toThrow('invalid_union');
   });
 });
 

packages/models/src/lib/table.ts

@@ -1,5 +1,5 @@
 import { z } from 'zod';
-import { primitiveValueSchema } from './implementation/schemas';
+import { tableCellValueSchema } from './implementation/schemas';
 
 export const tableAlignmentSchema = z.enum(['left', 'center', 'right'], {
   description: 'Cell alignment',
@@ -16,12 +16,12 @@ export const tableColumnObjectSchema = z.object({
 });
 export type TableColumnObject = z.infer<typeof tableColumnObjectSchema>;
 
-export const tableRowObjectSchema = z.record(primitiveValueSchema, {
+export const tableRowObjectSchema = z.record(tableCellValueSchema, {
   description: 'Object row',
 });
 export type TableRowObject = z.infer<typeof tableRowObjectSchema>;
 
-export const tableRowPrimitiveSchema = z.array(primitiveValueSchema, {
+export const tableRowPrimitiveSchema = z.array(tableCellValueSchema, {
   description: 'Primitive row',
 });
 export type TableRowPrimitive = z.infer<typeof tableRowPrimitiveSchema>;

packages/models/src/lib/table.unit.test.ts

@@ -74,8 +74,15 @@ describe('tableRowObjectSchema', () => {
     expect(() => tableRowObjectSchema.parse(row)).not.toThrow();
   });
 
-  it('should throw for a invalid object', () => {
+  it('should default undefined object values to null', () => {
     const row = { prop: undefined };
+    expect(tableRowObjectSchema.parse(row)).toStrictEqual({
+      prop: null,
+    });
+  });
+
+  it('should throw for a invalid object', () => {
+    const row = { prop: [] };
     expect(() => tableRowObjectSchema.parse(row)).toThrow('invalid_union');
   });
 });

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

@@ -1,4 +1,5 @@
 import type { PluginConfig } from '@code-pushup/models';
+import { name, version } from '../../package.json';
 import { LIGHTHOUSE_PLUGIN_SLUG } from './constants';
 import { normalizeFlags } from './normalize-flags';
 import {
@@ -28,6 +29,8 @@ export function lighthousePlugin(
 
   return {
     slug: LIGHTHOUSE_PLUGIN_SLUG,
+    packageName: name,
+    version,
     title: 'Lighthouse',
     icon: 'lighthouse',
     audits,

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

@@ -0,0 +1,83 @@
+import chalk from 'chalk';
+import type { FormattedIcu } from 'lighthouse';
+import type Details from 'lighthouse/types/lhr/audit-details';
+import { Result } from 'lighthouse/types/lhr/audit-result';
+import { AuditDetails, Table, tableSchema } from '@code-pushup/models';
+import { ui } from '@code-pushup/utils';
+import { PLUGIN_SLUG } from '../constants';
+import { parseTableToAuditDetailsTable } from './table.type';
+
+export function toAuditDetails<T extends FormattedIcu<Details>>(
+  details: T | undefined,
+): AuditDetails | undefined {
+  if (details == null) {
+    return undefined;
+  }
+
+  const { type } = details;
+
+  if (type !== 'table') {
+    return undefined;
+  }
+
+  const rawTable: Table | undefined = parseTableToAuditDetailsTable(
+    details as Details.Table,
+  );
+
+  if (rawTable != null) {
+    const result = tableSchema().safeParse(rawTable);
+    if (result.success) {
+      return {
+        table: result.data,
+      };
+    }
+
+    throw new Error(
+      `Parsing details ${chalk.bold(
+        type,
+      )} failed: \nRaw data:\n ${JSON.stringify(
+        rawTable,
+        null,
+        2,
+      )}\n${result.error.toString()}`,
+    );
+  }
+
+  return undefined;
+}
+
+// @TODO implement all details
+export const unsupportedDetailTypes = new Set([
+  'opportunity',
+  'debugdata',
+  'treemap-data',
+  'screenshot',
+  'filmstrip',
+  'criticalrequestchain',
+]);
+
+export function logUnsupportedDetails(
+  lhrAudits: Result[],
+  { displayCount = 3 }: { displayCount?: number } = {},
+) {
+  const slugsWithDetailParsingErrors = [
+    ...new Set(
+      lhrAudits
+        .filter(({ details }) =>
+          unsupportedDetailTypes.has(details?.type as string),
+        )
+        .map(({ details }) => details?.type),
+    ),
+  ];
+  if (slugsWithDetailParsingErrors.length > 0) {
+    const postFix = (count: number) =>
+      count > displayCount ? ` and ${count - displayCount} more.` : '';
+    ui().logger.debug(
+      `${chalk.yellow('⚠')} Plugin ${chalk.bold(
+        PLUGIN_SLUG,
+      )} skipped parsing of unsupported audit details: ${chalk.bold(
+        slugsWithDetailParsingErrors.slice(0, displayCount).join(', '),
+      )}${postFix(slugsWithDetailParsingErrors.length)}`,
+    );
+  }
+}

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

@@ -0,0 +1,194 @@
+import chalk from 'chalk';
+import type { FormattedIcu } from 'lighthouse';
+import type Details from 'lighthouse/types/lhr/audit-details';
+import type { Result } from 'lighthouse/types/lhr/audit-result';
+import { describe, expect, it } from 'vitest';
+import { getLogMessages } from '@code-pushup/test-utils';
+import { ui } from '@code-pushup/utils';
+import { logUnsupportedDetails, toAuditDetails } from './details';
+
+describe('logUnsupportedDetails', () => {
+  it('should log unsupported entries', () => {
+    logUnsupportedDetails([
+      { details: { type: 'screenshot' } },
+    ] as unknown as Result[]);
+    expect(getLogMessages(ui().logger)).toHaveLength(1);
+    expect(getLogMessages(ui().logger).at(0)).toBe(
+      `[ cyan(debug) ] ${chalk.yellow('⚠')} Plugin ${chalk.bold(
+        'lighthouse',
+      )} skipped parsing of unsupported audit details: ${chalk.bold(
+        'screenshot',
+      )}`,
+    );
+  });
+
+  it('should log only 3 details of unsupported entries', () => {
+    logUnsupportedDetails([
+      { details: { type: 'table' } },
+      { details: { type: 'filmstrip' } },
+      { details: { type: 'screenshot' } },
+      { details: { type: 'opportunity' } },
+      { details: { type: 'debugdata' } },
+      { details: { type: 'treemap-data' } },
+      { details: { type: 'criticalrequestchain' } },
+    ] as unknown as Result[]);
+    expect(getLogMessages(ui().logger)).toHaveLength(1);
+    expect(getLogMessages(ui().logger).at(0)).toBe(
+      `[ cyan(debug) ] ${chalk.yellow('⚠')} Plugin ${chalk.bold(
+        'lighthouse',
+      )} skipped parsing of unsupported audit details: ${chalk.bold(
+        'filmstrip, screenshot, opportunity',
+      )} and 3 more.`,
+    );
+  });
+});
+
+describe('toAuditDetails', () => {
+  it('should return undefined for missing details', () => {
+    const outputs = toAuditDetails(undefined);
+    expect(outputs).toBeUndefined();
+  });
+
+  it('should return undefined for unsupported type', () => {
+    const outputs = toAuditDetails({ type: 'debugdata' });
+    expect(outputs).toBeUndefined();
+  });
+
+  it('should return undefined for supported type with empty table', () => {
+    const outputs = toAuditDetails({
+      type: 'table',
+      items: [],
+    } as unknown as FormattedIcu<Details>);
+    expect(outputs).toBeUndefined();
+  });
+
+  it('should render audit details of type table', () => {
+    const outputs = toAuditDetails({
+      type: 'table',
+      headings: [
+        {
+          key: 'name',
+          valueType: 'text',
+          label: 'Name',
+        },
+        {
+          key: 'duration',
+          valueType: 'ms',
+          label: 'Duration',
+        },
+      ],
+      items: [
+        {
+          name: 'Zone',
+          duration: 0.634,
+        },
+        {
+          name: 'Zone:ZoneAwarePromise',
+          duration: 0.783,
+        },
+      ],
+    });
+
+    expect(outputs).toStrictEqual({
+      table: {
+        columns: [
+          {
+            key: 'name',
+            label: 'Name',
+            align: 'left',
+          },
+          {
+            key: 'duration',
+            label: 'Duration',
+            align: 'left',
+          },
+        ],
+        rows: [
+          {
+            name: 'Zone',
+            duration: '0.634 ms',
+          },
+          {
+            name: 'Zone:ZoneAwarePromise',
+            duration: '0.783 ms',
+          },
+        ],
+      },
+    });
+  });
+
+  it('should inform that debugdata detail type is not supported yet', () => {
+    const outputs = toAuditDetails({
+      type: 'debugdata',
+      items: [
+        {
+          cumulativeLayoutShiftMainFrame: 0.000_350_978_852_728_593_95,
+        },
+      ],
+    });
+
+    // @TODO add check that cliui.logger is called. Resolve TODO after PR #487 is merged.
+
+    expect(outputs).toBeUndefined();
+  });
+
+  it('should inform that filmstrip detail type is not supported yet', () => {
+    const outputs = toAuditDetails({
+      type: 'filmstrip',
+      scale: 3000,
+      items: [
+        {
+          timing: 375,
+          timestamp: 106_245_424_545,
+          data: 'data:image/jpeg;base64,/9j/4AAQSkZJRgABAQAAAQABAAD/2wBDAAYEBQYFBAYGBQYHBwY...',
+        },
+      ],
+    });
+
+    expect(outputs).toBeUndefined();
+  });
+
+  it('should inform that screenshot detail type is not supported yet', () => {
+    const outputs = toAuditDetails({
+      type: 'screenshot',
+      timing: 541,
+      timestamp: 106_245_590_644,
+      data: 'data:image/jpeg;base64,/9j/4AAQSkZJRgABAQAAAQABAAD//2Q==',
+    });
+
+    expect(outputs).toBeUndefined();
+  });
+
+  it('should inform that treemap-data detail type is not supported yet', () => {
+    const outputs = toAuditDetails({
+      type: 'treemap-data',
+      nodes: [],
+    });
+
+    expect(outputs).toBeUndefined();
+  });
+
+  it('should inform that criticalrequestchain detail type is not supported yet', () => {
+    const outputs = toAuditDetails({
+      type: 'criticalrequestchain',
+      chains: {
+        EED301D300C9A7B634A444E0C6019FC1: {
+          request: {
+            url: 'https://example.com/',
+            startTime: 106_245.050_727,
+            endTime: 106_245.559_225,
+            responseReceivedTime: 106_245.559_001,
+            transferSize: 849,
+          },
+        },
+      },
+      longestChain: {
+        duration: 508.498_000_010_848_05,
+        length: 1,
+        transferSize: 849,
+      },
+    });
+
+    expect(outputs).toBeUndefined();
+  });
+});