lighthouse 8.3.0-dev.20210907 → 8.3.0

package/report/renderer/text-encoding.js

@@ -5,7 +5,7 @@
  */
 'use strict';
 
-/* global CompressionStream */
+/* global btoa atob window CompressionStream Response */
 
 const btoa_ = typeof btoa !== 'undefined' ?
   btoa :

package/report/renderer/util.js

@@ -388,7 +388,7 @@ export class Util {
   }
 
   /**
-   * @param {LH.Result['configSettings']} settings
+   * @param {LH.Config.Settings} settings
    * @return {!Array<{name: string, description: string}>}
    */
   static getEnvironmentDisplayValues(settings) {
@@ -411,7 +411,7 @@ export class Util {
   }
 
   /**
-   * @param {LH.Result['configSettings']} settings
+   * @param {LH.Config.Settings} settings
    * @return {{deviceEmulation: string, networkThrottling: string, cpuThrottling: string}}
    */
   static getEmulationDescriptions(settings) {

package/report/{generator/report-assets.js → report-assets.js}

@@ -7,12 +7,9 @@
 
 const fs = require('fs');
 
-const flowReportAssets = require('./flow-report-assets.js');
-
-const REPORT_TEMPLATE = fs.readFileSync(__dirname + '/../assets/standalone-template.html',
-    'utf8');
-const REPORT_JAVASCRIPT = fs.readFileSync(__dirname + '/../../dist/report/standalone.js', 'utf8');
-const REPORT_CSS = fs.readFileSync(__dirname + '/../assets/styles.css', 'utf8');
+const REPORT_TEMPLATE = fs.readFileSync(__dirname + '/assets/standalone-template.html', 'utf8');
+const REPORT_JAVASCRIPT = fs.readFileSync(__dirname + '/../dist/report/standalone.js', 'utf8');
+const REPORT_CSS = fs.readFileSync(__dirname + '/assets/styles.css', 'utf8');
 
 // Changes to this export interface should be reflected in build/build-dt-report-resources.js
 // and clients/devtools-report-assets.js
@@ -20,7 +17,4 @@ module.exports = {
   REPORT_TEMPLATE,
   REPORT_JAVASCRIPT,
   REPORT_CSS,
-  // Flow report assets are not needed for every bundle.
-  // Ignoring flow-report-assets.js (e.g. `browserify.ignore`) will remove the flow assets from the bundle.
-  ...flowReportAssets,
 };

package/report/{generator/report-generator.js → report-generator.js}

@@ -7,9 +7,6 @@
 
 const htmlReportAssets = require('./report-assets.js');
 
-/** @typedef {import('../../types/lhr/lhr').default} LHResult */
-/** @typedef {import('../../types/lhr/flow').default} FlowResult */
-
 class ReportGenerator {
   /**
    * Replaces all the specified strings in source without serial replacements.
@@ -31,23 +28,15 @@ class ReportGenerator {
   }
 
   /**
-   * @param {unknown} object
-   * @return {string}
-   */
-  static sanitizeJson(object) {
-    return JSON.stringify(object)
-    .replace(/</g, '\\u003c') // replaces opening script tags
-    .replace(/\u2028/g, '\\u2028') // replaces line separators ()
-    .replace(/\u2029/g, '\\u2029'); // replaces paragraph separators
-  }
-
-  /**
-   * Returns the standalone report HTML as a string with the report JSON and renderer JS inlined.
-   * @param {LHResult} lhr
+   * Returns the report HTML as a string with the report JSON and renderer JS inlined.
+   * @param {LH.Result} lhr
    * @return {string}
    */
   static generateReportHtml(lhr) {
-    const sanitizedJson = ReportGenerator.sanitizeJson(lhr);
+    const sanitizedJson = JSON.stringify(lhr)
+      .replace(/</g, '\\u003c') // replaces opening script tags
+      .replace(/\u2028/g, '\\u2028') // replaces line separators ()
+      .replace(/\u2029/g, '\\u2029'); // replaces paragraph separators
     // terser does its own sanitization, but keep this basic replace for when
     // we want to generate a report without minification.
     const sanitizedJavascript = htmlReportAssets.REPORT_JAVASCRIPT.replace(/<\//g, '\\u003c/');
@@ -59,23 +48,6 @@ class ReportGenerator {
     ]);
   }
 
-  /**
-   * Returns the standalone flow report HTML as a string with the report JSON and renderer JS inlined.
-   * @param {FlowResult} flow
-   * @return {string}
-   */
-  static generateFlowReportHtml(flow) {
-    const sanitizedJson = ReportGenerator.sanitizeJson(flow);
-    return ReportGenerator.replaceStrings(htmlReportAssets.FLOW_REPORT_TEMPLATE, [
-      /* eslint-disable max-len */
-      {search: '%%LIGHTHOUSE_FLOW_JSON%%', replacement: sanitizedJson},
-      {search: '%%LIGHTHOUSE_FLOW_JAVASCRIPT%%', replacement: htmlReportAssets.FLOW_REPORT_JAVASCRIPT},
-      {search: '/*%%LIGHTHOUSE_FLOW_CSS%%*/', replacement: htmlReportAssets.FLOW_REPORT_CSS},
-      {search: '/*%%LIGHTHOUSE_CSS%%*/', replacement: htmlReportAssets.REPORT_CSS},
-      /* eslint-enable max-len */
-    ]);
-  }
-
   /**
    * Converts the results to a CSV formatted string
    * Each row describes the result of 1 audit with
@@ -85,7 +57,7 @@ class ReportGenerator {
    *  - the score type that is used for the audit
    *  - the score value of the audit
    *
-   * @param {LHResult} lhr
+   * @param {LH.Result} lhr
    * @return {string}
    */
   static generateReportCSV(lhr) {
@@ -122,8 +94,8 @@ class ReportGenerator {
 
   /**
    * Creates the results output in a format based on the `mode`.
-   * @param {LHResult} lhr
-   * @param {LHResult['configSettings']['output']} outputModes
+   * @param {LH.Result} lhr
+   * @param {LH.Config.Settings['output']} outputModes
    * @return {string|string[]}
    */
   static generateReport(lhr, outputModes) {

package/report/test/clients/package.json

@@ -0,0 +1,4 @@
+{
+  "type": "module",
+  "//": "Any directory that uses `import ... from` or `export ...` must be type module. Temporary file until root package.json is type: module"
+}

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

@@ -7,9 +7,7 @@
 
 import {strict as assert} from 'assert';
 import fs from 'fs';
-
 import jsdom from 'jsdom';
-
 import testUtils from '../../../lighthouse-core/test/test-utils.js';
 import {prepareLabData} from '../../clients/psi.js';
 import {Util} from '../../renderer/util.js';
@@ -29,7 +27,7 @@ const sampleResultsStr =
 
 /* eslint-env jest */
 
-describe('PSI', () => {
+describe('DOM', () => {
   let document;
   beforeAll(() => {
     global.Util = Util;

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

@@ -5,12 +5,11 @@
  */
 'use strict';
 
-/* eslint-env jest */
+/* eslint-env jest, browser */
 
 import {strict as assert} from 'assert';
 
 import jsdom from 'jsdom';
-
 import {Util} from '../../renderer/util.js';
 import {I18n} from '../../renderer/i18n.js';
 import {DOM} from '../../renderer/dom.js';
@@ -256,9 +255,7 @@ describe('CategoryRenderer', () => {
       const categoryDOM = renderer.render(a11yCategory, sampleResults.categoryGroups);
       const percentageEl = categoryDOM.querySelectorAll('.lh-gauge__percentage');
 
-      const scoreText = percentageEl[0].textContent;
-      assert(!scoreText.includes('.'), 'score is integer');
-      assert(Number(scoreText) >= 0 && Number(scoreText) <= 100, 'score is 0-100');
+      assert.equal(percentageEl[0].textContent, '81', 'score shows a non-dash value');
     });
   });
 
@@ -273,9 +270,7 @@ describe('CategoryRenderer', () => {
       const categoryDOM = renderer.render(category, sampleResults.categoryGroups);
 
       const gauge = categoryDOM.querySelector('.lh-gauge__percentage');
-      const scoreText = gauge.textContent.trim();
-      assert(!scoreText.includes('.'), 'score is integer');
-      assert(Number(scoreText) >= 0 && Number(scoreText) <= 100, 'score is 0-100');
+      assert.equal(gauge.textContent.trim(), '81', 'score is 0-100');
 
       const score = categoryDOM.querySelector('.lh-category-header');
       const value = categoryDOM.querySelector('.lh-gauge__percentage');

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

@@ -8,10 +8,8 @@
 /* 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';
 import {normalizeTextNodeText} from '../../../build/build-report-components.js';
@@ -85,39 +83,6 @@ 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}`);
-      }
-    }
-  }
-
-  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;
-});
-
 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

@@ -10,7 +10,6 @@
 import {strict as assert} from 'assert';
 
 import jsdom from 'jsdom';
-
 import {Util} from '../../renderer/util.js';
 import {I18n} from '../../renderer/i18n.js';
 import {DOM} from '../../renderer/dom.js';
@@ -89,7 +88,7 @@ describe('DetailsRenderer', () => {
 
   it('renders tree structure', () => {
     const el = CriticalRequestChainRenderer.render(dom, DETAILS, detailsRenderer);
-    const chains = el.querySelectorAll('.lh-crc-node');
+    const chains = el.querySelectorAll('.crc-node');
 
     // Main request
     assert.equal(chains.length, 4, 'generates correct number of chain nodes');
@@ -100,14 +99,14 @@ describe('DetailsRenderer', () => {
     assert.equal(chains[0].querySelector('.lh-text__url a').target, '_blank');
 
     // Children
-    assert.ok(chains[1].querySelector('.lh-crc-node__tree-marker .lh-vert-right'));
-    assert.equal(chains[1].querySelectorAll('.lh-crc-node__tree-marker .lh-right').length, 2);
+    assert.ok(chains[1].querySelector('.crc-node__tree-marker .vert-right'));
+    assert.equal(chains[1].querySelectorAll('.crc-node__tree-marker .right').length, 2);
     assert.equal(chains[1].querySelector('.lh-text__url a').textContent, '/b.js');
     assert.equal(chains[1].querySelector('.lh-text__url a').href, 'https://example.com/b.js');
     assert.equal(chains[1].querySelector('.lh-text__url a').rel, 'noopener');
     assert.equal(chains[1].querySelector('.lh-text__url a').target, '_blank');
     assert.equal(chains[1].querySelector('.lh-text__url-host').textContent, '(example.com)');
-    const durationNodes = chains[1].querySelectorAll('.lh-crc-node__chain-duration');
+    const durationNodes = chains[1].querySelectorAll('.crc-node__chain-duration');
     assert.equal(durationNodes[0].textContent, ' - 5,000\xa0ms, ');
     // Note: actual transferSize is 2000 bytes but formatter formats to KiBs.
     assert.equal(durationNodes[1].textContent, '1.95\xa0KiB');

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

@@ -6,9 +6,7 @@
 'use strict';
 
 import {strict as assert} from 'assert';
-
 import jsdom from 'jsdom';
-
 import {DOM} from '../../renderer/dom.js';
 import {Util} from '../../renderer/util.js';
 import {I18n} from '../../renderer/i18n.js';
@@ -111,7 +109,7 @@ describe('DetailsRenderer', () => {
 
       const crcEl = renderer.render(details);
       assert.ok(crcEl.classList.contains('lh-crc-container'));
-      assert.strictEqual(crcEl.querySelectorAll('.lh-crc-node').length, 1);
+      assert.strictEqual(crcEl.querySelectorAll('.crc-node').length, 1);
     });
 
     it('renders opportunity details as a table', () => {

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

@@ -6,10 +6,9 @@
 'use strict';
 
 import {strict as assert} from 'assert';
-
 import {jest} from '@jest/globals';
-import jsdom from 'jsdom';
 
+import jsdom from 'jsdom';
 import {DOM} from '../../renderer/dom.js';
 import {Util} from '../../renderer/util.js';
 import {I18n} from '../../renderer/i18n.js';
@@ -20,16 +19,16 @@ describe('DOM', () => {
   /** @type {DOM} */
   let dom;
   let window;
-  let nativeCreateObjectURL;
 
   beforeAll(() => {
     Util.i18n = new I18n('en', {...Util.UIStrings});
     window = new jsdom.JSDOM().window;
 
-    // The Node version of URL.createObjectURL isn't compatible with the jsdom blob type,
-    // so we stub it.
-    nativeCreateObjectURL = URL.createObjectURL;
-    URL.createObjectURL = jest.fn(_ => `https://fake-origin/blahblah-blobid`);
+    // Make a lame "polyfill" since JSDOM doesn't have createObjectURL: https://github.com/jsdom/jsdom/issues/1721
+    const lameCOURL = jest.fn(_ => `https://fake-origin/blahblah-blobid`);
+    if (!URL.createObjectURL) {
+      URL.createObjectURL = lameCOURL;
+    }
 
     dom = new DOM(window.document);
     dom.setLighthouseChannel('someChannel');
@@ -37,7 +36,6 @@ describe('DOM', () => {
 
   afterAll(() => {
     Util.i18n = undefined;
-    URL.createObjectURL = nativeCreateObjectURL;
   });
 
   describe('createElement', () => {

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

@@ -6,7 +6,6 @@
 'use strict';
 
 import {strict as assert} from 'assert';
-
 import {Util} from '../../renderer/util.js';
 import {I18n} from '../../renderer/i18n.js';
 import {isNode12SmallIcu} from '../../../lighthouse-core/test/test-utils.js';

package/report/test/renderer/package.json

@@ -0,0 +1,4 @@
+{
+  "type": "module",
+  "//": "Any directory that uses `import ... from` or `export ...` must be type module. Temporary file until root package.json is type: module"
+}

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

@@ -5,12 +5,11 @@
  */
 'use strict';
 
-/* eslint-env jest */
+/* eslint-env jest, browser */
 
 import {strict as assert} from 'assert';
 
 import jsdom from 'jsdom';
-
 import {Util} from '../../renderer/util.js';
 import {I18n} from '../../renderer/i18n.js';
 import URL from '../../../lighthouse-core/lib/url-shim.js';
@@ -88,11 +87,9 @@ describe('PerfCategoryRenderer', () => {
     const categoryDOM = renderer.render(category, sampleResults.categoryGroups);
 
     const oppAudits = category.auditRefs.filter(audit => audit.group === 'load-opportunities' &&
-        !Util.showAsPassed(audit.result));
-    const oppElements = [...categoryDOM.querySelectorAll('.lh-audit--load-opportunity')];
-    expect(oppElements.map(e => e.id).sort()).toEqual(oppAudits.map(a => a.id).sort());
-    expect(oppElements.length).toBeGreaterThan(0);
-    expect(oppElements.length).toMatchInlineSnapshot('7');
+        audit.result.score !== 1 && audit.result.scoreDisplayMode !== 'notApplicable');
+    const oppElements = categoryDOM.querySelectorAll('.lh-audit--load-opportunity');
+    assert.equal(oppElements.length, oppAudits.length);
 
     const oppElement = oppElements[0];
     const oppSparklineBarElement = oppElement.querySelector('.lh-sparkline__bar');
@@ -117,7 +114,7 @@ describe('PerfCategoryRenderer', () => {
 
     const fakeCategory = Object.assign({}, category, {auditRefs: [auditWithError]});
     const categoryDOM = renderer.render(fakeCategory, sampleResults.categoryGroups);
-    const tooltipEl = categoryDOM.querySelector('.lh-audit--load-opportunity .lh-tooltip--error');
+    const tooltipEl = categoryDOM.querySelector('.lh-audit--load-opportunity .tooltip--error');
     assert.ok(tooltipEl, 'did not render error message');
     assert.ok(/Yikes!!/.test(tooltipEl.textContent));
   });
@@ -242,16 +239,16 @@ describe('PerfCategoryRenderer', () => {
       const href = renderer._getScoringCalculatorHref(categoryClone.auditRefs);
       const url = new URL(href);
       expect(url.hash.split('&')).toMatchInlineSnapshot(`
-Array [
-  "#FCP=6844",
-  "SI=8114",
-  "LCP=6844",
-  "TTI=8191",
-  "TBT=1221",
-  "CLS=0",
-  "FMP=6844",
-]
-`);
+        Array [
+          "#FCP=3969",
+          "SI=4417",
+          "LCP=4927",
+          "TTI=4927",
+          "TBT=117",
+          "CLS=0",
+          "FMP=3969",
+        ]
+      `);
     });
 
     it('also appends device and version number', () => {
@@ -263,18 +260,18 @@ Array [
       const url = new URL(href);
       try {
         expect(url.hash.split('&')).toMatchInlineSnapshot(`
-Array [
-  "#FCP=6844",
-  "SI=8114",
-  "LCP=6844",
-  "TTI=8191",
-  "TBT=1221",
-  "CLS=0.14",
-  "FMP=6844",
-  "device=mobile",
-  "version=6.0.0",
-]
-`);
+          Array [
+            "#FCP=3969",
+            "SI=4417",
+            "LCP=4927",
+            "TTI=4927",
+            "TBT=117",
+            "CLS=0.42",
+            "FMP=3969",
+            "device=mobile",
+            "version=6.0.0",
+          ]
+        `);
       } finally {
         Util.reportJson = null;
       }

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

@@ -5,12 +5,11 @@
  */
 'use strict';
 
-/* eslint-env jest */
+/* eslint-env jest, browser */
 
 import {strict as assert} from 'assert';
 
 import jsdom from 'jsdom';
-
 import {Util} from '../../renderer/util.js';
 import {I18n} from '../../renderer/i18n.js';
 import {DOM} from '../../renderer/dom.js';

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

@@ -10,7 +10,6 @@
 import {strict as assert} from 'assert';
 
 import jsdom from 'jsdom';
-
 import {Util} from '../../renderer/util.js';
 import URL from '../../../lighthouse-core/lib/url-shim.js';
 import {DOM} from '../../renderer/dom.js';

package/report/test/renderer/report-ui-features-test.js

@@ -8,10 +8,8 @@
 /* eslint-env jest */
 
 import {strict as assert} from 'assert';
-
 import jsdom from 'jsdom';
-
-import reportAssets from '../../generator/report-assets.js';
+import reportAssets from '../../report-assets.js';
 import {Util} from '../../renderer/util.js';
 import {DOM} from '../../renderer/dom.js';
 import {DetailsRenderer} from '../../renderer/details-renderer.js';
@@ -159,6 +157,16 @@ describe('ReportUIFeatures', () => {
             },
           },
         ];
+        // Sample json currently doesn't have any results for `unused-javascript`, so
+        // headings is empty. Can delete this block of code if that changes.
+        expect(lhr.audits['unused-javascript'].details.headings).toHaveLength(0);
+        lhr.audits['unused-javascript'].details.headings = [
+          /* t-disable max-len */
+          {key: 'url', valueType: 'url', subItemsHeading: {key: 'source', valueType: 'code'}},
+          {key: 'totalBytes', valueType: 'bytes', subItemsHeading: {key: 'sourceBytes'}},
+          {key: 'wastedBytes', valueType: 'bytes', subItemsHeading: {key: 'sourceWastedBytes'}},
+          /* eslint-enable max-len */
+        ];
 
         // Only third party URLs to test that checkbox is hidden
         lhr.audits['render-blocking-resources'].details.items = [
@@ -276,7 +284,7 @@ describe('ReportUIFeatures', () => {
       const lhr = JSON.parse(JSON.stringify(sampleResults));
       lhr.categories.performance.score = 0.5;
       const container = render(lhr);
-      assert.ok(container.querySelector('.lh-score100') === null, 'has no fireworks treatment');
+      assert.ok(container.querySelector('.score100') === null, 'has no fireworks treatment');
     });
 
     it('should render an all 100 report with fireworks', () => {
@@ -285,7 +293,7 @@ describe('ReportUIFeatures', () => {
         element.score = 1;
       });
       const container = render(lhr);
-      assert.ok(container.querySelector('.lh-score100'), 'has fireworks treatment');
+      assert.ok(container.querySelector('.score100'), 'has fireworks treatment');
     });
 
     it('should show fireworks for all 100s except PWA', () => {
@@ -296,7 +304,7 @@ describe('ReportUIFeatures', () => {
       lhr.categories.pwa.score = 0;
 
       const container = render(lhr);
-      assert.ok(container.querySelector('.lh-score100'), 'has fireworks treatment');
+      assert.ok(container.querySelector('.score100'), 'has fireworks treatment');
     });
 
     it('should not render fireworks if all core categories are not present', () => {
@@ -307,7 +315,7 @@ describe('ReportUIFeatures', () => {
         element.score = 1;
       });
       const container = render(lhr);
-      assert.ok(container.querySelector('.lh-score100') === null, 'has no fireworks treatment');
+      assert.ok(container.querySelector('.score100') === null, 'has no fireworks treatment');
     });
   });
 
@@ -334,32 +342,32 @@ describe('ReportUIFeatures', () => {
       window = dom.document().defaultView;
       const features = new ReportUIFeatures(dom);
       features.initFeatures(sampleResults);
-      dropDown = features._topbar._dropDownMenu;
+      dropDown = features._dropDown;
     });
 
     it('click should toggle active class', () => {
       dropDown._toggleEl.click();
-      assert.ok(dropDown._toggleEl.classList.contains('lh-active'));
+      assert.ok(dropDown._toggleEl.classList.contains('active'));
 
       dropDown._toggleEl.click();
-      assert.ok(!dropDown._toggleEl.classList.contains('lh-active'));
+      assert.ok(!dropDown._toggleEl.classList.contains('active'));
     });
 
 
     it('Escape key removes active class', () => {
       dropDown._toggleEl.click();
-      assert.ok(dropDown._toggleEl.classList.contains('lh-active'));
+      assert.ok(dropDown._toggleEl.classList.contains('active'));
 
       const escape = new window.KeyboardEvent('keydown', {keyCode: /* ESC */ 27});
       dom.document().dispatchEvent(escape);
-      assert.ok(!dropDown._toggleEl.classList.contains('lh-active'));
+      assert.ok(!dropDown._toggleEl.classList.contains('active'));
     });
 
     ['ArrowUp', 'ArrowDown', 'Enter', ' '].forEach((code) => {
       it(`'${code}' adds active class`, () => {
         const event = new window.KeyboardEvent('keydown', {code});
         dropDown._toggleEl.dispatchEvent(event);
-        assert.ok(dropDown._toggleEl.classList.contains('lh-active'));
+        assert.ok(dropDown._toggleEl.classList.contains('active'));
       });
     });
 
@@ -471,14 +479,14 @@ describe('ReportUIFeatures', () => {
     describe('onMenuFocusOut', () => {
       beforeEach(() => {
         dropDown._toggleEl.click();
-        assert.ok(dropDown._toggleEl.classList.contains('lh-active'));
+        assert.ok(dropDown._toggleEl.classList.contains('active'));
       });
 
       it('should toggle active class when focus relatedTarget is null', () => {
         const event = new window.FocusEvent('focusout', {relatedTarget: null});
         dropDown.onMenuFocusOut(event);
 
-        assert.ok(!dropDown._toggleEl.classList.contains('lh-active'));
+        assert.ok(!dropDown._toggleEl.classList.contains('active'));
       });
 
       it('should toggle active class when focus relatedTarget is document.body', () => {
@@ -486,7 +494,7 @@ describe('ReportUIFeatures', () => {
         const event = new window.FocusEvent('focusout', {relatedTarget});
         dropDown.onMenuFocusOut(event);
 
-        assert.ok(!dropDown._toggleEl.classList.contains('lh-active'));
+        assert.ok(!dropDown._toggleEl.classList.contains('active'));
       });
 
       it('should toggle active class when focus relatedTarget is _toggleEl', () => {
@@ -494,7 +502,7 @@ describe('ReportUIFeatures', () => {
         const event = new window.FocusEvent('focusout', {relatedTarget});
         dropDown.onMenuFocusOut(event);
 
-        assert.ok(!dropDown._toggleEl.classList.contains('lh-active'));
+        assert.ok(!dropDown._toggleEl.classList.contains('active'));
       });
 
       it('should not toggle active class when focus relatedTarget is a menu item', () => {
@@ -502,7 +510,7 @@ describe('ReportUIFeatures', () => {
         const event = new window.FocusEvent('focusout', {relatedTarget});
         dropDown.onMenuFocusOut(event);
 
-        assert.ok(dropDown._toggleEl.classList.contains('lh-active'));
+        assert.ok(dropDown._toggleEl.classList.contains('active'));
       });
     });
   });
@@ -512,10 +520,10 @@ describe('ReportUIFeatures', () => {
       const lhr = JSON.parse(JSON.stringify(sampleResults));
 
       expect(lhr.audits['script-treemap-data']).not.toBeUndefined();
-      expect(render(lhr).querySelector('.lh-button.lh-report-icon--treemap')).toBeTruthy();
+      expect(render(lhr).querySelector('.lh-button.report-icon--treemap')).toBeTruthy();
 
       delete lhr.audits['script-treemap-data'];
-      expect(render(lhr).querySelector('.lh-button.lh-report-icon--treemap')).toBeNull();
+      expect(render(lhr).querySelector('.lh-button.report-icon--treemap')).toBeNull();
     });
   });
 

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

@@ -10,7 +10,6 @@
 import {strict as assert} from 'assert';
 
 import jsdom from 'jsdom';
-
 import {Util} from '../../renderer/util.js';
 import {I18n} from '../../renderer/i18n.js';
 import {DOM} from '../../renderer/dom.js';

package/report/test/renderer/text-encoding-test.js

@@ -6,9 +6,7 @@
 'use strict';
 
 import fs from 'fs';
-
 import pako from 'pako';
-
 import {TextEncoding} from '../../renderer/text-encoding.js';
 import {LH_ROOT} from '../../../root.js';