Repository: GoogleChrome/lighthouse
Pull request #7006 (2019-01-14 21:21:59)

report: restore old, disabled failed grouping test
This was an old test we made the test runner skip because of changing architecture at one point, but it turns out we don't really have another test of the grouping of failing audits, which is kind of important. This restores the test :)

TMI:
I mentioned it in https://github.com/GoogleChrome/lighthouse/issues/5327#issuecomment-429466664, linked to making sure audits with warnings are shown; which is kind of weird given the test contents. I *think* the connection (in my head?) was that we previously marked audits with warnings as failures to make sure they showed up by default, but that all changed when we added groups for all categories in #4278. 

However [the conversation at the time](https://github.com/GoogleChrome/lighthouse/issues/4093#issuecomment-358491941) was about the "X failed audits" header, which might be the "header" mentioned in the TODO. But that would have required a very simple adjustment of the selector to fix.

Lessons:
- don't leave `it.skip()` tests for very long because you're going to forget why you skipped
- make sure to document the results of "discussing in the next meeting" in the PR/issue because otherwise all reasoning will be lost in the mists of time ⏳💨


Patch:
diff --git a/lighthouse-core/report/html/report-styles.css b/lighthouse-core/report/html/report-styles.css
index 07b8cb9ee..ea4a195e1 100644
--- a/lighthouse-core/report/html/report-styles.css
+++ b/lighthouse-core/report/html/report-styles.css
@@ -788,7 +788,7 @@
 
 .lh-scores-header .lh-gauge__wrapper,
 .lh-scores-header .lh-gauge--pwa__wrapper {
-  margin: 0 4px;
+  padding: 0 4px;
 }
 
 .lh-scores-header .lh-gauge--pwa__wrapper {


Test patch:
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 bbb554754..bab660077 100644
--- a/lighthouse-core/test/report/html/renderer/category-renderer-test.js
+++ b/lighthouse-core/test/report/html/renderer/category-renderer-test.js
@@ -215,16 +215,36 @@ describe('CategoryRenderer', () => {
       assert.ok(description.querySelector('a'), 'description contains converted markdown links');
     });
 
-    // TODO waiting for decision regarding this header
-    it.skip('renders the failed audits grouped by group', () => {
-      const categoryDOM = renderer.render(category, sampleResults.categoryGroups);
-      const failedAudits = category.auditRefs.filter(audit => {
-        return audit.result.score !== 1 && !audit.result.scoreDisplayMode === 'notApplicable';
+    it('renders the failed audits grouped by group', () => {
+      // Fail all the audits.
+      const categoryClone = JSON.parse(JSON.stringify(category));
+      const auditRefs = categoryClone.auditRefs;
+      auditRefs.forEach(ref => {
+        ref.result.score = 0;
+        ref.result.scoreDisplayMode = 'binary';
       });
-      const failedAuditTags = new Set(failedAudits.map(audit => audit.group));
+      const categoryDOM = renderer.render(categoryClone, sampleResults.categoryGroups);
+
+      // All the group names in the config.
+      const groupNames = Array.from(new Set(auditRefs.map(ref => ref.group))).filter(Boolean);
+      assert.ok(groupNames.length > 5, `not enough groups found in category for test`);
 
-      const failedAuditGroups = categoryDOM.querySelectorAll('.lh-category > div.lh-audit-group');
-      assert.equal(failedAuditGroups.length, failedAuditTags.size);
+      // All the group roots in the DOM.
+      const failedGroupElems = Array.from(
+          categoryDOM.querySelectorAll('.lh-clump--failed > .lh-audit-group'));
+
+      assert.strictEqual(failedGroupElems.length, groupNames.length);
+
+      for (const groupName of groupNames) {
+        const groupAuditRefs = auditRefs.filter(ref => ref.group === groupName);
+        assert.ok(groupAuditRefs.length > 0, `no auditRefs found with group '${groupName}'`);
+
+        const className = `lh-audit-group--${groupName}`;
+        const groupElem = failedGroupElems.find(el => el.classList.contains(className));
+        const groupAuditElems = groupElem.querySelectorAll('.lh-audit');
+
+        assert.strictEqual(groupAuditElems.length, groupAuditRefs.length);
+      }
     });
 
     it('renders the passed audits ungrouped', () => {