lighthouse 8.6.0-dev.20211102 → 8.6.0-dev.20211106

package/report/renderer/element-screenshot-renderer.js

@@ -18,7 +18,7 @@
 /**
  * @typedef InstallOverlayFeatureParams
  * @property {DOM} dom
- * @property {Element} reportEl
+ * @property {Element} rootEl
  * @property {Element} overlayContainerEl
  * @property {LH.Audit.Details.FullPageScreenshot} fullPageScreenshot
  */
@@ -135,7 +135,7 @@ export class ElementScreenshotRenderer {
    * @param {LH.Audit.Details.FullPageScreenshot['screenshot']} screenshot
    */
   static installFullPageScreenshot(el, screenshot) {
-    el.style.setProperty('--element-screenshot-url', `url(${screenshot.data})`);
+    el.style.setProperty('--element-screenshot-url', `url('${screenshot.data}')`);
   }
 
   /**
@@ -143,14 +143,14 @@ export class ElementScreenshotRenderer {
    * @param {InstallOverlayFeatureParams} opts
    */
   static installOverlayFeature(opts) {
-    const {dom, reportEl, overlayContainerEl, fullPageScreenshot} = opts;
+    const {dom, rootEl, overlayContainerEl, fullPageScreenshot} = opts;
     const screenshotOverlayClass = 'lh-screenshot-overlay--enabled';
     // Don't install the feature more than once.
-    if (reportEl.classList.contains(screenshotOverlayClass)) return;
-    reportEl.classList.add(screenshotOverlayClass);
+    if (rootEl.classList.contains(screenshotOverlayClass)) return;
+    rootEl.classList.add(screenshotOverlayClass);
 
     // Add a single listener to the provided element to handle all clicks within (event delegation).
-    reportEl.addEventListener('click', e => {
+    rootEl.addEventListener('click', e => {
       const target = /** @type {?HTMLElement} */ (e.target);
       if (!target) return;
       // Only activate the overlay for clicks on the screenshot *preview* of an element, not the full-size too.

package/report/renderer/features-util.js

@@ -14,7 +14,7 @@
  * @param {boolean} [force]
  */
 export function toggleDarkTheme(dom, force) {
-  const el = dom.find('.lh-vars', dom.document());
+  const el = dom.rootEl;
   // This seems unnecessary, but in DevTools, passing "undefined" as the second
   // parameter acts like passing "false".
   // https://github.com/ChromeDevTools/devtools-frontend/blob/dd6a6d4153647c2a4203c327c595692c5e0a4256/front_end/dom_extension/DOMExtension.js#L809-L819

package/report/renderer/report-renderer.js

@@ -36,22 +36,43 @@ export class ReportRenderer {
   constructor(dom) {
     /** @type {DOM} */
     this._dom = dom;
+    /** @type {LH.Renderer.Options} */
+    this._opts = {};
   }
 
   /**
    * @param {LH.Result} lhr
-   * @param {Element} container Parent element to render the report into.
+   * @param {HTMLElement?} rootEl Report root element containing the report
+   * @param {LH.Renderer.Options=} opts
    * @return {!Element}
    */
-  renderReport(lhr, container) {
+  renderReport(lhr, rootEl, opts) {
+    // Allow legacy report rendering API
+    if (!this._dom.rootEl && rootEl) {
+      console.warn('Please adopt the new report API in renderer/api.js.');
+      const closestRoot = rootEl.closest('.lh-root');
+      if (closestRoot) {
+        this._dom.rootEl = /** @type {HTMLElement} */ (closestRoot);
+      } else {
+        rootEl.classList.add('lh-root', 'lh-vars');
+        this._dom.rootEl = rootEl;
+      }
+    } else if (this._dom.rootEl && rootEl) {
+      // Handle legacy flow-report case
+      this._dom.rootEl = rootEl;
+    }
+    if (opts) {
+      this._opts = opts;
+    }
+
     this._dom.setLighthouseChannel(lhr.configSettings.channel || 'unknown');
 
     const report = Util.prepareReportResult(lhr);
 
-    container.textContent = ''; // Remove previous report.
-    container.appendChild(this._renderReport(report));
+    this._dom.rootEl.textContent = ''; // Remove previous report.
+    this._dom.rootEl.appendChild(this._renderReport(report));
 
-    return container;
+    return this._dom.rootEl;
   }
 
   /**
@@ -197,7 +218,7 @@ export class ReportRenderer {
         gaugeWrapperEl.addEventListener('click', e => {
           if (!gaugeWrapperEl.matches('[href^="#"]')) return;
           const selector = gaugeWrapperEl.getAttribute('href');
-          const reportRoot = gaugeWrapperEl.closest('.lh-vars');
+          const reportRoot = this._dom.rootEl;
           if (!selector || !reportRoot) return;
           const destEl = this._dom.find(selector, reportRoot);
           e.preventDefault();
@@ -301,9 +322,11 @@ export class ReportRenderer {
 
     const reportFragment = this._dom.createFragment();
     reportFragment.append(this._dom.createComponent('styles'));
-    const topbarDocumentFragment = this._renderReportTopbar(report);
 
-    reportFragment.appendChild(topbarDocumentFragment);
+    if (!this._opts.omitTopbar) {
+      reportFragment.appendChild(this._renderReportTopbar(report));
+    }
+
     reportFragment.appendChild(reportContainer);
     reportContainer.appendChild(headerContainer);
     reportContainer.appendChild(reportSection);
@@ -311,7 +334,7 @@ export class ReportRenderer {
 
     if (fullPageScreenshot) {
       ElementScreenshotRenderer.installFullPageScreenshot(
-        reportContainer, fullPageScreenshot.screenshot);
+        this._dom.rootEl, fullPageScreenshot.screenshot);
     }
 
     return reportFragment;

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

@@ -40,16 +40,17 @@ function getTableRows(tableEl) {
 export class ReportUIFeatures {
   /**
    * @param {DOM} dom
+   * @param {LH.Renderer.Options} opts
    */
-  constructor(dom) {
+  constructor(dom, opts = {}) {
     /** @type {LH.Result} */
     this.json; // eslint-disable-line no-unused-expressions
     /** @type {DOM} */
     this._dom = dom;
-    /** @type {Document} */
-    this._document = this._dom.document();
-    this._topbar = new TopbarFeatures(this, dom);
 
+    this._opts = opts;
+
+    this._topbar = opts.omitTopbar ? null : new TopbarFeatures(this, dom);
     this.onMediaQueryChange = this.onMediaQueryChange.bind(this);
   }
 
@@ -61,16 +62,19 @@ export class ReportUIFeatures {
   initFeatures(lhr) {
     this.json = lhr;
 
-    this._topbar.enable(lhr);
-    this._topbar.resetUIState();
+    if (this._topbar) {
+      this._topbar.enable(lhr);
+      this._topbar.resetUIState();
+    }
     this._setupMediaQueryListeners();
     this._setupThirdPartyFilter();
-    this._setupElementScreenshotOverlay(this._dom.find('.lh-container', this._document));
+    this._setupElementScreenshotOverlay(this._dom.rootEl);
 
     let turnOffTheLights = false;
     // Do not query the system preferences for DevTools - DevTools should only apply dark theme
     // if dark is selected in the settings panel.
-    if (!this._dom.isDevTools() && window.matchMedia('(prefers-color-scheme: dark)').matches) {
+    const disableDarkMode = this._dom.isDevTools() || this._opts.disableAutoDarkModeAndFireworks;
+    if (!disableDarkMode && window.matchMedia('(prefers-color-scheme: dark)').matches) {
       turnOffTheLights = true;
     }
 
@@ -94,7 +98,7 @@ export class ReportUIFeatures {
     const hasMetricError = lhr.categories.performance && lhr.categories.performance.auditRefs
       .some(audit => Boolean(audit.group === 'metrics' && lhr.audits[audit.id].errorMessage));
     if (hasMetricError) {
-      const toggleInputEl = this._dom.find('input.lh-metrics-toggle__input', this._document);
+      const toggleInputEl = this._dom.find('input.lh-metrics-toggle__input', this._dom.rootEl);
       toggleInputEl.checked = true;
     }
 
@@ -109,7 +113,7 @@ export class ReportUIFeatures {
     }
 
     // Fill in all i18n data.
-    for (const node of this._dom.findAll('[data-i18n]', this._dom.document())) {
+    for (const node of this._dom.findAll('[data-i18n]', this._dom.rootEl)) {
       // These strings are guaranteed to (at least) have a default English string in Util.UIStrings,
       // so this cannot be undefined as long as `report-ui-features.data-i18n` test passes.
       const i18nKey = node.getAttribute('data-i18n');
@@ -119,18 +123,15 @@ export class ReportUIFeatures {
   }
 
   /**
-   * @param {{container?: Element, text: string, icon?: string, onClick: () => void}} opts
+   * @param {{text: string, icon?: string, onClick: () => void}} opts
    */
   addButton(opts) {
-    // report-ui-features doesn't have a reference to the root report el, and PSI has
-    // 2 reports on the page (and not even attached to DOM when installFeatures is called..)
-    // so we need a container option to specify where the element should go.
-    const metricsEl = this._document.querySelector('.lh-audit-group--metrics');
-    const containerEl = opts.container || metricsEl;
-    if (!containerEl) return;
+    // Use qSA directly to as we don't want to throw (if this element is missing).
+    const metricsEl = this._dom.rootEl.querySelector('.lh-audit-group--metrics');
+    if (!metricsEl) return;
 
-    let buttonsEl = containerEl.querySelector('.lh-buttons');
-    if (!buttonsEl) buttonsEl = this._dom.createChildOf(containerEl, 'div', 'lh-buttons');
+    let buttonsEl = metricsEl.querySelector('.lh-buttons');
+    if (!buttonsEl) buttonsEl = this._dom.createChildOf(metricsEl, 'div', 'lh-buttons');
 
     const classes = [
       'lh-button',
@@ -150,8 +151,10 @@ export class ReportUIFeatures {
    * @return {string}
    */
   getReportHtml() {
-    this._topbar.resetUIState();
-    return this._document.documentElement.outerHTML;
+    if (this._topbar) {
+      this._topbar.resetUIState();
+    }
+    return `<!doctype html><body>${this._dom.rootEl.outerHTML}`;
   }
 
   /**
@@ -163,7 +166,7 @@ export class ReportUIFeatures {
   }
 
   _enableFireworks() {
-    const scoresContainer = this._dom.find('.lh-scores-container', this._document);
+    const scoresContainer = this._dom.find('.lh-scores-container', this._dom.rootEl);
     scoresContainer.classList.add('lh-score100');
     scoresContainer.addEventListener('click', _ => {
       scoresContainer.classList.toggle('lh-fireworks-paused');
@@ -183,7 +186,9 @@ export class ReportUIFeatures {
    * be in their closed state (not opened) and the templates should be unstamped.
    */
   _resetUIState() {
-    this._topbar.resetUIState();
+    if (this._topbar) {
+      this._topbar.resetUIState();
+    }
   }
 
   /**
@@ -191,8 +196,7 @@ export class ReportUIFeatures {
    * @param {MediaQueryList|MediaQueryListEvent} mql
    */
   onMediaQueryChange(mql) {
-    const root = this._dom.find('.lh-root', this._document);
-    root.classList.toggle('lh-narrow', mql.matches);
+    this._dom.rootEl.classList.toggle('lh-narrow', mql.matches);
   }
 
   _setupThirdPartyFilter() {
@@ -209,7 +213,7 @@ export class ReportUIFeatures {
     ];
 
     // Get all tables with a text url column.
-    const tables = Array.from(this._document.querySelectorAll('table.lh-table'));
+    const tables = Array.from(this._dom.rootEl.querySelectorAll('table.lh-table'));
     const tablesWithUrls = tables
       .filter(el =>
         el.querySelector('td.lh-table-column--url, td.lh-table-column--source-location'))
@@ -275,9 +279,9 @@ export class ReportUIFeatures {
   }
 
   /**
-   * @param {Element} el
+   * @param {Element} rootEl
    */
-  _setupElementScreenshotOverlay(el) {
+  _setupElementScreenshotOverlay(rootEl) {
     const fullPageScreenshot =
       this.json.audits['full-page-screenshot'] &&
       this.json.audits['full-page-screenshot'].details &&
@@ -287,8 +291,8 @@ export class ReportUIFeatures {
 
     ElementScreenshotRenderer.installOverlayFeature({
       dom: this._dom,
-      reportEl: el,
-      overlayContainerEl: el,
+      rootEl: rootEl,
+      overlayContainerEl: rootEl,
       fullPageScreenshot,
     });
   }

package/report/renderer/swap-locale-feature.js

@@ -33,17 +33,17 @@ export class SwapLocaleFeature {
       throw new Error('missing icuMessagePaths');
     }
 
-    this._dom.find('.lh-tools-locale', this._dom.document()).classList.remove('lh-hidden');
+    this._dom.find('.lh-tools-locale', this._dom.rootEl).classList.remove('lh-hidden');
 
     const currentLocale = this._reportUIFeatures.json.configSettings.locale;
 
-    const containerEl = this._dom.find('.lh-tools-locale__selector-wrapper', this._dom.document());
+    const containerEl = this._dom.find('.lh-tools-locale__selector-wrapper', this._dom.rootEl);
     containerEl.removeAttribute('aria-hidden');
     const selectEl = this._dom.createChildOf(containerEl, 'select', 'lh-locale-selector');
     selectEl.name = 'lh-locale-list';
     selectEl.setAttribute('role', 'menuitem');
 
-    const toggleEl = this._dom.find('.lh-tool-locale__button', this._dom.document());
+    const toggleEl = this._dom.find('.lh-tool-locale__button', this._dom.rootEl);
     toggleEl.addEventListener('click', () => {
       toggleEl.classList.toggle('lh-active');
     });

package/report/renderer/topbar-features.js

@@ -24,15 +24,13 @@ export class TopbarFeatures {
     this.lhr; // eslint-disable-line no-unused-expressions
     this._reportUIFeatures = reportUIFeatures;
     this._dom = dom;
-    /** @type {Document} */
-    this._document = this._dom.document();
     this._dropDownMenu = new DropDownMenu(this._dom);
     this._copyAttempt = false;
     /** @type {HTMLElement} */
     this.topbarEl; // eslint-disable-line no-unused-expressions
     /** @type {HTMLElement} */
-    this.scoreScaleEl; // eslint-disable-line no-unused-expressions
-    /** @type {HTMLElement} */
+    this.categoriesEl; // eslint-disable-line no-unused-expressions
+    /** @type {HTMLElement?} */
     this.stickyHeaderEl; // eslint-disable-line no-unused-expressions
     /** @type {HTMLElement} */
     this.highlightEl; // eslint-disable-line no-unused-expressions
@@ -40,7 +38,6 @@ export class TopbarFeatures {
     this.onKeyUp = this.onKeyUp.bind(this);
     this.onCopy = this.onCopy.bind(this);
     this.collapseAllDetails = this.collapseAllDetails.bind(this);
-    this._updateStickyHeaderOnScroll = this._updateStickyHeaderOnScroll.bind(this);
   }
 
   /**
@@ -48,33 +45,15 @@ export class TopbarFeatures {
    */
   enable(lhr) {
     this.lhr = lhr;
-    this._document.addEventListener('keyup', this.onKeyUp);
-    this._document.addEventListener('copy', this.onCopy);
+    this._dom.rootEl.addEventListener('keyup', this.onKeyUp);
+    this._dom.document().addEventListener('copy', this.onCopy);
     this._dropDownMenu.setup(this.onDropDownMenuClick);
     this._setUpCollapseDetailsAfterPrinting();
 
-    const topbarLogo = this._dom.find('.lh-topbar__logo', this._document);
+    const topbarLogo = this._dom.find('.lh-topbar__logo', this._dom.rootEl);
     topbarLogo.addEventListener('click', () => toggleDarkTheme(this._dom));
 
-    // There is only a sticky header when at least 2 categories are present.
-    if (Object.keys(this.lhr.categories).length >= 2) {
-      this._setupStickyHeaderElements();
-      const containerEl = this._dom.find('.lh-container', this._document);
-      const elToAddScrollListener = this._getScrollParent(containerEl);
-      elToAddScrollListener.addEventListener('scroll', this._updateStickyHeaderOnScroll);
-
-      // Use ResizeObserver where available.
-      // TODO: there is an issue with incorrect position numbers and, as a result, performance
-      // issues due to layout thrashing.
-      // See https://github.com/GoogleChrome/lighthouse/pull/9023/files#r288822287 for details.
-      // For now, limit to DevTools.
-      if (this._dom.isDevTools()) {
-        const resizeObserver = new window.ResizeObserver(this._updateStickyHeaderOnScroll);
-        resizeObserver.observe(containerEl);
-      } else {
-        window.addEventListener('resize', this._updateStickyHeaderOnScroll);
-      }
-    }
+    this._setupStickyHeader();
   }
 
   /**
@@ -112,7 +91,7 @@ export class TopbarFeatures {
         try {
           this._reportUIFeatures._saveFile(new Blob([htmlStr], {type: 'text/html'}));
         } catch (e) {
-          this._dom.fireEventOn('lh-log', this._document, {
+          this._dom.fireEventOn('lh-log', this._dom.document(), {
             cmd: 'error', msg: 'Could not export as HTML. ' + e.message,
           });
         }
@@ -152,7 +131,7 @@ export class TopbarFeatures {
       e.preventDefault();
       e.clipboardData.setData('text/plain', JSON.stringify(this.lhr, null, 2));
 
-      this._dom.fireEventOn('lh-log', this._document, {
+      this._dom.fireEventOn('lh-log', this._dom.document(), {
         cmd: 'log', msg: 'Report JSON copied to clipboard',
       });
     }
@@ -164,28 +143,28 @@ export class TopbarFeatures {
    * Copies the report JSON to the clipboard (if supported by the browser).
    */
   onCopyButtonClick() {
-    this._dom.fireEventOn('lh-analytics', this._document, {
+    this._dom.fireEventOn('lh-analytics', this._dom.document(), {
       cmd: 'send',
       fields: {hitType: 'event', eventCategory: 'report', eventAction: 'copy'},
     });
 
     try {
-      if (this._document.queryCommandSupported('copy')) {
+      if (this._dom.document().queryCommandSupported('copy')) {
         this._copyAttempt = true;
 
         // Note: In Safari 10.0.1, execCommand('copy') returns true if there's
         // a valid text selection on the page. See http://caniuse.com/#feat=clipboard.
-        if (!this._document.execCommand('copy')) {
+        if (!this._dom.document().execCommand('copy')) {
           this._copyAttempt = false; // Prevent event handler from seeing this as a copy attempt.
 
-          this._dom.fireEventOn('lh-log', this._document, {
+          this._dom.fireEventOn('lh-log', this._dom.document(), {
             cmd: 'warn', msg: 'Your browser does not support copy to clipboard.',
           });
         }
       }
     } catch (e) {
       this._copyAttempt = false;
-      this._dom.fireEventOn('lh-log', this._document, {cmd: 'log', msg: e.message});
+      this._dom.fireEventOn('lh-log', this._dom.document(), {cmd: 'log', msg: e.message});
     }
   }
 
@@ -206,7 +185,7 @@ export class TopbarFeatures {
    * open a `<details>` element.
    */
   expandAllDetails() {
-    const details = this._dom.findAll('.lh-categories details', this._document);
+    const details = this._dom.findAll('.lh-categories details', this._dom.rootEl);
     details.map(detail => detail.open = true);
   }
 
@@ -215,7 +194,7 @@ export class TopbarFeatures {
    * open a `<details>` element.
    */
   collapseAllDetails() {
-    const details = this._dom.findAll('.lh-categories details', this._document);
+    const details = this._dom.findAll('.lh-categories details', this._dom.rootEl);
     details.map(detail => detail.open = false);
   }
 
@@ -235,7 +214,7 @@ export class TopbarFeatures {
   /**
    * Finds the first scrollable ancestor of `element`. Falls back to the document.
    * @param {Element} element
-   * @return {Node}
+   * @return {Element | Document}
    */
   _getScrollParent(element) {
     const {overflowY} = window.getComputedStyle(element);
@@ -273,24 +252,49 @@ export class TopbarFeatures {
     }
   }
 
-  _setupStickyHeaderElements() {
-    this.topbarEl = this._dom.find('div.lh-topbar', this._document);
-    this.scoreScaleEl = this._dom.find('div.lh-scorescale', this._document);
-    this.stickyHeaderEl = this._dom.find('div.lh-sticky-header', this._document);
+  _setupStickyHeader() {
+    // Cache these elements to avoid qSA on each onscroll.
+    this.topbarEl = this._dom.find('div.lh-topbar', this._dom.rootEl);
+    this.categoriesEl = this._dom.find('div.lh-categories', this._dom.rootEl);
+
+    // Defer behind rAF to avoid forcing layout.
+    window.requestAnimationFrame(() => window.requestAnimationFrame(() => {
+      // Only present in the DOM if it'll be used (>=2 categories)
+      try {
+        this.stickyHeaderEl = this._dom.find('div.lh-sticky-header', this._dom.rootEl);
+      } catch {
+        return;
+      }
 
-    // Highlighter will be absolutely positioned at first gauge, then transformed on scroll.
-    this.highlightEl = this._dom.createChildOf(this.stickyHeaderEl, 'div', 'lh-highlighter');
+      // Highlighter will be absolutely positioned at first gauge, then transformed on scroll.
+      this.highlightEl = this._dom.createChildOf(this.stickyHeaderEl, 'div', 'lh-highlighter');
+
+      // Update sticky header visibility and highlight when page scrolls/resizes.
+      const scrollParent = this._getScrollParent(this._dom.rootEl);
+      // The 'scroll' handler must be should be on {Element | Document}...
+      scrollParent.addEventListener('scroll', () => this._updateStickyHeader());
+      // However resizeObserver needs an element, *not* the document.
+      const resizeTarget = scrollParent instanceof window.Document
+        ? document.documentElement
+        : scrollParent;
+      new window.ResizeObserver(() => this._updateStickyHeader()).observe(resizeTarget);
+    }));
   }
 
-  _updateStickyHeaderOnScroll() {
-    // Show sticky header when the score scale begins to go underneath the topbar.
+  /**
+   * Toggle visibility and update highlighter position
+   */
+  _updateStickyHeader() {
+    if (!this.stickyHeaderEl) return;
+
+    // Show sticky header when the main 5 gauges clear the topbar.
     const topbarBottom = this.topbarEl.getBoundingClientRect().bottom;
-    const scoreScaleTop = this.scoreScaleEl.getBoundingClientRect().top;
-    const showStickyHeader = topbarBottom >= scoreScaleTop;
+    const categoriesTop = this.categoriesEl.getBoundingClientRect().top;
+    const showStickyHeader = topbarBottom >= categoriesTop;
 
     // Highlight mini gauge when section is in view.
     // In view = the last category that starts above the middle of the window.
-    const categoryEls = Array.from(this._document.querySelectorAll('.lh-category'));
+    const categoryEls = Array.from(this._dom.rootEl.querySelectorAll('.lh-category'));
     const categoriesAboveTheMiddle =
       categoryEls.filter(el => el.getBoundingClientRect().top - window.innerHeight / 2 < 0);
     const highlightIndex =

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

@@ -9,6 +9,7 @@
 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';
@@ -22,16 +23,23 @@ const sampleResultsStr =
 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(() => {

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);
@@ -47,10 +50,10 @@ describe('ReportRendererAxe', () => {
     });
 
     it('renders without axe violations', async () => {
-      const container = renderer._dom._document.createElement('main');
+      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: {