lighthouse 9.5.0-dev.20220607 → 9.6.2

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

@@ -14,6 +14,7 @@
  * See the License for the specific language governing permissions and
  * limitations under the License.
  */
+'use strict';
 
 /** @typedef {import('./dom.js').DOM} DOM */
 
@@ -39,7 +40,7 @@ export class PerformanceCategoryRenderer extends CategoryRenderer {
     valueEl.textContent = audit.result.displayValue || '';
 
     const descriptionEl = this.dom.find('.lh-metric__description', tmpl);
-    descriptionEl.append(this.dom.convertMarkdownLinkSnippets(audit.result.description));
+    descriptionEl.appendChild(this.dom.convertMarkdownLinkSnippets(audit.result.description));
 
     if (audit.result.scoreDisplayMode === 'error') {
       descriptionEl.textContent = '';
@@ -179,7 +180,7 @@ export class PerformanceCategoryRenderer extends CategoryRenderer {
     const strings = Util.i18n.strings;
     const element = this.dom.createElement('div', 'lh-category');
     element.id = category.id;
-    element.append(this.renderCategoryHeader(category, groups, options));
+    element.appendChild(this.renderCategoryHeader(category, groups, options));
 
     // Metrics.
     const metricAudits = category.auditRefs.filter(audit => audit.group === 'metrics');
@@ -204,7 +205,7 @@ export class PerformanceCategoryRenderer extends CategoryRenderer {
       const metricsBoxesEl = this.dom.createElement('div', 'lh-metrics-container');
       metricsGroupEl.insertBefore(metricsBoxesEl, metricsFooterEl);
       metricAudits.forEach(item => {
-        metricsBoxesEl.append(this._renderMetric(item));
+        metricsBoxesEl.appendChild(this._renderMetric(item));
       });
 
       // Only add the disclaimer with the score calculator link if the category was rendered with a score gauge.
@@ -212,7 +213,7 @@ export class PerformanceCategoryRenderer extends CategoryRenderer {
         const descriptionEl = this.dom.find('.lh-category-header__description', element);
         const estValuesEl = this.dom.createChildOf(descriptionEl, 'div', 'lh-metrics__disclaimer');
         const disclaimerEl = this.dom.convertMarkdownLinkSnippets(strings.varianceDisclaimer);
-        estValuesEl.append(disclaimerEl);
+        estValuesEl.appendChild(disclaimerEl);
 
         // Add link to score calculator.
         const calculatorLink = this.dom.createChildOf(estValuesEl, 'a', 'lh-calclink');
@@ -222,7 +223,7 @@ export class PerformanceCategoryRenderer extends CategoryRenderer {
       }
 
       metricsGroupEl.classList.add('lh-audit-group--metrics');
-      element.append(metricsGroupEl);
+      element.appendChild(metricsGroupEl);
     }
 
     // Filmstrip
@@ -232,7 +233,7 @@ export class PerformanceCategoryRenderer extends CategoryRenderer {
     if (thumbnailResult?.details) {
       timelineEl.id = thumbnailResult.id;
       const filmstripEl = this.detailsRenderer.render(thumbnailResult.details);
-      filmstripEl && timelineEl.append(filmstripEl);
+      filmstripEl && timelineEl.appendChild(filmstripEl);
     }
 
     // Opportunities
@@ -266,7 +267,7 @@ export class PerformanceCategoryRenderer extends CategoryRenderer {
       opportunityAudits.forEach(item =>
         groupEl.insertBefore(this._renderOpportunity(item, scale), footerEl));
       groupEl.classList.add('lh-audit-group--load-opportunities');
-      element.append(groupEl);
+      element.appendChild(groupEl);
     }
 
     // Diagnostics
@@ -283,7 +284,7 @@ export class PerformanceCategoryRenderer extends CategoryRenderer {
       const [groupEl, footerEl] = this.renderAuditGroup(groups['diagnostics']);
       diagnosticAudits.forEach(item => groupEl.insertBefore(this.renderAudit(item), footerEl));
       groupEl.classList.add('lh-audit-group--diagnostics');
-      element.append(groupEl);
+      element.appendChild(groupEl);
     }
 
     // Passed audits
@@ -297,7 +298,7 @@ export class PerformanceCategoryRenderer extends CategoryRenderer {
       groupDefinitions: groups,
     };
     const passedElem = this.renderClump('passed', clumpOpts);
-    element.append(passedElem);
+    element.appendChild(passedElem);
 
     // Budgets
     /** @type {Array<Element>} */
@@ -317,7 +318,7 @@ export class PerformanceCategoryRenderer extends CategoryRenderer {
       const [groupEl, footerEl] = this.renderAuditGroup(groups.budgets);
       budgetTableEls.forEach(table => groupEl.insertBefore(table, footerEl));
       groupEl.classList.add('lh-audit-group--budgets');
-      element.append(groupEl);
+      element.appendChild(groupEl);
     }
 
     return element;

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

@@ -14,6 +14,7 @@
  * See the License for the specific language governing permissions and
  * limitations under the License.
  */
+'use strict';
 
 import {Util} from './util.js';
 import {CategoryRenderer} from './category-renderer.js';
@@ -27,7 +28,7 @@ export class PwaCategoryRenderer extends CategoryRenderer {
   render(category, groupDefinitions = {}) {
     const categoryElem = this.dom.createElement('div', 'lh-category');
     categoryElem.id = category.id;
-    categoryElem.append(this.renderCategoryHeader(category, groupDefinitions));
+    categoryElem.appendChild(this.renderCategoryHeader(category, groupDefinitions));
 
     const auditRefs = category.auditRefs;
 
@@ -35,13 +36,13 @@ export class PwaCategoryRenderer extends CategoryRenderer {
     // all put in a top-level clump that isn't expandable/collapsible.
     const regularAuditRefs = auditRefs.filter(ref => ref.result.scoreDisplayMode !== 'manual');
     const auditsElem = this._renderAudits(regularAuditRefs, groupDefinitions);
-    categoryElem.append(auditsElem);
+    categoryElem.appendChild(auditsElem);
 
     // Manual audits are still in a manual clump.
     const manualAuditRefs = auditRefs.filter(ref => ref.result.scoreDisplayMode === 'manual');
     const manualElem = this.renderClump('manual',
       {auditRefs: manualAuditRefs, description: category.manualDescription});
-    categoryElem.append(manualElem);
+    categoryElem.appendChild(manualElem);
 
     return categoryElem;
   }

package/report/renderer/report-renderer.js

@@ -17,6 +17,7 @@
  * Dummy text for ensuring report robustness: </script> pre$`post %%LIGHTHOUSE_JSON%%
  * (this is handled by terser)
  */
+'use strict';
 
 /** @typedef {import('./dom.js').DOM} DOM */
 
@@ -70,7 +71,7 @@ export class ReportRenderer {
     const report = Util.prepareReportResult(lhr);
 
     this._dom.rootEl.textContent = ''; // Remove previous report.
-    this._dom.rootEl.append(this._renderReport(report));
+    this._dom.rootEl.appendChild(this._renderReport(report));
 
     return this._dom.rootEl;
   }
@@ -178,13 +179,11 @@ export class ReportRenderer {
     const message = this._dom.find('.lh-warnings__msg', container);
     message.textContent = Util.i18n.strings.toplevelWarningsMessage;
 
-    const warnings = [];
+    const warnings = this._dom.find('ul', container);
     for (const warningString of report.runWarnings) {
-      const warning = this._dom.createElement('li');
-      warning.append(this._dom.convertMarkdownLinkSnippets(warningString));
-      warnings.push(warning);
+      const warning = warnings.appendChild(this._dom.createElement('li'));
+      warning.appendChild(this._dom.convertMarkdownLinkSnippets(warningString));
     }
-    this._dom.find('ul', container).append(...warnings);
 
     return container;
   }
@@ -277,11 +276,11 @@ export class ReportRenderer {
     };
 
     const headerContainer = this._dom.createElement('div');
-    headerContainer.append(this._renderReportHeader());
+    headerContainer.appendChild(this._renderReportHeader());
 
     const reportContainer = this._dom.createElement('div', 'lh-container');
     const reportSection = this._dom.createElement('div', 'lh-report');
-    reportSection.append(this._renderReportWarnings(report));
+    reportSection.appendChild(this._renderReportWarnings(report));
 
     let scoreHeader;
     const isSoloCategory = Object.keys(report.categories).length === 1;
@@ -298,23 +297,23 @@ export class ReportRenderer {
       const scoresContainer = this._dom.find('.lh-scores-container', headerContainer);
       scoreHeader.append(
         ...this._renderScoreGauges(report, categoryRenderer, specificCategoryRenderers));
-      scoresContainer.append(scoreHeader, scoreScale);
+      scoresContainer.appendChild(scoreHeader);
+      scoresContainer.appendChild(scoreScale);
 
       const stickyHeader = this._dom.createElement('div', 'lh-sticky-header');
       stickyHeader.append(
         ...this._renderScoreGauges(report, categoryRenderer, specificCategoryRenderers));
-      reportContainer.append(stickyHeader);
+      reportContainer.appendChild(stickyHeader);
     }
 
-    const categories = this._dom.createElement('div', 'lh-categories');
-    reportSection.append(categories);
+    const categories = reportSection.appendChild(this._dom.createElement('div', 'lh-categories'));
     const categoryOptions = {gatherMode: report.gatherMode};
     for (const category of Object.values(report.categories)) {
       const renderer = specificCategoryRenderers[category.id] || categoryRenderer;
       // .lh-category-wrapper is full-width and provides horizontal rules between categories.
       // .lh-category within has the max-width: var(--report-content-max-width);
       const wrapper = renderer.dom.createChildOf(categories, 'div', 'lh-category-wrapper');
-      wrapper.append(renderer.render(
+      wrapper.appendChild(renderer.render(
         category,
         report.categoryGroups,
         categoryOptions
@@ -329,12 +328,13 @@ export class ReportRenderer {
     }
 
     if (!this._opts.omitTopbar) {
-      reportFragment.append(this._renderReportTopbar(report));
+      reportFragment.appendChild(this._renderReportTopbar(report));
     }
 
-    reportFragment.append(reportContainer);
-    reportSection.append(this._renderReportFooter(report));
-    reportContainer.append(headerContainer, reportSection);
+    reportFragment.appendChild(reportContainer);
+    reportContainer.appendChild(headerContainer);
+    reportContainer.appendChild(reportSection);
+    reportSection.appendChild(this._renderReportFooter(report));
 
     if (fullPageScreenshot) {
       ElementScreenshotRenderer.installFullPageScreenshot(

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

@@ -14,6 +14,7 @@
  * See the License for the specific language governing permissions and
  * limitations under the License.
  */
+'use strict';
 
 /**
  * @fileoverview Adds tools button, print, and other dynamic functionality to

package/report/renderer/snippet-renderer.js

@@ -3,6 +3,7 @@
  * 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';
 
 /** @typedef {import('./details-renderer').DetailsRenderer} DetailsRenderer */
 /** @typedef {import('./dom').DOM} DOM */
@@ -128,7 +129,7 @@ export class SnippetRenderer {
     // access the full element detail. Just being able to see the outer HTML isn't very useful.
     if (details.node && dom.isDevTools()) {
       const nodeContainer = dom.find('.lh-snippet__node', header);
-      nodeContainer.append(detailsRenderer.renderNode(details.node));
+      nodeContainer.appendChild(detailsRenderer.renderNode(details.node));
     }
 
     return header;
@@ -163,7 +164,7 @@ export class SnippetRenderer {
     const lineContent = content + (truncated ? '…' : '');
     const lineContentEl = dom.find('.lh-snippet__line code', contentLine);
     if (contentType === LineContentType.MESSAGE) {
-      lineContentEl.append(dom.convertMarkdownLinkSnippets(lineContent));
+      lineContentEl.appendChild(dom.convertMarkdownLinkSnippets(lineContent));
     } else {
       lineContentEl.textContent = lineContent;
     }

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

@@ -3,6 +3,7 @@
  * 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';
 
 /**
  * @fileoverview Creates a <select> element, filled with all supported locales

package/report/renderer/text-encoding.js

@@ -3,6 +3,7 @@
  * 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';
 
 /* global CompressionStream */
 

package/report/renderer/topbar-features.js

@@ -3,6 +3,7 @@
  * Licensed under the Apache License, Version 2.0 (the "License"); you may not use this file except in compliance with the License. You may obtain a copy of the License at http://www.apache.org/licenses/LICENSE-2.0
  * Unless required by applicable law or agreed to in writing, software distributed under the License is distributed on an "AS IS" BASIS, WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied. See the License for the specific language governing permissions and limitations under the License.
  */
+'use strict';
 
 /* eslint-env browser */
 

package/report/renderer/util.js

@@ -14,6 +14,7 @@
  * See the License for the specific language governing permissions and
  * limitations under the License.
  */
+'use strict';
 
 /** @template T @typedef {import('./i18n').I18n<T>} I18n */
 
@@ -429,11 +430,10 @@ class Util {
         break;
       case 'devtools': {
         const {cpuSlowdownMultiplier, requestLatencyMs} = throttling;
-        // eslint-disable-next-line max-len
         cpuThrottling = `${Util.i18n.formatNumber(cpuSlowdownMultiplier)}x slowdown (DevTools)`;
-        networkThrottling = `${Util.i18n.formatMilliseconds(requestLatencyMs)} HTTP RTT, ` +
-          `${Util.i18n.formatKbps(throttling.downloadThroughputKbps)} down, ` +
-          `${Util.i18n.formatKbps(throttling.uploadThroughputKbps)} up (DevTools)`;
+        networkThrottling = `${Util.i18n.formatNumber(requestLatencyMs)}${NBSP}ms HTTP RTT, ` +
+          `${Util.i18n.formatNumber(throttling.downloadThroughputKbps)}${NBSP}Kbps down, ` +
+          `${Util.i18n.formatNumber(throttling.uploadThroughputKbps)}${NBSP}Kbps up (DevTools)`;
 
         const isSlow4G = () => {
           return requestLatencyMs === 150 * 3.75 &&
@@ -445,10 +445,9 @@ class Util {
       }
       case 'simulate': {
         const {cpuSlowdownMultiplier, rttMs, throughputKbps} = throttling;
-        // eslint-disable-next-line max-len
         cpuThrottling = `${Util.i18n.formatNumber(cpuSlowdownMultiplier)}x slowdown (Simulated)`;
-        networkThrottling = `${Util.i18n.formatMilliseconds(rttMs)} TCP RTT, ` +
-          `${Util.i18n.formatKbps(throughputKbps)} throughput (Simulated)`;
+        networkThrottling = `${Util.i18n.formatNumber(rttMs)}${NBSP}ms TCP RTT, ` +
+          `${Util.i18n.formatNumber(throughputKbps)}${NBSP}Kbps throughput (Simulated)`;
 
         const isSlow4G = () => {
           return rttMs === 150 && throughputKbps === 1.6 * 1024;

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

@@ -4,6 +4,8 @@
  * 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';
@@ -15,6 +17,9 @@ 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(() => {

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

@@ -9,6 +9,7 @@ const assert = require('assert').strict;
 
 const getLhrFilenamePrefix = require('../../generator/file-namer.js').getLhrFilenamePrefix;
 
+/* eslint-env jest */
 describe('file-namer helper', () => {
   it('generates filename prefixes', () => {
     const results = {

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

@@ -5,8 +5,6 @@
  */
 'use strict';
 
-/* eslint-disable no-irregular-whitespace */
-
 const assert = require('assert').strict;
 const fs = require('fs');
 
@@ -15,6 +13,8 @@ const csvValidator = require('csv-validator');
 const ReportGenerator = require('../../generator/report-generator.js');
 const sampleResults = require('../../../lighthouse-core/test/results/sample_v2.json');
 
+/* eslint-env jest */
+
 describe('ReportGenerator', () => {
   describe('#replaceStrings', () => {
     it('should replace all occurrences', () => {
@@ -81,33 +81,28 @@ describe('ReportGenerator', () => {
 
     it('creates CSV for results', async () => {
       const path = './.results-as-csv.csv';
+      const headers = {
+        category: '',
+        name: '',
+        title: '',
+        type: '',
+        score: 42,
+      };
 
       const csvOutput = ReportGenerator.generateReport(sampleResults, 'csv');
       fs.writeFileSync(path, csvOutput);
 
       const lines = csvOutput.split('\n');
       expect(lines.length).toBeGreaterThan(100);
-      expect(lines.slice(0, 15).join('\n')).toMatchInlineSnapshot(`
-"\\"requestedUrl\\",\\"finalUrl\\",\\"fetchTime\\",\\"gatherMode\\"
-\\"http://localhost:10200/dobetterweb/dbw_tester.html\\",\\"http://localhost:10200/dobetterweb/dbw_tester.html\\",\\"2021-09-07T20:11:11.853Z\\",\\"navigation\\"
-
-category,score
-\\"performance\\",\\"0.26\\"
-\\"accessibility\\",\\"0.78\\"
-\\"best-practices\\",\\"0.25\\"
-\\"seo\\",\\"0.67\\"
-\\"pwa\\",\\"0.3\\"
-
-category,audit,score,displayValue,description
-\\"performance\\",\\"first-contentful-paint\\",\\"0.01\\",\\"6.8 s\\",\\"First Contentful Paint marks the time at which the first text or image is painted. [Learn more](https://web.dev/first-contentful-paint/).\\"
-\\"performance\\",\\"interactive\\",\\"0.41\\",\\"8.2 s\\",\\"Time to interactive is the amount of time it takes for the page to become fully interactive. [Learn more](https://web.dev/interactive/).\\"
-\\"performance\\",\\"speed-index\\",\\"0.21\\",\\"8.1 s\\",\\"Speed Index shows how quickly the contents of a page are visibly populated. [Learn more](https://web.dev/speed-index/).\\"
-\\"performance\\",\\"total-blocking-time\\",\\"0.2\\",\\"1,220 ms\\",\\"Sum of all time periods between FCP and Time to Interactive, when task length exceeded 50ms, expressed in milliseconds. [Learn more](https://web.dev/lighthouse-total-blocking-time/).\\"
+      expect(lines.slice(0, 3).join('\n')).toMatchInlineSnapshot(`
+"requestedUrl,finalUrl,category,name,title,type,score
+\\"http://localhost:10200/dobetterweb/dbw_tester.html\\",\\"http://localhost:10200/dobetterweb/dbw_tester.html\\",\\"Performance\\",\\"performance-score\\",\\"Overall Performance Category Score\\",\\"numeric\\",\\"0.26\\"
+\\"http://localhost:10200/dobetterweb/dbw_tester.html\\",\\"http://localhost:10200/dobetterweb/dbw_tester.html\\",\\"Performance\\",\\"first-contentful-paint\\",\\"First Contentful Paint\\",\\"numeric\\",\\"0.01\\"
 "
 `);
 
       try {
-        await csvValidator(path);
+        await csvValidator(path, headers);
       } catch (err) {
         assert.fail('CSV parser error:\n' + err.join('\n'));
       } finally {
@@ -115,13 +110,13 @@ category,audit,score,displayValue,description
       }
     });
 
-    it('creates CSV for results including categories', () => {
+    it('creates CSV for results including overall category scores', () => {
       const csvOutput = ReportGenerator.generateReport(sampleResults, 'csv');
-      expect(csvOutput).toContain('performance');
-      expect(csvOutput).toContain('accessibility');
-      expect(csvOutput).toContain('best-practices');
-      expect(csvOutput).toContain('seo');
-      expect(csvOutput).toContain('pwa');
+      expect(csvOutput).toContain('performance-score');
+      expect(csvOutput).toContain('accessibility-score');
+      expect(csvOutput).toContain('best-practices-score');
+      expect(csvOutput).toContain('seo-score');
+      expect(csvOutput).toContain('pwa-score');
     });
 
     it('writes extended info', () => {

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

@@ -3,6 +3,9 @@
  * 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';
 
@@ -13,9 +16,7 @@ import {I18n} from '../../renderer/i18n.js';
 import {DOM} from '../../renderer/dom.js';
 import {DetailsRenderer} from '../../renderer/details-renderer.js';
 import {CategoryRenderer} from '../../renderer/category-renderer.js';
-import {readJson} from '../../../root.js';
-
-const sampleResultsOrig = readJson('../../../lighthouse-core/test/results/sample_v2.json', import.meta);
+import sampleResultsOrig from '../../../lighthouse-core/test/results/sample_v2.json';
 
 describe('CategoryRenderer', () => {
   let renderer;

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

@@ -3,6 +3,9 @@
  * Licensed under the Apache License, Version 2.0 (the "License"); you may not use this file except in compliance with the License. You may obtain a copy of the License at http://www.apache.org/licenses/LICENSE-2.0
  * Unless required by applicable law or agreed to in writing, software distributed under the License is distributed on an "AS IS" BASIS, WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied. See the License for the specific language governing permissions and limitations under the License.
  */
+'use strict';
+
+/* eslint-env jest */
 
 import fs from 'fs';
 

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

@@ -3,6 +3,9 @@
  * 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';
 

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

@@ -3,6 +3,7 @@
  * 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 {strict as assert} from 'assert';
 
@@ -13,6 +14,8 @@ import {Util} from '../../renderer/util.js';
 import {I18n} from '../../renderer/i18n.js';
 import {DetailsRenderer} from '../../renderer/details-renderer.js';
 
+/* eslint-env jest */
+
 describe('DetailsRenderer', () => {
   let renderer;
 
@@ -84,55 +87,6 @@ describe('DetailsRenderer', () => {
           '--thumbnail not set');
     });
 
-    it('renders with default granularity', () => {
-      const el = renderer.render({
-        type: 'table',
-        headings: [
-          {text: '', key: 'bytes', itemType: 'bytes'},
-          {text: '', key: 'numeric', itemType: 'numeric'},
-          {text: '', key: 'ms', itemType: 'ms'},
-          // Verify that 0 is ignored.
-          {text: '', key: 'ms', itemType: 'ms', granularity: 0},
-        ],
-        items: [
-          {
-            bytes: 1234.567,
-            numeric: 1234.567,
-            ms: 1234.567,
-          },
-        ],
-      });
-
-      assert.equal(el.querySelectorAll('td').length, 4, 'did not render table cells');
-      assert.equal(el.querySelectorAll('td')[0].textContent, '1.2\xa0KiB');
-      assert.equal(el.querySelectorAll('td')[1].textContent, '1,234.6');
-      assert.equal(el.querySelectorAll('td')[2].textContent, '1,230\xa0ms');
-      assert.equal(el.querySelectorAll('td')[3].textContent, '1,230\xa0ms');
-    });
-
-    it('renders with custom granularity', () => {
-      const el = renderer.render({
-        type: 'table',
-        headings: [
-          {text: '', key: 'bytes', itemType: 'bytes', granularity: 0.01},
-          {text: '', key: 'numeric', itemType: 'numeric', granularity: 100},
-          {text: '', key: 'ms', itemType: 'ms', granularity: 1},
-        ],
-        items: [
-          {
-            bytes: 1234.567,
-            numeric: 1234.567,
-            ms: 1234.567,
-          },
-        ],
-      });
-
-      assert.equal(el.querySelectorAll('td').length, 3, 'did not render table cells');
-      assert.equal(el.querySelectorAll('td')[0].textContent, '1.21\xa0KiB');
-      assert.equal(el.querySelectorAll('td')[1].textContent, '1,200');
-      assert.equal(el.querySelectorAll('td')[2].textContent, '1,235\xa0ms');
-    });
-
     it('renders critical request chains', () => {
       const details = {
         type: 'criticalrequestchain',

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

@@ -3,6 +3,7 @@
  * 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 {strict as assert} from 'assert';
 
@@ -13,6 +14,8 @@ import {DOM} from '../../renderer/dom.js';
 import {Util} from '../../renderer/util.js';
 import {I18n} from '../../renderer/i18n.js';
 
+/* eslint-env jest */
+
 describe('DOM', () => {
   /** @type {DOM} */
   let dom;

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

@@ -3,6 +3,9 @@
  * 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 jsdom from 'jsdom';
 
@@ -63,8 +66,7 @@ describe('ElementScreenshotRenderer', () => {
     /* eslint-disable max-len */
     expect(htmlFormatted).toMatchInlineSnapshot(`
 " 
-<div class=\\"lh-element-screenshot__content\\"> 
-<div class=\\"lh-element-screenshot__image\\" style=\\"width: 500px; height: 500px; background-position-y: 0px; background-position-x: 0px; background-size: 1000px 1000px;\\"> 
+<div class=\\"lh-element-screenshot__content\\" style=\\"top: -500px;\\"> 
 <div class=\\"lh-element-screenshot__mask\\" style=\\"width: 500px; height: 500px; clip-path: url(#clip-0);\\"> 
 <svg height=\\"0\\" width=\\"0\\"> <defs> 
 <clipPath clipPathUnits=\\"objectBoundingBox\\" id=\\"clip-0\\">
@@ -72,7 +74,8 @@ describe('ElementScreenshotRenderer', () => {
 <polygon points=\\"0,0.7     1,0.7    1,1               0,1\\"></polygon>
 <polygon points=\\"0,0.1        0.1,0.1 0.1,0.7 0,0.7\\"></polygon>
 <polygon points=\\"0.5,0.1 1,0.1       1,0.7       0.5,0.7\\"></polygon></clipPath>  </defs> </svg> </div> 
-<div class=\\"lh-element-screenshot__element-marker\\" style=\\"width: 200px; height: 300px; left: 50px; top: 50px;\\"></div> </div> </div> "
+<div class=\\"lh-element-screenshot__image\\" style=\\"width: 500px; height: 500px; background-position-y: 0px; background-position-x: 0px; background-size: 1000px 1000px;\\"></div> 
+<div class=\\"lh-element-screenshot__element-marker\\" style=\\"width: 200px; height: 300px; left: 50px; top: 50px;\\"></div> </div> "
 `);
     /* eslint-enable max-len */
   });