core(lhr): convert reportCategories to categories object

lighthouse-core/report/html/renderer/report-renderer.js

@@ -33,7 +33,9 @@ class ReportRenderer {
     // If any mutations happen to the report within the renderers, we want the original object untouched
     const clone = /** @type {!ReportRenderer.ReportJSON} */ (JSON.parse(JSON.stringify(report)));
 
-    if (!Array.isArray(clone.reportCategories)) throw new Error('No reportCategories provided.');
+    // TODO(phulce): we all agree this is technical debt we should fix
+    if (typeof clone.categories !== 'object') throw new Error('No categories provided.');
+    clone.reportCategories = Object.values(clone.categories);
     ReportRenderer.smooshAuditResultsIntoCategories(clone.audits, clone.reportCategories);
 
     container.textContent = ''; // Remove previous report.
@@ -169,7 +171,7 @@ class ReportRenderer {
       if (category.id === 'performance') {
         renderer = perfCategoryRenderer;
       }
-      categories.appendChild(renderer.render(category, report.reportGroups));
+      categories.appendChild(renderer.render(category, report.categoryGroups));
     }
 
     if (scoreHeader) {
@@ -263,8 +265,9 @@ ReportRenderer.GroupJSON; // eslint-disable-line no-unused-expressions
  *     runWarnings: (!Array<string>|undefined),
  *     artifacts: {traces: {defaultPass: {traceEvents: !Array}}},
  *     audits: !Object<string, !ReportRenderer.AuditResultJSON>,
+ *     categories: !Object<string, !ReportRenderer.CategoryJSON>,
  *     reportCategories: !Array<!ReportRenderer.CategoryJSON>,
- *     reportGroups: !Object<string, !ReportRenderer.GroupJSON>,
+ *     categoryGroups: !Object<string, !ReportRenderer.GroupJSON>,
  *     configSettings: !LH.Config.Settings,
  * }}
  */

lighthouse-core/report/report-generator.js

@@ -69,7 +69,7 @@ class ReportGenerator {
 
     // Possible TODO: tightly couple headers and row values
     const header = ['category', 'name', 'title', 'type', 'score'];
-    const table = lhr.reportCategories.map(category => {
+    const table = Object.values(lhr.categories).map(category => {
       return category.audits.map(catAudit => {
         const audit = lhr.audits[catAudit.id];
         // CSV validator wants all scores to be numeric, use -1 for now

lighthouse-core/runner.js

@@ -119,12 +119,13 @@ class Runner {
         }
       }
 
-      /** @type {Array<LH.Result.Category>} */
-      let reportCategories = [];
+      /** @type {Object<string, LH.Result.Category>} */
+      let categories = {};
       if (opts.config.categories) {
-        reportCategories = ReportScoring.scoreAllCategories(opts.config.categories, resultsById);
+        categories = ReportScoring.scoreAllCategories(opts.config.categories, resultsById);
       }
 
+      /** @type {LH.Result} */
       const lhr = {
         userAgent: artifacts.UserAgent,
         lighthouseVersion,
@@ -134,8 +135,8 @@ class Runner {
         runWarnings: lighthouseRunWarnings,
         audits: resultsById,
         configSettings: settings,
-        reportCategories,
-        reportGroups: opts.config.groups,
+        categories,
+        categoryGroups: opts.config.groups,
         timing: {total: Date.now() - startTime},
       };
 

lighthouse-core/scoring.js

@@ -47,10 +47,10 @@ class ReportScoring {
    * Returns the report JSON object with computed scores.
    * @param {Object<string, LH.Config.Category>} configCategories
    * @param {Object<string, LH.Audit.Result>} resultsByAuditId
-   * @return {Array<LH.Result.Category>}
+   * @return {Object<string, LH.Result.Category>}
    */
   static scoreAllCategories(configCategories, resultsByAuditId) {
-    const scoredCategories = [];
+    const scoredCategories = {};
 
     for (const [categoryId, configCategory] of Object.entries(configCategories)) {
       // Copy category audit members
@@ -77,12 +77,12 @@ class ReportScoring {
       }));
       const score = ReportScoring.arithmeticMean(scores);
 
-      scoredCategories.push({
+      scoredCategories[categoryId] = {
         ...configCategory,
         audits,
         id: categoryId,
         score,
-      });
+      };
     }
 
     return scoredCategories;

lighthouse-core/test/index-test.js

@@ -105,8 +105,7 @@ describe('Module Tests', function() {
       assert.ok(results.lhr.fetchTime);
       assert.equal(results.lhr.finalUrl, exampleUrl);
       assert.equal(results.lhr.requestedUrl, exampleUrl);
-      assert.ok(Array.isArray(results.lhr.reportCategories));
-      assert.equal(results.lhr.reportCategories.length, 0);
+      assert.equal(Object.values(results.lhr.categories).length, 0);
       assert.ok(results.lhr.audits.viewport);
       assert.strictEqual(results.lhr.audits.viewport.score, 0);
       assert.ok(results.lhr.audits.viewport.explanation);

lighthouse-core/test/report/html/renderer/category-renderer-test.js

@@ -36,6 +36,7 @@ describe('CategoryRenderer', () => {
     const detailsRenderer = new DetailsRenderer(dom);
     renderer = new CategoryRenderer(dom, detailsRenderer);
 
+    sampleResults.reportCategories = Object.values(sampleResults.categories);
     ReportRenderer.smooshAuditResultsIntoCategories(sampleResults.audits,
       sampleResults.reportCategories);
   });
@@ -88,7 +89,7 @@ describe('CategoryRenderer', () => {
 
   it('renders a category', () => {
     const category = sampleResults.reportCategories.find(c => c.id === 'pwa');
-    const categoryDOM = renderer.render(category, sampleResults.reportGroups);
+    const categoryDOM = renderer.render(category, sampleResults.categoryGroups);
 
     const categoryEl = categoryDOM.querySelector('.lh-category-header');
     const value = categoryDOM.querySelector('.lh-gauge__percentage');
@@ -107,7 +108,7 @@ describe('CategoryRenderer', () => {
     const category = sampleResults.reportCategories.find(c => c.id === 'pwa');
     const prevDesc = category.description;
     category.description += ' [link text](http://example.com).';
-    const categoryDOM = renderer.render(category, sampleResults.reportGroups);
+    const categoryDOM = renderer.render(category, sampleResults.categoryGroups);
     const description = categoryDOM.querySelector('.lh-category-header__description');
     assert.ok(description.querySelector('a'), 'description contains converted markdown links');
     category.description = prevDesc;
@@ -132,19 +133,19 @@ 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.reportGroups);
+    const categoryDOM = renderer.render(pwaCategory, sampleResults.categoryGroups);
     assert.ok(categoryDOM.querySelector('.lh-audit-group--manual .lh-audit-group__summary'));
     assert.equal(categoryDOM.querySelectorAll('.lh-audit--manual').length, 3,
         'score shows informative and dash icon');
 
     const perfCategory = sampleResults.reportCategories.find(cat => cat.id === 'performance');
-    const categoryDOM2 = renderer.render(perfCategory, sampleResults.reportGroups);
+    const categoryDOM2 = renderer.render(perfCategory, sampleResults.categoryGroups);
     assert.ok(!categoryDOM2.querySelector('.lh-audit-group--manual'));
   });
 
   it('renders not applicable audits if the category contains them', () => {
     const a11yCategory = sampleResults.reportCategories.find(cat => cat.id === 'accessibility');
-    const categoryDOM = renderer.render(a11yCategory, sampleResults.reportGroups);
+    const categoryDOM = renderer.render(a11yCategory, sampleResults.categoryGroups);
     assert.ok(categoryDOM.querySelector(
         '.lh-audit-group--not-applicable .lh-audit-group__summary'));
 
@@ -157,15 +158,19 @@ describe('CategoryRenderer', () => {
     );
 
     const bestPracticeCat = sampleResults.reportCategories.find(cat => cat.id === 'best-practices');
-    const categoryDOM2 = renderer.render(bestPracticeCat, sampleResults.reportGroups);
+    const categoryDOM2 = renderer.render(bestPracticeCat, sampleResults.categoryGroups);
     assert.ok(!categoryDOM2.querySelector('.lh-audit-group--not-applicable'));
   });
 
   describe('category with groups', () => {
-    const category = sampleResults.reportCategories.find(cat => cat.id === 'accessibility');
+    let category;
+
+    beforeEach(() => {
+      category = sampleResults.reportCategories.find(cat => cat.id === 'accessibility');
+    });
 
     it('renders the category header', () => {
-      const categoryDOM = renderer.render(category, sampleResults.reportGroups);
+      const categoryDOM = renderer.render(category, sampleResults.categoryGroups);
 
       const gauge = categoryDOM.querySelector('.lh-gauge__percentage');
       assert.equal(gauge.textContent.trim(), '35', 'score is 0-100');
@@ -184,7 +189,7 @@ describe('CategoryRenderer', () => {
 
     // TODO waiting for decision regarding this header
     it.skip('renders the failed audits grouped by group', () => {
-      const categoryDOM = renderer.render(category, sampleResults.reportGroups);
+      const categoryDOM = renderer.render(category, sampleResults.categoryGroups);
       const failedAudits = category.audits.filter(audit => {
         return audit.result.score !== 1 && !audit.result.scoreDisplayMode === 'not-applicable';
       });
@@ -195,7 +200,7 @@ describe('CategoryRenderer', () => {
     });
 
     it('renders the passed audits grouped by group', () => {
-      const categoryDOM = renderer.render(category, sampleResults.reportGroups);
+      const categoryDOM = renderer.render(category, sampleResults.categoryGroups);
       const passedAudits = category.audits.filter(audit =>
           audit.result.scoreDisplayMode !== 'not-applicable' && audit.result.score === 1);
       const passedAuditTags = new Set(passedAudits.map(audit => audit.group));
@@ -205,7 +210,7 @@ describe('CategoryRenderer', () => {
     });
 
     it('renders all the audits', () => {
-      const categoryDOM = renderer.render(category, sampleResults.reportGroups);
+      const categoryDOM = renderer.render(category, sampleResults.categoryGroups);
       const auditsElements = categoryDOM.querySelectorAll('.lh-audit');
       assert.equal(auditsElements.length, category.audits.length);
     });
@@ -214,7 +219,7 @@ describe('CategoryRenderer', () => {
   describe('grouping passed/failed/manual', () => {
     it('separates audits in the DOM', () => {
       const category = sampleResults.reportCategories.find(c => c.id === 'pwa');
-      const elem = renderer.render(category, sampleResults.reportGroups);
+      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');
@@ -228,7 +233,7 @@ describe('CategoryRenderer', () => {
       const origCategory = sampleResults.reportCategories.find(c => c.id === 'pwa');
       const category = JSON.parse(JSON.stringify(origCategory));
       category.audits.forEach(audit => audit.result.score = 0);
-      const elem = renderer.render(category, sampleResults.reportGroups);
+      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');
 

lighthouse-core/test/report/html/renderer/performance-category-renderer-test.js

@@ -24,6 +24,7 @@ const TEMPLATE_FILE = fs.readFileSync(__dirname +
     '/../../../../report/html/templates.html', 'utf8');
 
 describe('PerfCategoryRenderer', () => {
+  let category;
   let renderer;
 
   before(() => {
@@ -39,6 +40,8 @@ describe('PerfCategoryRenderer', () => {
     const dom = new DOM(document);
     const detailsRenderer = new DetailsRenderer(dom);
     renderer = new PerformanceCategoryRenderer(dom, detailsRenderer);
+    sampleResults.reportCategories = Object.values(sampleResults.categories);
+    category = sampleResults.reportCategories.find(cat => cat.id === 'performance');
     ReportRenderer.smooshAuditResultsIntoCategories(sampleResults.audits,
       sampleResults.reportCategories);
   });
@@ -50,10 +53,8 @@ describe('PerfCategoryRenderer', () => {
     global.CategoryRenderer = undefined;
   });
 
-  const category = sampleResults.reportCategories.find(cat => cat.id === 'performance');
-
   it('renders the category header', () => {
-    const categoryDOM = renderer.render(category, sampleResults.reportGroups);
+    const categoryDOM = renderer.render(category, sampleResults.categoryGroups);
     const score = categoryDOM.querySelector('.lh-category-header');
     const value = categoryDOM.querySelector('.lh-category-header  .lh-gauge__percentage');
     const title = score.querySelector('.lh-category-header__title');
@@ -65,13 +66,13 @@ describe('PerfCategoryRenderer', () => {
   });
 
   it('renders the sections', () => {
-    const categoryDOM = renderer.render(category, sampleResults.reportGroups);
+    const categoryDOM = renderer.render(category, sampleResults.categoryGroups);
     const sections = categoryDOM.querySelectorAll('.lh-category > .lh-audit-group');
     assert.equal(sections.length, 4);
   });
 
   it('renders the metrics', () => {
-    const categoryDOM = renderer.render(category, sampleResults.reportGroups);
+    const categoryDOM = renderer.render(category, sampleResults.categoryGroups);
     const metricsSection = categoryDOM.querySelectorAll('.lh-category > .lh-audit-group')[0];
 
     const metricAudits = category.audits.filter(audit => audit.group === 'metrics');
@@ -81,7 +82,7 @@ describe('PerfCategoryRenderer', () => {
   });
 
   it('renders the failing performance opportunities', () => {
-    const categoryDOM = renderer.render(category, sampleResults.reportGroups);
+    const categoryDOM = renderer.render(category, sampleResults.categoryGroups);
 
     const oppAudits = category.audits.filter(audit => audit.group === 'load-opportunities' &&
         audit.result.score !== 1);
@@ -109,14 +110,14 @@ describe('PerfCategoryRenderer', () => {
     };
 
     const fakeCategory = Object.assign({}, category, {audits: [auditWithDebug]});
-    const categoryDOM = renderer.render(fakeCategory, sampleResults.reportGroups);
+    const categoryDOM = renderer.render(fakeCategory, sampleResults.categoryGroups);
 
     const debugEl = categoryDOM.querySelector('.lh-load-opportunity .lh-debug');
     assert.ok(debugEl, 'did not render debug');
   });
 
   it('renders the failing diagnostics', () => {
-    const categoryDOM = renderer.render(category, sampleResults.reportGroups);
+    const categoryDOM = renderer.render(category, sampleResults.categoryGroups);
     const diagnosticSection = categoryDOM.querySelectorAll('.lh-category > .lh-audit-group')[2];
 
     const diagnosticAudits = category.audits.filter(audit => audit.group === 'diagnostics' &&
@@ -126,7 +127,7 @@ describe('PerfCategoryRenderer', () => {
   });
 
   it('renders the passed audits', () => {
-    const categoryDOM = renderer.render(category, sampleResults.reportGroups);
+    const categoryDOM = renderer.render(category, sampleResults.categoryGroups);
     const passedSection = categoryDOM.querySelector('.lh-category > .lh-passed-audits');
 
     const passedAudits = category.audits.filter(audit =>

lighthouse-core/test/report/html/renderer/report-renderer-test.js

@@ -57,6 +57,7 @@ describe('ReportRenderer', () => {
     const detailsRenderer = new DetailsRenderer(dom);
     const categoryRenderer = new CategoryRenderer(dom, detailsRenderer);
     renderer = new ReportRenderer(dom, categoryRenderer);
+    sampleResults.reportCategories = Object.values(sampleResults.categories);
   });
 
   after(() => {

lighthouse-core/test/results/sample_v2.json

@@ -4398,8 +4398,8 @@
     "onlyCategories": null,
     "skipAudits": null
   },
-  "reportCategories": [
-    {
+  "categories": {
+    "performance": {
       "name": "Performance",
       "audits": [
         {
@@ -4558,7 +4558,7 @@
       "id": "performance",
       "score": 0.69
     },
-    {
+    "pwa": {
       "name": "Progressive Web App",
       "description": "These checks validate the aspects of a Progressive Web App, as specified by the baseline [PWA Checklist](https://developers.google.com/web/progressive-web-apps/checklist).",
       "manualDescription": "These checks are required by the baseline [PWA Checklist](https://developers.google.com/web/progressive-web-apps/checklist) but are not automatically checked by Lighthouse. They do not affect your score but it's important that you verify them manually.",
@@ -4623,7 +4623,7 @@
       "id": "pwa",
       "score": 0.36
     },
-    {
+    "accessibility": {
       "name": "Accessibility",
       "description": "These checks highlight opportunities to [improve the accessibility of your web app](https://developers.google.com/web/fundamentals/accessibility). Only a subset of accessibility issues can be automatically detected so manual testing is also encouraged.",
       "manualDescription": "These items address areas which an automated testing tool cannot cover. Learn more in our guide on [conducting an accessibility review](https://developers.google.com/web/fundamentals/accessibility/how-to-review).",
@@ -4847,7 +4847,7 @@
       "id": "accessibility",
       "score": 0.35
     },
-    {
+    "best-practices": {
       "name": "Best Practices",
       "audits": [
         {
@@ -4918,7 +4918,7 @@
       "id": "best-practices",
       "score": 0
     },
-    {
+    "seo": {
       "name": "SEO",
       "description": "These checks ensure that your page is optimized for search engine results ranking. There are additional factors Lighthouse does not check that may affect your search ranking. [Learn more](https://support.google.com/webmasters/answer/35769).",
       "manualDescription": "Run these additional validators on your site to check additional SEO best practices.",
@@ -4990,8 +4990,8 @@
       "id": "seo",
       "score": null
     }
-  ],
-  "reportGroups": {
+  },
+  "categoryGroups": {
     "metrics": {
       "title": "Metrics"
     },

lighthouse-core/test/runner-test.js

@@ -419,7 +419,7 @@ describe('Runner', () => {
   });
 
 
-  it('returns reportCategories', () => {
+  it('returns categories', () => {
     const url = 'https://example.com/';
     const config = new Config({
       passes: [{
@@ -446,8 +446,8 @@ describe('Runner', () => {
       assert.equal(gatherRunnerRunSpy.called, true, 'GatherRunner.run was not called');
       assert.equal(results.lhr.audits['content-width'].name, 'content-width');
       assert.equal(results.lhr.audits['content-width'].score, 1);
-      assert.equal(results.lhr.reportCategories[0].score, 1);
-      assert.equal(results.lhr.reportCategories[0].audits[0].id, 'content-width');
+      assert.equal(results.lhr.categories.category.score, 1);
+      assert.equal(results.lhr.categories.category.audits[0].id, 'content-width');
     });
   });