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 => [