Skip to content

Commit

Permalink
report: rename clump classes; give classes to all audit groups (#6482)
Browse files Browse the repository at this point in the history
  • Loading branch information
@brendankenny
brendankenny committed Nov 6, 2018
1 parent d686293 commit c93b028
Show file tree
Hide file tree
Showing 4 changed files with 58 additions and 41 deletions.
14 changes: 7 additions & 7 deletions lighthouse-core/report/html/renderer/category-renderer.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -46,19 +46,19 @@ class CategoryRenderer {
get _clumpDisplayInfo() {
return {
'failed': {
className: 'lh-failed-audits',
className: 'lh-clump--failed',
},
'manual': {
title: Util.UIStrings.manualAuditsGroupTitle,
className: 'lh-audit-group--manual',
className: 'lh-clump--manual',
},
'passed': {
title: Util.UIStrings.passedAuditsGroupTitle,
className: 'lh-passed-audits',
className: 'lh-clump--passed',
},
'not-applicable': {
title: Util.UIStrings.notApplicableAuditsGroupTitle,
className: 'lh-audit-group--not-applicable',
className: 'lh-clump--not-applicable',
},
};
}
Expand Down Expand Up @@ -255,7 +255,7 @@ class CategoryRenderer {
for (const auditRef of groupAuditRefs) {
auditGroupElem.appendChild(this.renderAudit(auditRef, index++));
}
auditGroupElem.classList.add('lh-audit-group--unadorned');
auditGroupElem.classList.add(`lh-audit-group--${groupId}`);
auditElements.push(auditGroupElem);
}

Expand Down Expand Up @@ -300,7 +300,7 @@ class CategoryRenderer {
if (clumpId === 'failed') {
// Failed audit clump is always expanded and not nested in an lh-audit-group.
const failedElem = this.renderUnexpandableClump(auditRefs, groupDefinitions);
failedElem.classList.add(this._clumpDisplayInfo.failed.className);
failedElem.classList.add('lh-clump', this._clumpDisplayInfo.failed.className);
return failedElem;
}

Expand All @@ -312,7 +312,7 @@ class CategoryRenderer {
const groupDef = {title: clumpInfo.title, description};
const opts = {expandable, itemCount: auditRefs.length};
const clumpElem = this.renderAuditGroup(groupDef, opts);
clumpElem.classList.add(clumpInfo.className);
clumpElem.classList.add('lh-clump', clumpInfo.className);

elements.forEach(elem => clumpElem.appendChild(elem));

Expand Down
35 changes: 20 additions & 15 deletions lighthouse-core/report/html/report-styles.css
View file
Original file line number Diff line number Diff line change
Expand Up @@ -579,7 +579,8 @@ details, summary {
}

.lh-audit-group__header::before {
content: '';
/* By default, groups don't get an icon */
content: none;
width: calc(var(--subheader-font-size) / 14 * 24);
height: calc(var(--subheader-font-size) / 14 * 24);
margin-right: calc(var(--subheader-font-size) / 2);
Expand All @@ -589,30 +590,31 @@ details, summary {
vertical-align: middle;
}

/* A11y/Seo groups within Passed don't get an icon */
.lh-audit-group--unadorned .lh-audit-group__header::before {
content: none;
}


.lh-audit-group--manual .lh-audit-group__header::before {
.lh-clump--manual > summary .lh-audit-group__header::before {
content: '';
background-image: var(--search-icon-url);
}
.lh-passed-audits .lh-audit-group__header::before {
.lh-clump--passed > summary .lh-audit-group__header::before {
content: '';
background-image: var(--check-icon-url);
}
.lh-clump--not-applicable > summary .lh-audit-group__header::before {
content: '';
background-image: var(--remove-circle-icon-url);
}

.lh-audit-group--diagnostics .lh-audit-group__header::before {
content: '';
background-image: var(--content-paste-icon-url);
}
.lh-audit-group--opportunities .lh-audit-group__header::before {
content: '';
background-image: var(--photo-filter-icon-url);
}
.lh-audit-group--metrics .lh-audit-group__header::before {
content: '';
background-image: var(--av-timer-icon-url);
}
.lh-audit-group--not-applicable .lh-audit-group__header::before {
background-image: var(--remove-circle-icon-url);
}

/* Removing too much whitespace */
.lh-audit-group--metrics {
Expand All @@ -637,11 +639,14 @@ details, summary {
.lh-audit-group__description {
font-size: var(--body-font-size);
color: var(--medium-75-gray);
margin: var(--lh-audit-group-vpadding) 0;
margin: 0 0 var(--lh-audit-group-vpadding);
}

.lh-audit-group--unadorned .lh-audit-group__description {
margin-top: 0;
.lh-clump > .lh-audit-group__description,
.lh-audit-group--diagnostics .lh-audit-group__description,
.lh-audit-group--opportunities .lh-audit-group__description,
.lh-audit-group--metrics .lh-audit-group__description {
margin-top: var(--lh-audit-group-vpadding);
}

.lh-audit-explanation {
Expand Down
48 changes: 30 additions & 18 deletions lighthouse-core/test/report/html/renderer/category-renderer-test.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -142,13 +142,13 @@ describe('CategoryRenderer', () => {
it('renders manual audits if the category contains them', () => {
const pwaCategory = sampleResults.reportCategories.find(cat => cat.id === 'pwa');
const categoryDOM = renderer.render(pwaCategory, sampleResults.categoryGroups);
assert.ok(categoryDOM.querySelector('.lh-audit-group--manual .lh-audit-group__summary'));
assert.ok(categoryDOM.querySelector('.lh-clump--manual .lh-audit-group__summary'));
assert.equal(categoryDOM.querySelectorAll('.lh-audit--manual').length, 3,
'score shows informative and dash icon');

assert.ok(pwaCategory.manualDescription);
const description = categoryDOM
.querySelector('.lh-audit-group--manual .lh-audit-group__description').textContent;
.querySelector('.lh-clump--manual .lh-audit-group__description').textContent;
// may need to be adjusted if description includes a link at the beginning
assert.ok(description.startsWith(pwaCategory.manualDescription.substring(0, 20)),
'no manual description');
Expand All @@ -158,19 +158,19 @@ describe('CategoryRenderer', () => {
const a11yCategory = sampleResults.reportCategories.find(cat => cat.id === 'accessibility');
const categoryDOM = renderer.render(a11yCategory, sampleResults.categoryGroups);
assert.ok(categoryDOM.querySelector(
'.lh-audit-group--not-applicable .lh-audit-group__summary'));
'.lh-clump--not-applicable .lh-audit-group__summary'));

const notApplicableCount = a11yCategory.auditRefs.reduce((sum, audit) =>
sum += audit.result.scoreDisplayMode === 'not-applicable' ? 1 : 0, 0);
assert.equal(
categoryDOM.querySelectorAll('.lh-audit-group--not-applicable .lh-audit').length,
categoryDOM.querySelectorAll('.lh-clump--not-applicable .lh-audit').length,
notApplicableCount,
'score shows informative and dash icon'
);

const bestPracticeCat = sampleResults.reportCategories.find(cat => cat.id === 'best-practices');
const categoryDOM2 = renderer.render(bestPracticeCat, sampleResults.categoryGroups);
assert.ok(!categoryDOM2.querySelector('.lh-audit-group--not-applicable'));
assert.ok(!categoryDOM2.querySelector('.lh-clump--not-applicable'));
});

describe('category with groups', () => {
Expand Down Expand Up @@ -216,7 +216,7 @@ describe('CategoryRenderer', () => {
audit.result.scoreDisplayMode !== 'not-applicable' && audit.result.score === 1);
const passedAuditTags = new Set(passedAudits.map(audit => audit.group));

const passedAuditGroups = categoryDOM.querySelectorAll('.lh-passed-audits .lh-audit-group');
const passedAuditGroups = categoryDOM.querySelectorAll('.lh-clump--passed .lh-audit-group');
assert.equal(passedAuditGroups.length, passedAuditTags.size);
});

Expand All @@ -229,11 +229,11 @@ describe('CategoryRenderer', () => {
it('increments the audit index across groups', () => {
const elem = renderer.render(category, sampleResults.categoryGroups);

const passedAudits = elem.querySelectorAll('.lh-passed-audits .lh-audit__index');
const failedAudits = elem.querySelectorAll('.lh-failed-audits .lh-audit__index');
const manualAudits = elem.querySelectorAll('.lh-audit-group--manual .lh-audit__index');
const passedAudits = elem.querySelectorAll('.lh-clump--passed .lh-audit__index');
const failedAudits = elem.querySelectorAll('.lh-clump--failed .lh-audit__index');
const manualAudits = elem.querySelectorAll('.lh-clump--manual .lh-audit__index');
const notApplicableAudits =
elem.querySelectorAll('.lh-audit-group--not-applicable .lh-audit__index');
elem.querySelectorAll('.lh-clump--not-applicable .lh-audit__index');

const assertAllTheIndices = (nodeList) => {
// Must be at least one for a decent test.
Expand Down Expand Up @@ -274,15 +274,29 @@ describe('CategoryRenderer', () => {
assert.ok(ungroupedAudits.includes(auditId), auditId);
}
});

it('gives each group a selectable class', () => {
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);

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,
`could not find '${selector}'`);
});
});
});

describe('grouping passed/failed/manual', () => {
describe('clumping passed/failed/manual', () => {
it('separates audits in the DOM', () => {
const category = sampleResults.reportCategories.find(c => c.id === 'pwa');
const elem = renderer.render(category, sampleResults.categoryGroups);
const passedAudits = elem.querySelectorAll('.lh-passed-audits .lh-audit');
const failedAudits = elem.querySelectorAll('.lh-failed-audits .lh-audit');
const manualAudits = elem.querySelectorAll('.lh-audit-group--manual .lh-audit');
const passedAudits = elem.querySelectorAll('.lh-clump--passed .lh-audit');
const failedAudits = elem.querySelectorAll('.lh-clump--failed .lh-audit');
const manualAudits = elem.querySelectorAll('.lh-clump--manual .lh-audit');

assert.equal(passedAudits.length, 4);
assert.equal(failedAudits.length, 8);
Expand All @@ -294,13 +308,11 @@ describe('CategoryRenderer', () => {
const category = JSON.parse(JSON.stringify(origCategory));
category.auditRefs.forEach(audit => audit.result.score = 0);
const elem = renderer.render(category, sampleResults.categoryGroups);
const passedAudits = elem.querySelectorAll('.lh-passed-audits .lh-audit');
const failedAudits = elem.querySelectorAll('.lh-failed-audits .lh-audit');
const passedAudits = elem.querySelectorAll('.lh-clump--passed .lh-audit');
const failedAudits = elem.querySelectorAll('.lh-clump--failed .lh-audit');

assert.equal(passedAudits.length, 0);
assert.equal(failedAudits.length, 12);

assert.equal(elem.querySelector('.lh-passed-audits-summary'), null);
});
});

Expand Down
2 changes: 1 addition & 1 deletion lighthouse-core/test/report/html/renderer/performance-category-renderer-test.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -147,7 +147,7 @@ describe('PerfCategoryRenderer', () => {

it('renders the passed audits', () => {
const categoryDOM = renderer.render(category, sampleResults.categoryGroups);
const passedSection = categoryDOM.querySelector('.lh-category > .lh-passed-audits');
const passedSection = categoryDOM.querySelector('.lh-category > .lh-clump--passed');

const passedAudits = category.auditRefs.filter(audit =>
audit.group && audit.group !== 'metrics' && Util.showAsPassed(audit.result));
Expand Down

0 comments on commit c93b028

Please sign in to comment.