diff --git a/report/renderer/performance-category-renderer.js b/report/renderer/performance-category-renderer.js index 2f6820b3ffb7..976f4d2d6f5c 100644 --- 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 index 9b082b5c324e..70b610dd8037 100644 --- 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));