lighthouse 8.6.0 → 9.0.0-dev.20211118

package/flow-report/src/topbar.tsx

@@ -9,14 +9,12 @@ 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 {useLocalizedStrings} from './i18n/i18n';
+import {HamburgerIcon, InfoIcon} from './icons';
 import {useFlowResult} from './util';
-import {useReportRenderer} from './wrappers/report-renderer';
+import {saveFile} from '../../report/renderer/api';
 
-import type {DOM} from '../../report/renderer/dom';
-
-function saveHtml(flowResult: LH.FlowResult, dom: DOM) {
+function saveHtml(flowResult: LH.FlowResult) {
   const htmlStr = document.documentElement.outerHTML;
   const blob = new Blob([htmlStr], {type: 'text/html'});
 
@@ -24,7 +22,7 @@ function saveHtml(flowResult: LH.FlowResult, dom: DOM) {
   const name = flowResult.name.replace(/\s/g, '-');
   const filename = getFilenamePrefix(name, lhr.fetchTime);
 
-  dom.saveFile(blob, filename);
+  saveFile(blob, filename);
 }
 
 /* eslint-disable max-len */
@@ -78,8 +76,7 @@ const TopbarButton: FunctionComponent<{
 export const Topbar: FunctionComponent<{onMenuClick: JSX.MouseEventHandler<HTMLButtonElement>}> =
 ({onMenuClick}) => {
   const flowResult = useFlowResult();
-  const {dom} = useReportRenderer();
-  const strings = useUIStrings();
+  const strings = useLocalizedStrings();
   const [showHelpDialog, setShowHelpDialog] = useState(false);
 
   return (
@@ -92,14 +89,18 @@ export const Topbar: FunctionComponent<{onMenuClick: JSX.MouseEventHandler<HTMLB
       </div>
       <div className="Topbar__title">{strings.title}</div>
       <TopbarButton
-        onClick={() => saveHtml(flowResult, dom)}
+        onClick={() => saveHtml(flowResult)}
         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}
+        label="Button that toggles the help dialog"
+      >
+        <div className="Topbar__help-label">
+          <InfoIcon/>
+          {strings.helpLabel}
+        </div>
       </TopbarButton>
       {showHelpDialog ?
         <HelpDialog onClose={() => setShowHelpDialog(false)} /> :

package/flow-report/src/util.ts

@@ -5,18 +5,18 @@
  */
 
 import {createContext} from 'preact';
-import {useContext, useEffect, useMemo, useState} from 'preact/hooks';
+import {useContext, useEffect, useLayoutEffect, useMemo, useRef, useState} from 'preact/hooks';
 
 import type {UIStringsType} from './i18n/ui-strings';
 
-export const FlowResultContext = createContext<LH.FlowResult|undefined>(undefined);
+const FlowResultContext = createContext<LH.FlowResult|undefined>(undefined);
 
 function getHashParam(param: string): string|null {
   const params = new URLSearchParams(location.hash.replace('#', '?'));
   return params.get(param);
 }
 
-export function classNames(...args: Array<string|undefined|Record<string, boolean>>): string {
+function classNames(...args: Array<string|undefined|Record<string, boolean>>): string {
   const classes = [];
   for (const arg of args) {
     if (!arg) continue;
@@ -35,24 +35,24 @@ export function classNames(...args: Array<string|undefined|Record<string, boolea
   return classes.join(' ');
 }
 
-export function getScreenDimensions(reportResult: LH.ReportResult) {
+function getScreenDimensions(reportResult: LH.Result) {
   const {width, height} = reportResult.configSettings.screenEmulation;
   return {width, height};
 }
 
-export function getScreenshot(reportResult: LH.ReportResult) {
+function getFullPageScreenshot(reportResult: LH.Result) {
   const fullPageScreenshotAudit = reportResult.audits['full-page-screenshot'];
   const fullPageScreenshot =
     fullPageScreenshotAudit &&
     fullPageScreenshotAudit.details &&
     fullPageScreenshotAudit.details.type === 'full-page-screenshot' &&
-    fullPageScreenshotAudit.details.screenshot.data;
+    fullPageScreenshotAudit.details;
 
   return fullPageScreenshot || null;
 }
 
-export function getFilmstripFrames(
-  reportResult: LH.ReportResult
+function getFilmstripFrames(
+  reportResult: LH.Result
 ): Array<{data: string}> | undefined {
   const filmstripAudit = reportResult.audits['screenshot-thumbnails'];
   if (!filmstripAudit) return undefined;
@@ -65,7 +65,7 @@ export function getFilmstripFrames(
   return frameItems || undefined;
 }
 
-export function getModeDescription(mode: LH.Result.GatherMode, strings: UIStringsType) {
+function getModeDescription(mode: LH.Result.GatherMode, strings: UIStringsType) {
   switch (mode) {
     case 'navigation': return strings.navigationDescription;
     case 'timespan': return strings.timespanDescription;
@@ -73,38 +73,33 @@ export function getModeDescription(mode: LH.Result.GatherMode, strings: UIString
   }
 }
 
-export function useFlowResult(): LH.FlowResult {
+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.steps[0].lhr.configSettings.locale;
-}
-
-export function useHashParam(param: string) {
-  const [paramValue, setParamValue] = useState(getHashParam(param));
+function useHashParams(...params: string[]) {
+  const [paramValues, setParamValues] = useState(params.map(getHashParam));
 
   // Use two-way-binding on the URL hash.
-  // Triggers a re-render if the param changes.
+  // Triggers a re-render if any param changes.
   useEffect(() => {
     function hashListener() {
-      const newIndexString = getHashParam(param);
-      if (newIndexString === paramValue) return;
-      setParamValue(newIndexString);
+      const newParamValues = params.map(getHashParam);
+      if (newParamValues.every((value, i) => value === paramValues[i])) return;
+      setParamValues(newParamValues);
     }
     window.addEventListener('hashchange', hashListener);
     return () => window.removeEventListener('hashchange', hashListener);
-  }, [paramValue]);
+  }, [paramValues]);
 
-  return paramValue;
+  return paramValues;
 }
 
-export function useCurrentLhr(): LH.FlowResult.LhrRef|null {
+function useHashState(): LH.FlowResult.HashState|null {
   const flowResult = useFlowResult();
-  const indexString = useHashParam('index');
+  const [indexString, anchor] = useHashParams('index', 'anchor');
 
   // Memoize result so a new object is not created on every call.
   return useMemo(() => {
@@ -122,6 +117,45 @@ export function useCurrentLhr(): LH.FlowResult.LhrRef|null {
       return null;
     }
 
-    return {value: step.lhr, index};
-  }, [indexString, flowResult]);
+    return {currentLhr: step.lhr, index, anchor};
+  }, [indexString, flowResult, anchor]);
+}
+
+/**
+ * Creates a DOM subtree from non-preact code (e.g. LH report renderer).
+ * @param renderCallback Callback that renders a DOM subtree.
+ * @param inputs Changes to these values will trigger a re-render of the DOM subtree.
+ * @return Reference to the element that will contain the DOM subtree.
+ */
+function useExternalRenderer<T extends Element>(
+  renderCallback: () => Node,
+  inputs?: ReadonlyArray<unknown>
+) {
+  const ref = useRef<T>(null);
+
+  useLayoutEffect(() => {
+    if (!ref.current) return;
+
+    const root = renderCallback();
+    ref.current.appendChild(root);
+
+    return () => {
+      if (ref.current?.contains(root)) ref.current.removeChild(root);
+    };
+  }, inputs);
+
+  return ref;
 }
+
+export {
+  FlowResultContext,
+  classNames,
+  getScreenDimensions,
+  getFullPageScreenshot,
+  getFilmstripFrames,
+  getModeDescription,
+  useFlowResult,
+  useHashParams,
+  useHashState,
+  useExternalRenderer,
+};

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

@@ -5,40 +5,22 @@
  */
 
 import {FunctionComponent} from 'preact';
-import {useEffect, useLayoutEffect, useRef} from 'preact/hooks';
 
-import {useReportRenderer} from './report-renderer';
+import {renderCategoryScore} from '../../../report/renderer/api';
+import {useExternalRenderer} from '../util';
 
 export const CategoryScore: FunctionComponent<{
   category: LH.ReportResult.Category,
   href: string,
   gatherMode: LH.Result.GatherMode,
 }> = ({category, href, gatherMode}) => {
-  const {categoryRenderer} = useReportRenderer();
-  const ref = useRef<HTMLDivElement>(null);
-
-  useLayoutEffect(() => {
-    const el = categoryRenderer.renderCategoryScore(category, {}, {gatherMode});
-
-    // Category label is displayed in the navigation header.
-    const label = el.querySelector('.lh-gauge__label,.lh-fraction__label');
-    if (label) label.remove();
-    // Background is displayed in individual reports, but not on the summary page.
-    const bg = el.querySelector('.lh-fraction__background');
-    if (bg) bg.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]);
+  const ref = useExternalRenderer<HTMLDivElement>(() => {
+    return renderCategoryScore(category, {
+      gatherMode,
+      omitLabel: true,
+      onPageAnchorRendered: link => link.href = href,
+    });
+  }, [category, href]);
 
   return (
     <div ref={ref} data-testid="CategoryScore"/>

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

@@ -0,0 +1,18 @@
+/**
+ * @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 {convertMarkdownCodeSnippets} from '../../../report/renderer/api';
+import {useExternalRenderer} from '../util';
+
+export const Markdown: FunctionComponent<{text: string}> = ({text}) => {
+  const ref = useExternalRenderer<HTMLSpanElement>(() => {
+    return convertMarkdownCodeSnippets(text);
+  }, [text]);
+
+  return <span ref={ref}/>;
+};

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

@@ -5,52 +5,41 @@
  */
 
 import {FunctionComponent} from 'preact';
-import {useLayoutEffect, useRef} from 'preact/hooks';
 
-import {useReportRenderer} from './report-renderer';
+import {renderReport} from '../../../report/renderer/api.js';
+import {useExternalRenderer} from '../util';
 
 /**
  * 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.
+ * This function converts a category score anchor link 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[href]') 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}`;
-  }
+function convertAnchor(link: HTMLAnchorElement, index: number) {
+  // Clear existing event listeners by cloning node.
+  const newLink = link.cloneNode(true) as HTMLAnchorElement;
+  if (!newLink.hash) return newLink;
+
+  const nodeId = link.hash.substr(1);
+  newLink.hash = `#index=${index}&anchor=${nodeId}`;
+  newLink.onclick = e => {
+    e.preventDefault();
+    const el = document.getElementById(nodeId);
+    if (el) el.scrollIntoView();
+  };
+  link.replaceWith(newLink);
 }
 
-export const Report: FunctionComponent<{currentLhr: LH.FlowResult.LhrRef}> =
-({currentLhr}) => {
-  const {dom, reportRenderer} = useReportRenderer();
-  const ref = useRef<HTMLDivElement>(null);
-
-  useLayoutEffect(() => {
-    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 () => {
-      if (ref.current) ref.current.textContent = '';
-    };
-  }, [reportRenderer, currentLhr]);
+export const Report: FunctionComponent<{hashState: LH.FlowResult.HashState}> =
+({hashState}) => {
+  const ref = useExternalRenderer<HTMLDivElement>(() => {
+    return renderReport(hashState.currentLhr, {
+      disableAutoDarkModeAndFireworks: true,
+      omitTopbar: true,
+      onPageAnchorRendered: link => convertAnchor(link, hashState.index),
+    });
+  }, [hashState]);
 
   return (
-    <div ref={ref} className="lh-root" data-testid="Report"/>
+    <div ref={ref} data-testid="Report"/>
   );
 };

package/flow-report/standalone-flow.tsx

@@ -13,11 +13,12 @@ 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);
+  const container = document.body.querySelector('main');
+  if (!container) throw Error('Container element not found');
+  container.classList.add('flow-vars', 'lh-root', 'lh-vars');
+  render(<App flowResult={window.__LIGHTHOUSE_FLOW_JSON__} />, container);
 }
 
 window.__initLighthouseFlowReport__ = __initLighthouseFlowReport__;
+window.__initLighthouseFlowReport__();

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

@@ -9,7 +9,7 @@ import {act, render} from '@testing-library/preact';
 
 import {FlowStepThumbnail} from '../src/common';
 
-let lhr: LH.ReportResult;
+let lhr: LH.Result;
 
 jest.useFakeTimers();
 
@@ -24,16 +24,25 @@ describe('FlowStepThumbnail', () => {
         'full-page-screenshot': {
           details: {
             type: 'full-page-screenshot',
-            screenshot: {data: 'baef01', width: 400, height: 600},
+            screenshot: {data: 'FPS', width: 400, height: 600},
             nodes: {},
           },
         },
+        'screenshot-thumbnails': {
+          details: {
+            type: 'filmstrip',
+            items: [
+              {data: 'frame1'},
+              {data: 'frame2'},
+            ],
+          },
+        },
       },
     } as any;
   });
 
   it('renders a thumbnail', () => {
-    const root = render(<FlowStepThumbnail reportResult={lhr} width={200} height={200} />);
+    const root = render(<FlowStepThumbnail lhr={lhr} width={200} height={200} />);
 
     const thumbnail = root.getByAltText(/Screenshot/);
     expect(thumbnail.style.width).toEqual('200px');
@@ -41,14 +50,14 @@ describe('FlowStepThumbnail', () => {
   });
 
   it('renders nothing without dimensions', () => {
-    const root = render(<FlowStepThumbnail reportResult={lhr} />);
+    const root = render(<FlowStepThumbnail lhr={lhr} />);
 
     expect(() => root.getByAltText(/Screenshot/)).toThrow();
     expect(global.console.warn).toHaveBeenCalled();
   });
 
   it('interpolates height', () => {
-    const root = render(<FlowStepThumbnail reportResult={lhr} width={200} />);
+    const root = render(<FlowStepThumbnail lhr={lhr} width={200} />);
 
     const thumbnail = root.getByAltText(/Screenshot/);
     expect(thumbnail.style.width).toEqual('200px');
@@ -56,25 +65,31 @@ describe('FlowStepThumbnail', () => {
   });
 
   it('interpolates width', () => {
-    const root = render(<FlowStepThumbnail reportResult={lhr} height={150} />);
+    const root = render(<FlowStepThumbnail lhr={lhr} height={150} />);
 
     const thumbnail = root.getByAltText(/Screenshot/);
     expect(thumbnail.style.width).toEqual('100px');
     expect(thumbnail.style.height).toEqual('150px');
   });
 
+  it('uses last filmstrip thumbnail', () => {
+    const root = render(<FlowStepThumbnail lhr={lhr} height={150} />);
+
+    const thumbnail = root.getByAltText(/Screenshot/) as HTMLImageElement;
+    expect(thumbnail.src).toContain('frame2');
+  });
+
+  it('uses full page screenshot if filmstrip unavailable', () => {
+    delete lhr.audits['screenshot-thumbnails'];
+    const root = render(<FlowStepThumbnail lhr={lhr} height={150} />);
+
+    const thumbnail = root.getByAltText(/Screenshot/) as HTMLImageElement;
+    expect(thumbnail.src).toContain('FPS');
+  });
+
   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 root = render(<FlowStepThumbnail lhr={lhr} height={150} />);
 
     const thumbnail = root.getByAltText(/Animated/) as HTMLImageElement;
     expect(thumbnail.style.width).toEqual('100px');
@@ -82,7 +97,7 @@ describe('FlowStepThumbnail', () => {
 
     expect(thumbnail.src).toContain('frame1');
     await act(() => {
-      jest.advanceTimersByTime(251);
+      jest.advanceTimersByTime(501);
     });
     expect(thumbnail.src).toContain('frame2');
   });

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

@@ -0,0 +1,46 @@
+/**
+ * @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 puppeteer, {Browser, Page} from 'puppeteer';
+
+import ReportGenerator from '../../report/generator/report-generator.js';
+import {flowResult} from './sample-flow';
+
+jest.setTimeout(35_000);
+
+describe('Lighthouse Flow Report', () => {
+  console.log('\n✨ Be sure to have recently run this: yarn build-report');
+
+  let browser: Browser;
+  let page: Page;
+  const pageErrors: Error[] = [];
+
+  beforeAll(async () => {
+    browser = await puppeteer.launch({
+      headless: true,
+    });
+    page = await browser.newPage();
+    page.on('pageerror', pageError => pageErrors.push(pageError));
+  });
+
+  afterAll(async () => {
+    if (pageErrors.length > 0) console.error(pageErrors);
+
+    await browser.close();
+  });
+
+  describe('Renders the flow report', () => {
+    beforeAll(async () => {
+      const html = ReportGenerator.generateFlowReportHtml(flowResult);
+      await page.setContent(html);
+    });
+
+    it('should load with no errors', async () => {
+      expect(pageErrors).toHaveLength(0);
+    });
+  });
+});

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

@@ -25,8 +25,8 @@ beforeEach(() => {
 });
 
 it('renders all sections for a middle step', () => {
-  const currentLhr = {index: 1} as any;
-  const root = render(<Header currentLhr={currentLhr}/>, {wrapper});
+  const hashState = {index: 1} as any;
+  const root = render(<Header hashState={hashState}/>, {wrapper});
 
   expect(root.baseElement.querySelector('.Header__prev-thumbnail')).toBeTruthy();
   expect(root.baseElement.querySelector('.Header__prev-title')).toBeTruthy();
@@ -35,8 +35,8 @@ it('renders all sections for a middle step', () => {
 });
 
 it('renders only next section for first step', () => {
-  const currentLhr = {index: 0} as any;
-  const root = render(<Header currentLhr={currentLhr}/>, {wrapper});
+  const hashState = {index: 0} as any;
+  const root = render(<Header hashState={hashState}/>, {wrapper});
 
   expect(root.baseElement.querySelector('.Header__prev-thumbnail')).toBeFalsy();
   expect(root.baseElement.querySelector('.Header__prev-title')).toBeFalsy();
@@ -45,8 +45,8 @@ it('renders only next section for first step', () => {
 });
 
 it('renders only previous section for last step', () => {
-  const currentLhr = {index: 3} as any;
-  const root = render(<Header currentLhr={currentLhr}/>, {wrapper});
+  const hashState = {index: 3} as any;
+  const root = render(<Header hashState={hashState}/>, {wrapper});
 
   expect(root.baseElement.querySelector('.Header__prev-thumbnail')).toBeTruthy();
   expect(root.baseElement.querySelector('.Header__prev-title')).toBeTruthy();

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

@@ -9,18 +9,24 @@ import {JSDOM} from 'jsdom';
 
 /**
  * The jest environment "jsdom" does not work when preact is combined with the report renderer.
+ * This sets up our own environment with JSDOM globals.
  */
-export function setupJsDom() {
+beforeEach(() => {
   const {window} = new JSDOM(undefined, {
     url: 'file:///Users/example/report.html/',
   });
   global.window = window as any;
   global.document = window.document;
   global.location = window.location;
+  global.self = global.window;
+
+  // Use JSDOM types as necessary.
   global.Blob = window.Blob;
+  global.HTMLInputElement = window.HTMLInputElement;
 
-  // Function not implemented in JSDOM.
+  // Functions not implemented in JSDOM.
   window.Element.prototype.scrollIntoView = jest.fn();
-}
-
-global.beforeEach(setupJsDom);
+  global.self.matchMedia = jest.fn<any, any>(() => ({
+    addListener: jest.fn(),
+  }));
+});

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

@@ -8,7 +8,7 @@ import {render} from '@testing-library/preact';
 import {FunctionComponent} from 'preact';
 
 import {I18nProvider} from '../../src/i18n/i18n';
-import {SidebarHeader, SidebarSummary} from '../../src/sidebar/sidebar';
+import {SidebarHeader, SidebarRuntimeSettings, SidebarSummary} from '../../src/sidebar/sidebar';
 import {FlowResultContext} from '../../src/util';
 import {flowResult} from '../sample-flow';
 
@@ -45,3 +45,45 @@ describe('SidebarSummary', () => {
     expect(link.classList).toContain('Sidebar--current');
   });
 });
+
+describe('SidebarRuntimeSettings', () => {
+  it('displays default runtime settings', async () => {
+    const settings = {
+      formFactor: 'mobile',
+      throttlingMethod: 'simulate',
+      throttling: {
+        cpuSlowdownMultiplier: 4,
+        requestLatencyMs: 150 * 3.75,
+        downloadThroughputKbps: 1.6 * 1024 * 0.9,
+        uploadThroughputKbps: 750 * 0.9,
+        throughputKbps: 1.6 * 1024,
+        rttMs: 150,
+      },
+    } as any;
+    const root = render(<SidebarRuntimeSettings settings={settings}/>, {wrapper});
+
+    expect(root.getByText('Emulated Moto G4')).toBeTruthy();
+    expect(root.getByText('Slow 4G throttling')).toBeTruthy();
+    expect(root.getByText('4x slowdown'));
+  });
+
+  it('displays custom runtime settings', async () => {
+    const settings = {
+      formFactor: 'desktop',
+      throttlingMethod: 'devtools',
+      throttling: {
+        cpuSlowdownMultiplier: 1,
+        requestLatencyMs: 1,
+        downloadThroughputKbps: 1,
+        uploadThroughputKbps: 1,
+        throughputKbps: 1,
+        rttMs: 1,
+      },
+    } as any;
+    const root = render(<SidebarRuntimeSettings settings={settings}/>, {wrapper});
+
+    expect(root.getByText('Emulated Desktop')).toBeTruthy();
+    expect(root.getByText('Custom throttling')).toBeTruthy();
+    expect(root.getByText('1x slowdown'));
+  });
+});