fix(server): display diffs for audits in category without any groups

GoogleChrome · Nov 10, 2019 · 4fcf7af · 4fcf7af
1 parent 9b58fca
commit 4fcf7af
Show file tree

Hide file tree

Showing 3 changed files with 149 additions and 7 deletions.
diff --git a/packages/server/src/ui/routes/build-view/build-view.jsx b/packages/server/src/ui/routes/build-view/build-view.jsx
@@ -38,15 +38,19 @@ import {LoadingSpinner} from '../../components/loading-spinner';
  * @param {{percentAbsoluteDeltaThreshold: number}} options
  * @return {Array<AuditGroupDef>}
  */
-function computeAuditGroups(lhr, baseLhr, options) {
+export function computeAuditGroups(lhr, baseLhr, options) {
   /** @type {Array<IntermediateAuditGroupDef|undefined>} */
-  const rawAuditGroups = Object.values(lhr.categories)
-    .map(category => {
+  const rawAuditGroups = Object.entries(lhr.categories)
+    .map(([categoryId, category]) => {
       const auditRefsGroupedByGroup = _.groupBy(category.auditRefs, ref => ref.group);
       return auditRefsGroupedByGroup.map(auditRefGroup => {
-        const groupId = auditRefGroup[0].group || '';
-        const group = lhr.categoryGroups && lhr.categoryGroups[groupId];
-        if (!group) return;
+        let groupId = auditRefGroup[0].group || '';
+        let group = lhr.categoryGroups && lhr.categoryGroups[groupId];
+        if (!group) {
+          if (auditRefsGroupedByGroup.length !== 1) return;
+          groupId = `category:${categoryId}`;
+          group = {title: category.title, description: category.description};
+        }
 
         const audits = auditRefGroup
           .map(ref => ({...lhr.audits[ref.id], id: ref.id}))

diff --git a/packages/server/test/ui/routes/build-view/build-view.test.jsx b/packages/server/test/ui/routes/build-view/build-view.test.jsx
@@ -6,7 +6,7 @@
 
 import {h} from 'preact';
 import {api} from '../../../../src/ui/hooks/use-api-data.jsx';
-import {BuildView} from '../../../../src/ui/routes/build-view/build-view.jsx';
+import {BuildView, computeAuditGroups} from '../../../../src/ui/routes/build-view/build-view.jsx';
 import {render, cleanup, wait} from '../../../test-utils.js';
 
 jest.mock('../../../../src/ui/layout/page');
@@ -62,4 +62,141 @@ describe('BuildView', () => {
     const {getAllByText} = render(<BuildView projectSlug="1" partialBuildId="2" />);
     await wait(() => getAllByText(/write some tests/));
   });
+
+  describe('computeAuditGroups', () => {
+    let audits;
+    let categoryGroups;
+    let categories;
+
+    beforeEach(() => {
+      audits = {
+        tti: {name: 'Interactive', score: 1},
+        badimages: {name: 'Bad images', score: 1},
+        debugdata: {name: 'Debug data', score: 1},
+      };
+
+      categoryGroups = {
+        metrics: {title: 'Metrics'},
+        opportunites: {title: 'Opportunities'},
+        images: {title: 'Images'},
+      };
+
+      categories = {
+        performance: {
+          auditRefs: [
+            {id: 'tti', group: 'metrics'},
+            {id: 'badimages', group: 'opportunites'},
+            {id: 'debugdata'},
+          ],
+        },
+        a11y: {
+          auditRefs: [{id: 'badimages', group: 'images'}, {id: 'debugdata', group: 'missing'}],
+        },
+        seo: {
+          title: 'SEO',
+          description: 'SEO description',
+          auditRefs: [{id: 'badimages'}],
+        },
+      };
+    });
+
+    it('should return the audit groups', () => {
+      const lhr = {audits, categories, categoryGroups};
+
+      expect(computeAuditGroups(lhr)).toEqual([
+        {
+          group: {id: 'metrics', title: 'Metrics'},
+          id: 'metrics',
+          pairs: [
+            {
+              audit: {id: 'tti', name: 'Interactive', score: 1},
+              baseAudit: undefined,
+              diffs: [],
+              group: {id: 'metrics', title: 'Metrics'},
+              maxSeverity: 0,
+            },
+          ],
+        },
+        {
+          group: {id: 'opportunites', title: 'Opportunities'},
+          id: 'opportunites',
+          pairs: [
+            {
+              audit: {id: 'badimages', name: 'Bad images', score: 1},
+              baseAudit: undefined,
+              diffs: [],
+              group: {id: 'opportunites', title: 'Opportunities'},
+              maxSeverity: 0,
+            },
+          ],
+        },
+        {
+          group: {id: 'images', title: 'Images'},
+          id: 'images',
+          pairs: [
+            {
+              audit: {id: 'badimages', name: 'Bad images', score: 1},
+              baseAudit: undefined,
+              diffs: [],
+              group: {id: 'images', title: 'Images'},
+              maxSeverity: 0,
+            },
+          ],
+        },
+        {
+          group: {id: 'category:seo', title: 'SEO', description: 'SEO description'},
+          id: 'category:seo',
+          pairs: [
+            {
+              audit: {id: 'badimages', name: 'Bad images', score: 1},
+              baseAudit: undefined,
+              diffs: [],
+              group: {id: 'category:seo', title: 'SEO', description: 'SEO description'},
+              maxSeverity: 0,
+            },
+          ],
+        },
+      ]);
+    });
+
+    it('should compute the diffs', () => {
+      const audits2 = JSON.parse(JSON.stringify(audits));
+      Object.values(audits2).forEach(audit => (audit.score = 0));
+      const lhr1 = {audits, categories, categoryGroups};
+      const lhr2 = {audits: audits2, categories, categoryGroups};
+      const actual = computeAuditGroups(lhr1, lhr2);
+      expect(actual).toHaveLength(4);
+      expect(actual[0].pairs).toEqual([
+        {
+          audit: {
+            id: 'tti',
+            name: 'Interactive',
+            score: 1,
+          },
+          baseAudit: {
+            name: 'Interactive',
+            score: 0,
+          },
+          diffs: [
+            {
+              auditId: '',
+              baseValue: 0,
+              compareValue: 1,
+              type: 'score',
+            },
+          ],
+          group: {
+            id: 'metrics',
+            title: 'Metrics',
+          },
+          maxSeverity: expect.any(Number),
+        },
+      ]);
+    });
+
+    it('should hide groups without diffs', () => {
+      const lhr = {audits, categories, categoryGroups};
+      expect(computeAuditGroups(lhr, lhr)).toEqual([]);
+    });
+  });
 });
diff --git a/types/lighthouse.d.ts b/types/lighthouse.d.ts
@@ -57,6 +57,7 @@ declare global {
       id: string;
       score: number;
       title: string;
+      description?: string;
       auditRefs: Array<{id: string; weight: number; group?: string}>;
     }