lighthouse 8.5.1-dev.20210928 → 8.5.1-dev.20211002

package/flow-report/.eslintrc.cjs

@@ -0,0 +1,49 @@
+/**
+ * @license Copyright 2021 The Lighthouse Authors. All Rights Reserved.
+ * Licensed under the Apache License, Version 2.0 (the "License"); you may not use this file except in compliance with the License. You may obtain a copy of the License at http://www.apache.org/licenses/LICENSE-2.0
+ * Unless required by applicable law or agreed to in writing, software distributed under the License is distributed on an "AS IS" BASIS, WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied. See the License for the specific language governing permissions and limitations under the License.
+ */
+
+module.exports = {
+  extends: '../.eslintrc.js',
+  env: {
+    node: true,
+    browser: true,
+  },
+  plugins: [
+    '@typescript-eslint',
+  ],
+  rules: {
+    // TODO(esmodules): move to root eslint when all code is ESM
+    // or when this is resolved: https://github.com/import-js/eslint-plugin-import/issues/2214
+    'import/order': [2, {
+      'groups': [
+        'builtin',
+        'external',
+        ['sibling', 'parent'],
+        'index',
+        'object',
+        'type',
+      ],
+      'newlines-between': 'always',
+    }],
+    '@typescript-eslint/type-annotation-spacing': 2,
+  },
+  overrides: [
+    // TS already handles this issue.
+    // https://github.com/typescript-eslint/typescript-eslint/blob/master/docs/getting-started/linting/FAQ.md#i-get-errors-from-the-no-undef-rule-about-global-variables-not-being-defined-even-though-there-are-no-typescript-errors
+    {
+      files: ['**/*.ts', '**/*.tsx', '**/*.js'],
+      rules: {
+        'no-undef': 'off',
+      },
+    },
+  ],
+  parserOptions: {
+    ecmaVersion: 2019,
+    ecmaFeatures: {
+      jsx: true,
+    },
+    sourceType: 'module',
+  },
+};

package/flow-report/assets/styles.css

@@ -227,6 +227,7 @@
 
 .SummarySectionHeader__content {
   margin: var(--base-spacing) 0px;
+  text-transform: uppercase;
 }
 
 .SummaryFlow {

package/flow-report/jest.config.js

@@ -4,7 +4,7 @@
  * Unless required by applicable law or agreed to in writing, software distributed under the License is distributed on an "AS IS" BASIS, WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied. See the License for the specific language governing permissions and limitations under the License.
  */
 
-module.exports = {
+export default {
   testEnvironment: 'node',
   preset: 'ts-jest',
   globalSetup: './test/setup/global-setup.ts',

package/flow-report/package.json

@@ -0,0 +1,4 @@
+{
+  "type": "module",
+  "//": "Any directory that uses `import ... from` or `export ...` must be type module. Temporary file until root package.json is type: module"
+}

package/flow-report/src/app.tsx

@@ -14,6 +14,7 @@ import {classNames, FlowResultContext, useCurrentLhr, useHashParam} from './util
 import {Report} from './wrappers/report';
 import {Topbar} from './topbar';
 import {Header} from './header';
+import {I18nProvider} from './i18n/i18n';
 
 const Content: FunctionComponent = () => {
   const currentLhr = useCurrentLhr();
@@ -52,11 +53,13 @@ export const App: FunctionComponent<{flowResult: LH.FlowResult}> = ({flowResult}
   return (
     <FlowResultContext.Provider value={flowResult}>
       <ReportRendererProvider>
-        <div className={classNames('App', {'App--collapsed': collapsed})}>
-          <Topbar onMenuClick={() => setCollapsed(c => !c)} />
-          <Sidebar/>
-          <Content/>
-        </div>
+        <I18nProvider>
+          <div className={classNames('App', {'App--collapsed': collapsed})}>
+            <Topbar onMenuClick={() => setCollapsed(c => !c)} />
+            <Sidebar/>
+            <Content/>
+          </div>
+        </I18nProvider>
       </ReportRendererProvider>
     </FlowResultContext.Provider>
   );

package/flow-report/src/header.tsx

@@ -8,6 +8,7 @@ import {FunctionComponent} from 'preact';
 
 import {Util} from '../../report/renderer/util';
 import {FlowStepIcon, FlowStepThumbnail} from './common';
+import {useUIStrings} from './i18n/i18n';
 import {getModeDescription, useFlowResult} from './util';
 
 const SIDE_THUMBNAIL_HEIGHT = 80;
@@ -38,6 +39,9 @@ export const Header: FunctionComponent<{currentLhr: LH.FlowResult.LhrRef}> =
   const prevStep = flowResult.steps[index - 1];
   const nextStep = flowResult.steps[index + 1];
 
+  const strings = useUIStrings();
+  const modeDescription = getModeDescription(step.lhr.gatherMode, strings);
+
   return (
     <div className="Header">
       {
@@ -61,7 +65,7 @@ export const Header: FunctionComponent<{currentLhr: LH.FlowResult.LhrRef}> =
       <div className="Header__current-title">
         {step.name}
         <div className="Header__current-description">
-          {getModeDescription(step.lhr.gatherMode)}
+          {modeDescription}
         </div>
       </div>
       {

package/flow-report/src/i18n/i18n.tsx

@@ -0,0 +1,44 @@
+/**
+ * @license Copyright 2021 The Lighthouse Authors. All Rights Reserved.
+ * Licensed under the Apache License, Version 2.0 (the "License"); you may not use this file except in compliance with the License. You may obtain a copy of the License at http://www.apache.org/licenses/LICENSE-2.0
+ * Unless required by applicable law or agreed to in writing, software distributed under the License is distributed on an "AS IS" BASIS, WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied. See the License for the specific language governing permissions and limitations under the License.
+ */
+
+import {createContext, FunctionComponent} from 'preact';
+import {useContext, useMemo} from 'preact/hooks';
+
+import {I18n} from '../../../report/renderer/i18n';
+import {UIStrings} from './ui-strings';
+import {useLocale} from '../util';
+import strings from './localized-strings';
+
+const I18nContext = createContext<I18n<typeof UIStrings>|undefined>(undefined);
+
+export function useI18n() {
+  const i18n = useContext(I18nContext);
+  if (!i18n) throw Error('i18n was not initialized');
+  return i18n;
+}
+
+export function useUIStrings() {
+  const i18n = useI18n();
+  return i18n.strings;
+}
+
+export const I18nProvider: FunctionComponent = ({children}) => {
+  const locale = useLocale();
+  const i18n = useMemo(() => new I18n(locale, {
+    // Set missing renderer strings to default (english) values.
+    ...UIStrings,
+    // `strings` is generated in build/build-report.js
+    ...strings[locale],
+  }), [locale]);
+
+  return (
+    <I18nContext.Provider value={i18n}>
+      {children}
+    </I18nContext.Provider>
+  );
+};
+
+

package/flow-report/src/i18n/localized-strings.js

@@ -0,0 +1,11 @@
+/**
+ * @license Copyright 2021 The Lighthouse Authors. All Rights Reserved.
+ * Licensed under the Apache License, Version 2.0 (the "License"); you may not use this file except in compliance with the License. You may obtain a copy of the License at http://www.apache.org/licenses/LICENSE-2.0
+ * Unless required by applicable law or agreed to in writing, software distributed under the License is distributed on an "AS IS" BASIS, WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied. See the License for the specific language governing permissions and limitations under the License.
+ */
+
+/** @type {Record<LH.Locale, import('./ui-strings.js').UIStringsType>} */
+// @ts-expect-error This will be replaced with the localized strings at build time.
+const strings = {};
+
+export default strings;

package/flow-report/src/i18n/ui-strings.js

@@ -0,0 +1,40 @@
+/**
+ * @license Copyright 2021 The Lighthouse Authors. All Rights Reserved.
+ * Licensed under the Apache License, Version 2.0 (the "License"); you may not use this file except in compliance with the License. You may obtain a copy of the License at http://www.apache.org/licenses/LICENSE-2.0
+ * Unless required by applicable law or agreed to in writing, software distributed under the License is distributed on an "AS IS" BASIS, WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied. See the License for the specific language governing permissions and limitations under the License.
+ */
+
+/** @typedef {typeof UIStrings} UIStringsType */
+
+export const UIStrings = {
+  /** Description of a report that evaluates a web page as it loads, but before the user interacts with it. */
+  navigationDescription: 'Page load',
+  /** Description of a report that evaluates a web page over a period of time where a user could have interacted with the page. */
+  timespanDescription: 'User interactions',
+  /** Description of a report that evaluates the state of a web page at a single point in time. */
+  snapshotDescription: 'Captured state of page',
+  /** Label for a report that evaluates a page navigation. */
+  navigationReport: 'Navigation report',
+  /** Label for a report that evaluates a period of time where a user could have interacted with the page. */
+  timespanReport: 'Timespan report',
+  /** Label for a report that evaluates the state of a web page at a single point in time. */
+  snapshotReport: 'Snapshot report',
+  /** Title of a home page that summarizes and links to the other pages. */
+  summary: 'Summary',
+  /** Title of a report section lists and links to multiple sub-reports. */
+  allReports: 'All Reports',
+  /** Default title of a Lighthouse report over a user flow. "User Flow" refers to a series of user interactions on a page that a site developer wants to test. "Lighthouse" is a product name https://developers.google.com/web/tools/lighthouse. */
+  title: 'Lighthouse User Flow Report',
+  /** Label for a report evaluating a web page. Label indicates that the report refers to the desktop version of the site. */
+  desktop: 'Desktop',
+  /** Label for a report evaluating a web page. Label indicates that the report refers to the mobile version of the site. */
+  mobile: 'Mobile',
+  /** Rating indicating that a report category is good/passing. */
+  ratingPass: 'Good',
+  /** Rating indicating that a report category is average or needs improvement. */
+  ratingAverage: 'Average',
+  /** Rating indicating that a report category is poor/failing. */
+  ratingFail: 'Poor',
+  /** Rating indicating that a report category rating could not be calculated because of an error. */
+  ratingError: 'Error',
+};

package/flow-report/src/sidebar/sidebar.tsx

@@ -5,15 +5,17 @@
  */
 
 import {FunctionComponent} from 'preact';
-import {useMemo} from 'preact/hooks';
 
 import {Separator} from '../common';
+import {useI18n, useUIStrings} from '../i18n/i18n';
 import {CpuIcon, EnvIcon, SummaryIcon} from '../icons';
-import {classNames, useCurrentLhr, useFlowResult, useLocale} from '../util';
+import {classNames, useCurrentLhr, useFlowResult} from '../util';
 import {SidebarFlow} from './flow';
 
 export const SidebarSummary: FunctionComponent = () => {
   const currentLhr = useCurrentLhr();
+  const strings = useUIStrings();
+
   const url = new URL(location.href);
   url.hash = '#';
   return (
@@ -25,12 +27,14 @@ export const SidebarSummary: FunctionComponent = () => {
       <div className="SidebarSummary__icon">
         <SummaryIcon/>
       </div>
-      <div className="SidebarSummary__label">Summary</div>
+      <div className="SidebarSummary__label">{strings.summary}</div>
     </a>
   );
 };
 
 const SidebarRuntimeSettings: FunctionComponent<{settings: LH.ConfigSettings}> = ({settings}) => {
+  const strings = useUIStrings();
+
   return (
     <div className="SidebarRuntimeSettings">
       <div className="SidebarRuntimeSettings__item">
@@ -38,8 +42,7 @@ const SidebarRuntimeSettings: FunctionComponent<{settings: LH.ConfigSettings}> =
           <EnvIcon/>
         </div>
         {
-          `${settings.formFactor === 'desktop' ? 'Desktop' : 'Mobile'} | ` +
-          `${settings.screenEmulation.height}x${settings.screenEmulation.width}px`
+          settings.formFactor === 'desktop' ? strings.desktop : strings.mobile
         }
       </div>
       <div className="SidebarRuntimeSettings__item">
@@ -55,19 +58,11 @@ const SidebarRuntimeSettings: FunctionComponent<{settings: LH.ConfigSettings}> =
 };
 
 export const SidebarHeader: FunctionComponent<{title: string, date: string}> = ({title, date}) => {
-  const locale = useLocale();
-  const formatter = useMemo(() => {
-    const options: Intl.DateTimeFormatOptions = {
-      month: 'short', day: 'numeric', year: 'numeric',
-      hour: 'numeric', minute: 'numeric', timeZoneName: 'short',
-    };
-    return new Intl.DateTimeFormat(locale, options);
-  }, [locale]);
-  const dateString = useMemo(() => formatter.format(new Date(date)), [date, formatter]);
+  const i18n = useI18n();
   return (
     <div className="SidebarHeader">
       <div className="SidebarHeader__title">{title}</div>
-      <div className="SidebarHeader__date">{dateString}</div>
+      <div className="SidebarHeader__date">{i18n.formatDateTime(date)}</div>
     </div>
   );
 };

package/flow-report/src/summary/category.tsx

@@ -9,24 +9,32 @@ import {FunctionComponent} from 'preact';
 import {Util} from '../../../report/renderer/util';
 import {Separator} from '../common';
 import {CategoryScore} from '../wrappers/category-score';
+import {useUIStrings} from '../i18n/i18n';
 
-const GATHER_MODE_LABELS: Record<LH.Result.GatherMode, string> = {
-  'navigation': 'Navigation report',
-  'timespan': 'Timespan report',
-  'snapshot': 'Snapshot report',
-};
+import type {UIStringsType} from '../i18n/ui-strings';
 
-const RATING_LABELS: Record<string, string> = {
-  'pass': 'Good',
-  'fail': 'Poor',
-  'average': 'Average',
-  'error': 'Error',
-};
+function getGatherModeLabel(gatherMode: LH.Result.GatherMode, strings: UIStringsType) {
+  switch (gatherMode) {
+    case 'navigation': return strings.navigationReport;
+    case 'timespan': return strings.timespanReport;
+    case 'snapshot': return strings.snapshotReport;
+  }
+}
+
+function getCategoryRating(rating: string, strings: UIStringsType) {
+  switch (rating) {
+    case 'pass': return strings.ratingPass;
+    case 'average': return strings.ratingAverage;
+    case 'fail': return strings.ratingFail;
+    case 'error': return strings.ratingError;
+  }
+}
 
 export const SummaryTooltip: FunctionComponent<{
   category: LH.ReportResult.Category,
   gatherMode: LH.Result.GatherMode
 }> = ({category, gatherMode}) => {
+  const strings = useUIStrings();
   const {numPassed, numAudits, totalWeight} = Util.calculateCategoryFraction(category);
 
   const displayAsFraction = Util.shouldDisplayAsFraction(gatherMode);
@@ -36,7 +44,7 @@ export const SummaryTooltip: FunctionComponent<{
 
   return (
     <div className="SummaryTooltip">
-      <div className="SummaryTooltip__title">{GATHER_MODE_LABELS[gatherMode]}</div>
+      <div className="SummaryTooltip__title">{getGatherModeLabel(gatherMode, strings)}</div>
       <Separator/>
       <div className="SummaryTooltip__category">
         <div className="SummaryTooltip__category-title">
@@ -48,7 +56,7 @@ export const SummaryTooltip: FunctionComponent<{
               className={`SummaryTooltip__rating SummaryTooltip__rating--${rating}`}
               data-testid="SummaryTooltip__rating"
             >
-              <span>{RATING_LABELS[rating]}</span>
+              <span>{getCategoryRating(rating, strings)}</span>
               {
                 !displayAsFraction && category.score && <>
                   <span> · </span>

package/flow-report/src/summary/summary.tsx

@@ -11,19 +11,28 @@ import {FlowSegment, FlowStepThumbnail, Separator} from '../common';
 import {getModeDescription, useFlowResult} from '../util';
 import {Util} from '../../../report/renderer/util';
 import {SummaryCategory} from './category';
+import {useUIStrings} from '../i18n/i18n';
 
 const DISPLAYED_CATEGORIES = ['performance', 'accessibility', 'best-practices', 'seo'];
 const THUMBNAIL_WIDTH = 50;
 
-const SummaryNavigationHeader: FunctionComponent<{url: string}> = ({url}) => {
+const SummaryNavigationHeader: FunctionComponent<{lhr: LH.Result}> = ({lhr}) => {
   return (
     <div className="SummaryNavigationHeader" data-testid="SummaryNavigationHeader">
       <FlowSegment/>
-      <div className="SummaryNavigationHeader__url">{url}</div>
-      <div className="SummaryNavigationHeader__category">Performance</div>
-      <div className="SummaryNavigationHeader__category">Accessibility</div>
-      <div className="SummaryNavigationHeader__category">Best Practices</div>
-      <div className="SummaryNavigationHeader__category">SEO</div>
+      <div className="SummaryNavigationHeader__url">{lhr.finalUrl}</div>
+      <div className="SummaryNavigationHeader__category">
+        {lhr.categories['performance'].title}
+      </div>
+      <div className="SummaryNavigationHeader__category">
+        {lhr.categories['accessibility'].title}
+      </div>
+      <div className="SummaryNavigationHeader__category">
+        {lhr.categories['best-practices'].title}
+      </div>
+      <div className="SummaryNavigationHeader__category">
+        {lhr.categories['seo'].title}
+      </div>
     </div>
   );
 };
@@ -37,12 +46,14 @@ export const SummaryFlowStep: FunctionComponent<{
   hashIndex: number,
 }> = ({lhr, label, hashIndex}) => {
   const reportResult = useMemo(() => Util.prepareReportResult(lhr), [lhr]);
+  const strings = useUIStrings();
+  const modeDescription = getModeDescription(lhr.gatherMode, strings);
 
   return (
     <div className="SummaryFlowStep">
       {
         lhr.gatherMode === 'navigation' || hashIndex === 0 ?
-          <SummaryNavigationHeader url={lhr.finalUrl}/> :
+          <SummaryNavigationHeader lhr={lhr}/> :
           <div className="SummaryFlowStep__separator">
             <FlowSegment/>
             <Separator/>
@@ -54,7 +65,7 @@ export const SummaryFlowStep: FunctionComponent<{
       }
       <FlowSegment mode={lhr.gatherMode}/>
       <div className="SummaryFlowStep__label">
-        <div className="SummaryFlowStep__mode">{getModeDescription(lhr.gatherMode)}</div>
+        <div className="SummaryFlowStep__mode">{modeDescription}</div>
         <a className="SummaryFlowStep__link" href={`#index=${hashIndex}`}>{label}</a>
       </div>
       {
@@ -95,6 +106,7 @@ const SummaryFlow: FunctionComponent = () => {
 
 export const SummaryHeader: FunctionComponent = () => {
   const flowResult = useFlowResult();
+  const strings = useUIStrings();
 
   let numNavigation = 0;
   let numTimespan = 0;
@@ -121,7 +133,7 @@ export const SummaryHeader: FunctionComponent = () => {
 
   return (
     <div className="SummaryHeader">
-      <div className="SummaryHeader__title">Summary</div>
+      <div className="SummaryHeader__title">{strings.summary}</div>
       <div className="SummaryHeader__subtitle">{subtitle}</div>
     </div>
   );
@@ -137,11 +149,13 @@ const SummarySectionHeader: FunctionComponent = ({children}) => {
 };
 
 export const Summary: FunctionComponent = () => {
+  const strings = useUIStrings();
+
   return (
     <div className="Summary" data-testid="Summary">
       <SummaryHeader/>
       <Separator/>
-      <SummarySectionHeader>ALL REPORTS</SummarySectionHeader>
+      <SummarySectionHeader>{strings.allReports}</SummarySectionHeader>
       <SummaryFlow/>
     </div>
   );

package/flow-report/src/topbar.tsx

@@ -6,6 +6,7 @@
 
 import {FunctionComponent, JSX} from 'preact';
 
+import {useUIStrings} from './i18n/i18n';
 import {HamburgerIcon} from './icons';
 
 /* eslint-disable max-len */
@@ -46,6 +47,8 @@ const Logo: FunctionComponent = () => {
 
 export const Topbar: FunctionComponent<{onMenuClick: JSX.MouseEventHandler<HTMLDivElement>}> =
 ({onMenuClick}) => {
+  const strings = useUIStrings();
+
   return (
     <div className="Topbar">
       <div className="Topbar__menu" onClick={onMenuClick} role="button">
@@ -54,7 +57,7 @@ export const Topbar: FunctionComponent<{onMenuClick: JSX.MouseEventHandler<HTMLD
       <div className="Topbar__logo">
         <Logo/>
       </div>
-      <div className="Topbar__title">Lighthouse User Flow Report</div>
+      <div className="Topbar__title">{strings.title}</div>
     </div>
   );
 };

package/flow-report/src/util.ts

@@ -7,11 +7,7 @@
 import {createContext} from 'preact';
 import {useContext, useEffect, useMemo, useState} from 'preact/hooks';
 
-const MODE_DESCRIPTIONS: Record<LH.Result.GatherMode, string> = {
-  'navigation': 'Page load',
-  'timespan': 'User interactions',
-  'snapshot': 'Captured state of page',
-};
+import type {UIStringsType} from './i18n/ui-strings';
 
 export const FlowResultContext = createContext<LH.FlowResult|undefined>(undefined);
 
@@ -54,8 +50,12 @@ export function getScreenshot(reportResult: LH.ReportResult) {
   return fullPageScreenshot || null;
 }
 
-export function getModeDescription(mode: LH.Result.GatherMode) {
-  return MODE_DESCRIPTIONS[mode];
+export function getModeDescription(mode: LH.Result.GatherMode, strings: UIStringsType) {
+  switch (mode) {
+    case 'navigation': return strings.navigationDescription;
+    case 'timespan': return strings.timespanDescription;
+    case 'snapshot': return strings.snapshotDescription;
+  }
 }
 
 export function useFlowResult(): LH.FlowResult {

package/flow-report/test/app-test.tsx

@@ -4,21 +4,10 @@
  * Unless required by applicable law or agreed to in writing, software distributed under the License is distributed on an "AS IS" BASIS, WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied. See the License for the specific language governing permissions and limitations under the License.
  */
 
-import fs from 'fs';
-import {dirname} from 'path';
-import {fileURLToPath} from 'url';
-
 import {render} from '@testing-library/preact';
 
 import {App} from '../src/app';
-
-const flowResult = JSON.parse(
-  fs.readFileSync(
-    // eslint-disable-next-line max-len
-    `${dirname(fileURLToPath(import.meta.url))}/../../lighthouse-core/test/fixtures/fraggle-rock/reports/sample-lhrs.json`,
-    'utf-8'
-  )
-);
+import {flowResult} from './sample-flow';
 
 it('renders a standalone report with summary', async () => {
   const root = render(<App flowResult={flowResult}/>);

package/flow-report/test/header-test.tsx

@@ -4,29 +4,23 @@
  * Unless required by applicable law or agreed to in writing, software distributed under the License is distributed on an "AS IS" BASIS, WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied. See the License for the specific language governing permissions and limitations under the License.
  */
 
-import fs from 'fs';
-import {dirname} from 'path';
-import {fileURLToPath} from 'url';
-
 import {FunctionComponent} from 'preact';
 import {render} from '@testing-library/preact';
 
 import {Header} from '../src/header';
 import {FlowResultContext} from '../src/util';
-
-const flowResult = JSON.parse(
-  fs.readFileSync(
-    // eslint-disable-next-line max-len
-    `${dirname(fileURLToPath(import.meta.url))}/../../lighthouse-core/test/fixtures/fraggle-rock/reports/sample-lhrs.json`,
-    'utf-8'
-  )
-);
+import {flowResult} from './sample-flow';
+import {I18nProvider} from '../src/i18n/i18n';
 
 let wrapper: FunctionComponent;
 
 beforeEach(() => {
   wrapper = ({children}) => (
-    <FlowResultContext.Provider value={flowResult}>{children}</FlowResultContext.Provider>
+    <FlowResultContext.Provider value={flowResult}>
+      <I18nProvider>
+        {children}
+      </I18nProvider>
+    </FlowResultContext.Provider>
   );
 });
 

package/flow-report/test/sample-flow.ts

@@ -0,0 +1,17 @@
+/**
+ * @license Copyright 2021 The Lighthouse Authors. All Rights Reserved.
+ * Licensed under the Apache License, Version 2.0 (the "License"); you may not use this file except in compliance with the License. You may obtain a copy of the License at http://www.apache.org/licenses/LICENSE-2.0
+ * Unless required by applicable law or agreed to in writing, software distributed under the License is distributed on an "AS IS" BASIS, WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied. See the License for the specific language governing permissions and limitations under the License.
+ */
+
+import fs from 'fs';
+import {dirname} from 'path';
+import {fileURLToPath} from 'url';
+
+export const flowResult: LH.FlowResult = JSON.parse(
+  fs.readFileSync(
+    // eslint-disable-next-line max-len
+    `${dirname(fileURLToPath(import.meta.url))}/../../lighthouse-core/test/fixtures/fraggle-rock/reports/sample-flow-result.json`,
+    'utf-8'
+  )
+);

package/flow-report/test/sidebar/flow-test.tsx

@@ -1,21 +1,15 @@
-import fs from 'fs';
-import {dirname} from 'path';
-import {fileURLToPath} from 'url';
+/**
+ * @license Copyright 2021 The Lighthouse Authors. All Rights Reserved.
+ * Licensed under the Apache License, Version 2.0 (the "License"); you may not use this file except in compliance with the License. You may obtain a copy of the License at http://www.apache.org/licenses/LICENSE-2.0
+ * Unless required by applicable law or agreed to in writing, software distributed under the License is distributed on an "AS IS" BASIS, WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied. See the License for the specific language governing permissions and limitations under the License.
+ */
 
 import {render} from '@testing-library/preact';
 import {FunctionComponent} from 'preact';
 
 import {SidebarFlow} from '../../src/sidebar/flow';
 import {FlowResultContext} from '../../src/util';
-
-
-const flowResult = JSON.parse(
-  fs.readFileSync(
-    // eslint-disable-next-line max-len
-    `${dirname(fileURLToPath(import.meta.url))}/../../../lighthouse-core/test/fixtures/fraggle-rock/reports/sample-lhrs.json`,
-    'utf-8'
-  )
-);
+import {flowResult} from '../sample-flow';
 
 let wrapper: FunctionComponent;
 

package/flow-report/test/sidebar/sidebar-test.tsx

@@ -4,30 +4,24 @@
  * Unless required by applicable law or agreed to in writing, software distributed under the License is distributed on an "AS IS" BASIS, WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied. See the License for the specific language governing permissions and limitations under the License.
  */
 
-import fs from 'fs';
-import {dirname} from 'path';
-import {fileURLToPath} from 'url';
-
 import {render} from '@testing-library/preact';
 import {FunctionComponent} from 'preact';
 
+import {I18nProvider} from '../../src/i18n/i18n';
 import {SidebarHeader, SidebarSummary} from '../../src/sidebar/sidebar';
 import {FlowResultContext} from '../../src/util';
+import {flowResult} from '../sample-flow';
 
 
-const flowResult = JSON.parse(
-  fs.readFileSync(
-    // eslint-disable-next-line max-len
-    `${dirname(fileURLToPath(import.meta.url))}/../../../lighthouse-core/test/fixtures/fraggle-rock/reports/sample-lhrs.json`,
-    'utf-8'
-  )
-);
-
 let wrapper: FunctionComponent;
 
 beforeEach(() => {
   wrapper = ({children}) => (
-    <FlowResultContext.Provider value={flowResult}>{children}</FlowResultContext.Provider>
+    <FlowResultContext.Provider value={flowResult}>
+      <I18nProvider>
+        {children}
+      </I18nProvider>
+    </FlowResultContext.Provider>
   );
 });