misc(build): create error-y LHR for the deploy

lighthouse-core/report/html/renderer/performance-category-renderer.js

@@ -220,6 +220,8 @@ class PerformanceCategoryRenderer extends CategoryRenderer {
       element.appendChild(groupEl);
     }
 
+    // TODO: Handle passed w/ warnings in a unique clump like non-perf categories do
+
     // Passed audits
     const passedAudits = category.auditRefs
         .filter(audit => (audit.group === 'load-opportunities' || audit.group === 'diagnostics') &&

lighthouse-core/scripts/build-report-for-autodeployment.js

@@ -14,32 +14,31 @@ const mkdirp = require('mkdirp').sync;
 const swapLocale = require('../lib/i18n/swap-locale.js');
 
 const ReportGenerator = require('../../lighthouse-core/report/report-generator.js');
+const GatherRunner = require('../gather/gather-runner.js');
+const {defaultSettings} = require('../config/constants.js');
+const lighthouse = require('../index.js');
 const lhr = /** @type {LH.Result} */ (require('../../lighthouse-core/test/results/sample_v2.json'));
 
 const DIST = path.join(__dirname, `../../dist`);
 
-// Add a plugin to demo plugin rendering.
-lhr.categories['lighthouse-plugin-someplugin'] = {
-  id: 'lighthouse-plugin-someplugin',
-  title: 'Plugin',
-  score: 0.5,
-  auditRefs: [],
-};
-
 (async function() {
+  addPluginCategory(lhr);
+  const errorLhr = await generateErrorLHR();
+
   const filenameToLhr = {
-    'english': lhr,
-    'espanol': swapLocale(lhr, 'es').lhr,
-    'arabic': swapLocale(lhr, 'ar').lhr,
+    english: lhr,
+    espanol: swapLocale(lhr, 'es').lhr,
+    arabic: swapLocale(lhr, 'ar').lhr,
+    error: errorLhr,
   };
 
-  mkdirp(DIST);
-
   // Generate and write reports
   Object.entries(filenameToLhr).forEach(([filename, lhr]) => {
     let html = ReportGenerator.generateReportHtml(lhr);
+    // TODO: PSI is another variant to consider
     for (const variant of ['', '-devtools']) {
       if (variant === '-devtools') {
+        // TODO: Make the DevTools Audits panel "emulation" more comprehensive
         html = html.replace(`"lh-root lh-vars"`, `"lh-root lh-vars lh-devtools"`);
       }
       const filepath = `${DIST}/${filename}${variant}/index.html`;
@@ -49,3 +48,68 @@ lhr.categories['lighthouse-plugin-someplugin'] = {
     }
   });
 })();
+
+/**
+ * Add a plugin to demo plugin rendering.
+ * @param {LH.Result} lhr
+ */
+function addPluginCategory(lhr) {
+  lhr.categories['lighthouse-plugin-someplugin'] = {
+    id: 'lighthouse-plugin-someplugin',
+    title: 'Plugin',
+    score: 0.5,
+    auditRefs: [],
+  };
+}
+
+/**
+ * Generate an LHR with errors for the renderer to display
+ * We'll write an "empty" artifacts file to disk, only to use it in auditMode
+ * @return {Promise<LH.Result>}
+ */
+async function generateErrorLHR() {
+  const url = 'http://fakeurl.com';
+  const options = {
+    requestedUrl: url,
+    settings: defaultSettings,
+    driver: {
+      getBrowserVersion: () => ({userAgent: 'Mozilla/5.0 ErrorUserAgent Chrome/66'}),
+    },
+  };
+  // @ts-ignore driver isn't mocked out completely
+  const artifacts = await GatherRunner.initializeBaseArtifacts(options);
+  // Add in a global runWarning
+  artifacts.LighthouseRunWarnings.push(`Something went wrong with recording the trace over your
+  page load. Please run Lighthouse again. (NO_FCP)`);
+
+  // Save artifacts to disk then run `lighthouse -G` with them
+  const TMP = `${DIST}/.tmp/`;
+  mkdirp(TMP);
+  fs.writeFileSync(`${TMP}/artifacts.json`, JSON.stringify(artifacts), 'utf-8');
+  const errorRunnerResult = await lighthouse(url, {auditMode: TMP});
+  const errorLhr = /** @type {LH.RunnerResult} */ (errorRunnerResult).lhr;
+
+  // Add audit warnings to font-display
+  errorLhr.audits['font-display'].warnings = [
+    'Lighthouse was unable to automatically check the font-display value for the following URL: https://secure-ds.serving-sys.com/resources/PROD/html5/105657/20190307/1074580285/43862346571980472/fonts/IBMPlexSans-Light-Latin1.woff.',
+    'Lighthouse was unable to automatically check the font-display value for the following URL: https://secure-ds.serving-sys.com/resources/PROD/html5/105657/20190307/1074580285/43862346571980472/fonts/IBMPlexSans-Bold-Latin1.woff.',
+  ];
+  // perf/offscreen-images - set as passing but with a warning
+  const offscreenImagesAudit = errorLhr.audits['offscreen-images'];
+  offscreenImagesAudit.warnings = [
+    'Invalid image sizing information: https://cdn.cnn.com/cnn/.e1mo/img/4.0/vr/vr_new_asset.png',
+  ];
+  offscreenImagesAudit.errorMessage = undefined;
+  offscreenImagesAudit.scoreDisplayMode = 'binary';
+  offscreenImagesAudit.score = 1;
+  // pwa-apple-touch-icon - set as passing but with a warning
+  const appleTouchIconAudit = errorLhr.audits['apple-touch-icon'];
+  appleTouchIconAudit.warnings = [
+    '`apple-touch-icon-precomposed` is out of date; `apple-touch-icon` is preferred.',
+  ];
+  appleTouchIconAudit.errorMessage = undefined;
+  appleTouchIconAudit.scoreDisplayMode = 'binary';
+  appleTouchIconAudit.score = 1;
+
+  return errorLhr;
+}