lighthouse 9.6.8 → 10.0.0-dev.20230210

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

@@ -0,0 +1,179 @@
+/**
+ * @license Copyright 2020 The Lighthouse Authors. All Rights Reserved.
+ * 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.
+ */
+
+import assert from 'assert/strict';
+
+import {I18nFormatter} from '../../renderer/i18n-formatter.js';
+
+const NBSP = '\xa0';
+
+describe('i18n formatter', () => {
+  it('formats a number', () => {
+    const i18n = new I18nFormatter('en');
+    assert.strictEqual(i18n.formatNumber(10), '10');
+    assert.strictEqual(i18n.formatNumber(100.01), '100.01');
+    assert.strictEqual(i18n.formatNumber(13000.456), '13,000.456');
+    assert.strictEqual(i18n.formatNumber(13000.456444), '13,000.456');
+
+    assert.strictEqual(i18n.formatNumber(10, 0.1), '10.0');
+    assert.strictEqual(i18n.formatNumber(100.01, 0.1), '100.0');
+    assert.strictEqual(i18n.formatNumber(13000.456, 0.1), '13,000.5');
+
+    assert.strictEqual(i18n.formatNumber(0), '0');
+    assert.strictEqual(i18n.formatNumber(-0), '0');
+    assert.strictEqual(i18n.formatNumber(-0, 0.1), '0.0');
+    assert.strictEqual(i18n.formatNumber(0.000001), '0');
+    assert.strictEqual(i18n.formatNumber(-0.000001), '0');
+    assert.strictEqual(i18n.formatNumber(0.000001, 0.1), '0.0');
+    assert.strictEqual(i18n.formatNumber(-0.000001, 0.1), '0.0');
+
+    assert.strictEqual(i18n.formatNumber(10), '10');
+    assert.strictEqual(i18n.formatNumber(100.01), '100.01');
+    assert.strictEqual(i18n.formatNumber(13000.456, 0.1), '13,000.5');
+
+    assert.strictEqual(i18n.formatInteger(10), '10');
+    assert.strictEqual(i18n.formatInteger(100.01), '100');
+    assert.strictEqual(i18n.formatInteger(13000.6), '13,001');
+  });
+
+  it('formats a date', () => {
+    const i18n = new I18nFormatter('en');
+    const timestamp = i18n.formatDateTime('2017-04-28T23:07:51.189Z');
+    assert.ok(
+      timestamp.includes('Apr 27, 2017') ||
+      timestamp.includes('Apr 28, 2017') ||
+      timestamp.includes('Apr 29, 2017')
+    );
+  });
+
+  it('formats bytes', () => {
+    const i18n = new I18nFormatter('en');
+    assert.equal(i18n.formatBytesToKiB(100), `0.098${NBSP}KiB`);
+    assert.equal(i18n.formatBytesToKiB(100, 0.1), `0.1${NBSP}KiB`);
+    assert.equal(i18n.formatBytesToKiB(2000, 0.1), `2.0${NBSP}KiB`);
+    assert.equal(i18n.formatBytesToKiB(1014 * 1024, 0.1), `1,014.0${NBSP}KiB`);
+  });
+
+  it('formats bytes with different granularities', () => {
+    const i18n = new I18nFormatter('en');
+
+    let granularity = 10;
+    assert.strictEqual(i18n.formatBytes(15.0, granularity), `20${NBSP}bytes`);
+    assert.strictEqual(i18n.formatBytes(15.12345, granularity), `20${NBSP}bytes`);
+    assert.strictEqual(i18n.formatBytes(14.99999, granularity), `10${NBSP}bytes`);
+
+    granularity = 1;
+    assert.strictEqual(i18n.formatBytes(15.0, granularity), `15${NBSP}bytes`);
+    assert.strictEqual(i18n.formatBytes(15.12345, granularity), `15${NBSP}bytes`);
+    assert.strictEqual(i18n.formatBytes(15.54321, granularity), `16${NBSP}bytes`);
+
+    granularity = 0.1;
+    assert.strictEqual(i18n.formatBytes(15.0, granularity), `15.0${NBSP}bytes`);
+    assert.strictEqual(i18n.formatBytes(15.12345, granularity), `15.1${NBSP}bytes`);
+    assert.strictEqual(i18n.formatBytes(15.19999, granularity), `15.2${NBSP}bytes`);
+
+    granularity = 0.01;
+    assert.strictEqual(i18n.formatBytes(15.0, granularity), `15.00${NBSP}bytes`);
+    assert.strictEqual(i18n.formatBytes(15.12345, granularity), `15.12${NBSP}bytes`);
+    assert.strictEqual(i18n.formatBytes(15.19999, granularity), `15.20${NBSP}bytes`);
+  });
+
+  it('formats bytes with invalid granularity', () => {
+    const i18n = new I18nFormatter('en');
+    const granularity = 0.5;
+    const originalWarn = console.warn;
+
+    try {
+      console.warn = () => {};
+      assert.strictEqual(i18n.formatBytes(15.0, granularity), `15${NBSP}bytes`);
+      assert.strictEqual(i18n.formatBytes(15.12345, granularity), `15${NBSP}bytes`);
+      assert.strictEqual(i18n.formatBytes(15.54321, granularity), `16${NBSP}bytes`);
+    } finally {
+      console.warn = originalWarn;
+    }
+  });
+
+  it('formats kibibytes with different granularities', () => {
+    const i18n = new I18nFormatter('en');
+
+    let granularity = 10;
+    assert.strictEqual(i18n.formatBytesToKiB(5 * 1024, granularity), `10${NBSP}KiB`);
+    assert.strictEqual(i18n.formatBytesToKiB(4 * 1024, granularity), `0${NBSP}KiB`);
+
+    granularity = 1;
+    assert.strictEqual(i18n.formatBytesToKiB(5 * 1024, granularity), `5${NBSP}KiB`);
+    assert.strictEqual(i18n.formatBytesToKiB(4 * 1024 + 512, granularity), `5${NBSP}KiB`);
+    assert.strictEqual(i18n.formatBytesToKiB(4 * 1024 + 511, granularity), `4${NBSP}KiB`);
+
+    granularity = 0.01;
+    assert.strictEqual(i18n.formatBytesToKiB(5 * 1024, granularity), `5.00${NBSP}KiB`);
+    assert.strictEqual(i18n.formatBytesToKiB(5 * 1024 - 5, granularity), `5.00${NBSP}KiB`);
+    assert.strictEqual(i18n.formatBytesToKiB(5 * 1024 - 6, granularity), `4.99${NBSP}KiB`);
+  });
+
+  it('formats ms', () => {
+    const i18n = new I18nFormatter('en');
+    assert.equal(i18n.formatMilliseconds(123, 10), `120${NBSP}ms`);
+    assert.equal(i18n.formatMilliseconds(2456.5, 0.1), `2,456.5${NBSP}ms`);
+    assert.equal(i18n.formatMilliseconds(0.000001), `0${NBSP}ms`);
+    assert.equal(i18n.formatMilliseconds(-0.000001), `0${NBSP}ms`);
+  });
+
+  it('formats a duration', () => {
+    const i18n = new I18nFormatter('en');
+    assert.equal(i18n.formatDuration(60 * 1000), '1m');
+    assert.equal(i18n.formatDuration(60 * 60 * 1000 + 5000), '1h 5s');
+    assert.equal(i18n.formatDuration(28 * 60 * 60 * 1000 + 5000), '1d 4h 5s');
+  });
+
+  it('formats a duration based on locale', () => {
+    let i18n = new I18nFormatter('de');
+    assert.equal(i18n.formatDuration(60 * 1000), `1${NBSP}Min.`);
+    assert.equal(i18n.formatDuration(60 * 60 * 1000 + 5000), `1${NBSP}Std. 5${NBSP}Sek.`);
+    assert.equal(
+      i18n.formatDuration(28 * 60 * 60 * 1000 + 5000), `1${NBSP}T 4${NBSP}Std. 5${NBSP}Sek.`);
+
+    // Yes, this is actually backwards (s h d).
+    i18n = new I18nFormatter('ar');
+    /* eslint-disable no-irregular-whitespace */
+    assert.equal(i18n.formatDuration(60 * 1000), `١${NBSP}د`);
+    assert.equal(i18n.formatDuration(60 * 60 * 1000 + 5000), `١${NBSP}س ٥${NBSP}ث`);
+    assert.equal(i18n.formatDuration(28 * 60 * 60 * 1000 + 5000), `١ ي ٤ س ٥ ث`);
+    /* eslint-enable no-irregular-whitespace */
+  });
+
+  it('formats numbers based on locale', () => {
+    // Requires full-icu or Intl polyfill.
+    const number = 12346.858558;
+
+    const i18n = new I18nFormatter('de');
+    assert.strictEqual(i18n.formatNumber(number), '12.346,859');
+    assert.strictEqual(i18n.formatBytesToKiB(number, 0.1), `12,1${NBSP}KiB`);
+    assert.strictEqual(i18n.formatMilliseconds(number, 10), `12.350${NBSP}ms`);
+    assert.strictEqual(i18n.formatSeconds(number), `12,347${NBSP}Sek.`);
+  });
+
+  it('uses decimal comma with en-XA test locale', () => {
+    // Requires full-icu or Intl polyfill.
+    const number = 12346.858558;
+
+    const i18n = new I18nFormatter('en-XA');
+    assert.strictEqual(i18n.formatNumber(number), '12.346,859');
+    assert.strictEqual(i18n.formatBytesToKiB(number, 0.1), `12,1${NBSP}KiB`);
+    assert.strictEqual(i18n.formatMilliseconds(number, 100), `12.300${NBSP}ms`);
+    assert.strictEqual(i18n.formatSeconds(number, 1), `12${NBSP}Sek.`);
+  });
+
+  it('should not crash on unknown locales', () => {
+    const i18n = new I18nFormatter('unknown-mystery-locale');
+    const timestamp = i18n.formatDateTime('2017-04-28T23:07:51.189Z');
+    assert.ok(
+      timestamp.includes('Apr 27, 2017') ||
+      timestamp.includes('Apr 28, 2017') ||
+      timestamp.includes('Apr 29, 2017')
+    );
+  });
+});

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

@@ -3,29 +3,32 @@
  * 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 URL from '../../../lighthouse-core/lib/url-shim.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 {PerformanceCategoryRenderer} from '../../renderer/performance-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('PerfCategoryRenderer', () => {
   let category;
   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);
@@ -33,12 +36,12 @@ describe('PerfCategoryRenderer', () => {
     renderer = new PerformanceCategoryRenderer(dom, detailsRenderer);
 
     // TODO: don't call a LH.ReportResult `sampleResults`, which is typically always LH.Result
-    sampleResults = Util.prepareReportResult(sampleResultsOrig);
+    sampleResults = ReportUtils.prepareReportResult(sampleResultsOrig);
     category = sampleResults.categories.performance;
   });
 
-  afterAll(() => {
-    Util.i18n = undefined;
+  after(() => {
+    Globals.i18n = undefined;
   });
 
   it('renders the category header', () => {
@@ -71,11 +74,10 @@ describe('PerfCategoryRenderer', () => {
       Array.from(timelineElements).map(el => el.id),
       [
         'first-contentful-paint',
-        'interactive',
-        'speed-index',
-        'total-blocking-time',
         'largest-contentful-paint',
+        'total-blocking-time',
         'cumulative-layout-shift',
+        'speed-index',
       ]
     );
   });
@@ -121,7 +123,7 @@ describe('PerfCategoryRenderer', () => {
     const disclamerLink = disclaimerEl.querySelector('a');
     assert.ok(disclamerLink, 'disclaimer contains coverted markdown link');
     const disclamerUrl = new URL(disclamerLink.href);
-    assert.strictEqual(disclamerUrl.hostname, 'web.dev');
+    assert.strictEqual(disclamerUrl.hostname, 'developer.chrome.com');
     const calcLink = disclaimerEl.querySelector('a.lh-calclink');
     assert.ok(calcLink, 'disclaimer contains scorecalc link');
     assert.strictEqual(new URL(calcLink.href).hostname, 'googlechrome.github.io');
@@ -154,11 +156,11 @@ describe('PerfCategoryRenderer', () => {
     const oppAudits = category.auditRefs.filter(audit =>
       audit.result.details &&
       audit.result.details.type === 'opportunity' &&
-      !Util.showAsPassed(audit.result));
+      !ReportUtils.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');
+    expect(oppElements.length).toMatchInlineSnapshot('6');
 
     const oppElement = oppElements[0];
     const oppSparklineBarElement = oppElement.querySelector('.lh-sparkline__bar');
@@ -223,7 +225,7 @@ describe('PerfCategoryRenderer', () => {
     const diagnosticAuditIds = category.auditRefs.filter(audit => {
       return !audit.group &&
         !(audit.result.details && audit.result.details.type === 'opportunity') &&
-        !Util.showAsPassed(audit.result);
+        !ReportUtils.showAsPassed(audit.result);
     }).map(audit => audit.id).sort();
     assert.ok(diagnosticAuditIds.length > 0);
 
@@ -238,7 +240,7 @@ describe('PerfCategoryRenderer', () => {
 
     const passedAudits = category.auditRefs.filter(audit =>
       !audit.group &&
-      Util.showAsPassed(audit.result));
+      ReportUtils.showAsPassed(audit.result));
     const passedElements = passedSection.querySelectorAll('.lh-audit');
     assert.equal(passedElements.length, passedAudits.length);
   });
@@ -324,18 +326,18 @@ describe('PerfCategoryRenderer', () => {
       expect(url.hash.split('&')).toMatchInlineSnapshot(`
 Array [
   "#FCP=6844",
-  "TTI=8191",
-  "SI=8114",
+  "LCP=9320",
   "TBT=1221",
-  "LCP=6844",
   "CLS=0",
+  "SI=8114",
+  "TTI=8191",
   "FMP=6844",
 ]
 `);
     });
 
     it('also appends device and version number', () => {
-      Util.reportJson = {
+      Globals.reportJson = {
         configSettings: {formFactor: 'mobile'},
         lighthouseVersion: '6.0.0',
       };
@@ -345,22 +347,22 @@ Array [
         expect(url.hash.split('&')).toMatchInlineSnapshot(`
 Array [
   "#FCP=6844",
-  "TTI=8191",
-  "SI=8114",
+  "LCP=9320",
   "TBT=1221",
-  "LCP=6844",
   "CLS=0.14",
+  "SI=8114",
+  "TTI=8191",
   "FMP=6844",
   "device=mobile",
   "version=6.0.0",
 ]
 `);
       } finally {
-        Util.reportJson = null;
+        Globals.reportJson = null;
       }
     });
 
-    it('uses null if the metric is missing its value', () => {
+    it('uses null if the metric\'s value is undefined', () => {
       const categoryClone = JSON.parse(JSON.stringify(category));
       const lcp = categoryClone.auditRefs.find(audit => audit.id === 'largest-contentful-paint');
       lcp.result.numericValue = undefined;
@@ -368,6 +370,16 @@ Array [
       const href = renderer._getScoringCalculatorHref(categoryClone.auditRefs);
       expect(href).toContain('LCP=null');
     });
+
+    it('uses null if the metric\'s value is null (LR)', () => {
+      const categoryClone = JSON.parse(JSON.stringify(category));
+      const lcp = categoryClone.auditRefs.find(audit => audit.id === 'largest-contentful-paint');
+      // In LR, we think there might be some case where undefined becomes null, but we can't prove it.
+      lcp.result.numericValue = null;
+      lcp.result.score = null;
+      const href = renderer._getScoringCalculatorHref(categoryClone.auditRefs);
+      expect(href).toContain('LCP=null');
+    });
   });
 
   // This is done all in CSS, but tested here.
@@ -381,7 +393,7 @@ Array [
     let getDescriptionsAfterCheckedToggle;
 
     describe('works if there is a performance category', () => {
-      beforeAll(() => {
+      before(() => {
         container = renderer.render(category, sampleResults.categoryGroups);
         const metricsAuditGroup = container.querySelector(metricsSelector);
         toggle = metricsAuditGroup.querySelector(toggleSelector);

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

@@ -3,35 +3,39 @@
  * 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, UIStrings} 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 {PwaCategoryRenderer} from '../../renderer/pwa-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('PwaCategoryRenderer', () => {
   let category;
   let pwaRenderer;
   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);
     pwaRenderer = new PwaCategoryRenderer(dom, detailsRenderer);
 
-    sampleResults = Util.prepareReportResult(sampleResultsOrig);
+    sampleResults = ReportUtils.prepareReportResult(sampleResultsOrig);
   });
 
   beforeEach(() => {
@@ -40,8 +44,8 @@ describe('PwaCategoryRenderer', () => {
     category = JSON.parse(JSON.stringify(pwaCategory));
   });
 
-  afterAll(() => {
-    Util.i18n = undefined;
+  after(() => {
+    Globals.i18n = undefined;
   });
 
   it('renders the regular audits', () => {
@@ -259,7 +263,7 @@ describe('PwaCategoryRenderer', () => {
 
       const percentageElem = badgeGauge.querySelector('.lh-gauge__percentage');
       assert.strictEqual(percentageElem.textContent, '?');
-      assert.strictEqual(percentageElem.title, Util.UIStrings.errorLabel);
+      assert.strictEqual(percentageElem.title, UIStrings.errorLabel);
     });
 
     it('renders score gauges with unique ids for items in <defs>', () => {

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

@@ -3,31 +3,32 @@
  * 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 puppeteer from 'puppeteer';
 
-import sampleResults from '../../../lighthouse-core/test/results/sample_v2.json';
-import reportGenerator from '../../generator/report-generator.js';
-import axeLib from '../../../lighthouse-core/lib/axe.js';
+import {ReportGenerator} from '../../generator/report-generator.js';
+import {axeSource} from '../../../core/lib/axe.js';
+import {readJson} from '../../../core/test/test-utils.js';
+
+const sampleResults = readJson('../../../core/test/results/sample_v2.json', import.meta);
 
 describe('ReportRendererAxe', () => {
   describe('with aXe', () => {
     let browser;
 
-    beforeAll(async () => {
+    before(async () => {
       browser = await puppeteer.launch();
     });
 
-    afterAll(async () => {
+    after(async () => {
       await browser.close();
     });
 
+    // This test takes 10s on fast hardware, but can take longer in CI.
+    // https://github.com/dequelabs/axe-core/tree/b573b1c1/doc/examples/jest_react#timeout-issues
     it('renders without axe violations', async () => {
       const page = await browser.newPage();
-      const htmlReport = reportGenerator.generateReportHtml(sampleResults);
+      const htmlReport = ReportGenerator.generateReportHtml(sampleResults);
       await page.setContent(htmlReport);
 
       // Superset of Lighthouse's aXe config
@@ -51,7 +52,7 @@ describe('ReportRendererAxe', () => {
         },
       };
 
-      await page.evaluate(axeLib.source);
+      await page.evaluate(axeSource);
       // eslint-disable-next-line no-undef
       const axeResults = await page.evaluate(config => axe.run(config), config);
 
@@ -79,10 +80,6 @@ describe('ReportRendererAxe', () => {
         };
       });
       expect(axeSummary).toMatchSnapshot();
-    },
-    // This test takes 10s on fast hardware, but can take longer in CI.
-    // https://github.com/dequelabs/axe-core/tree/b573b1c1/doc/examples/jest_react#timeout-issues
-    /* timeout= */ 20_000
-    );
+    });
   });
 });

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

@@ -3,22 +3,20 @@
  * 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 {jest} from '@jest/globals';
+import jestMock from 'jest-mock';
 
-import {Util} from '../../renderer/util.js';
-import URL from '../../../lighthouse-core/lib/url-shim.js';
+import {ReportUtils} from '../../renderer/report-utils.js';
 import {DOM} from '../../renderer/dom.js';
 import {DetailsRenderer} from '../../renderer/details-renderer.js';
 import {CategoryRenderer} from '../../renderer/category-renderer.js';
 import {ReportRenderer} from '../../renderer/report-renderer.js';
-import sampleResultsOrig from '../../../lighthouse-core/test/results/sample_v2.json';
+import {readJson} from '../../../core/test/test-utils.js';
+
+const sampleResultsOrig = readJson('../../../core/test/results/sample_v2.json', import.meta);
 
 const TIMESTAMP_REGEX = /\d+, \d{4}.*\d+:\d+/;
 
@@ -26,8 +24,8 @@ describe('ReportRenderer', () => {
   let renderer;
   let sampleResults;
 
-  beforeAll(() => {
-    global.console.warn = jest.fn();
+  before(() => {
+    global.console.warn = jestMock.fn();
 
     // Stub out matchMedia for Node.
     global.matchMedia = function() {
@@ -43,10 +41,10 @@ describe('ReportRenderer', () => {
     const detailsRenderer = new DetailsRenderer(dom);
     const categoryRenderer = new CategoryRenderer(dom, detailsRenderer);
     renderer = new ReportRenderer(dom, categoryRenderer);
-    sampleResults = Util.prepareReportResult(sampleResultsOrig);
+    sampleResults = ReportUtils.prepareReportResult(sampleResultsOrig);
   });
 
-  afterAll(() => {
+  after(() => {
     global.self = undefined;
     global.matchMedia = undefined;
   });
@@ -73,7 +71,10 @@ describe('ReportRenderer', () => {
 
     it('renders a topbar', () => {
       const topbar = renderer._renderReportTopbar(sampleResults);
-      assert.equal(topbar.querySelector('.lh-topbar__url').textContent, sampleResults.finalUrl);
+      assert.equal(
+        topbar.querySelector('.lh-topbar__url').textContent,
+        sampleResults.finalDisplayedUrl
+      );
     });
 
     it('renders a header', () => {
@@ -216,10 +217,11 @@ describe('ReportRenderer', () => {
       expect(items.length).toBeGreaterThanOrEqual(6);
 
       const itemsTxt = items.map(el => `${el.textContent} ${el.title}`).join('\n');
-      expect(itemsTxt).toContain('Moto G4');
+      expect(itemsTxt).toContain('Moto G Power');
       expect(itemsTxt).toContain('RTT');
       expect(itemsTxt).toMatch(/\dx/);
       expect(itemsTxt).toContain(sampleResults.environment.networkUserAgent);
+      expect(itemsTxt).toMatch('412x823, DPR 1.75');
     });
   });
 
@@ -231,7 +233,7 @@ describe('ReportRenderer', () => {
     const container = renderer._dom.document().body;
     const output = renderer.renderReport(sampleResults, container);
 
-    const DOCS_ORIGINS = ['https://developers.google.com', 'https://web.dev'];
+    const DOCS_ORIGINS = ['https://developers.google.com', 'https://web.dev', 'https://developer.chrome.com'];
     const utmChannels = [...output.querySelectorAll('a[href*="utm_source=lighthouse"')]
       .map(a => new URL(a.href))
       .filter(url => DOCS_ORIGINS.includes(url.origin))