core(i18n): always use formatted strings for extension popup (#5761)

lighthouse-extension/app/src/lighthouse-background.js

@@ -9,6 +9,7 @@ const RawProtocol = require('../../../lighthouse-core/gather/connections/raw');
 const Runner = require('../../../lighthouse-core/runner');
 const Config = require('../../../lighthouse-core/config/config');
 const defaultConfig = require('../../../lighthouse-core/config/default-config.js');
+const i18n = require('../../../lighthouse-core/lib/i18n');
 const log = require('lighthouse-logger');
 
 /** @typedef {import('../../../lighthouse-core/gather/connections/connection.js')} Connection */
@@ -65,7 +66,9 @@ function runLighthouseInWorker(port, url, options, categoryIDs) {
  * @return {Array<{title: string, id: string}>}
  */
 function getDefaultCategories() {
-  return Config.getCategories(defaultConfig);
+  const categories = Config.getCategories(defaultConfig);
+  categories.forEach(cat => cat.title = i18n.getFormatted(cat.title, 'en-US'));
+  return categories;
 }
 
 /** @param {(status: [string, string, string]) => void} listenCallback */

lighthouse-extension/test/popup-test.js

@@ -13,6 +13,21 @@ const puppeteer = require('../../node_modules/puppeteer/index.js');
 
 const lighthouseExtensionPath = path.resolve(__dirname, '../dist');
 
+const defaultCategoriesStub = [
+  {
+    id: 'performance',
+    title: 'Performance',
+  },
+  {
+    id: 'pwa',
+    title: 'Progressive Web App',
+  },
+  {
+    id: 'seo',
+    title: 'SEO',
+  },
+];
+
 describe('Lighthouse chrome popup', function() {
   // eslint-disable-next-line no-console
   console.log('\n✨ Be sure to have recently run this: yarn build-extension');
@@ -32,15 +47,15 @@ describe('Lighthouse chrome popup', function() {
     });
 
     page = await browser.newPage();
-    await page.evaluateOnNewDocument(() => {
+    await page.evaluateOnNewDocument((defaultCategoriesStub) => {
       const backgroundMock = {
         isRunning: () => false,
         listenForStatus: () => {},
         loadSettings: () => Promise.resolve({
           selectedCategories: [],
           useDevTools: false,
         }),
-        getDefaultCategories: () => [],
+        getDefaultCategories: () => defaultCategoriesStub,
       };
 
       Object.defineProperty(chrome, 'tabs', {
@@ -59,7 +74,7 @@ describe('Lighthouse chrome popup', function() {
           },
         }),
       });
-    });
+    }, defaultCategoriesStub);
 
     page.on('pageerror', err => {
       pageErrors.push(err);
@@ -92,4 +107,15 @@ describe('Lighthouse chrome popup', function() {
     assert.equal(titleText, 'Lighthouse');
     assert.equal(urlText, 'http://example.com');
   });
+
+
+  it('should populate the category checkboxes correctly', async function() {
+    const checkboxTitles = await page.$$eval('li label', els => els.map(e => e.textContent));
+    const checkboxValues = await page.$$eval('li label input', els => els.map(e => e.value));
+
+    for (const {title, id} of defaultCategoriesStub) {
+      assert.ok(checkboxTitles.includes(title));
+      assert.ok(checkboxValues.includes(id));
+    }
+  });
 });