From 1aaa09e0aeb49aa7d69f76c60c483ced60e87128 Mon Sep 17 00:00:00 2001
From: Connor Clark <cjamcl@google.com>
Date: Tue, 4 Oct 2022 17:19:47 -0700
Subject: [PATCH] report(flow): fix ui strings not being bundled

---
 build/build-report.js                     |  6 +++---
 flow-report/src/i18n/i18n.tsx             |  2 +-
 flow-report/test/flow-report-pptr-test.ts | 16 ++++++++++++++++
 report/generator/report-generator.js      |  5 ++++-
 4 files changed, 24 insertions(+), 5 deletions(-)

diff --git a/build/build-report.js b/build/build-report.js
index b1fb768caa42..b02fc7b61d53 100644
--- a/build/build-report.js
+++ b/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>} */ ({});
diff --git a/flow-report/src/i18n/i18n.tsx b/flow-report/src/i18n/i18n.tsx
index 996946b1b299..bd350c89654a 100644
--- a/flow-report/src/i18n/i18n.tsx
+++ b/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}));
diff --git a/flow-report/test/flow-report-pptr-test.ts b/flow-report/test/flow-report-pptr-test.ts
index 0894557f97be..580b8c2a1b76 100644
--- a/flow-report/test/flow-report-pptr-test.ts
+++ b/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);
diff --git a/report/generator/report-generator.js b/report/generator/report-generator.js
index a2024879954d..ae9f03157501 100644
--- a/report/generator/report-generator.js
+++ b/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 */
     ]);