report(flow): fix ui strings not being bundled

build/build-report.js

@@ -14,9 +14,9 @@ import {locales} from '../shared/localization/locales.js';
 import {UIStrings as FlowUIStrings} from '../flow-report/src/i18n/ui-strings.js';
 
 /**
- * Extract only the strings needed for the flow report into
- * a script that sets a global variable `strings`, whose keys
- * are locale codes (en-US, es, etc.) and values are localized UIStrings.
+ * Extract only the strings needed for the flow report. Code generated is
+ * an object whose keys are locale codes (en-US, es, etc.) and values are localized UIStrings.
+ * For flow-report/src/i18n/localized-strings.js
  */
 function buildFlowStrings() {
   const strings = /** @type {Record<LH.Locale, string>} */ ({});

flow-report/src/i18n/i18n.tsx

@@ -11,7 +11,7 @@ import {formatMessage} from '../../../shared/localization/format';
 import {I18n} from '../../../report/renderer/i18n';
 import {UIStrings} from './ui-strings';
 import {useFlowResult} from '../util';
-import strings from './localized-strings';
+import strings from './localized-strings.js';
 import {Util} from '../../../report/renderer/util';
 
 const I18nContext = createContext(new I18n('en-US', {...Util.UIStrings, ...UIStrings}));

flow-report/test/flow-report-pptr-test.ts

@@ -7,6 +7,7 @@
 import puppeteer, {Browser, Page} from 'puppeteer';
 
 import {ReportGenerator} from '../../report/generator/report-generator.js';
+import {swapFlowLocale} from '../../shared/localization/swap-flow-locale.js';
 import {flowResult} from './sample-flow';
 
 describe('Lighthouse Flow Report', () => {
@@ -40,4 +41,19 @@ describe('Lighthouse Flow Report', () => {
       expect(pageErrors).toHaveLength(0);
     });
   });
+
+  describe('Renders the flow report (i18n)', () => {
+    before(async () => {
+      const html = ReportGenerator.generateFlowReportHtml(swapFlowLocale(flowResult, 'es'));
+      await page.setContent(html);
+    });
+
+    it('should load with no errors', async () => {
+      expect(pageErrors).toHaveLength(0);
+      const el = await page.$('.SummarySectionHeader__content');
+      if (!el) throw new Error();
+      const text = await el.evaluate(el => el.textContent);
+      expect(text).toEqual('Todos los informes');
+    });
+  });
 }).timeout(35_000);

report/generator/report-generator.js

@@ -65,10 +65,13 @@ class ReportGenerator {
    */
   static generateFlowReportHtml(flow) {
     const sanitizedJson = ReportGenerator.sanitizeJson(flow);
+    // terser does its own sanitization, but keep this basic replace for when
+    // we want to generate a report without minification.
+    const sanitizedJavascript = reportAssets.FLOW_REPORT_JAVASCRIPT.replace(/<\//g, '\\u003c/');
     return ReportGenerator.replaceStrings(reportAssets.FLOW_REPORT_TEMPLATE, [
       /* eslint-disable max-len */
       {search: '%%LIGHTHOUSE_FLOW_JSON%%', replacement: sanitizedJson},
-      {search: '%%LIGHTHOUSE_FLOW_JAVASCRIPT%%', replacement: reportAssets.FLOW_REPORT_JAVASCRIPT},
+      {search: '%%LIGHTHOUSE_FLOW_JAVASCRIPT%%', replacement: sanitizedJavascript},
       {search: '/*%%LIGHTHOUSE_FLOW_CSS%%*/', replacement: reportAssets.FLOW_REPORT_CSS},
       /* eslint-enable max-len */
     ]);