From 1e86d5e7e547b4d774bf482148fdb9b140a80582 Mon Sep 17 00:00:00 2001 From: Paul Irish Date: Wed, 26 Jun 2019 09:40:15 -0700 Subject: [PATCH 01/10] report: reuse generalized clumping for perf category --- lighthouse-core/config/default-config.js | 2 +- .../report/html/renderer/category-renderer.js | 25 +++++++++++++++---- .../renderer/performance-category-renderer.js | 23 +++++++---------- 3 files changed, 30 insertions(+), 20 deletions(-) diff --git a/lighthouse-core/config/default-config.js b/lighthouse-core/config/default-config.js index 93ab96ddf671..1c3edce99b2c 100644 --- a/lighthouse-core/config/default-config.js +++ b/lighthouse-core/config/default-config.js @@ -395,6 +395,7 @@ const defaultConfig = { {id: 'performance-budget', weight: 0, group: 'budgets'}, {id: 'resource-summary', weight: 0, group: 'diagnostics'}, {id: 'third-party-summary', weight: 0, group: 'diagnostics'}, + {id: 'screenshot-thumbnails', weight: 0, group: 'filmstrip'}, // Audits past this point don't belong to a group and will not be shown automatically {id: 'network-requests', weight: 0}, {id: 'network-rtt', weight: 0}, @@ -402,7 +403,6 @@ const defaultConfig = { {id: 'main-thread-tasks', weight: 0}, {id: 'diagnostics', weight: 0}, {id: 'metrics', weight: 0}, - {id: 'screenshot-thumbnails', weight: 0}, {id: 'final-screenshot', weight: 0}, ], }, diff --git a/lighthouse-core/report/html/renderer/category-renderer.js b/lighthouse-core/report/html/renderer/category-renderer.js index b03bdf238c89..fb6ac32fc6c8 100644 --- a/lighthouse-core/report/html/renderer/category-renderer.js +++ b/lighthouse-core/report/html/renderer/category-renderer.js @@ -413,6 +413,21 @@ class CategoryRenderer { this.createPermalinkSpan(element, category.id); element.appendChild(this.renderCategoryHeader(category, groupDefinitions)); + const clumpElems = this._splitAndRenderClumps(category.auditRefs, groupDefinitions, category.manualDescription); + element.append(...clumpElems); + return element; + } + + /** + * + * @param {LH.ReportResult.AuditRef[]} auditRefs + * @param {Object} [groupDefinitions] + * @param {LH.Result.Category.manualDescription} [manualDescription] + * @return {Element[]} + */ + _splitAndRenderClumps(auditRefs, groupDefinitions = {}, manualDescription) { + const clumpElems = []; + // Top level clumps for audits, in order they will appear in the report. /** @type {Map>} */ const clumps = new Map(); @@ -423,7 +438,7 @@ class CategoryRenderer { clumps.set('notApplicable', []); // Sort audits into clumps. - for (const auditRef of category.auditRefs) { + for (const auditRef of auditRefs) { const clumpId = this._getClumpIdForAuditRef(auditRef); const clump = /** @type {Array} */ (clumps.get(clumpId)); // already defined clump.push(auditRef); @@ -437,16 +452,16 @@ class CategoryRenderer { if (clumpId === 'failed') { const clumpElem = this.renderUnexpandableClump(auditRefs, groupDefinitions); clumpElem.classList.add(`lh-clump--failed`); - element.appendChild(clumpElem); + clumpElems.push(clumpElem); continue; } - const description = clumpId === 'manual' ? category.manualDescription : undefined; + const description = clumpId === 'manual' ? manualDescription : undefined; const clumpElem = this.renderClump(clumpId, {auditRefs, description}); - element.appendChild(clumpElem); + clumpElems.push(clumpElem); } - return element; + return clumpElems; } /** diff --git a/lighthouse-core/report/html/renderer/performance-category-renderer.js b/lighthouse-core/report/html/renderer/performance-category-renderer.js index 1193bb3a8d2d..5bc730ee0fab 100644 --- a/lighthouse-core/report/html/renderer/performance-category-renderer.js +++ b/lighthouse-core/report/html/renderer/performance-category-renderer.js @@ -156,7 +156,7 @@ class PerformanceCategoryRenderer extends CategoryRenderer { // Filmstrip const timelineEl = this.dom.createChildOf(element, 'div', 'lh-filmstrip-container'); - const thumbnailAudit = category.auditRefs.find(audit => audit.id === 'screenshot-thumbnails'); + const thumbnailAudit = category.auditRefs.find(audit => audit.group === 'filmstrip'); const thumbnailResult = thumbnailAudit && thumbnailAudit.result; if (thumbnailResult && thumbnailResult.details) { timelineEl.id = thumbnailResult.id; @@ -165,7 +165,7 @@ class PerformanceCategoryRenderer extends CategoryRenderer { } // Budgets - const budgetAudit = category.auditRefs.find(audit => audit.id === 'performance-budget'); + const budgetAudit = category.auditRefs.find(audit => audit.group === 'budgets'); if (budgetAudit && budgetAudit.result.details) { const table = this.detailsRenderer.render(budgetAudit.result.details); if (table) { @@ -220,19 +220,14 @@ class PerformanceCategoryRenderer extends CategoryRenderer { element.appendChild(groupEl); } - // Passed audits - const passedAudits = category.auditRefs - .filter(audit => (audit.group === 'load-opportunities' || audit.group === 'diagnostics') && - Util.showAsPassed(audit.result)); + // Everything else (passed, passed with warnings, n/a) + const renderedAudits = [...metricAudits, thumbnailAudit, budgetAudit, ...opportunityAudits, + ...diagnosticAudits]; + const unrenderedAudits = category.auditRefs.filter(ref => !renderedAudits.includes(ref)); + const remainingAudits = unrenderedAudits.filter(ref => !!ref.group); - if (!passedAudits.length) return element; - - const clumpOpts = { - auditRefs: passedAudits, - groupDefinitions: groups, - }; - const passedElem = this.renderClump('passed', clumpOpts); - element.appendChild(passedElem); + const clumpElems = this._splitAndRenderClumps(remainingAudits, groups); + element.append(...clumpElems); return element; } } From 151fc98735d233042dfe0002f3f022193bb4af85 Mon Sep 17 00:00:00 2001 From: Paul Irish Date: Wed, 26 Jun 2019 09:48:38 -0700 Subject: [PATCH 02/10] tests --- .../performance-category-renderer-test.js | 27 +++++++++++++++---- 1 file changed, 22 insertions(+), 5 deletions(-) diff --git a/lighthouse-core/test/report/html/renderer/performance-category-renderer-test.js b/lighthouse-core/test/report/html/renderer/performance-category-renderer-test.js index eec7b0744467..1c01d48e6594 100644 --- a/lighthouse-core/test/report/html/renderer/performance-category-renderer-test.js +++ b/lighthouse-core/test/report/html/renderer/performance-category-renderer-test.js @@ -68,7 +68,17 @@ describe('PerfCategoryRenderer', () => { it('renders the sections', () => { const categoryDOM = renderer.render(category, sampleResults.categoryGroups); const sections = categoryDOM.querySelectorAll('.lh-category > .lh-audit-group'); - assert.equal(sections.length, 5); + const sectionTitles = Array.from(sections).map(el => el.className); + expect(sectionTitles).toMatchInlineSnapshot(` +Array [ + "lh-audit-group lh-audit-group--metrics", + "lh-audit-group lh-audit-group--budgets", + "lh-audit-group lh-audit-group--load-opportunities", + "lh-audit-group lh-audit-group--diagnostics", + "lh-clump lh-audit-group lh-clump--passed", + "lh-clump lh-audit-group lh-clump--notapplicable", +] +`); }); it('renders the metrics', () => { @@ -150,11 +160,18 @@ describe('PerfCategoryRenderer', () => { const categoryDOM = renderer.render(category, sampleResults.categoryGroups); const passedSection = categoryDOM.querySelector('.lh-category > .lh-clump--passed'); - const passedAudits = category.auditRefs.filter(audit => - audit.group && audit.group !== 'metrics' && audit.id !== 'performance-budget' - && Util.showAsPassed(audit.result)); + const passedAudits = category.auditRefs.filter( + audit => + audit.group && + audit.group !== 'metrics' && + audit.id !== 'performance-budget' && + Util.showAsPassed(audit.result) && + audit.result.scoreDisplayMode !== 'notApplicable' + ).map(ref => ref.id); + const passedElements = passedSection.querySelectorAll('.lh-audit'); - assert.equal(passedElements.length, passedAudits.length); + const passedElemIds = Array.from(passedElements).map(el => el.id); + expect(passedAudits).toEqual(passedElemIds); }); // Unsupported by perf cat renderer right now. From 27c32153225a9267db8ef0ffa8cba398b1c9d0ef Mon Sep 17 00:00:00 2001 From: Paul Irish Date: Wed, 26 Jun 2019 09:53:48 -0700 Subject: [PATCH 03/10] lint --- lighthouse-core/report/html/renderer/category-renderer.js | 3 ++- .../report/html/renderer/performance-category-renderer.js | 2 +- 2 files changed, 3 insertions(+), 2 deletions(-) diff --git a/lighthouse-core/report/html/renderer/category-renderer.js b/lighthouse-core/report/html/renderer/category-renderer.js index fb6ac32fc6c8..78ced0f9e71c 100644 --- a/lighthouse-core/report/html/renderer/category-renderer.js +++ b/lighthouse-core/report/html/renderer/category-renderer.js @@ -413,7 +413,8 @@ class CategoryRenderer { this.createPermalinkSpan(element, category.id); element.appendChild(this.renderCategoryHeader(category, groupDefinitions)); - const clumpElems = this._splitAndRenderClumps(category.auditRefs, groupDefinitions, category.manualDescription); + const clumpElems = this._splitAndRenderClumps(category.auditRefs, groupDefinitions, + category.manualDescription); element.append(...clumpElems); return element; } diff --git a/lighthouse-core/report/html/renderer/performance-category-renderer.js b/lighthouse-core/report/html/renderer/performance-category-renderer.js index 5bc730ee0fab..586300201f20 100644 --- a/lighthouse-core/report/html/renderer/performance-category-renderer.js +++ b/lighthouse-core/report/html/renderer/performance-category-renderer.js @@ -222,7 +222,7 @@ class PerformanceCategoryRenderer extends CategoryRenderer { // Everything else (passed, passed with warnings, n/a) const renderedAudits = [...metricAudits, thumbnailAudit, budgetAudit, ...opportunityAudits, - ...diagnosticAudits]; + ...diagnosticAudits]; const unrenderedAudits = category.auditRefs.filter(ref => !renderedAudits.includes(ref)); const remainingAudits = unrenderedAudits.filter(ref => !!ref.group); From 9eb5b0899e3ee5e5c9c92a9ed37a4c02b26ac3ec Mon Sep 17 00:00:00 2001 From: Paul Irish Date: Thu, 17 Sep 2020 18:09:51 -0700 Subject: [PATCH 04/10] working --- lighthouse-core/config/default-config.js | 3 +++ .../html/renderer/performance-category-renderer.js | 5 +++-- lighthouse-core/test/results/sample_v2.json | 12 ++++++++---- 3 files changed, 14 insertions(+), 6 deletions(-) diff --git a/lighthouse-core/config/default-config.js b/lighthouse-core/config/default-config.js index 2eff790ed824..d0b4f2259712 100644 --- a/lighthouse-core/config/default-config.js +++ b/lighthouse-core/config/default-config.js @@ -356,6 +356,9 @@ const defaultConfig = { title: str_(UIStrings.diagnosticsGroupTitle), description: str_(UIStrings.diagnosticsGroupDescription), }, + 'filmstrip': { + title: '' + }, 'pwa-fast-reliable': { title: str_(UIStrings.pwaFastReliableGroupTitle), }, diff --git a/lighthouse-core/report/html/renderer/performance-category-renderer.js b/lighthouse-core/report/html/renderer/performance-category-renderer.js index 0204713f5667..06ce6de98500 100644 --- a/lighthouse-core/report/html/renderer/performance-category-renderer.js +++ b/lighthouse-core/report/html/renderer/performance-category-renderer.js @@ -221,7 +221,8 @@ class PerformanceCategoryRenderer extends CategoryRenderer { // Budgets /** @type {Array} */ const budgetTableEls = []; - category.auditRefs.filter(audit => audit.group === 'budgets').forEach(audit => { + const budgetAudits = category.auditRefs.filter(audit => audit.group === 'budgets') + budgetAudits.forEach(audit => { if (audit && audit.result.details) { const table = this.detailsRenderer.render(audit.result.details); if (table) { @@ -281,7 +282,7 @@ class PerformanceCategoryRenderer extends CategoryRenderer { } // Everything else (passed, passed with warnings, n/a) - const renderedAudits = [...metricAudits, thumbnailAudit, budgetAudit, ...opportunityAudits, + const renderedAudits = [...metricAudits, thumbnailAudit, ...budgetAudits, ...opportunityAudits, ...diagnosticAudits]; const unrenderedAudits = category.auditRefs.filter(ref => !renderedAudits.includes(ref)); const remainingAudits = unrenderedAudits.filter(ref => !!ref.group); diff --git a/lighthouse-core/test/results/sample_v2.json b/lighthouse-core/test/results/sample_v2.json index 0f8c72460257..acd4b033425b 100644 --- a/lighthouse-core/test/results/sample_v2.json +++ b/lighthouse-core/test/results/sample_v2.json @@ -4538,6 +4538,11 @@ "weight": 0, "group": "diagnostics" }, + { + "id": "screenshot-thumbnails", + "weight": 0, + "group": "filmstrip" + }, { "id": "network-requests", "weight": 0 @@ -4562,10 +4567,6 @@ "id": "metrics", "weight": 0 }, - { - "id": "screenshot-thumbnails", - "weight": 0 - }, { "id": "final-screenshot", "weight": 0 @@ -5111,6 +5112,9 @@ "title": "Diagnostics", "description": "More information about the performance of your application. These numbers don't [directly affect](https://web.dev/performance-scoring/) the Performance score." }, + "filmstrip": { + "title": "" + }, "pwa-fast-reliable": { "title": "Fast and reliable" }, From 670624ba75a79c76a66df0080f84699428cffb5e Mon Sep 17 00:00:00 2001 From: Paul Irish Date: Thu, 17 Sep 2020 18:10:52 -0700 Subject: [PATCH 05/10] Apply suggestions from code review Co-authored-by: Brendan Kenny --- lighthouse-core/report/html/renderer/category-renderer.js | 8 ++++---- 1 file changed, 4 insertions(+), 4 deletions(-) diff --git a/lighthouse-core/report/html/renderer/category-renderer.js b/lighthouse-core/report/html/renderer/category-renderer.js index c1a9e79794b3..61e317f77ef0 100644 --- a/lighthouse-core/report/html/renderer/category-renderer.js +++ b/lighthouse-core/report/html/renderer/category-renderer.js @@ -459,10 +459,10 @@ class CategoryRenderer { /** * - * @param {LH.ReportResult.AuditRef[]} auditRefs - * @param {Object} [groupDefinitions] - * @param {LH.Result.Category.manualDescription} [manualDescription] - * @return {Element[]} + * @param {Array} auditRefs + * @param {Record} groupDefinitions + * @param {LH.Result.Category['manualDescription']} [manualDescription] + * @return {Array} */ _splitAndRenderClumps(auditRefs, groupDefinitions = {}, manualDescription) { const clumpElems = []; From d72e53b8f1a45d183ede73f0aa2db380c2639032 Mon Sep 17 00:00:00 2001 From: Paul Irish Date: Thu, 17 Sep 2020 18:12:59 -0700 Subject: [PATCH 06/10] rename to public method --- lighthouse-core/report/html/renderer/category-renderer.js | 4 ++-- .../report/html/renderer/performance-category-renderer.js | 2 +- 2 files changed, 3 insertions(+), 3 deletions(-) diff --git a/lighthouse-core/report/html/renderer/category-renderer.js b/lighthouse-core/report/html/renderer/category-renderer.js index 61e317f77ef0..e02f26cf92d7 100644 --- a/lighthouse-core/report/html/renderer/category-renderer.js +++ b/lighthouse-core/report/html/renderer/category-renderer.js @@ -451,7 +451,7 @@ class CategoryRenderer { this.createPermalinkSpan(element, category.id); element.appendChild(this.renderCategoryHeader(category, groupDefinitions)); - const clumpElems = this._splitAndRenderClumps(category.auditRefs, groupDefinitions, + const clumpElems = this.renderClumps(category.auditRefs, groupDefinitions, category.manualDescription); element.append(...clumpElems); return element; @@ -464,7 +464,7 @@ class CategoryRenderer { * @param {LH.Result.Category['manualDescription']} [manualDescription] * @return {Array} */ - _splitAndRenderClumps(auditRefs, groupDefinitions = {}, manualDescription) { + renderClumps(auditRefs, groupDefinitions = {}, manualDescription) { const clumpElems = []; // Top level clumps for audits, in order they will appear in the report. diff --git a/lighthouse-core/report/html/renderer/performance-category-renderer.js b/lighthouse-core/report/html/renderer/performance-category-renderer.js index 06ce6de98500..5b26175c3318 100644 --- a/lighthouse-core/report/html/renderer/performance-category-renderer.js +++ b/lighthouse-core/report/html/renderer/performance-category-renderer.js @@ -287,7 +287,7 @@ class PerformanceCategoryRenderer extends CategoryRenderer { const unrenderedAudits = category.auditRefs.filter(ref => !renderedAudits.includes(ref)); const remainingAudits = unrenderedAudits.filter(ref => !!ref.group); - const clumpElems = this._splitAndRenderClumps(remainingAudits, groups); + const clumpElems = this.renderClumps(remainingAudits, groups); element.append(...clumpElems); return element; } From 8f931710e4db061823e9162205781c78298f931f Mon Sep 17 00:00:00 2001 From: Paul Irish Date: Thu, 17 Sep 2020 18:14:03 -0700 Subject: [PATCH 07/10] move the diagram --- .../report/html/renderer/category-renderer.js | 33 +++++++++---------- 1 file changed, 16 insertions(+), 17 deletions(-) diff --git a/lighthouse-core/report/html/renderer/category-renderer.js b/lighthouse-core/report/html/renderer/category-renderer.js index e02f26cf92d7..d11ce74b3f59 100644 --- a/lighthouse-core/report/html/renderer/category-renderer.js +++ b/lighthouse-core/report/html/renderer/category-renderer.js @@ -425,23 +425,6 @@ class CategoryRenderer { } /** - * Renders a set of top level sections (clumps), under a status of failed, warning, - * manual, passed, or notApplicable. The result ends up something like: - * - * failed clump - * ├── audit 1 (w/o group) - * ├── audit 2 (w/o group) - * ├── audit group - * | ├── audit 3 - * | └── audit 4 - * └── audit group - * ├── audit 5 - * └── audit 6 - * other clump (e.g. 'manual') - * ├── audit 1 - * ├── audit 2 - * ├── … - * ⋮ * @param {LH.ReportResult.Category} category * @param {Object} [groupDefinitions] * @return {Element} @@ -458,7 +441,23 @@ class CategoryRenderer { } /** + * Renders a set of top level sections (clumps), under a status of failed, warning, + * manual, passed, or notApplicable. The result ends up something like: * + * failed clump + * ├── audit 1 (w/o group) + * ├── audit 2 (w/o group) + * ├── audit group + * | ├── audit 3 + * | └── audit 4 + * └── audit group + * ├── audit 5 + * └── audit 6 + * other clump (e.g. 'manual') + * ├── audit 1 + * ├── audit 2 + * ├── … + * ⋮ * @param {Array} auditRefs * @param {Record} groupDefinitions * @param {LH.Result.Category['manualDescription']} [manualDescription] From 865cbd4e996b9df25025e2b61a9cadbc2a7c7869 Mon Sep 17 00:00:00 2001 From: Paul Irish Date: Thu, 17 Sep 2020 18:31:07 -0700 Subject: [PATCH 08/10] render multiple filmstrips, potentially --- .../renderer/performance-category-renderer.js | 19 +++++++++++-------- 1 file changed, 11 insertions(+), 8 deletions(-) diff --git a/lighthouse-core/report/html/renderer/performance-category-renderer.js b/lighthouse-core/report/html/renderer/performance-category-renderer.js index 5b26175c3318..2816d4a19521 100644 --- a/lighthouse-core/report/html/renderer/performance-category-renderer.js +++ b/lighthouse-core/report/html/renderer/performance-category-renderer.js @@ -210,12 +210,15 @@ class PerformanceCategoryRenderer extends CategoryRenderer { // Filmstrip const timelineEl = this.dom.createChildOf(element, 'div', 'lh-filmstrip-container'); - const thumbnailAudit = category.auditRefs.find(audit => audit.group === 'filmstrip'); - const thumbnailResult = thumbnailAudit && thumbnailAudit.result; - if (thumbnailResult && thumbnailResult.details) { - timelineEl.id = thumbnailResult.id; - const filmstripEl = this.detailsRenderer.render(thumbnailResult.details); - filmstripEl && timelineEl.appendChild(filmstripEl); + // We only expect one of these, but the renderer will support multiple + const thumbnailAudits = category.auditRefs.filter(audit => audit.group === 'filmstrip'); + for (const thumbnailAudit of thumbnailAudits) { + const result = thumbnailAudit.result; + if (result && result.details) { + timelineEl.id = result.id; + const filmstripEl = this.detailsRenderer.render(result.details); + filmstripEl && timelineEl.appendChild(filmstripEl); + } } // Budgets @@ -282,8 +285,8 @@ class PerformanceCategoryRenderer extends CategoryRenderer { } // Everything else (passed, passed with warnings, n/a) - const renderedAudits = [...metricAudits, thumbnailAudit, ...budgetAudits, ...opportunityAudits, - ...diagnosticAudits]; + const renderedAudits = [...metricAudits, ...thumbnailAudits, ...budgetAudits, + ...opportunityAudits, ...diagnosticAudits]; const unrenderedAudits = category.auditRefs.filter(ref => !renderedAudits.includes(ref)); const remainingAudits = unrenderedAudits.filter(ref => !!ref.group); From ae3c77fc95eefb09b2157b93ccc2c248186f127c Mon Sep 17 00:00:00 2001 From: Paul Irish Date: Thu, 17 Sep 2020 18:31:56 -0700 Subject: [PATCH 09/10] feedback --- .../html/renderer/performance-category-renderer-test.js | 4 ++-- 1 file changed, 2 insertions(+), 2 deletions(-) diff --git a/lighthouse-core/test/report/html/renderer/performance-category-renderer-test.js b/lighthouse-core/test/report/html/renderer/performance-category-renderer-test.js index d2f9587d557a..3b6c77ac8103 100644 --- a/lighthouse-core/test/report/html/renderer/performance-category-renderer-test.js +++ b/lighthouse-core/test/report/html/renderer/performance-category-renderer-test.js @@ -176,7 +176,7 @@ Array [ const categoryDOM = renderer.render(category, sampleResults.categoryGroups); const passedSection = categoryDOM.querySelector('.lh-category > .lh-clump--passed'); - const passedAudits = category.auditRefs.filter( + const passedAuditIds = category.auditRefs.filter( audit => audit.group && audit.group !== 'metrics' && @@ -187,7 +187,7 @@ Array [ const passedElements = passedSection.querySelectorAll('.lh-audit'); const passedElemIds = Array.from(passedElements).map(el => el.id); - expect(passedAudits).toEqual(passedElemIds); + expect(passedAuditIds).toEqual(passedElemIds); }); // Unsupported by perf cat renderer right now. From c934c4bd2c12cc6d2dcd9d8534ae19f812547772 Mon Sep 17 00:00:00 2001 From: Paul Irish Date: Thu, 17 Sep 2020 18:33:05 -0700 Subject: [PATCH 10/10] lint --- lighthouse-core/config/default-config.js | 2 +- .../report/html/renderer/performance-category-renderer.js | 2 +- 2 files changed, 2 insertions(+), 2 deletions(-) diff --git a/lighthouse-core/config/default-config.js b/lighthouse-core/config/default-config.js index d0b4f2259712..cbc4936a2d14 100644 --- a/lighthouse-core/config/default-config.js +++ b/lighthouse-core/config/default-config.js @@ -357,7 +357,7 @@ const defaultConfig = { description: str_(UIStrings.diagnosticsGroupDescription), }, 'filmstrip': { - title: '' + title: '', }, 'pwa-fast-reliable': { title: str_(UIStrings.pwaFastReliableGroupTitle), diff --git a/lighthouse-core/report/html/renderer/performance-category-renderer.js b/lighthouse-core/report/html/renderer/performance-category-renderer.js index 2816d4a19521..d3e20e52b55a 100644 --- a/lighthouse-core/report/html/renderer/performance-category-renderer.js +++ b/lighthouse-core/report/html/renderer/performance-category-renderer.js @@ -224,7 +224,7 @@ class PerformanceCategoryRenderer extends CategoryRenderer { // Budgets /** @type {Array} */ const budgetTableEls = []; - const budgetAudits = category.auditRefs.filter(audit => audit.group === 'budgets') + const budgetAudits = category.auditRefs.filter(audit => audit.group === 'budgets'); budgetAudits.forEach(audit => { if (audit && audit.result.details) { const table = this.detailsRenderer.render(audit.result.details);