report: render notApplicable metrics (#13981)

GoogleChrome · May 10, 2022 · 62bd578 · 62bd578
1 parent d79785c
commit 62bd578
Show file tree

Hide file tree

Showing 2 changed files with 22 additions and 0 deletions.
diff --git a/report/renderer/performance-category-renderer.js b/report/renderer/performance-category-renderer.js
@@ -46,6 +46,8 @@ export class PerformanceCategoryRenderer extends CategoryRenderer {
       valueEl.textContent = 'Error!';
       const tooltip = this.dom.createChildOf(descriptionEl, 'span');
       tooltip.textContent = audit.result.errorMessage || 'Report error: no metric information';
+    } else if (audit.result.scoreDisplayMode === 'notApplicable') {
+      valueEl.textContent = '--';
     }
 
     return element;

diff --git a/report/test/renderer/performance-category-renderer-test.js b/report/test/renderer/performance-category-renderer-test.js
@@ -77,6 +77,26 @@ describe('PerfCategoryRenderer', () => {
     );
   });
 
+  it('renders notApplicable metrics with n/a text', () => {
+    const perfWithNaMetric = JSON.parse(JSON.stringify(category));
+    const tbt = perfWithNaMetric.auditRefs.find(audit => audit.id === 'total-blocking-time');
+    assert(tbt);
+    const {id, title, description} = tbt.result;
+    tbt.result = {
+      id,
+      title,
+      description,
+      scoreDisplayMode: 'notApplicable',
+      score: null,
+    };
+
+    const perfDom = renderer.render(perfWithNaMetric, sampleResults.categoryGroups);
+    const tbtElement = perfDom.querySelector('.lh-metric#total-blocking-time');
+    assert(tbtElement);
+    assert.equal(tbtElement.querySelector('.lh-metric__title').textContent, 'Total Blocking Time');
+    assert.equal(tbtElement.querySelector('.lh-metric__value').textContent, '--');
+  });
+
   it('does not render metrics section if no metric group audits', () => {
     // Remove metrics from category
     const newCategory = JSON.parse(JSON.stringify(category));