feat: upgrade to lighthouse 8.0

BREAKING CHANGE: upgrade to lighthouse v8.0.0

.lighthouserc.js

@@ -12,6 +12,7 @@ module.exports = {
       assertions: {
         'dom-size': ['error', {maxNumericValue: 3000}],
 
+        'csp-xss': 'off',
         'unsized-images': 'off',
         'uses-rel-preload': 'off',
         'uses-responsive-images': 'off',

CONTRIBUTING.md

@@ -50,7 +50,7 @@ When working on the server, you'll need to start parcel in watch mode. In one te
 
 ## Updating the Lighthouse Version
 
-Updating the Lighthouse version used by LHCI involves more than a simple `package.json` update. When the Lighthouse version changes, it is usually a _breaking change_ for Lighthouse CI (see [version policy](./docs/version-policy.md)) and triggers many corresponding updates, including the following:
+Updating the Lighthouse version used by LHCI involves more than a simple `package.json` update. When the Lighthouse version changes, it is usually a _breaking change_ for Lighthouse CI (see [version policy](./docs/version-policy.md)) and triggers many corresponding updates, including the following ([Example PR](https://github.com/GoogleChrome/lighthouse-ci/pull/621)):
 
 - Update the `package.json` version in @lhci/utils and @lhci/cli.
 - Run the new `lighthouse` version on a sufficiently complex URL (https://www.coursehero.com/ or https://www.theverge.com) and commit the LHR.

packages/cli/package.json

@@ -20,7 +20,7 @@
     "express": "^4.17.1",
     "inquirer": "^6.3.1",
     "isomorphic-fetch": "^3.0.0",
-    "lighthouse": "7.3.0",
+    "lighthouse": "8.0.0",
     "lighthouse-logger": "1.2.0",
     "open": "^7.1.0",
     "tmp": "^0.1.0",
@@ -29,4 +29,4 @@
     "yargs": "^15.4.1",
     "yargs-parser": "^13.1.2"
   }
-}
+}

packages/cli/test/assert.test.js

@@ -55,8 +55,8 @@ describe('Lighthouse CI assert CLI', () => {
   it('should run the recommended preset', async () => {
     const result = await run([`--preset=lighthouse:recommended`]);
     expect(result.status).toEqual(1);
-    expect(result.failures.length).toMatchInlineSnapshot(`99`);
-    expect(result.warnings.length).toMatchInlineSnapshot(`18`);
+    expect(result.failures.length).toMatchInlineSnapshot(`100`);
+    expect(result.warnings.length).toMatchInlineSnapshot(`17`);
     expect(result.passes.length).toMatchInlineSnapshot(`0`);
     expect(result.failures).toContain('deprecations failure');
     expect(result.failures).toContain('viewport failure');
@@ -65,8 +65,8 @@ describe('Lighthouse CI assert CLI', () => {
   it('should run the no-pwa preset', async () => {
     const result = await run([`--preset=lighthouse:no-pwa`]);
     expect(result.status).toEqual(1);
-    expect(result.failures.length).toMatchInlineSnapshot(`91`);
-    expect(result.warnings.length).toMatchInlineSnapshot(`17`);
+    expect(result.failures.length).toMatchInlineSnapshot(`92`);
+    expect(result.warnings.length).toMatchInlineSnapshot(`16`);
     expect(result.passes.length).toMatchInlineSnapshot(`0`);
     expect(result.failures).toContain('deprecations failure');
     expect(result.failures).not.toContain('viewport failure');
@@ -91,8 +91,8 @@ describe('Lighthouse CI assert CLI', () => {
   it('should return passing audits', async () => {
     const result = await run([`--preset=lighthouse:recommended`, '--include-passed-assertions']);
     expect(result.status).toEqual(1);
-    expect(result.warnings.length).toMatchInlineSnapshot(`18`);
-    expect(result.failures.length).toMatchInlineSnapshot(`99`);
+    expect(result.warnings.length).toMatchInlineSnapshot(`17`);
+    expect(result.failures.length).toMatchInlineSnapshot(`100`);
     expect(result.passes.length).toMatchInlineSnapshot(`1`);
     expect(result.passes).toContain('first-contentful-paint passing');
     expect(result.failures).toContain('viewport failure');

packages/server/src/ui/routes/build-view/audit-detail/audit-detail-pane.stories.jsx

@@ -18,6 +18,8 @@ import lhr641A_ from '../../../../../test/fixtures/lh-6-4-1-coursehero-a.json';
 import lhr641B_ from '../../../../../test/fixtures/lh-6-4-1-coursehero-b.json';
 import lhr700A_ from '../../../../../test/fixtures/lh-7-0-0-coursehero-a.json';
 import lhr700B_ from '../../../../../test/fixtures/lh-7-0-0-coursehero-b.json';
+import lhr800A_ from '../../../../../test/fixtures/lh-8-0-0-coursehero-a.json';
+import lhr800B_ from '../../../../../test/fixtures/lh-8-0-0-coursehero-b.json';
 import lhrSubitemsA_ from '../../../../../test/fixtures/lh-subitems-a.json';
 import lhrSubitemsB_ from '../../../../../test/fixtures/lh-subitems-b.json';
 
@@ -37,6 +39,8 @@ const lhr641A = /** @type {any} */ (lhr641A_);
 const lhr641B = /** @type {any} */ (lhr641B_);
 const lhr700A = /** @type {any} */ (lhr700A_);
 const lhr700B = /** @type {any} */ (lhr700B_);
+const lhr800A = /** @type {any} */ (lhr800A_);
+const lhr800B = /** @type {any} */ (lhr800B_);
 const lhrSubitemsA = /** @type {any} */ (lhrSubitemsA_);
 const lhrSubitemsB = /** @type {any} */ (lhrSubitemsB_);
 
@@ -45,6 +49,7 @@ const auditPairs6 = createAuditPairs(lhr6A, lhr6B);
 const auditPairs62 = createAuditPairs(lhr62A, lhr62B);
 const auditPairs641 = createAuditPairs(lhr641A, lhr641B);
 const auditPairs700 = createAuditPairs(lhr700A, lhr700B);
+const auditPairs800 = createAuditPairs(lhr800A, lhr800B);
 const auditPairsSubitems = createAuditPairs(lhrSubitemsA, lhrSubitemsB, {
   filter: pair =>
     [
@@ -101,6 +106,15 @@ export const Version700 = () => (
   />
 );
 
+export const Version800 = () => (
+  <AuditDetailPane
+    selectedAuditId={auditPairs800[1].audit.id || ''}
+    setSelectedAuditId={action('setSelectedAuditId')}
+    pairs={auditPairs800}
+    baseLhr={lhr800B}
+  />
+);
+
 export const VersionSubitems = () => (
   <AuditDetailPane
     selectedAuditId={auditPairsSubitems[1].audit.id || ''}

packages/server/src/ui/routes/build-view/lhr-comparison.stories.jsx

@@ -16,6 +16,8 @@ import lhr641A_ from '../../../../test/fixtures/lh-6-4-1-coursehero-a.json';
 import lhr641B_ from '../../../../test/fixtures/lh-6-4-1-coursehero-b.json';
 import lhr700A_ from '../../../../test/fixtures/lh-7-0-0-coursehero-a.json';
 import lhr700B_ from '../../../../test/fixtures/lh-7-0-0-coursehero-b.json';
+import lhr800A_ from '../../../../test/fixtures/lh-8-0-0-coursehero-a.json';
+import lhr800B_ from '../../../../test/fixtures/lh-8-0-0-coursehero-b.json';
 
 export default {
   title: 'Build View/LHR Comparison',
@@ -33,6 +35,8 @@ const lhr641A = /** @type {any} */ (lhr641A_);
 const lhr641B = /** @type {any} */ (lhr641B_);
 const lhr700A = /** @type {any} */ (lhr700A_);
 const lhr700B = /** @type {any} */ (lhr700B_);
+const lhr800A = /** @type {any} */ (lhr800A_);
+const lhr800B = /** @type {any} */ (lhr800B_);
 
 /** @param {{children: LHCI.PreactNode}} props */
 const Wrapper = ({children}) => <div className="build-hash-selector">{children}</div>;
@@ -66,3 +70,9 @@ export const Version700 = () => (
     <LhrComparison lhr={lhr700A} baseLhr={lhr700B} hookElements={{}} />
   </Wrapper>
 );
+
+export const Version800 = () => (
+  <Wrapper>
+    <LhrComparison lhr={lhr800A} baseLhr={lhr800B} hookElements={{}} />
+  </Wrapper>
+);

packages/server/test/api/statistic-definitions.test.js

@@ -17,6 +17,8 @@ const baseLhr62_ = require('../fixtures/lh-6-2-0-coursehero-a.json');
 const baseLhr641_ = require('../fixtures/lh-6-4-1-coursehero-a.json');
 /** @type {any} */
 const baseLhr700_ = require('../fixtures/lh-7-0-0-coursehero-a.json');
+/** @type {any} */
+const baseLhr800_ = require('../fixtures/lh-8-0-0-coursehero-a.json');
 const {definitions} = require('../../src/api/statistic-definitions.js');
 
 describe('Statistic Definitions', () => {
@@ -30,6 +32,8 @@ describe('Statistic Definitions', () => {
   const baseLhr641 = baseLhr641_;
   /** @type {LH.Result} */
   const baseLhr700 = baseLhr700_;
+  /** @type {LH.Result} */
+  const baseLhr800 = baseLhr800_;
 
   describe('meta_lighthouse_version()', () => {
     const run = definitions.meta_lighthouse_version;
@@ -40,6 +44,7 @@ describe('Statistic Definitions', () => {
       expect(run([baseLhr62])).toEqual({value: 60200});
       expect(run([baseLhr641])).toEqual({value: 60401});
       expect(run([baseLhr700])).toEqual({value: 70000});
+      expect(run([baseLhr800])).toEqual({value: 80000});
       expect(run([{...baseLhr5, lighthouseVersion: '1.2.3-beta.0'}])).toEqual({value: 10203});
     });
 
@@ -62,6 +67,7 @@ describe('Statistic Definitions', () => {
       expect(run([high, baseLhr62, low]).value).toBeCloseTo(19669.83);
       expect(run([high, baseLhr641, low]).value).toBeCloseTo(19945.48);
       expect(run([high, baseLhr700, low]).value).toBeCloseTo(21206.92);
+      expect(run([high, baseLhr800, low]).value).toBeCloseTo(20822.103);
     });
   });
 
@@ -78,6 +84,7 @@ describe('Statistic Definitions', () => {
       expect(run([high, baseLhr62, low]).value).toBeCloseTo(0.28);
       expect(run([high, baseLhr641, low]).value).toBeCloseTo(0.2);
       expect(run([high, baseLhr700, low]).value).toBeCloseTo(0.18);
+      expect(run([high, baseLhr800, low]).value).toBeCloseTo(0.24);
     });
   });
 
@@ -94,6 +101,7 @@ describe('Statistic Definitions', () => {
       expect(run([high, baseLhr62, low]).value).toBeCloseTo(0.01);
       expect(run([high, baseLhr641, low]).value).toBeCloseTo(0.01);
       expect(run([high, baseLhr700, low]).value).toBeCloseTo(0.01);
+      expect(run([high, baseLhr800, low]).value).toBeCloseTo(0.01);
     });
   });
 
@@ -110,6 +118,7 @@ describe('Statistic Definitions', () => {
       expect(run([high, baseLhr62, low]).value).toBeCloseTo(0.99);
       expect(run([high, baseLhr641, low]).value).toBeCloseTo(0.99);
       expect(run([high, baseLhr700, low]).value).toBeCloseTo(0.99);
+      expect(run([high, baseLhr800, low]).value).toBeCloseTo(0.99);
     });
   });
 
@@ -120,16 +129,19 @@ describe('Statistic Definitions', () => {
       expect(definitions['auditgroup_a11y-aria_pass']([baseLhr62])).toEqual({value: 10});
       expect(definitions['auditgroup_a11y-aria_pass']([baseLhr641])).toEqual({value: 10});
       expect(definitions['auditgroup_a11y-aria_pass']([baseLhr700])).toEqual({value: 10});
+      expect(definitions['auditgroup_a11y-aria_pass']([baseLhr800])).toEqual({value: 6});
       expect(definitions['auditgroup_a11y-color-contrast_fail']([baseLhr5])).toEqual({value: 0});
       expect(definitions['auditgroup_a11y-color-contrast_fail']([baseLhr6])).toEqual({value: 1});
       expect(definitions['auditgroup_a11y-color-contrast_fail']([baseLhr62])).toEqual({value: 1});
       expect(definitions['auditgroup_a11y-color-contrast_fail']([baseLhr641])).toEqual({value: 1});
       expect(definitions['auditgroup_a11y-color-contrast_fail']([baseLhr700])).toEqual({value: 1});
+      expect(definitions['auditgroup_a11y-color-contrast_fail']([baseLhr800])).toEqual({value: 1});
       expect(definitions['auditgroup_a11y-aria_na']([baseLhr5])).toEqual({value: 0});
       expect(definitions['auditgroup_a11y-aria_na']([baseLhr6])).toEqual({value: 2});
       expect(definitions['auditgroup_a11y-aria_na']([baseLhr62])).toEqual({value: 2});
       expect(definitions['auditgroup_a11y-aria_na']([baseLhr641])).toEqual({value: 2});
       expect(definitions['auditgroup_a11y-aria_na']([baseLhr700])).toEqual({value: 7});
+      expect(definitions['auditgroup_a11y-aria_na']([baseLhr800])).toEqual({value: 11});
     });
   });
 });

packages/server/test/e2e/project-dashboard-mixed-v5-v6.test.js

@@ -28,11 +28,11 @@ describe('Project dashboard', () => {
 
       expect(commits).toMatchInlineSnapshot(`
         Array [
+          "1246build 12call_splitmasterMay 22 6:00 AM",
+          "1245build 11call_splitmasterMay 21 6:00 AM",
           "1244build 10call_splitmasterMay 20 6:00 AM",
           "1243build 9call_splitmasterMay 19 6:00 AM",
           "1242build 8call_splitmasterMay 18 6:00 AM",
-          "1241build 7call_splitmasterMay 17 6:00 AM",
-          "1240build 6call_splitmasterMay 16 6:00 AM",
         ]
       `);
     });

packages/server/test/test-utils.js

@@ -92,6 +92,8 @@ function createActualTestDataset() {
       {...baseBuild, id: '7', hash: '1242', commitMessage: 'build 8', runAt: runAt(8)},
       {...baseBuild, id: '8', hash: '1243', commitMessage: 'build 9', runAt: runAt(9)},
       {...baseBuild, id: '9', hash: '1244', commitMessage: 'build 10', runAt: runAt(10)},
+      {...baseBuild, id: '10', hash: '1245', commitMessage: 'build 11', runAt: runAt(11)},
+      {...baseBuild, id: '11', hash: '1246', commitMessage: 'build 12', runAt: runAt(12)},
     ],
     runs: [
       {...baseRun, id: '0', buildId: '0', url, lhr: lhr('lh-5-6-0-verge-a.json')},
@@ -104,6 +106,8 @@ function createActualTestDataset() {
       {...baseRun, id: '7', buildId: '7', url, lhr: lhr('lh-6-4-1-coursehero-b.json')},
       {...baseRun, id: '8', buildId: '8', url, lhr: lhr('lh-7-0-0-coursehero-a.json')},
       {...baseRun, id: '9', buildId: '9', url, lhr: lhr('lh-7-0-0-coursehero-b.json')},
+      {...baseRun, id: '10', buildId: '10', url, lhr: lhr('lh-8-0-0-coursehero-a.json')},
+      {...baseRun, id: '11', buildId: '11', url, lhr: lhr('lh-8-0-0-coursehero-b.json')},
     ],
   };
 }

packages/utils/package.json

@@ -13,7 +13,7 @@
     "debug": "^4.3.1",
     "isomorphic-fetch": "^3.0.0",
     "js-yaml": "^3.13.1",
-    "lighthouse": "7.3.0",
+    "lighthouse": "8.0.0",
     "tree-kill": "^1.2.1"
   }
-}
+}

packages/utils/src/audit-diff-finder.js

@@ -249,7 +249,7 @@ function createAuditDiff(diff) {
  * @param {string} auditId
  * @param {DetailItemEntry} baseEntry
  * @param {DetailItemEntry} compareEntry
- * @param {Array<{key: string}>} headings
+ * @param {Array<{key: string | null}>} headings
  * @return {Array<LHCI.AuditDiff>}
  */
 function findAuditDetailItemKeyDiffs(auditId, baseEntry, compareEntry, headings) {
@@ -466,7 +466,7 @@ function sortZippedBaseAndCompareItems(diffs, zippedItems) {
  * @param {string} auditId
  * @param {Array<Record<string, any>>} baseItems
  * @param {Array<Record<string, any>>} compareItems
- * @param {Array<{key: string}>} headings
+ * @param {Array<{key: string | null}>} headings
  * @return {Array<LHCI.AuditDiff>}
  */
 function findAuditDetailItemsDiffs(auditId, baseItems, compareItems, headings) {

packages/utils/src/presets/all.js

@@ -10,7 +10,6 @@ module.exports = {
     // Not useful or invisible diagnostic audits (off)
     'full-page-screenshot': ['off', {}],
     'critical-request-chains': ['off', {}],
-    'estimated-input-latency': ['off', {}],
     'final-screenshot': ['off', {}],
     'js-libraries': ['off', {}],
     'largest-contentful-paint-element': ['off', {}],
@@ -21,6 +20,7 @@ module.exports = {
     'network-server-latency': ['off', {}],
     'resource-summary': ['off', {}],
     'screenshot-thumbnails': ['off', {}],
+    'script-treemap-data': ['off', {}],
     'third-party-summary': ['off', {}],
     'total-blocking-time': ['off', {}],
     'user-timings': ['off', {}],
@@ -50,6 +50,7 @@ module.exports = {
     'color-contrast': ['error', {}],
     'content-width': ['error', {}],
     'crawlable-anchors': ['error', {}],
+    'csp-xss': ['error', {}],
     'cumulative-layout-shift': ['error', {}],
     'definition-list': ['error', {}],
     'document-title': ['error', {}],
@@ -61,7 +62,6 @@ module.exports = {
     'errors-in-console': ['error', {}],
     'external-anchors-use-rel-noopener': ['error', {}],
     'first-contentful-paint': ['error', {}],
-    'first-cpu-idle': ['error', {}],
     'first-meaningful-paint': ['error', {}],
     'font-display': ['error', {}],
     'font-size': ['error', {}],
@@ -91,6 +91,7 @@ module.exports = {
     'meta-description': ['error', {}],
     'meta-refresh': ['error', {}],
     'meta-viewport': ['error', {}],
+    'modern-image-formats': ['error', {}],
     'no-document-write': ['error', {}],
     'no-unload-listeners': ['error', {}],
     'no-vulnerable-libraries': ['error', {}],
@@ -129,7 +130,6 @@ module.exports = {
     'uses-rel-preload': ['error', {}],
     'uses-responsive-images': ['error', {}],
     'uses-text-compression': ['error', {}],
-    'uses-webp-images': ['error', {}],
     'valid-lang': ['error', {}],
     'valid-source-maps': ['error', {}],
     'video-caption': ['error', {}],

packages/utils/src/presets/recommended.js

@@ -14,7 +14,6 @@ module.exports = {
     'bootup-time': ['warn', {}],
     'cumulative-layout-shift': ['warn', {}],
     'first-contentful-paint': ['warn', {}],
-    'first-cpu-idle': ['warn', {}],
     'first-meaningful-paint': ['warn', {}],
     'largest-contentful-paint': ['warn', {}],
     'mainthread-work-breakdown': ['warn', {}],
@@ -42,9 +41,9 @@ module.exports = {
 
     'dom-size': ['warn', {}],
     'is-on-https': ['warn', {}], // passes on localhost, so OK to leave on
+    'modern-image-formats': ['warn', {maxLength: 0}],
     'render-blocking-resources': ['warn', {maxLength: 0}],
     'server-response-time': ['warn', {}],
     'uses-long-cache-ttl': ['warn', {maxLength: 0}],
-    'uses-webp-images': ['warn', {maxLength: 0}],
   },
 };

packages/utils/test/presets.test.js

@@ -15,7 +15,7 @@ const PRESETS_DIR = path.join(__dirname, '../src/presets');
 
 describe('presets', () => {
   let auditsInLighthouse = [];
-
+  //
   beforeAll(() => {
     const audits = defaultConfig.audits
       .map(p => [