lighthouse 9.6.8 → 10.0.0

package/report/renderer/topbar-features.d.ts

@@ -0,0 +1,82 @@
+export class TopbarFeatures {
+    /**
+     * @param {ReportUIFeatures} reportUIFeatures
+     * @param {DOM} dom
+     */
+    constructor(reportUIFeatures: ReportUIFeatures, dom: DOM);
+    /** @type {LH.Result} */
+    lhr: LH.Result;
+    _reportUIFeatures: import("./report-ui-features").ReportUIFeatures;
+    _dom: import("./dom.js").DOM;
+    _dropDownMenu: DropDownMenu;
+    _copyAttempt: boolean;
+    /** @type {HTMLElement} */
+    topbarEl: HTMLElement;
+    /** @type {HTMLElement} */
+    categoriesEl: HTMLElement;
+    /** @type {HTMLElement?} */
+    stickyHeaderEl: HTMLElement | null;
+    /** @type {HTMLElement} */
+    highlightEl: HTMLElement;
+    /**
+     * Handler for tool button.
+     * @param {Event} e
+     */
+    onDropDownMenuClick(e: Event): void;
+    /**
+     * Keyup handler for the document.
+     * @param {KeyboardEvent} e
+     */
+    onKeyUp(e: KeyboardEvent): void;
+    /**
+     * Handle copy events.
+     * @param {ClipboardEvent} e
+     */
+    onCopy(e: ClipboardEvent): void;
+    /**
+     * Collapses all audit `<details>`.
+     * open a `<details>` element.
+     */
+    collapseAllDetails(): void;
+    /**
+     * @param {LH.Result} lhr
+     */
+    enable(lhr: LH.Result): void;
+    /**
+     * Copies the report JSON to the clipboard (if supported by the browser).
+     */
+    onCopyButtonClick(): void;
+    /**
+     * Expands all audit `<details>`.
+     * Ideally, a print stylesheet could take care of this, but CSS has no way to
+     * open a `<details>` element.
+     */
+    expandAllDetails(): void;
+    _print(): void;
+    /**
+     * Resets the state of page before capturing the page for export.
+     * When the user opens the exported HTML page, certain UI elements should
+     * be in their closed state (not opened) and the templates should be unstamped.
+     */
+    resetUIState(): void;
+    /**
+     * Finds the first scrollable ancestor of `element`. Falls back to the document.
+     * @param {Element} element
+     * @return {Element | Document}
+     */
+    _getScrollParent(element: Element): Element | Document;
+    /**
+     * Sets up listeners to collapse audit `<details>` when the user closes the
+     * print dialog, all `<details>` are collapsed.
+     */
+    _setUpCollapseDetailsAfterPrinting(): void;
+    _setupStickyHeader(): void;
+    /**
+     * Toggle visibility and update highlighter position
+     */
+    _updateStickyHeader(): void;
+}
+export type DOM = import('./dom.js').DOM;
+export type ReportUIFeatures = import('./report-ui-features').ReportUIFeatures;
+import { DropDownMenu } from "./drop-down-menu.js";
+//# sourceMappingURL=topbar-features.d.ts.map

package/report/renderer/topbar-features.js

@@ -3,7 +3,6 @@
  * Licensed under the Apache License, Version 2.0 (the "License"); you may not use this file except in compliance with the License. You may obtain a copy of the License at http://www.apache.org/licenses/LICENSE-2.0
  * Unless required by applicable law or agreed to in writing, software distributed under the License is distributed on an "AS IS" BASIS, WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied. See the License for the specific language governing permissions and limitations under the License.
  */
-'use strict';
 
 /* eslint-env browser */
 
@@ -241,7 +240,8 @@ export class TopbarFeatures {
    */
   _setUpCollapseDetailsAfterPrinting() {
     // FF and IE implement these old events.
-    if ('onbeforeprint' in self) {
+    const supportsOldPrintEvents = 'onbeforeprint' in self;
+    if (supportsOldPrintEvents) {
       self.addEventListener('afterprint', this.collapseAllDetails);
     } else {
       // Note: FF implements both window.onbeforeprint and media listeners. However,

package/report/test/clients/bundle-test.js

@@ -4,26 +4,21 @@
  * Unless required by applicable law or agreed to in writing, software distributed under the License is distributed on an "AS IS" BASIS, WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied. See the License for the specific language governing permissions and limitations under the License.
  */
 
-'use strict';
-
 import fs from 'fs';
 
 import jsdom from 'jsdom';
-import {jest} from '@jest/globals';
+import jestMock from 'jest-mock';
 
 import * as lighthouseRenderer from '../../clients/bundle.js';
 import {LH_ROOT} from '../../../root.js';
 
 const sampleResultsStr =
-  fs.readFileSync(LH_ROOT + '/lighthouse-core/test/results/sample_v2.json', 'utf-8');
-
-
-/* eslint-env jest */
+  fs.readFileSync(LH_ROOT + '/core/test/results/sample_v2.json', 'utf-8');
 
 describe('lighthouseRenderer bundle', () => {
   let document;
-  beforeAll(() => {
-    global.console.warn = jest.fn();
+  before(() => {
+    global.console.warn = jestMock.fn();
 
     const {window} = new jsdom.JSDOM();
     document = window.document;
@@ -43,7 +38,7 @@ describe('lighthouseRenderer bundle', () => {
     };
   });
 
-  afterAll(() => {
+  after(() => {
     global.window = global.self = undefined;
     global.HTMLInputElement = undefined;
   });

package/report/test/generator/file-namer-test.js

@@ -5,15 +5,14 @@
  */
 'use strict';
 
-const assert = require('assert').strict;
+import assert from 'assert/strict';
 
-const getLhrFilenamePrefix = require('../../generator/file-namer.js').getLhrFilenamePrefix;
+import {getLhrFilenamePrefix} from '../../generator/file-namer.js';
 
-/* eslint-env jest */
 describe('file-namer helper', () => {
   it('generates filename prefixes', () => {
     const results = {
-      finalUrl: 'https://testexample.com',
+      finalDisplayedUrl: 'https://testexample.com',
       fetchTime: '2017-01-06T02:34:56.217Z',
     };
     const str = getLhrFilenamePrefix(results);

package/report/test/generator/report-generator-test.js

@@ -5,15 +5,18 @@
  */
 'use strict';
 
-const assert = require('assert').strict;
-const fs = require('fs');
+/* eslint-disable no-irregular-whitespace */
 
-const csvValidator = require('csv-validator');
+import assert from 'assert/strict';
+import fs from 'fs';
 
-const ReportGenerator = require('../../generator/report-generator.js');
-const sampleResults = require('../../../lighthouse-core/test/results/sample_v2.json');
+import csvValidator from 'csv-validator';
 
-/* eslint-env jest */
+import {ReportGenerator} from '../../generator/report-generator.js';
+import {readJson} from '../../../core/test/test-utils.js';
+
+const sampleResults = readJson('core/test/results/sample_v2.json');
+const sampleFlowResult = readJson('core/test/fixtures/fraggle-rock/reports/sample-flow-result.json');
 
 describe('ReportGenerator', () => {
   describe('#replaceStrings', () => {
@@ -73,36 +76,52 @@ describe('ReportGenerator', () => {
       assert.doesNotThrow(_ => JSON.parse(jsonOutput));
     });
 
+    it('creates JSON for flow result', () => {
+      const jsonOutput = ReportGenerator.generateReport(sampleFlowResult, 'json');
+      assert.doesNotThrow(_ => JSON.parse(jsonOutput));
+    });
+
     it('creates HTML for results', () => {
       const htmlOutput = ReportGenerator.generateReport(sampleResults, 'html');
       assert.ok(/<!doctype/gim.test(htmlOutput));
       assert.ok(/<html lang="en"/gim.test(htmlOutput));
     });
 
+    it('creates HTML for flow result', () => {
+      const htmlOutput = ReportGenerator.generateReport(sampleFlowResult, 'html');
+      assert.ok(/<!doctype/gim.test(htmlOutput));
+      assert.ok(/<html lang="en"/gim.test(htmlOutput));
+    });
+
     it('creates CSV for results', async () => {
       const path = './.results-as-csv.csv';
-      const headers = {
-        category: '',
-        name: '',
-        title: '',
-        type: '',
-        score: 42,
-      };
 
       const csvOutput = ReportGenerator.generateReport(sampleResults, 'csv');
       fs.writeFileSync(path, csvOutput);
 
       const lines = csvOutput.split('\n');
       expect(lines.length).toBeGreaterThan(100);
-      expect(lines.slice(0, 3).join('\n')).toMatchInlineSnapshot(`
-"requestedUrl,finalUrl,category,name,title,type,score
-\\"http://localhost:10200/dobetterweb/dbw_tester.html\\",\\"http://localhost:10200/dobetterweb/dbw_tester.html\\",\\"Performance\\",\\"performance-score\\",\\"Overall Performance Category Score\\",\\"numeric\\",\\"0.26\\"
-\\"http://localhost:10200/dobetterweb/dbw_tester.html\\",\\"http://localhost:10200/dobetterweb/dbw_tester.html\\",\\"Performance\\",\\"first-contentful-paint\\",\\"First Contentful Paint\\",\\"numeric\\",\\"0.01\\"
+      expect(lines.slice(0, 15).join('\n')).toMatchInlineSnapshot(`
+"\\"requestedUrl\\",\\"finalDisplayedUrl\\",\\"fetchTime\\",\\"gatherMode\\"
+\\"http://localhost:10200/dobetterweb/dbw_tester.html\\",\\"http://localhost:10200/dobetterweb/dbw_tester.html\\",\\"2021-09-07T20:11:11.853Z\\",\\"navigation\\"
+
+category,score
+\\"performance\\",\\"0.28\\"
+\\"accessibility\\",\\"0.77\\"
+\\"best-practices\\",\\"0.33\\"
+\\"seo\\",\\"0.67\\"
+\\"pwa\\",\\"0.33\\"
+
+category,audit,score,displayValue,description
+\\"performance\\",\\"first-contentful-paint\\",\\"0.01\\",\\"6.8 s\\",\\"First Contentful Paint marks the time at which the first text or image is painted. [Learn more about the First Contentful Paint metric](https://developer.chrome.com/docs/lighthouse/performance/first-contentful-paint/).\\"
+\\"performance\\",\\"largest-contentful-paint\\",\\"0.01\\",\\"9.3 s\\",\\"Largest Contentful Paint marks the time at which the largest text or image is painted. [Learn more about the Largest Contentful Paint metric](https://developer.chrome.com/docs/lighthouse/performance/lighthouse-largest-contentful-paint/)\\"
+\\"performance\\",\\"total-blocking-time\\",\\"0.2\\",\\"1,220 ms\\",\\"Sum of all time periods between FCP and Time to Interactive, when task length exceeded 50ms, expressed in milliseconds. [Learn more about the Total Blocking Time metric](https://developer.chrome.com/docs/lighthouse/performance/lighthouse-total-blocking-time/).\\"
+\\"performance\\",\\"cumulative-layout-shift\\",\\"0.8\\",\\"0.136\\",\\"Cumulative Layout Shift measures the movement of visible elements within the viewport. [Learn more about the Cumulative Layout Shift metric](https://web.dev/cls/).\\"
 "
 `);
 
       try {
-        await csvValidator(path, headers);
+        await csvValidator(path);
       } catch (err) {
         assert.fail('CSV parser error:\n' + err.join('\n'));
       } finally {
@@ -110,13 +129,19 @@ describe('ReportGenerator', () => {
       }
     });
 
-    it('creates CSV for results including overall category scores', () => {
+    it('creates CSV for results including categories', () => {
       const csvOutput = ReportGenerator.generateReport(sampleResults, 'csv');
-      expect(csvOutput).toContain('performance-score');
-      expect(csvOutput).toContain('accessibility-score');
-      expect(csvOutput).toContain('best-practices-score');
-      expect(csvOutput).toContain('seo-score');
-      expect(csvOutput).toContain('pwa-score');
+      expect(csvOutput).toContain('performance');
+      expect(csvOutput).toContain('accessibility');
+      expect(csvOutput).toContain('best-practices');
+      expect(csvOutput).toContain('seo');
+      expect(csvOutput).toContain('pwa');
+    });
+
+    it('throws when creating CSV for flow result', () => {
+      expect(() => {
+        ReportGenerator.generateReport(sampleFlowResult, 'csv');
+      }).toThrow('CSV output is not support for user flows');
     });
 
     it('writes extended info', () => {

package/report/test/renderer/category-renderer-test.js

@@ -3,38 +3,42 @@
  * Licensed under the Apache License, Version 2.0 (the "License"); you may not use this file except in compliance with the License. You may obtain a copy of the License at http://www.apache.org/licenses/LICENSE-2.0
  * Unless required by applicable law or agreed to in writing, software distributed under the License is distributed on an "AS IS" BASIS, WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied. See the License for the specific language governing permissions and limitations under the License.
  */
-'use strict';
 
-/* eslint-env jest */
-
-import {strict as assert} from 'assert';
+import assert from 'assert/strict';
 
 import jsdom from 'jsdom';
 
-import {Util} from '../../renderer/util.js';
-import {I18n} from '../../renderer/i18n.js';
+import {ReportUtils} from '../../renderer/report-utils.js';
+import {I18nFormatter} from '../../renderer/i18n-formatter.js';
 import {DOM} from '../../renderer/dom.js';
 import {DetailsRenderer} from '../../renderer/details-renderer.js';
 import {CategoryRenderer} from '../../renderer/category-renderer.js';
-import sampleResultsOrig from '../../../lighthouse-core/test/results/sample_v2.json';
+import {readJson} from '../../../core/test/test-utils.js';
+import {Globals} from '../../renderer/report-globals.js';
+
+const sampleResultsOrig = readJson('../../../core/test/results/sample_v2.json', import.meta);
 
 describe('CategoryRenderer', () => {
   let renderer;
   let sampleResults;
 
-  beforeAll(() => {
-    Util.i18n = new I18n('en', {...Util.UIStrings});
+  before(() => {
+    Globals.apply({
+      providedStrings: {},
+      i18n: new I18nFormatter('en'),
+      reportJson: null,
+    });
 
     const {document} = new jsdom.JSDOM().window;
     const dom = new DOM(document);
     const detailsRenderer = new DetailsRenderer(dom);
     renderer = new CategoryRenderer(dom, detailsRenderer);
 
-    sampleResults = Util.prepareReportResult(sampleResultsOrig);
+    sampleResults = ReportUtils.prepareReportResult(sampleResultsOrig);
   });
 
-  afterAll(() => {
-    Util.i18n = undefined;
+  after(() => {
+    Globals.i18n = undefined;
   });
 
   it('renders an audit', () => {
@@ -297,7 +301,7 @@ describe('CategoryRenderer', () => {
       );
 
       const gauge = categoryDOM.querySelector('.lh-fraction__content');
-      assert.equal(gauge.textContent.trim(), '13/18', 'fraction is included');
+      assert.equal(gauge.textContent.trim(), '12/17', 'fraction is included');
 
       const score = categoryDOM.querySelector('.lh-category-header');
       const title = score.querySelector('.lh-fraction__label');
@@ -422,7 +426,7 @@ describe('CategoryRenderer', () => {
       const naAudits = elem.querySelectorAll('.lh-clump--notapplicable .lh-audit');
 
       assert.equal(passedAudits.length, 0);
-      assert.equal(failedAudits.length, 5);
+      assert.equal(failedAudits.length, 4);
       assert.equal(warningAudits.length, 2);
       assert.equal(manualAudits.length, 3);
       assert.equal(naAudits.length, 1);
@@ -442,7 +446,7 @@ describe('CategoryRenderer', () => {
       const failedAudits = elem.querySelectorAll('.lh-clump--failed .lh-audit');
 
       assert.equal(passedAudits.length, 0);
-      assert.equal(failedAudits.length, 8);
+      assert.equal(failedAudits.length, 7);
     });
 
     it('expands warning audit group', () => {

package/report/test/renderer/components-test.js

@@ -3,14 +3,10 @@
  * Licensed under the Apache License, Version 2.0 (the "License"); you may not use this file except in compliance with the License. You may obtain a copy of the License at http://www.apache.org/licenses/LICENSE-2.0
  * Unless required by applicable law or agreed to in writing, software distributed under the License is distributed on an "AS IS" BASIS, WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied. See the License for the specific language governing permissions and limitations under the License.
  */
-'use strict';
-
-/* eslint-env jest */
 
 import fs from 'fs';
 
 import jsdom from 'jsdom';
-import expect from 'expect';
 
 import {DOM} from '../../renderer/dom.js';
 import {LH_ROOT} from '../../../root.js';
@@ -85,41 +81,44 @@ async function assertDOMTreeMatches(tmplEl) {
   }
 }
 
-const originalCreateElement = DOM.prototype.createElement;
-const originalCreateElementNS = DOM.prototype.createElementNS;
-beforeAll(() => {
-  /**
-   * @param {string} classNames
-   */
-  function checkPrefix(classNames) {
-    if (!classNames) return;
-
-    for (const className of classNames.split(' ')) {
-      if (!className.startsWith('lh-')) {
-        throw new Error(`expected classname to start with lh-, got: ${className}`);
+describe('Components', () => {
+  const originalCreateElement = DOM.prototype.createElement;
+  const originalCreateElementNS = DOM.prototype.createElementNS;
+
+  before(() => {
+    /**
+     * @param {string} classNames
+     */
+    function checkPrefix(classNames) {
+      if (!classNames) return;
+
+      for (const className of classNames.split(' ')) {
+        if (!className.startsWith('lh-')) {
+          throw new Error(`expected classname to start with lh-, got: ${className}`);
+        }
       }
     }
-  }
-
-  DOM.prototype.createElement = function(...args) {
-    const classNames = args[1];
-    checkPrefix(classNames);
-    return originalCreateElement.call(this, ...args);
-  };
-  DOM.prototype.createElementNS = function(...args) {
-    const classNames = args[2];
-    checkPrefix(classNames);
-    return originalCreateElementNS.call(this, ...args);
-  };
-});
 
-afterAll(() => {
-  DOM.prototype.createElement = originalCreateElement;
-  DOM.prototype.createElementNS = originalCreateElementNS;
-});
+    DOM.prototype.createElement = function(...args) {
+      const classNames = args[1];
+      checkPrefix(classNames);
+      return originalCreateElement.call(this, ...args);
+    };
+    DOM.prototype.createElementNS = function(...args) {
+      const classNames = args[2];
+      checkPrefix(classNames);
+      return originalCreateElementNS.call(this, ...args);
+    };
+  });
 
-for (const tmpEl of tmplEls) {
-  it(`${tmpEl.id} component matches HTML source`, async () => {
-    await assertDOMTreeMatches(tmpEl);
+  after(() => {
+    DOM.prototype.createElement = originalCreateElement;
+    DOM.prototype.createElementNS = originalCreateElementNS;
   });
-}
+
+  for (const tmpEl of tmplEls) {
+    it(`${tmpEl.id} component matches HTML source`, async () => {
+      await assertDOMTreeMatches(tmpEl);
+    });
+  }
+});

package/report/test/renderer/crc-details-renderer-test.js

@@ -3,19 +3,16 @@
  * Licensed under the Apache License, Version 2.0 (the "License"); you may not use this file except in compliance with the License. You may obtain a copy of the License at http://www.apache.org/licenses/LICENSE-2.0
  * Unless required by applicable law or agreed to in writing, software distributed under the License is distributed on an "AS IS" BASIS, WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied. See the License for the specific language governing permissions and limitations under the License.
  */
-'use strict';
 
-/* eslint-env jest */
-
-import {strict as assert} from 'assert';
+import assert from 'assert/strict';
 
 import jsdom from 'jsdom';
 
-import {Util} from '../../renderer/util.js';
-import {I18n} from '../../renderer/i18n.js';
+import {I18nFormatter} from '../../renderer/i18n-formatter.js';
 import {DOM} from '../../renderer/dom.js';
 import {DetailsRenderer} from '../../renderer/details-renderer.js';
 import {CriticalRequestChainRenderer} from '../../renderer/crc-details-renderer.js';
+import {Globals} from '../../renderer/report-globals.js';
 
 const superLongURL =
     'https://example.com/thisIsASuperLongURLThatWillTriggerFilenameTruncationWhichWeWantToTest.js';
@@ -75,16 +72,20 @@ describe('DetailsRenderer', () => {
   let dom;
   let detailsRenderer;
 
-  beforeAll(() => {
-    Util.i18n = new I18n('en', {...Util.UIStrings});
+  before(() => {
+    Globals.apply({
+      providedStrings: {},
+      i18n: new I18nFormatter('en'),
+      reportJson: null,
+    });
 
     const {document} = new jsdom.JSDOM().window;
     dom = new DOM(document);
     detailsRenderer = new DetailsRenderer(dom);
   });
 
-  afterAll(() => {
-    Util.i18n = undefined;
+  after(() => {
+    Globals.i18n = undefined;
   });
 
   it('renders tree structure', () => {