lighthouse 8.6.0 → 9.0.0-dev.20211118

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

@@ -0,0 +1,70 @@
+/**
+ * @license Copyright 2021 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.
+ */
+
+'use strict';
+
+import fs from 'fs';
+
+import jsdom from 'jsdom';
+import {jest} from '@jest/globals';
+
+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 */
+
+describe('lighthouseRenderer bundle', () => {
+  let document;
+  beforeAll(() => {
+    global.console.warn = jest.fn();
+
+    const {window} = new jsdom.JSDOM();
+    document = window.document;
+
+    global.window = global.self = window;
+    global.window.requestAnimationFrame = fn => fn();
+    // Stub out matchMedia for Node.
+    global.self.matchMedia = function() {
+      return {
+        addListener: function() {},
+      };
+    };
+    global.window.ResizeObserver = class ResizeObserver {
+      observe() { }
+      unobserve() { }
+    };
+  });
+
+  afterAll(() => {
+    global.window = global.self = undefined;
+  });
+
+
+  it('renders an LHR to DOM', () => {
+    const lhr = /** @type {LH.Result} */ JSON.parse(sampleResultsStr);
+    const reportContainer = document.body;
+    reportContainer.classList.add('lh-vars', 'lh-root');
+
+    const dom = new lighthouseRenderer.DOM(reportContainer.ownerDocument);
+    const renderer = new lighthouseRenderer.ReportRenderer(dom);
+    renderer.renderReport(lhr, reportContainer);
+    const features = new lighthouseRenderer.ReportUIFeatures(renderer._dom);
+    features.initFeatures(lhr);
+
+
+    // Check that the report exists and has some content.
+    expect(reportContainer instanceof document.defaultView.Element).toBeTruthy();
+    expect(reportContainer.outerHTML.length).toBeGreaterThan(50000);
+
+    const title = reportContainer.querySelector('.lh-audit-group--metrics')
+      .querySelector('.lh-audit-group__title');
+    expect(title.textContent).toEqual('Metrics');
+  });
+});

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

@@ -197,8 +197,8 @@ describe('CategoryRenderer', () => {
         'score shows informative and dash icon');
 
     assert.ok(pwaCategory.manualDescription);
-    const description = categoryDOM
-      .querySelector('.lh-clump--manual .lh-audit-group__description').textContent;
+    const description = categoryDOM.querySelector('.lh-clump--manual').closest('.lh-audit-group')
+      .querySelector('.lh-audit-group__description').textContent;
     // may need to be adjusted if description includes a link at the beginning
     assert.ok(description.startsWith(pwaCategory.manualDescription.substring(0, 20)),
         'no manual description');
@@ -409,6 +409,10 @@ describe('CategoryRenderer', () => {
       const passingRefs = categoryClone.auditRefs.filter(ref => ref.result.score === 1);
       passingRefs[0].result.warnings = ['Some warning'];
       passingRefs[1].result.warnings = ['Some warning'];
+      // Make one audit n/a
+      const audit = categoryClone.auditRefs.find(ref => ref.id === 'themed-omnibox');
+      audit.result.scoreDisplayMode = 'notApplicable';
+      audit.result.score = null;
 
       const elem = renderer.render(categoryClone, sampleResults.categoryGroups);
       const passedAudits = elem.querySelectorAll('.lh-clump--passed .lh-audit');
@@ -418,7 +422,7 @@ describe('CategoryRenderer', () => {
       const naAudits = elem.querySelectorAll('.lh-clump--notapplicable .lh-audit');
 
       assert.equal(passedAudits.length, 0);
-      assert.equal(failedAudits.length, 6);
+      assert.equal(failedAudits.length, 5);
       assert.equal(warningAudits.length, 2);
       assert.equal(manualAudits.length, 3);
       assert.equal(naAudits.length, 1);
@@ -495,4 +499,73 @@ describe('CategoryRenderer', () => {
       assert.ok(shouldBeWarning[0].textContent.includes(passingWarning));
     });
   });
+
+  describe('renderCategoryScore', () => {
+    it('removes label if omitLabel is true', () => {
+      const options = {omitLabel: true};
+      const categoryScore = renderer.renderCategoryScore(
+        sampleResults.categories.performance,
+        {},
+        options
+      );
+      const label = categoryScore.querySelector('.lh-gauge__label,.lh-fraction__label');
+      assert.ok(!label);
+    });
+
+    it('uses custom callback if present', () => {
+      const options = {
+        onPageAnchorRendered: link => {
+          link.href = '#index=0&anchor=performance';
+        },
+      };
+      const categoryScore = renderer.renderCategoryScore(
+        sampleResults.categories.performance,
+        {},
+        options
+      );
+      const link = categoryScore.querySelector('a');
+      assert.equal(link.hash, '#index=0&anchor=performance');
+    });
+  });
+
+  it('renders audits by weight', () => {
+    const defaultAuditRef = {
+      title: '',
+      description: '',
+      scoreDisplayMode: 'numeric',
+      score: 0,
+      warnings: [],
+    };
+    const category = {
+      id: 'test',
+      title: 'Test',
+      score: 0,
+      auditRefs: [{
+        id: 'audit-1',
+        weight: 0,
+        result: {
+          id: 'audit-1',
+          ...defaultAuditRef,
+        },
+      }, {
+        id: 'audit-2',
+        weight: 1,
+        result: {
+          id: 'audit-2',
+          ...defaultAuditRef,
+        },
+      }, {
+        id: 'audit-3',
+        weight: 0.5,
+        result: {
+          id: 'audit-3',
+          ...defaultAuditRef,
+        },
+      }],
+    };
+    const categoryDOM = renderer.render(category);
+
+    const auditEls = [...categoryDOM.querySelectorAll('.lh-audit')];
+    expect(auditEls.map(el => el.id)).toEqual(['audit-2', 'audit-3', 'audit-1']);
+  });
 });

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

@@ -9,7 +9,6 @@ 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';
 
 // Require i18n to make sure Intl is polyfilled in Node without full-icu for testing.
 // When Util is run in a browser, Intl will be supplied natively (IE11+).
@@ -108,9 +107,6 @@ describe('util helpers', () => {
   });
 
   it('formats numbers based on locale', () => {
-    // COMPAT: Node 12 only has 'en' by default.
-    if (isNode12SmallIcu()) return;
-
     // Requires full-icu or Intl polyfill.
     const number = 12346.858558;
 
@@ -122,9 +118,6 @@ describe('util helpers', () => {
   });
 
   it('uses decimal comma with en-XA test locale', () => {
-    // COMPAT: Node 12 only has 'en' by default.
-    if (isNode12SmallIcu()) return;
-
     // Requires full-icu or Intl polyfill.
     const number = 12346.858558;
 

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

@@ -67,6 +67,17 @@ describe('PerfCategoryRenderer', () => {
     const timelineElements = metricsSection.querySelectorAll('.lh-metric');
     const nontimelineElements = metricsSection.querySelectorAll('.lh-audit');
     assert.equal(timelineElements.length + nontimelineElements.length, metricAudits.length);
+    assert.deepStrictEqual(
+      Array.from(timelineElements).map(el => el.id),
+      [
+        'first-contentful-paint',
+        'interactive',
+        'speed-index',
+        'total-blocking-time',
+        'largest-contentful-paint',
+        'cumulative-layout-shift',
+      ]
+    );
   });
 
   it('does not render metrics section if no metric group audits', () => {
@@ -84,7 +95,7 @@ describe('PerfCategoryRenderer', () => {
   it('renders the metrics variance disclaimer as markdown', () => {
     const categoryDOM = renderer.render(category, sampleResults.categoryGroups);
     const disclaimerEl =
-        categoryDOM.querySelector('.lh-audit-group--metrics > .lh-metrics__disclaimer');
+        categoryDOM.querySelector('.lh-category-header__description > .lh-metrics__disclaimer');
 
     assert.ok(disclaimerEl.textContent.includes('Values are estimated'));
     const disclamerLink = disclaimerEl.querySelector('a');
@@ -96,11 +107,23 @@ describe('PerfCategoryRenderer', () => {
     assert.strictEqual(new URL(calcLink.href).hostname, 'googlechrome.github.io');
   });
 
+  it('ignores hidden audits', () => {
+    const categoryDOM = renderer.render(category, sampleResults.categoryGroups);
+
+    const hiddenAudits = category.auditRefs.filter(audit => audit.group === 'hidden');
+    const auditElements = [...categoryDOM.querySelectorAll('.lh-audit')];
+    const matchingElements = auditElements
+      .filter(el => hiddenAudits.some(audit => audit.id === el.id));
+    expect(matchingElements).toHaveLength(0);
+  });
+
   it('renders the failing performance opportunities', () => {
     const categoryDOM = renderer.render(category, sampleResults.categoryGroups);
 
-    const oppAudits = category.auditRefs.filter(audit => audit.group === 'load-opportunities' &&
-        !Util.showAsPassed(audit.result));
+    const oppAudits = category.auditRefs.filter(audit =>
+      audit.result.details &&
+      audit.result.details.type === 'opportunity' &&
+      !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);
@@ -120,10 +143,14 @@ describe('PerfCategoryRenderer', () => {
   it('renders performance opportunities with an errorMessage', () => {
     const auditWithError = {
       score: 0,
-      group: 'load-opportunities',
       result: {
         score: null, scoreDisplayMode: 'error', errorMessage: 'Yikes!!', title: 'Bug #2',
         description: '',
+        details: {
+          overallSavingsMs: 0,
+          items: [],
+          type: 'opportunity',
+        },
       },
     };
 
@@ -137,10 +164,14 @@ describe('PerfCategoryRenderer', () => {
   it('renders performance opportunities\' explanation', () => {
     const auditWithExplanation = {
       score: 0,
-      group: 'load-opportunities',
       result: {
         score: 0, scoreDisplayMode: 'numeric',
         numericValue: 100, explanation: 'Yikes!!', title: 'Bug #2', description: '',
+        details: {
+          overallSavingsMs: 0,
+          items: [],
+          type: 'opportunity',
+        },
       },
     };
 
@@ -159,7 +190,9 @@ describe('PerfCategoryRenderer', () => {
         '.lh-category > .lh-audit-group.lh-audit-group--diagnostics');
 
     const diagnosticAuditIds = category.auditRefs.filter(audit => {
-      return audit.group === 'diagnostics' && !Util.showAsPassed(audit.result);
+      return !audit.group &&
+        !(audit.result.details && audit.result.details.type === 'opportunity') &&
+        !Util.showAsPassed(audit.result);
     }).map(audit => audit.id).sort();
     assert.ok(diagnosticAuditIds.length > 0);
 
@@ -170,11 +203,11 @@ describe('PerfCategoryRenderer', () => {
 
   it('renders the passed audits', () => {
     const categoryDOM = renderer.render(category, sampleResults.categoryGroups);
-    const passedSection = categoryDOM.querySelector('.lh-category > .lh-clump--passed');
+    const passedSection = categoryDOM.querySelector('.lh-clump--passed');
 
     const passedAudits = category.auditRefs.filter(audit =>
-      audit.group && audit.group !== 'metrics' && audit.id !== 'performance-budget'
-        && Util.showAsPassed(audit.result));
+      !audit.group &&
+      Util.showAsPassed(audit.result));
     const passedElements = passedSection.querySelectorAll('.lh-audit');
     assert.equal(passedElements.length, passedAudits.length);
   });
@@ -187,10 +220,14 @@ describe('PerfCategoryRenderer', () => {
     it('handles erroring opportunities', () => {
       const auditWithDebug = {
         score: 0,
-        group: 'load-opportunities',
         result: {
           error: true, score: 0,
           numericValue: 100, explanation: 'Yikes!!', title: 'Bug #2',
+          details: {
+            overallSavingsMs: 0,
+            items: [],
+            type: 'opportunity',
+          },
         },
       };
       const wastedMs = renderer._getWastedMs(auditWithDebug);
@@ -256,10 +293,10 @@ describe('PerfCategoryRenderer', () => {
       expect(url.hash.split('&')).toMatchInlineSnapshot(`
 Array [
   "#FCP=6844",
-  "SI=8114",
-  "LCP=6844",
   "TTI=8191",
+  "SI=8114",
   "TBT=1221",
+  "LCP=6844",
   "CLS=0",
   "FMP=6844",
 ]
@@ -277,10 +314,10 @@ Array [
         expect(url.hash.split('&')).toMatchInlineSnapshot(`
 Array [
   "#FCP=6844",
-  "SI=8114",
-  "LCP=6844",
   "TTI=8191",
+  "SI=8114",
   "TBT=1221",
+  "LCP=6844",
   "CLS=0.14",
   "FMP=6844",
   "device=mobile",

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

@@ -107,12 +107,12 @@ describe('PwaCategoryRenderer', () => {
       const clone = JSON.parse(JSON.stringify(sampleResults));
       const category = clone.categories.pwa;
 
-      // Set everything to passing, except redirects-http set to n/a (as it is on localhost)
+      // Set everything to passing, except for one. (themed-omnibox chosen randomly)
       for (const auditRef of category.auditRefs) {
         auditRef.result.score = 1;
         auditRef.result.scoreDisplayMode = 'binary';
       }
-      const audit = category.auditRefs.find(ref => ref.id === 'redirects-http');
+      const audit = category.auditRefs.find(ref => ref.id === 'themed-omnibox');
       audit.result.scoreDisplayMode = 'notApplicable';
       audit.result.score = null;
 
@@ -249,10 +249,10 @@ describe('PwaCategoryRenderer', () => {
     });
   });
 
-  describe('#renderScoreGauge', () => {
+  describe('#renderCategoryScore', () => {
     it('renders an error score gauge in case of category error', () => {
       category.score = null;
-      const badgeGauge = pwaRenderer.renderScoreGauge(category, sampleResults.categoryGroups);
+      const badgeGauge = pwaRenderer.renderCategoryScore(category, sampleResults.categoryGroups);
 
       // Not a PWA gauge.
       assert.strictEqual(badgeGauge.querySelector('.lh-gauge--pwa__wrapper'), null);
@@ -263,11 +263,11 @@ describe('PwaCategoryRenderer', () => {
     });
 
     it('renders score gauges with unique ids for items in <defs>', () => {
-      const gauge1 = pwaRenderer.renderScoreGauge(category, sampleResults.categoryGroups);
+      const gauge1 = pwaRenderer.renderCategoryScore(category, sampleResults.categoryGroups);
       const gauge1Ids = [...gauge1.querySelectorAll('defs [id]')].map(el => el.id);
       assert.ok(gauge1Ids.length > 2);
 
-      const gauge2 = pwaRenderer.renderScoreGauge(category, sampleResults.categoryGroups);
+      const gauge2 = pwaRenderer.renderCategoryScore(category, sampleResults.categoryGroups);
       const gauge2Ids = [...gauge2.querySelectorAll('defs [id]')].map(el => el.id);
       assert.ok(gauge2Ids.length === gauge1Ids.length);
 

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

@@ -8,6 +8,7 @@
 /* eslint-env jest */
 
 import jsdom from 'jsdom';
+import {jest} from '@jest/globals';
 
 import {Util} from '../../renderer/util.js';
 import {DOM} from '../../renderer/dom.js';
@@ -23,6 +24,8 @@ describe('ReportRendererAxe', () => {
     let sampleResults;
 
     beforeAll(async () => {
+      global.console.warn = jest.fn();
+
       const {window} = new jsdom.JSDOM();
       const dom = new DOM(window.document);
       const detailsRenderer = new DetailsRenderer(dom);
@@ -46,11 +49,11 @@ describe('ReportRendererAxe', () => {
       global.Element = undefined;
     });
 
-    it('renders without axe violations', () => {
-      const container = renderer._dom._document.createElement('main');
+    it('renders without axe violations', async () => {
+      const container = renderer._dom.document().createElement('main');
       const output = renderer.renderReport(sampleResults, container);
 
-      renderer._dom._document.body.appendChild(container);
+      renderer._dom.document().body.appendChild(container);
 
       const config = {
         rules: {
@@ -70,17 +73,12 @@ describe('ReportRendererAxe', () => {
         },
       };
 
-      return new Promise(resolve => {
-        axe.run(output, config, (error, {violations}) => {
-          expect(error).toBeNull();
-          expect(violations).toEqual([]);
-          resolve();
-        });
-      });
-      // This test takes 40s on fast hardware, and 50-60s on GHA.
-      // https://github.com/dequelabs/axe-core/tree/b573b1c1/doc/examples/jest_react#timeout-issues
+      const axeResults = await axe.run(output, config);
+      expect(axeResults.violations).toEqual([]);
     },
-    /* timeout= */ 100 * 1000
+    // This test takes 40s on fast hardware, and 50-60s on GHA (but can take longer).
+    // https://github.com/dequelabs/axe-core/tree/b573b1c1/doc/examples/jest_react#timeout-issues
+    /* timeout= */ process.env.CI ? 200_000 : 60_000
     );
   });
 });

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

@@ -10,6 +10,7 @@
 import {strict as assert} from 'assert';
 
 import jsdom from 'jsdom';
+import {jest} from '@jest/globals';
 
 import {Util} from '../../renderer/util.js';
 import URL from '../../../lighthouse-core/lib/url-shim.js';
@@ -26,6 +27,8 @@ describe('ReportRenderer', () => {
   let sampleResults;
 
   beforeAll(() => {
+    global.console.warn = jest.fn();
+
     // Stub out matchMedia for Node.
     global.matchMedia = function() {
       return {
@@ -50,7 +53,7 @@ describe('ReportRenderer', () => {
 
   describe('renderReport', () => {
     it('should render a report', () => {
-      const container = renderer._dom._document.body;
+      const container = renderer._dom.document().body;
       const output = renderer.renderReport(sampleResults, container);
       assert.ok(output.querySelector('.lh-header-container'), 'has a header');
       assert.ok(output.querySelector('.lh-report'), 'has report body');
@@ -60,7 +63,7 @@ describe('ReportRenderer', () => {
     });
 
     it('renders additional reports by replacing the existing one', () => {
-      const container = renderer._dom._document.body;
+      const container = renderer._dom.document().body;
       const oldReport = Array.from(renderer.renderReport(sampleResults, container).children);
       const newReport = Array.from(renderer.renderReport(sampleResults, container).children);
       assert.ok(!oldReport.find(node => container.contains(node)), 'old report was removed');
@@ -86,11 +89,11 @@ describe('ReportRenderer', () => {
         auditRefs: [],
       };
 
-      const container = renderer._dom._document.body;
+      const container = renderer._dom.document().body;
       const output = renderer.renderReport(sampleResultsCopy, container);
 
       function isPWAGauge(el) {
-        return el.querySelector('.lh-gauge__label').textContent === 'Progressive Web App';
+        return el.querySelector('.lh-gauge__label').textContent === 'PWA';
       }
       function isPluginGauge(el) {
         return el.querySelector('.lh-gauge__label').textContent === 'Some Plugin';
@@ -119,6 +122,35 @@ describe('ReportRenderer', () => {
       }
     });
 
+    it('renders score gauges with custom callback', () => {
+      const sampleResultsCopy = JSON.parse(JSON.stringify(sampleResults));
+
+      const opts = {
+        onPageAnchorRendered: link => {
+          const id = link.hash.substring(1);
+          link.hash = `#index=0&anchor=${id}`;
+        },
+      };
+      const container = renderer._dom.document().body;
+      const output = renderer.renderReport(sampleResultsCopy, container, opts);
+      const anchors = output.querySelectorAll('a.lh-gauge__wrapper, a.lh-fraction__wrapper');
+      const hashes = Array.from(anchors).map(anchor => anchor.hash).filter(hash => hash);
+
+      // One set for the sticky header, on set for the gauges at the top.
+      assert.deepStrictEqual(hashes, [
+        '#index=0&anchor=performance',
+        '#index=0&anchor=accessibility',
+        '#index=0&anchor=best-practices',
+        '#index=0&anchor=seo',
+        '#index=0&anchor=pwa',
+        '#index=0&anchor=performance',
+        '#index=0&anchor=accessibility',
+        '#index=0&anchor=best-practices',
+        '#index=0&anchor=seo',
+        '#index=0&anchor=pwa',
+      ]);
+    });
+
     it('renders plugin score gauge', () => {
       const sampleResultsCopy = JSON.parse(JSON.stringify(sampleResults));
       sampleResultsCopy.categories['lighthouse-plugin-someplugin'] = {
@@ -126,7 +158,7 @@ describe('ReportRenderer', () => {
         title: 'Some Plugin',
         auditRefs: [],
       };
-      const container = renderer._dom._document.body;
+      const container = renderer._dom.document().body;
       const output = renderer.renderReport(sampleResultsCopy, container);
       const scoresHeaderElem = output.querySelector('.lh-scores-header');
 
@@ -140,7 +172,7 @@ describe('ReportRenderer', () => {
     });
 
     it('should not mutate a report object', () => {
-      const container = renderer._dom._document.body;
+      const container = renderer._dom.document().body;
       const originalResults = JSON.parse(JSON.stringify(sampleResults));
       renderer.renderReport(sampleResults, container);
       assert.deepStrictEqual(sampleResults, originalResults);
@@ -148,13 +180,13 @@ describe('ReportRenderer', () => {
 
     it('renders no warning section when no lighthouseRunWarnings occur', () => {
       const warningResults = Object.assign({}, sampleResults, {runWarnings: []});
-      const container = renderer._dom._document.body;
+      const container = renderer._dom.document().body;
       const output = renderer.renderReport(warningResults, container);
       assert.strictEqual(output.querySelector('.lh-warnings--toplevel'), null);
     });
 
     it('renders a warning section', () => {
-      const container = renderer._dom._document.body;
+      const container = renderer._dom.document().body;
       const output = renderer.renderReport(sampleResults, container);
 
       const warningEls = output.querySelectorAll('.lh-warnings--toplevel > ul > li');
@@ -165,7 +197,7 @@ describe('ReportRenderer', () => {
       const warningResults = Object.assign({}, sampleResults, {
         runWarnings: ['[I am a link](https://example.com/)'],
       });
-      const container = renderer._dom._document.body;
+      const container = renderer._dom.document().body;
       const output = renderer.renderReport(warningResults, container);
 
       const warningEls = output.querySelectorAll('.lh-warnings--toplevel ul li a');
@@ -179,17 +211,15 @@ describe('ReportRenderer', () => {
       assert.ok(/Generated by Lighthouse \d/.test(footerContent), 'includes lh version');
       assert.ok(footerContent.match(TIMESTAMP_REGEX), 'includes timestamp');
 
-      // Check runtime settings were populated.
-      const names = Array.from(footer.querySelectorAll('.lh-env__name'));
-      const descriptions = Array.from(footer.querySelectorAll('.lh-env__description'));
-      assert.ok(names.length >= 3);
-      assert.ok(descriptions.length >= 3);
-
-      const descriptionsTxt = descriptions.map(el => el.textContent).join('\n');
-      expect(descriptionsTxt).toContain('Moto G4');
-      expect(descriptionsTxt).toContain('RTT');
-      expect(descriptionsTxt).toMatch(/\dx/);
-      expect(descriptionsTxt).toContain(sampleResults.userAgent);
+      // Check env items were populated.
+      const items = Array.from(footer.querySelectorAll('.lh-meta__item'));
+      expect(items.length).toBeGreaterThanOrEqual(6);
+
+      const itemsTxt = items.map(el => `${el.textContent} ${el.title}`).join('\n');
+      expect(itemsTxt).toContain('Moto G4');
+      expect(itemsTxt).toContain('RTT');
+      expect(itemsTxt).toMatch(/\dx/);
+      expect(itemsTxt).toContain(sampleResults.environment.networkUserAgent);
     });
   });
 
@@ -198,7 +228,7 @@ describe('ReportRenderer', () => {
     // Make sure we have a channel in the LHR.
     assert.ok(lhrChannel.length > 2);
 
-    const container = renderer._dom._document.body;
+    const container = renderer._dom.document().body;
     const output = renderer.renderReport(sampleResults, container);
 
     const DOCS_ORIGINS = ['https://developers.google.com', 'https://web.dev'];
@@ -227,7 +257,7 @@ describe('ReportRenderer', () => {
 
     assert.ok(notApplicableCount > 20); // Make sure something's being tested.
 
-    const container = renderer._dom._document.body;
+    const container = renderer._dom.document().body;
     const reportElement = renderer.renderReport(sampleResults, container);
     const notApplicableElementCount = reportElement
       .querySelectorAll('.lh-audit--notapplicable').length;