Repository: GoogleChrome/lighthouse
Pull request #5818 (2018-08-09 22:15:40)

report: expose prepareLabData directly as a fn
requested by PSI

[ignore whitespace](https://github.com/GoogleChrome/lighthouse/compare/preparefn?w=1) in the diff.


Patch:
diff --git a/lighthouse-core/report/html/renderer/psi.js b/lighthouse-core/report/html/renderer/psi.js
index f0c0e8401..1d81ef08e 100644
--- a/lighthouse-core/report/html/renderer/psi.js
+++ b/lighthouse-core/report/html/renderer/psi.js
@@ -18,57 +18,57 @@
 
 /* globals self DOM PerformanceCategoryRenderer Util DetailsRenderer */
 
-class PSI {
-  /**
-   * Returns all the elements that PSI needs to render the report
-   * We expose this helper method to minimize the 'public' API surface of the renderer
-   * and allow us to refactor without two-sided patches.
-   *
-   *   const {scoreGaugeEl, perfCategoryEl, finalScreenshotDataUri} = PSI.prepareLabData(
-   *      LHResultJsonString,
-   *      document
-   *   );
-   *
-   * @param {string} LHResultJsonString The stringified version of {LH.Result}
-   * @param {Document} document The host page's window.document
-   * @return {{scoreGaugeEl: Element, perfCategoryEl: Element, finalScreenshotDataUri: string|null}}
-   */
-  static prepareLabData(LHResultJsonString, document) {
-    const lhResult = /** @type {LH.Result} */ JSON.parse(LHResultJsonString);
-    const dom = new DOM(document);
 
-    const reportLHR = Util.prepareReportResult(lhResult);
-    const perfCategory = reportLHR.reportCategories.find(cat => cat.id === 'performance');
-    if (!perfCategory) throw new Error(`No performance category. Can't make lab data section`);
-    if (!reportLHR.categoryGroups) throw new Error(`No category groups found.`);
+/**
+ * Returns all the elements that PSI needs to render the report
+ * We expose this helper method to minimize the 'public' API surface of the renderer
+ * and allow us to refactor without two-sided patches.
+ *
+ *   const {scoreGaugeEl, perfCategoryEl, finalScreenshotDataUri} = prepareLabData(
+ *      LHResultJsonString,
+ *      document
+ *   );
+ *
+ * @param {string} LHResultJsonString The stringified version of {LH.Result}
+ * @param {Document} document The host page's window.document
+ * @return {{scoreGaugeEl: Element, perfCategoryEl: Element, finalScreenshotDataUri: string|null}}
+ */
+function prepareLabData(LHResultJsonString, document) {
+  const lhResult = /** @type {LH.Result} */ JSON.parse(LHResultJsonString);
+  const dom = new DOM(document);
 
-    const perfRenderer = new PerformanceCategoryRenderer(dom, new DetailsRenderer(dom));
-    // PSI environment string will ensure the categoryHeader and permalink elements are excluded
-    const perfCategoryEl = perfRenderer.render(perfCategory, reportLHR.categoryGroups, 'PSI');
+  const reportLHR = Util.prepareReportResult(lhResult);
+  const perfCategory = reportLHR.reportCategories.find(cat => cat.id === 'performance');
+  if (!perfCategory) throw new Error(`No performance category. Can't make lab data section`);
+  if (!reportLHR.categoryGroups) throw new Error(`No category groups found.`);
 
-    const scoreGaugeEl = dom.find('.lh-score__gauge', perfCategoryEl);
-    const scoreGaugeWrapperEl = dom.find('.lh-gauge__wrapper', scoreGaugeEl);
-    scoreGaugeWrapperEl.classList.add('lh-gauge__wrapper--huge');
-    // Remove navigation link on gauge
-    scoreGaugeWrapperEl.removeAttribute('href');
+  const perfRenderer = new PerformanceCategoryRenderer(dom, new DetailsRenderer(dom));
+  // PSI environment string will ensure the categoryHeader and permalink elements are excluded
+  const perfCategoryEl = perfRenderer.render(perfCategory, reportLHR.categoryGroups, 'PSI');
 
-    const finalScreenshotDataUri = PSI.getFinalScreenshot(perfCategory);
-    return {scoreGaugeEl, perfCategoryEl, finalScreenshotDataUri};
-  }
+  const scoreGaugeEl = dom.find('.lh-score__gauge', perfCategoryEl);
+  scoreGaugeEl.remove();
+  const scoreGaugeWrapperEl = dom.find('.lh-gauge__wrapper', scoreGaugeEl);
+  scoreGaugeWrapperEl.classList.add('lh-gauge__wrapper--huge');
+  // Remove navigation link on gauge
+  scoreGaugeWrapperEl.removeAttribute('href');
 
-  /**
-   * @param {LH.ReportResult.Category} perfCategory
-   * @return {null|string}
-   */
-  static getFinalScreenshot(perfCategory) {
-    const auditRef = perfCategory.auditRefs.find(audit => audit.id === 'final-screenshot');
-    if (!auditRef || !auditRef.result || auditRef.result.scoreDisplayMode === 'error') return null;
-    return auditRef.result.details.data;
-  }
+  const finalScreenshotDataUri = _getFinalScreenshot(perfCategory);
+  return {scoreGaugeEl, perfCategoryEl, finalScreenshotDataUri};
+}
+
+/**
+ * @param {LH.ReportResult.Category} perfCategory
+ * @return {null|string}
+ */
+function _getFinalScreenshot(perfCategory) {
+  const auditRef = perfCategory.auditRefs.find(audit => audit.id === 'final-screenshot');
+  if (!auditRef || !auditRef.result || auditRef.result.scoreDisplayMode === 'error') return null;
+  return auditRef.result.details.data;
 }
 
 if (typeof module !== 'undefined' && module.exports) {
-  module.exports = PSI;
+  module.exports = prepareLabData;
 } else {
-  self.PSI = PSI;
+  self.prepareLabData = prepareLabData;
 }
diff --git a/lighthouse-core/report/html/renderer/report-renderer.js b/lighthouse-core/report/html/renderer/report-renderer.js
index ed638075c..e5b8093b5 100644
--- a/lighthouse-core/report/html/renderer/report-renderer.js
+++ b/lighthouse-core/report/html/renderer/report-renderer.js
@@ -165,7 +165,6 @@ class ReportRenderer {
       header = this._renderReportHeader(report);
     }
     headerContainer.appendChild(header);
-    const scoresContainer = this._dom.find('.lh-scores-container', headerContainer);
 
     const container = this._dom.createElement('div', 'lh-container');
     const reportSection = container.appendChild(this._dom.createElement('div', 'lh-report'));
@@ -204,6 +203,7 @@ class ReportRenderer {
       const scoreScale = this._dom.cloneTemplate('#tmpl-lh-scorescale', this._templateContext);
       this._dom.find('.lh-scorescale-label', scoreScale).textContent =
         Util.UIStrings.scorescaleLabel;
+      const scoresContainer = this._dom.find('.lh-scores-container', headerContainer);
       scoresContainer.appendChild(scoreHeader);
       scoresContainer.appendChild(scoreScale);
     }
diff --git a/lighthouse-extension/app/src/lighthouse-ext-background.js b/lighthouse-extension/app/src/lighthouse-ext-background.js
index 68969d6ac..2a011dac8 100644
--- a/lighthouse-extension/app/src/lighthouse-ext-background.js
+++ b/lighthouse-extension/app/src/lighthouse-ext-background.js
@@ -75,8 +75,7 @@ async function runLighthouseInExtension(flags, categoryIDs) {
  * Run lighthouse for connection and provide similar results as in CLI.
  * @param {Connection} connection
  * @param {string} url
- * @param {LH.Flags} flags Lighthouse flags plus logAssets
-          Specify outputFormat to change the output format.
+ * @param {LH.Flags} flags Lighthouse flags, including `output`
  * @param {Array<string>} categoryIDs Name values of categories to include.
  * @param {{logAssets: boolean}} lrOpts Options coming from Lightrider
  * @return {Promise<string|Array<string>|void>}
diff --git a/typings/html-renderer.d.ts b/typings/html-renderer.d.ts
index 9e40f4379..0ff1b6485 100644
--- a/typings/html-renderer.d.ts
+++ b/typings/html-renderer.d.ts
@@ -12,7 +12,7 @@ import _PerformanceCategoryRenderer = require('../lighthouse-core/report/html/re
 import _ReportRenderer = require('../lighthouse-core/report/html/renderer/report-renderer.js');
 import _ReportUIFeatures = require('../lighthouse-core/report/html/renderer/report-ui-features.js');
 import _Util = require('../lighthouse-core/report/html/renderer/util.js');
-import _PSI = require('../lighthouse-core/report/html/renderer/psi.js');
+import _prepareLabData = require('../lighthouse-core/report/html/renderer/psi.js');
 import _FileNamer = require('../lighthouse-core/lib/file-namer.js');
 
 declare global {
@@ -25,7 +25,7 @@ declare global {
   var ReportRenderer: typeof _ReportRenderer;
   var ReportUIFeatures: typeof _ReportUIFeatures;
   var Util: typeof _Util;
-  var PSI: typeof _PSI;
+  var prepareLabData: typeof _prepareLabData;
 
   interface Window {
     CategoryRenderer: typeof _CategoryRenderer;
@@ -36,7 +36,7 @@ declare global {
     ReportRenderer: typeof _ReportRenderer;
     ReportUIFeatures: typeof _ReportUIFeatures;
     Util: typeof _Util;
-    PSI: typeof _PSI;
+    prepareLabData: typeof _prepareLabData;
   }
 
   module LH {


Test patch:
diff --git a/lighthouse-core/test/report/html/renderer/psi-test.js b/lighthouse-core/test/report/html/renderer/psi-test.js
index ef63895d7..5fed4e78e 100644
--- a/lighthouse-core/test/report/html/renderer/psi-test.js
+++ b/lighthouse-core/test/report/html/renderer/psi-test.js
@@ -11,7 +11,7 @@ const fs = require('fs');
 const jsdom = require('jsdom');
 
 const URL = require('../../../../lib/url-shim');
-const PSI = require('../../../../report/html/renderer/psi.js');
+const prepareLabData = require('../../../../report/html/renderer/psi.js');
 const Util = require('../../../../report/html/renderer/util.js');
 const DOM = require('../../../../report/html/renderer/dom.js');
 const CategoryRenderer = require('../../../../report/html/renderer/category-renderer');
@@ -60,7 +60,7 @@ describe('DOM', () => {
   describe('psi prepareLabData helpers', () => {
     describe('prepareLabData', () => {
       it('reports expected data', () => {
-        const result = PSI.prepareLabData(sampleResultsStr, document);
+        const result = prepareLabData(sampleResultsStr, document);
         assert.ok(result.scoreGaugeEl instanceof document.defaultView.Element);
         assert.equal(result.scoreGaugeEl.querySelector('.lh-gauge__wrapper').href, '');
         assert.ok(result.scoreGaugeEl.outerHTML.includes('<style>'), 'score gauge comes with CSS');
@@ -81,7 +81,7 @@ describe('DOM', () => {
         const lhrWithoutPerfStr = JSON.stringify(lhrWithoutPerf);
 
         assert.throws(() => {
-          PSI.prepareLabData(lhrWithoutPerfStr, document);
+          prepareLabData(lhrWithoutPerfStr, document);
         }, /no performance category/i);
       });
 
@@ -91,17 +91,16 @@ describe('DOM', () => {
         const lhrWithoutGroupsStr = JSON.stringify(lhrWithoutGroups);
 
         assert.throws(() => {
-          PSI.prepareLabData(lhrWithoutGroupsStr, document);
+          prepareLabData(lhrWithoutGroupsStr, document);
         }, /no category groups/i);
       });
     });
   });
 
-  describe('getFinalScreenshot', () => {
+  describe('_getFinalScreenshot', () => {
     it('gets a datauri as a string', () => {
-      const cloneResults = Util.prepareReportResult(sampleResults);
-      const perfCategory = cloneResults.reportCategories.find(cat => cat.id === 'performance');
-      const datauri = PSI.getFinalScreenshot(perfCategory);
+      const LHResultJsonString = JSON.stringify(sampleResults);
+      const datauri = prepareLabData(LHResultJsonString, document).finalScreenshotDataUri;
       assert.equal(typeof datauri, 'string');
       assert.ok(datauri.startsWith('data:image/jpeg;base64,'));
     });
@@ -109,10 +108,8 @@ describe('DOM', () => {
     it('returns null if there is no final-screenshot audit', () => {
       const clonedResults = JSON.parse(JSON.stringify(sampleResults));
       delete clonedResults.audits['final-screenshot'];
-      const lhrNoFinalSS = Util.prepareReportResult(clonedResults);
-      const perfCategory = lhrNoFinalSS.reportCategories.find(cat => cat.id === 'performance');
-
-      const datauri = PSI.getFinalScreenshot(perfCategory);
+      const LHResultJsonString = JSON.stringify(clonedResults);
+      const datauri = prepareLabData(LHResultJsonString, document).finalScreenshotDataUri;
       assert.equal(datauri, null);
     });
   });