diff --git a/lighthouse-core/report/html/renderer/category-renderer.js b/lighthouse-core/report/html/renderer/category-renderer.js index 5e8e2210ebff..c176006ec2b1 100644 --- a/lighthouse-core/report/html/renderer/category-renderer.js +++ b/lighthouse-core/report/html/renderer/category-renderer.js @@ -22,6 +22,7 @@ /** @typedef {import('./report-renderer.js')} ReportRenderer */ /** @typedef {import('./details-renderer.js')} DetailsRenderer */ /** @typedef {import('./util.js')} Util */ +/** @typedef {{passed: Array, failed: Array, notApplicable: Array}} AuditsByState */ class CategoryRenderer { /** @@ -220,13 +221,15 @@ class CategoryRenderer { /** * @param {Array} elements + * @param {boolean} expandByDefault * @return {Element} */ - renderPassedAuditsSection(elements) { + renderPassedAuditsSection(elements, expandByDefault) { const passedElem = this.renderAuditGroup({ title: Util.UIStrings.passedAuditsGroupTitle, }, {expandable: true, itemCount: this._getTotalAuditsLength(elements)}); passedElem.classList.add('lh-passed-audits'); + if (expandByDefault) passedElem.setAttribute('open', ''); elements.forEach(elem => passedElem.appendChild(elem)); return passedElem; } @@ -260,6 +263,14 @@ class CategoryRenderer { return auditGroupElem; } + /** + * @param {Array} audits + * @return {boolean} + */ + _auditsHaveWarnings(audits) { + return audits.some(group => Boolean(group.result.warnings && group.result.warnings.length)); + } + /** * @param {ParentNode} context */ @@ -316,8 +327,10 @@ class CategoryRenderer { const manualAudits = auditRefs.filter(audit => audit.result.scoreDisplayMode === 'manual'); const nonManualAudits = auditRefs.filter(audit => !manualAudits.includes(audit)); - /** @type {Object, failed: Array, notApplicable: Array}>} */ + /** @type {Object} */ const auditsGroupedByGroup = {}; + + /** @type {AuditsByState} */ const auditsUngrouped = {passed: [], failed: [], notApplicable: []}; nonManualAudits.forEach(auditRef => { @@ -345,6 +358,8 @@ class CategoryRenderer { } }); + let expandPassedAudits = this._auditsHaveWarnings(auditsUngrouped.passed); + const failedElements = /** @type {Array} */ ([]); const passedElements = /** @type {Array} */ ([]); const notApplicableElements = /** @type {Array} */ ([]); @@ -372,6 +387,7 @@ class CategoryRenderer { groups.passed.forEach((item, i) => auditGroupElem.appendChild(this.renderAudit(item, i))); auditGroupElem.classList.add('lh-audit-group--unadorned'); passedElements.push(auditGroupElem); + if (!expandPassedAudits) expandPassedAudits = this._auditsHaveWarnings(groups.passed); } if (groups.notApplicable.length) { @@ -394,7 +410,7 @@ class CategoryRenderer { } if (passedElements.length) { - const passedElem = this.renderPassedAuditsSection(passedElements); + const passedElem = this.renderPassedAuditsSection(passedElements, expandPassedAudits); element.appendChild(passedElem); } diff --git a/lighthouse-core/report/html/renderer/performance-category-renderer.js b/lighthouse-core/report/html/renderer/performance-category-renderer.js index 873c0b765c58..ec082313dce7 100644 --- a/lighthouse-core/report/html/renderer/performance-category-renderer.js +++ b/lighthouse-core/report/html/renderer/performance-category-renderer.js @@ -209,14 +209,15 @@ class PerformanceCategoryRenderer extends CategoryRenderer { } // Passed audits - const passedElements = category.auditRefs + const passedAudits = category.auditRefs .filter(audit => (audit.group === 'load-opportunities' || audit.group === 'diagnostics') && - Util.showAsPassed(audit.result)) - .map((audit, i) => this.renderAudit(audit, i)); + Util.showAsPassed(audit.result)); + const passedElements = passedAudits.map((audit, i) => this.renderAudit(audit, i)); if (!passedElements.length) return element; - const passedElem = this.renderPassedAuditsSection(passedElements); + const expandPassedAudits = this._auditsHaveWarnings(passedAudits); + const passedElem = this.renderPassedAuditsSection(passedElements, expandPassedAudits); element.appendChild(passedElem); return element; } diff --git a/lighthouse-core/test/report/html/renderer/category-renderer-test.js b/lighthouse-core/test/report/html/renderer/category-renderer-test.js index 77e890be0125..9053252d519f 100644 --- a/lighthouse-core/test/report/html/renderer/category-renderer-test.js +++ b/lighthouse-core/test/report/html/renderer/category-renderer-test.js @@ -112,6 +112,38 @@ describe('CategoryRenderer', () => { assert.ok(warningEl.textContent.includes(auditResult.warnings[1]), '2nd warning provided'); }); + it('expands passed audit group when warnings exist', () => { + const category = sampleResults.reportCategories.find(c => c.id === 'pwa'); + const prevAuditRefs = category.auditRefs; + const auditWithWarning = prevAuditRefs[0]; + auditWithWarning.result = Object.assign({}, category.auditRefs[0].result, + {warnings: ['Some warning']}); + category.auditRefs = [auditWithWarning]; + + const auditDOM = renderer.render(category); + const passedAuditGroupEl = auditDOM.querySelector('details.lh-passed-audits'); + const isExpanded = passedAuditGroupEl.hasAttribute('open'); + assert.ok(isExpanded, 'Passed audit group with warning should be expanded by default'); + + category.auditRefs = prevAuditRefs; + }); + + it('does not expand passed audit group when no warnings exist', () => { + const category = sampleResults.reportCategories.find(c => c.id === 'pwa'); + const prevAuditRefs = category.auditRefs; + const auditWithNoWarning = prevAuditRefs[0]; + auditWithNoWarning.result = Object.assign({}, category.auditRefs[0].result, + {warnings: []}); + category.auditRefs = [auditWithNoWarning]; + + const auditDOM = renderer.render(category); + const passedAuditGroupEl = auditDOM.querySelector('details.lh-passed-audits'); + const isExpanded = passedAuditGroupEl.hasAttribute('open'); + assert.ok(!isExpanded, 'Passed audit group with no warning should not be expanded by default'); + + category.auditRefs = prevAuditRefs; + }); + it('renders a category', () => { const category = sampleResults.reportCategories.find(c => c.id === 'pwa'); const categoryDOM = renderer.render(category, sampleResults.categoryGroups);