lighthouse 8.3.0-dev.20210907 → 8.3.0

package/flow-report/src/util.ts

@@ -1,160 +0,0 @@
-/**
- * @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} from 'preact';
-import {useContext, useEffect, useMemo, useState} from 'preact/hooks';
-
-export const FlowResultContext = createContext<LH.FlowResult|undefined>(undefined);
-
-function getHashParam(param: string): string|null {
-  const params = new URLSearchParams(location.hash.replace('#', '?'));
-  return params.get(param);
-}
-
-function shortenUrl(longUrl: string) {
-  const url = new URL(longUrl);
-  return `${url.hostname}${url.pathname}`;
-}
-
-/**
- * The step label should be enumerated if there is another report of the same gather mode in the same section.
- * Navigation reports will never be enumerated.
- */
-function shouldEnumerate(flowResult: LH.FlowResult, index: number) {
-  const {lhrs} = flowResult;
-  if (lhrs[index].gatherMode === 'navigation') return false;
-
-  for (let i = index + 1; lhrs[i] && lhrs[i].gatherMode !== 'navigation'; ++i) {
-    if (lhrs[i].gatherMode === lhrs[index].gatherMode) {
-      return true;
-    }
-  }
-  for (let i = index - 1; lhrs[i] && lhrs[i].gatherMode !== 'navigation'; --i) {
-    if (lhrs[i].gatherMode === lhrs[index].gatherMode) {
-      return true;
-    }
-  }
-  return false;
-}
-
-
-export function classNames(...args: Array<string|undefined|Record<string, boolean>>): string {
-  const classes = [];
-  for (const arg of args) {
-    if (!arg) continue;
-
-    if (typeof arg === 'string') {
-      classes.push(arg);
-      continue;
-    }
-
-    const applicableClasses = Object.entries(arg)
-      .filter(([_, shouldApply]) => shouldApply)
-      .map(([className]) => className);
-    classes.push(...applicableClasses);
-  }
-
-  return classes.join(' ');
-}
-
-export function getScreenDimensions(reportResult: LH.ReportResult) {
-  const {width, height} = reportResult.configSettings.screenEmulation;
-  return {width, height};
-}
-
-export function getScreenshot(reportResult: LH.ReportResult) {
-  const fullPageScreenshotAudit = reportResult.audits['full-page-screenshot'];
-  const fullPageScreenshot =
-    fullPageScreenshotAudit.details &&
-    fullPageScreenshotAudit.details.type === 'full-page-screenshot' &&
-    fullPageScreenshotAudit.details.screenshot.data;
-
-  return fullPageScreenshot || null;
-}
-
-export function useFlowResult(): LH.FlowResult {
-  const flowResult = useContext(FlowResultContext);
-  if (!flowResult) throw Error('useFlowResult must be called in the FlowResultContext');
-  return flowResult;
-}
-
-export function useLocale(): LH.Locale {
-  const flowResult = useFlowResult();
-  return flowResult.lhrs[0].configSettings.locale;
-}
-
-export function useHashParam(param: string) {
-  const [paramValue, setParamValue] = useState(getHashParam(param));
-
-  // Use two-way-binding on the URL hash.
-  // Triggers a re-render if the param changes.
-  useEffect(() => {
-    function hashListener() {
-      const newIndexString = getHashParam(param);
-      if (newIndexString === paramValue) return;
-      setParamValue(newIndexString);
-    }
-    window.addEventListener('hashchange', hashListener);
-    return () => window.removeEventListener('hashchange', hashListener);
-  }, [paramValue]);
-
-  return paramValue;
-}
-
-export function useCurrentLhr(): {value: LH.Result, index: number}|null {
-  const flowResult = useFlowResult();
-  const indexString = useHashParam('index');
-
-  // Memoize result so a new object is not created on every call.
-  return useMemo(() => {
-    if (!indexString) return null;
-
-    const index = Number(indexString);
-    if (!Number.isFinite(index)) {
-      console.warn(`Invalid hash index: ${indexString}`);
-      return null;
-    }
-
-    const value = flowResult.lhrs[index];
-    if (!value) {
-      console.warn(`No LHR at index ${index}`);
-      return null;
-    }
-
-    return {value, index};
-  }, [indexString, flowResult]);
-}
-
-export function useDerivedStepNames() {
-  const flowResult = useFlowResult();
-
-  return useMemo(() => {
-    let numTimespan = 1;
-    let numSnapshot = 1;
-
-    // TODO(FR-COMPAT): Override with a provided step name.
-    return flowResult.lhrs.map((lhr, index) => {
-      const shortUrl = shortenUrl(lhr.finalUrl);
-
-      switch (lhr.gatherMode) {
-        case 'navigation':
-          numTimespan = 1;
-          numSnapshot = 1;
-          return `Navigation report (${shortUrl})`;
-        case 'timespan':
-          if (shouldEnumerate(flowResult, index)) {
-            return `Timespan report ${numTimespan++} (${shortUrl})`;
-          }
-          return `Timespan report (${shortUrl})`;
-        case 'snapshot':
-          if (shouldEnumerate(flowResult, index)) {
-            return `Snapshot report ${numSnapshot++} (${shortUrl})`;
-          }
-          return `Snapshot report (${shortUrl})`;
-      }
-    });
-  }, [flowResult]);
-}

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

@@ -1,40 +0,0 @@
-/**
- * @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 {useEffect, useLayoutEffect, useRef} from 'preact/hooks';
-
-import {useReportRenderer} from './report-renderer';
-
-export const Gauge: FunctionComponent<{category: LH.ReportResult.Category, href: string}> =
-({category, href}) => {
-  const {categoryRenderer} = useReportRenderer();
-  const ref = useRef<HTMLDivElement>(null);
-
-  useLayoutEffect(() => {
-    const el = categoryRenderer.renderScoreGauge(category, {});
-
-    // Category label is displayed in the navigation header.
-    const label = el.querySelector('.lh-gauge__label');
-    if (label) label.remove();
-
-    if (ref.current) ref.current.append(el);
-    return () => {
-      if (ref.current && ref.current.contains(el)) {
-        ref.current.removeChild(el);
-      }
-    };
-  }, [categoryRenderer, category]);
-
-  useEffect(() => {
-    const anchor = ref.current && ref.current.querySelector('a') as HTMLAnchorElement;
-    if (anchor) anchor.href = href;
-  }, [href]);
-
-  return (
-    <div ref={ref} data-testid="Gauge"/>
-  );
-};

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

@@ -1,46 +0,0 @@
-/**
- * @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 {CategoryRenderer} from '../../../report/renderer/category-renderer';
-import {DetailsRenderer} from '../../../report/renderer/details-renderer';
-import {DOM} from '../../../report/renderer/dom';
-import {ReportRenderer} from '../../../report/renderer/report-renderer';
-
-interface ReportRendererGlobals {
-   dom: DOM,
-   detailsRenderer: DetailsRenderer,
-   categoryRenderer: CategoryRenderer,
-   reportRenderer: ReportRenderer,
-}
-
-const ReportRendererContext = createContext<ReportRendererGlobals|undefined>(undefined);
-
-export function useReportRenderer() {
-  const globals = useContext(ReportRendererContext);
-  if (!globals) throw Error('Globals not defined');
-  return globals;
-}
-
-export const ReportRendererProvider: FunctionComponent = ({children}) => {
-  const globals = useMemo(() => {
-    const dom = new DOM(document);
-    const detailsRenderer = new DetailsRenderer(dom);
-    const categoryRenderer = new CategoryRenderer(dom, detailsRenderer);
-    const reportRenderer = new ReportRenderer(dom);
-    return {
-      dom,
-      detailsRenderer,
-      categoryRenderer,
-      reportRenderer,
-    };
-  }, []);
-  return (
-    <ReportRendererContext.Provider value={globals}>{children}</ReportRendererContext.Provider>
-  );
-};

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

@@ -1,71 +0,0 @@
-/**
- * @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 {useEffect, useLayoutEffect, useRef} from 'preact/hooks';
-
-import {useCurrentLhr, useHashParam} from '../util';
-import {useReportRenderer} from './report-renderer';
-
-/**
- * The default behavior of anchor links is not compatible with the flow report's hash navigation.
- * This function converts any anchor links under the provided element to a flow report link.
- * 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>;
-  for (const link of links) {
-    // Check if the link destination is in the report.
-    const currentUrl = new URL(location.href);
-    currentUrl.hash = '';
-    currentUrl.search = '';
-    const linkUrl = new URL(link.href);
-    linkUrl.hash = '';
-    linkUrl.search = '';
-    if (currentUrl.href !== linkUrl.href || !link.hash) continue;
-
-    const nodeId = link.hash.substr(1);
-    link.hash = `#index=${index}&anchor=${nodeId}`;
-  }
-}
-
-export const Report: FunctionComponent = () => {
-  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);
-    }
-
-    return () => {
-      if (ref.current) ref.current.textContent = '';
-    };
-  }, [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/standalone-flow.tsx

@@ -1,23 +0,0 @@
-/**
- * @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.
- */
-
-/**
- * @fileoverview The entry point for rendering the Lighthouse flow report for the HTML file created by ReportGenerator.
- * The renderer code is bundled and injected into the report HTML along with the JSON report.
- */
-
-import {render} from 'preact';
-
-import {App} from './src/app';
-
-// Used by standalone-flow.html
-function __initLighthouseFlowReport__() {
-  const root = document.body.querySelector('main');
-  if (!root) throw Error('Root element not found');
-  render(<App flowResult={window.__LIGHTHOUSE_FLOW_JSON__} />, root);
-}
-
-window.__initLighthouseFlowReport__ = __initLighthouseFlowReport__;

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

@@ -1,48 +0,0 @@
-/**
- * @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';
-
-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'
-  )
-);
-
-it('renders a standalone report with summary', async () => {
-  const root = render(<App flowResult={flowResult}/>);
-
-  expect(root.getByTestId('Summary')).toBeTruthy();
-});
-
-it('renders the navigation step', async () => {
-  global.location.hash = '#index=0';
-  const root = render(<App flowResult={flowResult}/>);
-
-  expect(root.getByTestId('Report')).toBeTruthy();
-});
-
-it('renders the timespan step', async () => {
-  global.location.hash = '#index=1';
-  const root = render(<App flowResult={flowResult}/>);
-
-  expect(root.getByTestId('Report')).toBeTruthy();
-});
-
-it('renders the snapshot step', async () => {
-  global.location.hash = '#index=2';
-  const root = render(<App flowResult={flowResult}/>);
-
-  expect(root.getByTestId('Report')).toBeTruthy();
-});

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

@@ -1,131 +0,0 @@
-/**
- * @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 {CategoryRatio} from '../src/common';
-
-describe('CategoryRatio', () => {
-  it('renders passed audit count', async () => {
-    const audits = {
-      'audit1': {score: 1},
-      'audit2': {score: 1},
-      'audit3': {score: 0},
-    } as any;
-    const category = {
-      auditRefs: [
-        {id: 'audit1', weight: 1},
-        {id: 'audit2', weight: 0},
-        {id: 'audit3', weight: 1},
-      ],
-    } as any;
-
-    const root = render(<CategoryRatio
-      audits={audits}
-      category={category}
-      href="index=0&achor=seo"
-    />);
-    const link = root.getByRole('link');
-
-    expect(link.className).toEqual('CategoryRatio CategoryRatio--average');
-    expect(link.textContent).toEqual('2/3');
-  });
-
-  it('renders passed audit count with fail rating', async () => {
-    const audits = {
-      'audit1': {score: 0},
-      'audit2': {score: 0},
-      'audit3': {score: 0},
-    } as any;
-    const category = {
-      auditRefs: [
-        {id: 'audit1', weight: 1},
-        {id: 'audit2', weight: 1},
-        {id: 'audit3', weight: 1},
-      ],
-    } as any;
-
-    const root = render(<CategoryRatio
-      audits={audits}
-      category={category}
-      href="index=0&achor=seo"
-    />);
-    const link = root.getByRole('link');
-
-    expect(link.className).toEqual('CategoryRatio CategoryRatio--fail');
-    expect(link.textContent).toEqual('0/3');
-  });
-
-  it('renders passed audit count with pass rating', async () => {
-    const audits = {
-      'audit1': {score: 1},
-      'audit2': {score: 1},
-      'audit3': {score: 1},
-    } as any;
-    const category = {
-      auditRefs: [
-        {id: 'audit1', weight: 1},
-        {id: 'audit2', weight: 1},
-        {id: 'audit3', weight: 1},
-      ],
-    } as any;
-
-    const root = render(<CategoryRatio
-      audits={audits}
-      category={category}
-      href="index=0&achor=seo"
-    />);
-    const link = root.getByRole('link');
-
-    expect(link.className).toEqual('CategoryRatio CategoryRatio--pass');
-    expect(link.textContent).toEqual('3/3');
-  });
-
-  it('uses null rating of no audits have weight', async () => {
-    const audits = {
-      'audit1': {score: 1},
-      'audit2': {score: 0},
-    } as any;
-    const category = {
-      auditRefs: [
-        {id: 'audit1', weight: 0},
-        {id: 'audit2', weight: 0},
-      ],
-    } as any;
-
-    const root = render(<CategoryRatio
-      audits={audits}
-      category={category}
-      href="index=0&achor=seo"
-    />);
-    const link = root.getByRole('link');
-
-    expect(link.className).toEqual('CategoryRatio CategoryRatio--null');
-    expect(link.textContent).toEqual('1/2');
-  });
-
-  it('treats audit ref with no matching score as fail', async () => {
-    const audits = {
-      'audit1': {score: 1},
-    } as any;
-    const category = {
-      auditRefs: [
-        {id: 'audit1', weight: 1},
-        {id: 'audit2', weight: 1},
-      ],
-    } as any;
-
-    const root = render(<CategoryRatio
-      audits={audits}
-      category={category}
-      href="index=0&achor=seo"
-    />);
-    const link = root.getByRole('link');
-
-    expect(link.className).toEqual('CategoryRatio CategoryRatio--average');
-    expect(link.textContent).toEqual('1/2');
-  });
-});

package/flow-report/test/setup/env-setup.ts

@@ -1,25 +0,0 @@
-/**
- * @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 {JSDOM} from 'jsdom';
-
-/**
- * The jest environment "jsdom" does not work when preact is combined with the report renderer.
- */
-export function setupJsDom() {
-  const {window} = new JSDOM(undefined, {
-    url: 'file:///Users/example/report.html/',
-  });
-  global.window = window as any;
-  global.document = window.document;
-  global.location = window.location;
-
-  // Function not implemented in JSDOM.
-  window.Element.prototype.scrollIntoView = jest.fn();
-}
-
-global.beforeEach(setupJsDom);

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

@@ -1,71 +0,0 @@
-import fs from 'fs';
-import {dirname} from 'path';
-import {fileURLToPath} from 'url';
-
-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'
-  )
-);
-
-let wrapper: FunctionComponent;
-
-beforeEach(() => {
-  wrapper = ({children}) => (
-    <FlowResultContext.Provider value={flowResult}>{children}</FlowResultContext.Provider>
-  );
-});
-
-describe('SidebarFlow', () => {
-  it('renders flow steps', async () => {
-    const root = render(<SidebarFlow/>, {wrapper});
-
-    const navigation = root.getByText('Navigation report (www.mikescerealshack.co/)');
-    const timespan = root.getByText('Timespan report (www.mikescerealshack.co/search)');
-    const snapshot = root.getByText('Snapshot report (www.mikescerealshack.co/search)');
-    const navigation2 = root.getByText('Navigation report (www.mikescerealshack.co/corrections)');
-
-    const links = root.getAllByRole('link') as HTMLAnchorElement[];
-    expect(links.map(a => a.textContent)).toEqual([
-      navigation.textContent,
-      timespan.textContent,
-      snapshot.textContent,
-      navigation2.textContent,
-    ]);
-    expect(links.map(a => a.href)).toEqual([
-      'file:///Users/example/report.html/#index=0',
-      'file:///Users/example/report.html/#index=1',
-      'file:///Users/example/report.html/#index=2',
-      'file:///Users/example/report.html/#index=3',
-    ]);
-  });
-
-  it('no steps highlighted on summary page', async () => {
-    const root = render(<SidebarFlow/>, {wrapper});
-
-    const links = root.getAllByRole('link');
-    const highlighted = links.filter(h => h.classList.contains('Sidebar--current'));
-
-    expect(highlighted).toHaveLength(0);
-  });
-
-  it('highlight current step', async () => {
-    global.location.hash = '#index=1';
-    const root = render(<SidebarFlow/>, {wrapper});
-
-    const links = root.getAllByRole('link');
-    const highlighted = links.filter(h => h.classList.contains('Sidebar--current'));
-
-    expect(highlighted).toHaveLength(1);
-    expect(links[1]).toEqual(highlighted[0]);
-  });
-});

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

@@ -1,53 +0,0 @@
-/**
- * @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';
-
-import {render} from '@testing-library/preact';
-import {FunctionComponent} from 'preact';
-
-import {SidebarHeader, SidebarSummary} from '../../src/sidebar/sidebar';
-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'
-  )
-);
-
-let wrapper: FunctionComponent;
-
-beforeEach(() => {
-  wrapper = ({children}) => (
-    <FlowResultContext.Provider value={flowResult}>{children}</FlowResultContext.Provider>
-  );
-});
-
-describe('SidebarHeader', () => {
-  it('renders title content', async () => {
-    const title = 'Lighthouse flow report';
-    const date = '2021-08-03T18:28:13.296Z';
-    const root = render(<SidebarHeader title={title} date={date}/>, {wrapper});
-
-    expect(root.getByText(title)).toBeTruthy();
-    expect(root.getByText('Aug 3, 2021, 6:28 PM UTC')).toBeTruthy();
-  });
-});
-
-describe('SidebarSummary', () => {
-  it('highlighted by default', async () => {
-    const root = render(<SidebarSummary/>, {wrapper});
-    const link = root.getByRole('link') as HTMLAnchorElement;
-
-    expect(link.href).toEqual('file:///Users/example/report.html/#');
-    expect(link.classList).toContain('Sidebar--current');
-  });
-});