diff --git a/lighthouse-core/report/html/renderer/category-renderer.js b/lighthouse-core/report/html/renderer/category-renderer.js
index 25976cce4f7d..5a84a57818bd 100644
--- a/lighthouse-core/report/html/renderer/category-renderer.js
+++ b/lighthouse-core/report/html/renderer/category-renderer.js
@@ -217,10 +217,9 @@ class CategoryRenderer {
* array of audit and audit-group elements.
* @param {Array} auditRefs
* @param {Object} groupDefinitions
- * @param {{expandable: boolean}} opts
* @return {Array}
*/
- _renderGroupedAudits(auditRefs, groupDefinitions, opts) {
+ _renderGroupedAudits(auditRefs, groupDefinitions) {
// Audits grouped by their group (or under notAGroup).
/** @type {Map>} */
const grouped = new Map();
@@ -252,7 +251,10 @@ class CategoryRenderer {
// Push grouped audits as a group.
const groupDef = groupDefinitions[groupId];
- const auditGroupElem = this.renderAuditGroup(groupDef, opts);
+ // Expanded by default!
+ // 1. The 'failed' clump has all groups expanded.
+ // 2. If a clump is collapsed (passed, n/a), we want the groups within to already be expanded
+ const auditGroupElem = this.renderAuditGroup(groupDef, {expandable: false});
for (const auditRef of groupAuditRefs) {
auditGroupElem.appendChild(this.renderAudit(auditRef, index++));
}
@@ -272,7 +274,7 @@ class CategoryRenderer {
*/
renderUnexpandableClump(auditRefs, groupDefinitions) {
const clumpElement = this.dom.createElement('div');
- const elements = this._renderGroupedAudits(auditRefs, groupDefinitions, {expandable: false});
+ const elements = this._renderGroupedAudits(auditRefs, groupDefinitions);
elements.forEach(elem => clumpElement.appendChild(elem));
return clumpElement;
}
@@ -291,7 +293,8 @@ class CategoryRenderer {
* ├── audit 5
* └── audit 6
* clump (e.g. 'manual')
- * ├── …
+ * ├── audit 1
+ * ├── audit 2
* ⋮
* @param {TopLevelClumpId} clumpId
* @param {{auditRefs: Array, groupDefinitions: Object, description?: string}} clumpOpts
@@ -305,17 +308,15 @@ class CategoryRenderer {
return failedElem;
}
- const expandable = true;
- const elements = this._renderGroupedAudits(auditRefs, groupDefinitions, {expandable});
-
const clumpInfo = this._clumpDisplayInfo[clumpId];
// TODO: renderAuditGroup shouldn't be used to render a clump (since it *contains* audit groups).
const groupDef = {title: clumpInfo.title, description};
- const opts = {expandable, itemCount: auditRefs.length};
- const clumpElem = this.renderAuditGroup(groupDef, opts);
+ const groupOpts = {expandable: true, itemCount: auditRefs.length};
+ const clumpElem = this.renderAuditGroup(groupDef, groupOpts);
clumpElem.classList.add('lh-clump', clumpInfo.className);
- elements.forEach(elem => clumpElem.appendChild(elem));
+ // For all non-failed clumps, we don't group
+ clumpElem.append(...auditRefs.map(this.renderAudit.bind(this)));
return clumpElem;
}
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 8be1099a452f..bbb5547544e2 100644
--- a/lighthouse-core/test/report/html/renderer/category-renderer-test.js
+++ b/lighthouse-core/test/report/html/renderer/category-renderer-test.js
@@ -227,14 +227,16 @@ describe('CategoryRenderer', () => {
assert.equal(failedAuditGroups.length, failedAuditTags.size);
});
- it('renders the passed audits grouped by group', () => {
+ it('renders the passed audits ungrouped', () => {
const categoryDOM = renderer.render(category, sampleResults.categoryGroups);
const passedAudits = category.auditRefs.filter(audit =>
audit.result.scoreDisplayMode !== 'notApplicable' && audit.result.score === 1);
- const passedAuditTags = new Set(passedAudits.map(audit => audit.group));
const passedAuditGroups = categoryDOM.querySelectorAll('.lh-clump--passed .lh-audit-group');
- assert.equal(passedAuditGroups.length, passedAuditTags.size);
+ const passedAuditsElems = categoryDOM.querySelectorAll('.lh-clump--passed .lh-audit');
+
+ assert.equal(passedAuditGroups.length, 0);
+ assert.equal(passedAuditsElems.length, passedAudits.length);
});
it('renders all the audits', () => {
@@ -293,15 +295,20 @@ describe('CategoryRenderer', () => {
});
it('gives each group a selectable class', () => {
+ const categoryClone = JSON.parse(JSON.stringify(category));
+ // Force all results to be Failed for accurate counting of groups.
+ categoryClone.auditRefs.forEach(ref => {
+ ref.result.score = 0;
+ ref.result.scoreDisplayMode = 'binary';
+ });
const categoryGroupIds = new Set(category.auditRefs.filter(a => a.group).map(a => a.group));
assert.ok(categoryGroupIds.size > 6); // Ensure there's something to test.
- const categoryElem = renderer.render(category, sampleResults.categoryGroups);
+ const categoryElem = renderer.render(categoryClone, sampleResults.categoryGroups);
categoryGroupIds.forEach(groupId => {
const selector = `.lh-audit-group--${groupId}`;
- // Could be multiple results (e.g. found in both passed and failed clumps).
- assert.ok(categoryElem.querySelectorAll(selector).length >= 1,
+ assert.equal(categoryElem.querySelectorAll(selector).length, 1,
`could not find '${selector}'`);
});
});