report: show metric descriptions by default when errors exist (#9054)

GoogleChrome · May 30, 2019 · ffaea60 · ffaea60
1 parent f17e6be
commit ffaea60
Show file tree

Hide file tree

Showing 2 changed files with 24 additions and 0 deletions.
diff --git a/lighthouse-core/report/html/renderer/report-ui-features.js b/lighthouse-core/report/html/renderer/report-ui-features.js
@@ -117,6 +117,15 @@ class ReportUIFeatures {
       this._document.addEventListener('scroll', this._updateStickyHeaderOnScroll);
       window.addEventListener('resize', this._updateStickyHeaderOnScroll);
     }
+
+    // Show the metric descriptions by default when there is an error.
+    const hasMetricError = report.categories.performance && report.categories.performance.auditRefs
+      .some(audit => Boolean(audit.group === 'metrics' && report.audits[audit.id].errorMessage));
+    if (hasMetricError) {
+      const toggleInputEl = /** @type {HTMLInputElement} */ (
+        this._dom.find('.lh-metrics-toggle__input', this._document));
+      toggleInputEl.checked = true;
+    }
   }
 
   /**

diff --git a/lighthouse-core/test/report/html/renderer/report-ui-features-test.js b/lighthouse-core/test/report/html/renderer/report-ui-features-test.js
@@ -250,4 +250,19 @@ describe('ReportUIFeatures', () => {
       assert.ok(container.querySelector('.score100') === null, 'has no fireworks treatment');
     });
   });
+
+  describe('metric descriptions', () => {
+    it('with no errors, hide by default', () => {
+      const lhr = JSON.parse(JSON.stringify(sampleResults));
+      const container = render(lhr);
+      assert.ok(!container.querySelector('.lh-metrics-toggle__input').checked);
+    });
+
+    it('with error, show by default', () => {
+      const lhr = JSON.parse(JSON.stringify(sampleResults));
+      lhr.audits['first-contentful-paint'].errorMessage = 'Error.';
+      const container = render(lhr);
+      assert.ok(container.querySelector('.lh-metrics-toggle__input').checked);
+    });
+  });
 });