lighthouse 8.5.1 → 8.6.0-dev.20211016

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

@@ -7,28 +7,36 @@
 import {FunctionComponent} from 'preact';
 import {useMemo} from 'preact/hooks';
 
-import {FlowSegment, Separator} from '../common';
-import {getScreenDimensions, getScreenshot, useFlowResult} from '../util';
+import {FlowSegment, FlowStepThumbnail, Separator} from '../common';
+import {getModeDescription, useFlowResult} from '../util';
 import {Util} from '../../../report/renderer/util';
 import {SummaryCategory} from './category';
+import {useStringFormatter, useUIStrings} from '../i18n/i18n';
 
 const DISPLAYED_CATEGORIES = ['performance', 'accessibility', 'best-practices', 'seo'];
 const THUMBNAIL_WIDTH = 50;
-const MODE_DESCRIPTIONS: Record<LH.Result.GatherMode, string> = {
-  'navigation': 'Page load',
-  'timespan': 'User interactions',
-  'snapshot': 'Captured state of page',
-};
 
-const SummaryNavigationHeader: FunctionComponent<{url: string}> = ({url}) => {
+const SummaryNavigationHeader: FunctionComponent<{lhr: LH.Result}> = ({lhr}) => {
+  const strings = useUIStrings();
+
   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">
+        <a rel="noopener" target="_blank" href={lhr.finalUrl}>{lhr.finalUrl}</a>
+      </div>
+      <div className="SummaryNavigationHeader__category">
+        {strings.categoryPerformance}
+      </div>
+      <div className="SummaryNavigationHeader__category">
+        {strings.categoryAccessibility}
+      </div>
+      <div className="SummaryNavigationHeader__category">
+        {strings.categoryBestPractices}
+      </div>
+      <div className="SummaryNavigationHeader__category">
+        {strings.categorySeo}
+      </div>
     </div>
   );
 };
@@ -42,32 +50,23 @@ export const SummaryFlowStep: FunctionComponent<{
   hashIndex: number,
 }> = ({lhr, label, hashIndex}) => {
   const reportResult = useMemo(() => Util.prepareReportResult(lhr), [lhr]);
-
-  const screenshot = reportResult.gatherMode !== 'timespan' ? getScreenshot(reportResult) : null;
-
-  // Crop the displayed image to the viewport dimensions.
-  const {width, height} = getScreenDimensions(reportResult);
-  const thumbnailHeight = height * THUMBNAIL_WIDTH / width;
+  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/>
           </div>
       }
-      <img
-        className="SummaryFlowStep__screenshot"
-        data-testid="SummaryFlowStep__screenshot"
-        src={screenshot || undefined}
-        style={{width: THUMBNAIL_WIDTH, maxHeight: thumbnailHeight}}
-      />
+      <FlowStepThumbnail reportResult={reportResult} width={THUMBNAIL_WIDTH}/>
       <FlowSegment mode={lhr.gatherMode}/>
       <div className="SummaryFlowStep__label">
-        <div className="SummaryFlowStep__mode">{MODE_DESCRIPTIONS[lhr.gatherMode]}</div>
+        <div className="SummaryFlowStep__mode">{modeDescription}</div>
         <a className="SummaryFlowStep__link" href={`#index=${hashIndex}`}>{label}</a>
       </div>
       {
@@ -108,6 +107,8 @@ const SummaryFlow: FunctionComponent = () => {
 
 export const SummaryHeader: FunctionComponent = () => {
   const flowResult = useFlowResult();
+  const strings = useUIStrings();
+  const str_ = useStringFormatter();
 
   let numNavigation = 0;
   let numTimespan = 0;
@@ -127,14 +128,14 @@ export const SummaryHeader: FunctionComponent = () => {
   }
 
   const subtitleCounts = [];
-  if (numNavigation) subtitleCounts.push(`${numNavigation} navigation reports`);
-  if (numTimespan) subtitleCounts.push(`${numTimespan} timespan reports`);
-  if (numSnapshot) subtitleCounts.push(`${numSnapshot} snapshot reports`);
+  if (numNavigation) subtitleCounts.push(str_(strings.navigationReportCount, {numNavigation}));
+  if (numTimespan) subtitleCounts.push(str_(strings.timespanReportCount, {numTimespan}));
+  if (numSnapshot) subtitleCounts.push(str_(strings.snapshotReportCount, {numSnapshot}));
   const subtitle = subtitleCounts.join(' · ');
 
   return (
     <div className="SummaryHeader">
-      <div className="SummaryHeader__title">Summary</div>
+      <div className="SummaryHeader__title">{strings.summary}</div>
       <div className="SummaryHeader__subtitle">{subtitle}</div>
     </div>
   );
@@ -150,11 +151,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

@@ -5,8 +5,27 @@
  */
 
 import {FunctionComponent, JSX} from 'preact';
+import {useState} from 'preact/hooks';
 
+import {HelpDialog} from './help-dialog';
+import {getFilenamePrefix} from '../../report/generator/file-namer';
+import {useUIStrings} from './i18n/i18n';
 import {HamburgerIcon} from './icons';
+import {useFlowResult} from './util';
+import {useReportRenderer} from './wrappers/report-renderer';
+
+import type {DOM} from '../../report/renderer/dom';
+
+function saveHtml(flowResult: LH.FlowResult, dom: DOM) {
+  const htmlStr = document.documentElement.outerHTML;
+  const blob = new Blob([htmlStr], {type: 'text/html'});
+
+  const lhr = flowResult.steps[0].lhr;
+  const name = flowResult.name.replace(/\s/g, '-');
+  const filename = getFilenamePrefix(name, lhr.fetchTime);
+
+  dom.saveFile(blob, filename);
+}
 
 /* eslint-disable max-len */
 const Logo: FunctionComponent = () => {
@@ -44,17 +63,48 @@ const Logo: FunctionComponent = () => {
 };
 /* eslint-enable max-len */
 
-export const Topbar: FunctionComponent<{onMenuClick: JSX.MouseEventHandler<HTMLDivElement>}> =
+const TopbarButton: FunctionComponent<{
+  onClick: JSX.MouseEventHandler<HTMLButtonElement>,
+  label: string,
+}> =
+({onClick, label, children}) => {
+  return (
+    <button className="TopbarButton" onClick={onClick} aria-label={label}>
+      {children}
+    </button>
+  );
+};
+
+export const Topbar: FunctionComponent<{onMenuClick: JSX.MouseEventHandler<HTMLButtonElement>}> =
 ({onMenuClick}) => {
+  const flowResult = useFlowResult();
+  const {dom} = useReportRenderer();
+  const strings = useUIStrings();
+  const [showHelpDialog, setShowHelpDialog] = useState(false);
+
   return (
     <div className="Topbar">
-      <div className="Topbar__menu" onClick={onMenuClick} role="button">
+      <TopbarButton onClick={onMenuClick} label="Button that opens and closes the sidebar">
         <HamburgerIcon/>
-      </div>
+      </TopbarButton>
       <div className="Topbar__logo">
         <Logo/>
       </div>
-      <div className="Topbar__title">Lighthouse User Flow Report</div>
+      <div className="Topbar__title">{strings.title}</div>
+      <TopbarButton
+        onClick={() => saveHtml(flowResult, dom)}
+        label="Button that saves the report as HTML"
+      >{strings.save}</TopbarButton>
+      <div style={{flexGrow: 1}} />
+      <TopbarButton
+        onClick={() => setShowHelpDialog(previous => !previous)}
+        label="Button that toggles the help dialog">
+        {strings.helpLabel}
+      </TopbarButton>
+      {showHelpDialog ?
+        <HelpDialog onClose={() => setShowHelpDialog(false)} /> :
+        null
+      }
     </div>
   );
 };

package/flow-report/src/util.ts

@@ -7,6 +7,8 @@
 import {createContext} from 'preact';
 import {useContext, useEffect, useMemo, useState} from 'preact/hooks';
 
+import type {UIStringsType} from './i18n/ui-strings';
+
 export const FlowResultContext = createContext<LH.FlowResult|undefined>(undefined);
 
 function getHashParam(param: string): string|null {
@@ -41,6 +43,7 @@ export function getScreenDimensions(reportResult: LH.ReportResult) {
 export function getScreenshot(reportResult: LH.ReportResult) {
   const fullPageScreenshotAudit = reportResult.audits['full-page-screenshot'];
   const fullPageScreenshot =
+    fullPageScreenshotAudit &&
     fullPageScreenshotAudit.details &&
     fullPageScreenshotAudit.details.type === 'full-page-screenshot' &&
     fullPageScreenshotAudit.details.screenshot.data;
@@ -48,6 +51,28 @@ export function getScreenshot(reportResult: LH.ReportResult) {
   return fullPageScreenshot || null;
 }
 
+export function getFilmstripFrames(
+  reportResult: LH.ReportResult
+): Array<{data: string}> | undefined {
+  const filmstripAudit = reportResult.audits['screenshot-thumbnails'];
+  if (!filmstripAudit) return undefined;
+
+  const frameItems =
+    filmstripAudit.details &&
+    filmstripAudit.details.type === 'filmstrip' &&
+    filmstripAudit.details.items;
+
+  return frameItems || undefined;
+}
+
+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 {
   const flowResult = useContext(FlowResultContext);
   if (!flowResult) throw Error('useFlowResult must be called in the FlowResultContext');
@@ -77,7 +102,7 @@ export function useHashParam(param: string) {
   return paramValue;
 }
 
-export function useCurrentLhr(): {value: LH.Result, index: number}|null {
+export function useCurrentLhr(): LH.FlowResult.LhrRef|null {
   const flowResult = useFlowResult();
   const indexString = useHashParam('index');
 

package/flow-report/src/wrappers/report-renderer.tsx

@@ -19,7 +19,7 @@ interface ReportRendererGlobals {
    reportRenderer: ReportRenderer,
 }
 
-const ReportRendererContext = createContext<ReportRendererGlobals|undefined>(undefined);
+export const ReportRendererContext = createContext<ReportRendererGlobals|undefined>(undefined);
 
 export function useReportRenderer() {
   const globals = useContext(ReportRendererContext);

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

@@ -5,9 +5,8 @@
  */
 
 import {FunctionComponent} from 'preact';
-import {useEffect, useLayoutEffect, useRef} from 'preact/hooks';
+import {useLayoutEffect, useRef} from 'preact/hooks';
 
-import {useCurrentLhr, useHashParam} from '../util';
 import {useReportRenderer} from './report-renderer';
 
 /**
@@ -16,7 +15,7 @@ import {useReportRenderer} from './report-renderer';
  * e.g. <a href="#link"> -> <a href="#index=0&anchor=link">
  */
 export function convertChildAnchors(element: HTMLElement, index: number) {
-  const links = element.querySelectorAll('a') as NodeListOf<HTMLAnchorElement>;
+  const links = element.querySelectorAll('a[href]') as NodeListOf<HTMLAnchorElement>;
   for (const link of links) {
     // Check if the link destination is in the report.
     const currentUrl = new URL(location.href);
@@ -32,19 +31,18 @@ export function convertChildAnchors(element: HTMLElement, index: number) {
   }
 }
 
-export const Report: FunctionComponent = () => {
+export const Report: FunctionComponent<{currentLhr: LH.FlowResult.LhrRef}> =
+({currentLhr}) => {
   const {dom, reportRenderer} = useReportRenderer();
   const ref = useRef<HTMLDivElement>(null);
-  const anchor = useHashParam('anchor');
-  const currentLhr = useCurrentLhr();
 
   useLayoutEffect(() => {
-    if (!currentLhr) return;
-
     if (ref.current) {
       dom.clearComponentCache();
       reportRenderer.renderReport(currentLhr.value, ref.current);
       convertChildAnchors(ref.current, currentLhr.index);
+      const topbar = ref.current.querySelector('.lh-topbar');
+      if (topbar) topbar.remove();
     }
 
     return () => {
@@ -52,19 +50,6 @@ export const Report: FunctionComponent = () => {
     };
   }, [reportRenderer, currentLhr]);
 
-  useEffect(() => {
-    if (anchor) {
-      const el = document.getElementById(anchor);
-      if (el) {
-        el.scrollIntoView({behavior: 'smooth'});
-        return;
-      }
-    }
-
-    // Scroll to top no anchor is found.
-    if (ref.current) ref.current.scrollIntoView();
-  }, [anchor, currentLhr]);
-
   return (
     <div ref={ref} className="lh-root" data-testid="Report"/>
   );

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 {act, 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}/>);
@@ -46,3 +35,18 @@ it('renders the snapshot step', async () => {
 
   expect(root.getByTestId('Report')).toBeTruthy();
 });
+
+it('toggles collapsed mode when hamburger button clicked', async () => {
+  const root = render(<App flowResult={flowResult}/>);
+
+  const app = root.getByTestId('App');
+  const hamburgerButton = root.getByLabelText('Button that opens and closes the sidebar');
+
+  expect(app.classList).not.toContain('App--collapsed');
+
+  await act(() => {
+    hamburgerButton.click();
+  });
+
+  expect(app.classList).toContain('App--collapsed');
+});

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

@@ -0,0 +1,89 @@
+/**
+ * @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 {jest} from '@jest/globals';
+import {act, render} from '@testing-library/preact';
+
+import {FlowStepThumbnail} from '../src/common';
+
+let lhr: LH.ReportResult;
+
+jest.useFakeTimers();
+
+describe('FlowStepThumbnail', () => {
+  beforeEach(() => {
+    global.console.warn = jest.fn();
+
+    lhr = {
+      gatherMode: 'navigation',
+      configSettings: {screenEmulation: {width: 400, height: 600}},
+      audits: {
+        'full-page-screenshot': {
+          details: {
+            type: 'full-page-screenshot',
+            screenshot: {data: 'baef01', width: 400, height: 600},
+            nodes: {},
+          },
+        },
+      },
+    } as any;
+  });
+
+  it('renders a thumbnail', () => {
+    const root = render(<FlowStepThumbnail reportResult={lhr} width={200} height={200} />);
+
+    const thumbnail = root.getByAltText(/Screenshot/);
+    expect(thumbnail.style.width).toEqual('200px');
+    expect(thumbnail.style.height).toEqual('200px');
+  });
+
+  it('renders nothing without dimensions', () => {
+    const root = render(<FlowStepThumbnail reportResult={lhr} />);
+
+    expect(() => root.getByAltText(/Screenshot/)).toThrow();
+    expect(global.console.warn).toHaveBeenCalled();
+  });
+
+  it('interpolates height', () => {
+    const root = render(<FlowStepThumbnail reportResult={lhr} width={200} />);
+
+    const thumbnail = root.getByAltText(/Screenshot/);
+    expect(thumbnail.style.width).toEqual('200px');
+    expect(thumbnail.style.height).toEqual('300px');
+  });
+
+  it('interpolates width', () => {
+    const root = render(<FlowStepThumbnail reportResult={lhr} height={150} />);
+
+    const thumbnail = root.getByAltText(/Screenshot/);
+    expect(thumbnail.style.width).toEqual('100px');
+    expect(thumbnail.style.height).toEqual('150px');
+  });
+
+  it('renders animated thumbnail for timespan', async () => {
+    lhr.gatherMode = 'timespan';
+    lhr.audits['screenshot-thumbnails'] = {
+      details: {
+        type: 'filmstrip',
+        items: [
+          {data: 'frame1'},
+          {data: 'frame2'},
+        ],
+      },
+    } as any;
+    const root = render(<FlowStepThumbnail reportResult={lhr} height={150} />);
+
+    const thumbnail = root.getByAltText(/Animated/) as HTMLImageElement;
+    expect(thumbnail.style.width).toEqual('100px');
+    expect(thumbnail.style.height).toEqual('150px');
+
+    expect(thumbnail.src).toContain('frame1');
+    await act(() => {
+      jest.advanceTimersByTime(251);
+    });
+    expect(thumbnail.src).toContain('frame2');
+  });
+});

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

@@ -0,0 +1,55 @@
+/**
+ * @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 {FunctionComponent} from 'preact';
+import {render} from '@testing-library/preact';
+
+import {Header} from '../src/header';
+import {FlowResultContext} from '../src/util';
+import {flowResult} from './sample-flow';
+import {I18nProvider} from '../src/i18n/i18n';
+
+let wrapper: FunctionComponent;
+
+beforeEach(() => {
+  wrapper = ({children}) => (
+    <FlowResultContext.Provider value={flowResult}>
+      <I18nProvider>
+        {children}
+      </I18nProvider>
+    </FlowResultContext.Provider>
+  );
+});
+
+it('renders all sections for a middle step', () => {
+  const currentLhr = {index: 1} as any;
+  const root = render(<Header currentLhr={currentLhr}/>, {wrapper});
+
+  expect(root.baseElement.querySelector('.Header__prev-thumbnail')).toBeTruthy();
+  expect(root.baseElement.querySelector('.Header__prev-title')).toBeTruthy();
+  expect(root.baseElement.querySelector('.Header__next-thumbnail')).toBeTruthy();
+  expect(root.baseElement.querySelector('.Header__next-title')).toBeTruthy();
+});
+
+it('renders only next section for first step', () => {
+  const currentLhr = {index: 0} as any;
+  const root = render(<Header currentLhr={currentLhr}/>, {wrapper});
+
+  expect(root.baseElement.querySelector('.Header__prev-thumbnail')).toBeFalsy();
+  expect(root.baseElement.querySelector('.Header__prev-title')).toBeFalsy();
+  expect(root.baseElement.querySelector('.Header__next-thumbnail')).toBeTruthy();
+  expect(root.baseElement.querySelector('.Header__next-title')).toBeTruthy();
+});
+
+it('renders only previous section for last step', () => {
+  const currentLhr = {index: 3} as any;
+  const root = render(<Header currentLhr={currentLhr}/>, {wrapper});
+
+  expect(root.baseElement.querySelector('.Header__prev-thumbnail')).toBeTruthy();
+  expect(root.baseElement.querySelector('.Header__prev-title')).toBeTruthy();
+  expect(root.baseElement.querySelector('.Header__next-thumbnail')).toBeFalsy();
+  expect(root.baseElement.querySelector('.Header__next-title')).toBeFalsy();
+});

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/setup/env-setup.ts

@@ -17,6 +17,7 @@ export function setupJsDom() {
   global.window = window as any;
   global.document = window.document;
   global.location = window.location;
+  global.Blob = window.Blob;
 
   // Function not implemented in JSDOM.
   window.Element.prototype.scrollIntoView = jest.fn();

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>
   );
 });