lighthouse 9.6.8 → 10.0.0

package/flow-report/src/sidebar/flow.d.ts

@@ -0,0 +1,8 @@
+/**
+ * @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';
+export declare const SidebarFlow: FunctionComponent;
+//# sourceMappingURL=flow.d.ts.map

package/flow-report/src/sidebar/sidebar.d.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 { FunctionComponent } from 'preact';
+declare const SidebarSummary: FunctionComponent;
+declare const SidebarRuntimeSettings: FunctionComponent<{
+    settings: LH.ConfigSettings;
+}>;
+declare const SidebarHeader: FunctionComponent<{
+    title: string;
+    date: string;
+}>;
+declare const Sidebar: FunctionComponent;
+export { SidebarSummary, SidebarRuntimeSettings, SidebarHeader, Sidebar, };
+//# sourceMappingURL=sidebar.d.ts.map

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

@@ -6,7 +6,7 @@
 
 import {FunctionComponent} from 'preact';
 
-import {Util} from '../../../report/renderer/util';
+import {ReportUtils} from '../../../report/renderer/report-utils.js';
 import {Separator} from '../common';
 import {useI18n, useLocalizedStrings} from '../i18n/i18n';
 import {CpuIcon, EnvIcon, NetworkIcon, SummaryIcon} from '../icons';
@@ -34,7 +34,10 @@ const SidebarSummary: FunctionComponent = () => {
 const SidebarRuntimeSettings: FunctionComponent<{settings: LH.ConfigSettings}> =
 ({settings}) => {
   const strings = useLocalizedStrings();
-  const env = Util.getEmulationDescriptions(settings);
+  const env = ReportUtils.getEmulationDescriptions(settings);
+  const deviceEmulationString = env.screenEmulation ?
+    `${env.deviceEmulation} - ${env.screenEmulation}` :
+    env.deviceEmulation;
 
   return (
     <div className="SidebarRuntimeSettings">
@@ -43,7 +46,7 @@ const SidebarRuntimeSettings: FunctionComponent<{settings: LH.ConfigSettings}> =
           <EnvIcon/>
         </div>
         {
-          env.deviceEmulation
+          deviceEmulationString
         }
       </div>
       <div
@@ -74,7 +77,7 @@ const SidebarHeader: FunctionComponent<{title: string, date: string}> = ({title,
   return (
     <div className="SidebarHeader">
       <div className="SidebarHeader__title">{title}</div>
-      <div className="SidebarHeader__date">{i18n.formatDateTime(date)}</div>
+      <div className="SidebarHeader__date">{i18n.formatter.formatDateTime(date)}</div>
     </div>
   );
 };

package/flow-report/src/summary/category.d.ts

@@ -0,0 +1,19 @@
+/**
+ * @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';
+declare const SummaryTooltip: FunctionComponent<{
+    category: LH.ReportResult.Category;
+    gatherMode: LH.Result.GatherMode;
+    url: string;
+}>;
+declare const SummaryCategory: FunctionComponent<{
+    category: LH.ReportResult.Category | undefined;
+    href: string;
+    gatherMode: LH.Result.GatherMode;
+    finalDisplayedUrl: string;
+}>;
+export { SummaryTooltip, SummaryCategory, };
+//# sourceMappingURL=category.d.ts.map

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

@@ -6,7 +6,7 @@
 
 import {FunctionComponent} from 'preact';
 
-import {Util} from '../../../report/renderer/util';
+import {ReportUtils} from '../../../report/renderer/report-utils.js';
 import {Separator} from '../common';
 import {CategoryScore} from '../wrappers/category-score';
 import {useI18n, useStringFormatter, useLocalizedStrings} from '../i18n/i18n';
@@ -48,7 +48,7 @@ function getOverallSavings(audit: LH.ReportResult.AuditRef): number {
 }
 
 const SummaryTooltipAudit: FunctionComponent<{audit: LH.ReportResult.AuditRef}> = ({audit}) => {
-  const rating = Util.calculateRating(audit.result.score, audit.result.scoreDisplayMode);
+  const rating = ReportUtils.calculateRating(audit.result.score, audit.result.scoreDisplayMode);
   return (
     <div className={`SummaryTooltipAudit SummaryTooltipAudit--${rating}`}>
       <Markdown text={audit.result.title}/>
@@ -69,7 +69,7 @@ const SummaryTooltipAudits: FunctionComponent<{category: LH.ReportResult.Categor
       // We don't want unweighted audits except for opportunities with potential savings.
       (audit.weight > 0 || getOverallSavings(audit) > 0) &&
       // Passing audits should never be high impact.
-      !Util.showAsPassed(audit.result);
+      !ReportUtils.showAsPassed(audit.result);
   }
 
   const audits = category.auditRefs
@@ -107,14 +107,14 @@ const SummaryTooltip: FunctionComponent<{
     numPassableAudits,
     numInformative,
     totalWeight,
-  } = Util.calculateCategoryFraction(category);
+  } = ReportUtils.calculateCategoryFraction(category);
 
   const i18n = useI18n();
-  const displayAsFraction = Util.shouldDisplayAsFraction(gatherMode);
+  const displayAsFraction = ReportUtils.shouldDisplayAsFraction(gatherMode);
   const score = displayAsFraction ?
     numPassed / numPassableAudits :
     category.score;
-  const rating = score === null ? 'error' : Util.calculateRating(score);
+  const rating = score === null ? 'error' : ReportUtils.calculateRating(score);
 
   return (
     <div className="SummaryTooltip">
@@ -132,7 +132,7 @@ const SummaryTooltip: FunctionComponent<{
               {
                 !displayAsFraction && category.score !== null && <>
                   <span> · </span>
-                  <span>{i18n.formatNumber(category.score * 100)}</span>
+                  <span>{i18n.formatter.formatInteger(category.score * 100)}</span>
                 </>
               }
             </div>
@@ -157,8 +157,8 @@ const SummaryCategory: FunctionComponent<{
   category: LH.ReportResult.Category|undefined,
   href: string,
   gatherMode: LH.Result.GatherMode,
-  finalUrl: string,
-}> = ({category, href, gatherMode, finalUrl}) => {
+  finalDisplayedUrl: string,
+}> = ({category, href, gatherMode, finalDisplayedUrl}) => {
   return (
     <div className="SummaryCategory">
       {
@@ -169,7 +169,7 @@ const SummaryCategory: FunctionComponent<{
               href={href}
               gatherMode={gatherMode}
             />
-            <SummaryTooltip category={category} gatherMode={gatherMode} url={finalUrl}/>
+            <SummaryTooltip category={category} gatherMode={gatherMode} url={finalDisplayedUrl}/>
           </div> :
           <div className="SummaryCategory__null" data-testid="SummaryCategory__null"/>
       }

package/flow-report/src/summary/summary.d.ts

@@ -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';
+/**
+ * The div should behave like a JSX <>...</>. This still allows us to identify "rows" with CSS selectors.
+ */
+declare const SummaryFlowStep: FunctionComponent<{
+    lhr: LH.Result;
+    label: string;
+    hashIndex: number;
+}>;
+declare const SummaryHeader: FunctionComponent;
+declare const Summary: FunctionComponent;
+export { SummaryFlowStep, SummaryHeader, Summary, };
+//# sourceMappingURL=summary.d.ts.map

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

@@ -9,7 +9,7 @@ import {useMemo} from 'preact/hooks';
 
 import {FlowSegment, FlowStepThumbnail, Separator} from '../common';
 import {getModeDescription, useFlowResult} from '../util';
-import {Util} from '../../../report/renderer/util';
+import {ReportUtils} from '../../../report/renderer/report-utils.js';
 import {SummaryCategory} from './category';
 import {useStringFormatter, useLocalizedStrings} from '../i18n/i18n';
 
@@ -23,7 +23,7 @@ const SummaryNavigationHeader: FunctionComponent<{lhr: LH.Result}> = ({lhr}) =>
     <div className="SummaryNavigationHeader" data-testid="SummaryNavigationHeader">
       <FlowSegment/>
       <div className="SummaryNavigationHeader__url">
-        <a rel="noopener" target="_blank" href={lhr.finalUrl}>{lhr.finalUrl}</a>
+        <a rel="noopener" target="_blank" href={lhr.finalDisplayedUrl}>{lhr.finalDisplayedUrl}</a>
       </div>
       <div className="SummaryNavigationHeader__category">
         {strings.categoryPerformance}
@@ -49,7 +49,7 @@ const SummaryFlowStep: FunctionComponent<{
   label: string,
   hashIndex: number,
 }> = ({lhr, label, hashIndex}) => {
-  const reportResult = useMemo(() => Util.prepareReportResult(lhr), [lhr]);
+  const reportResult = useMemo(() => ReportUtils.prepareReportResult(lhr), [lhr]);
   const strings = useLocalizedStrings();
   const modeDescription = getModeDescription(lhr.gatherMode, strings);
 
@@ -76,7 +76,7 @@ const SummaryFlowStep: FunctionComponent<{
             category={reportResult.categories[c]}
             href={`#index=${hashIndex}&anchor=${c}`}
             gatherMode={lhr.gatherMode}
-            finalUrl={lhr.finalUrl}
+            finalDisplayedUrl={lhr.finalDisplayedUrl}
           />
         ))
       }

package/flow-report/src/topbar.d.ts

@@ -0,0 +1,15 @@
+/**
+ * @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, JSX } from 'preact';
+declare function saveHtml(flowResult: LH.FlowResult, htmlStr: string): void;
+declare namespace saveHtml {
+    var saveFile: typeof import("../../report/renderer/api").saveFile;
+}
+declare const Topbar: FunctionComponent<{
+    onMenuClick: JSX.MouseEventHandler<HTMLButtonElement>;
+}>;
+export { Topbar, saveHtml, };
+//# sourceMappingURL=topbar.d.ts.map

package/flow-report/src/topbar.tsx

@@ -17,40 +17,19 @@ import {saveFile} from '../../report/renderer/api';
 function saveHtml(flowResult: LH.FlowResult, htmlStr: string) {
   const blob = new Blob([htmlStr], {type: 'text/html'});
   const filename = getFlowResultFilenamePrefix(flowResult) + '.html';
-  saveFile(blob, filename);
+  saveHtml.saveFile(blob, filename);
 }
 
+// Store `saveFile` here so we can do dependency injection.
+saveHtml.saveFile = saveFile;
+
 /* eslint-disable max-len */
 const Logo: FunctionComponent = () => {
   return (
-    <svg height="24" width="24" viewBox="0 0 24 24" role="img">
-      <defs>
-        <linearGradient x1="57.456%" y1="13.086%" x2="18.259%" y2="72.322%" id="Topbar__logo--a">
-          <stop stop-color="#262626" stop-opacity=".1" offset="0%"/>
-          <stop stop-color="#262626" stop-opacity="0" offset="100%"/>
-        </linearGradient>
-        <linearGradient x1="100%" y1="50%" x2="0%" y2="50%" id="Topbar__logo--b">
-          <stop stop-color="#262626" stop-opacity=".1" offset="0%"/>
-          <stop stop-color="#262626" stop-opacity="0" offset="100%"/>
-        </linearGradient>
-        <linearGradient x1="58.764%" y1="65.756%" x2="36.939%" y2="50.14%" id="Topbar__logo--c">
-          <stop stop-color="#262626" stop-opacity=".1" offset="0%"/>
-          <stop stop-color="#262626" stop-opacity="0" offset="100%"/>
-        </linearGradient>
-        <linearGradient x1="41.635%" y1="20.358%" x2="72.863%" y2="85.424%" id="Topbar__logo--d">
-          <stop stop-color="#FFF" stop-opacity=".1" offset="0%"/>
-          <stop stop-color="#FFF" stop-opacity="0" offset="100%"/>
-        </linearGradient>
-      </defs>
-      <g fill="none" fill-rule="evenodd">
-        <path d="M12 3l4.125 2.625v3.75H18v2.25h-1.688l1.5 9.375H6.188l1.5-9.375H6v-2.25h1.875V5.648L12 3zm2.201 9.938L9.54 14.633 9 18.028l5.625-2.062-.424-3.028zM12.005 5.67l-1.88 1.207v2.498h3.75V6.86l-1.87-1.19z" fill="#F44B21"/>
-        <path fill="#FFF" d="M14.201 12.938L9.54 14.633 9 18.028l5.625-2.062z"/>
-        <path d="M6 18c-2.042 0-3.95-.01-5.813 0l1.5-9.375h4.326L6 18z" fill="url(#Topbar__logo--a)" fill-rule="nonzero" transform="translate(6 3)"/>
-        <path fill="#FFF176" fill-rule="nonzero" d="M13.875 9.375v-2.56l-1.87-1.19-1.88 1.207v2.543z"/>
-        <path fill="url(#Topbar__logo--b)" fill-rule="nonzero" d="M0 6.375h6v2.25H0z" transform="translate(6 3)"/>
-        <path fill="url(#Topbar__logo--c)" fill-rule="nonzero" d="M6 6.375H1.875v-3.75L6 0z" transform="translate(6 3)"/>
-        <path fill="url(#Topbar__logo--d)" fill-rule="nonzero" d="M6 0l4.125 2.625v3.75H12v2.25h-1.688l1.5 9.375H.188l1.5-9.375H0v-2.25h1.875V2.648z" transform="translate(6 3)"/>
-      </g>
+    <svg role="img" class="lh-topbar__logo" title="Lighthouse logo" width="24" height="24" fill="none" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 48 48">
+      <path d="m14 7 10-7 10 7v10h5v7h-5l5 24H9l5-24H9v-7h5V7Z" fill="#F63"/>
+      <path d="M31.561 24H14l-1.689 8.105L31.561 24ZM18.983 48H9l1.022-4.907L35.723 32.27l1.663 7.98L18.983 48Z" fill="#FFA385"/>
+      <path fill="#FF3" d="M20.5 10h7v7h-7z"/>
     </svg>
   );
 };
@@ -68,7 +47,7 @@ const TopbarButton: FunctionComponent<{
   );
 };
 
-export const Topbar: FunctionComponent<{onMenuClick: JSX.MouseEventHandler<HTMLButtonElement>}> =
+const Topbar: FunctionComponent<{onMenuClick: JSX.MouseEventHandler<HTMLButtonElement>}> =
 ({onMenuClick}) => {
   const flowResult = useFlowResult();
   const strings = useLocalizedStrings();
@@ -118,3 +97,8 @@ export const Topbar: FunctionComponent<{onMenuClick: JSX.MouseEventHandler<HTMLB
     </div>
   );
 };
+
+export {
+  Topbar,
+  saveHtml,
+};

package/flow-report/src/util.d.ts

@@ -0,0 +1,30 @@
+/**
+ * @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 type { UIStringsType } from './i18n/ui-strings';
+declare const FlowResultContext: import("preact").Context<import("../../types/lhr/flow-result").default | undefined>;
+declare const OptionsContext: import("preact").Context<LH.FlowReportOptions>;
+declare function classNames(...args: Array<string | undefined | Record<string, boolean>>): string;
+declare function getScreenDimensions(reportResult: LH.Result): {
+    width: number;
+    height: number;
+};
+declare function getFilmstripFrames(reportResult: LH.Result): Array<{
+    data: string;
+}> | undefined;
+declare function getModeDescription(mode: LH.Result.GatherMode, strings: UIStringsType): string;
+declare function useFlowResult(): LH.FlowResult;
+declare function useHashParams(...params: string[]): (string | null)[];
+declare function useHashState(): LH.HashState | null;
+/**
+ * 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.
+ */
+declare function useExternalRenderer<T extends Element>(renderCallback: () => Node, inputs?: ReadonlyArray<unknown>): import("preact/hooks").Ref<T>;
+declare function useOptions(): LH.FlowReportOptions;
+export { FlowResultContext, OptionsContext, classNames, getScreenDimensions, getFilmstripFrames, getModeDescription, useFlowResult, useHashParams, useHashState, useExternalRenderer, useOptions, };
+//# sourceMappingURL=util.d.ts.map

package/flow-report/src/util.ts

@@ -41,16 +41,6 @@ function getScreenDimensions(reportResult: LH.Result) {
   return {width, height};
 }
 
-function getFullPageScreenshot(reportResult: LH.Result) {
-  const fullPageScreenshotAudit = reportResult.audits['full-page-screenshot'];
-  const fullPageScreenshot =
-    fullPageScreenshotAudit?.details &&
-    fullPageScreenshotAudit.details.type === 'full-page-screenshot' &&
-    fullPageScreenshotAudit.details;
-
-  return fullPageScreenshot || null;
-}
-
 function getFilmstripFrames(
   reportResult: LH.Result
 ): Array<{data: string}> | undefined {
@@ -97,7 +87,7 @@ function useHashParams(...params: string[]) {
   return paramValues;
 }
 
-function useHashState(): LH.FlowResult.HashState|null {
+function useHashState(): LH.HashState|null {
   const flowResult = useFlowResult();
   const [indexString, anchor] = useHashParams('index', 'anchor');
 
@@ -137,7 +127,7 @@ function useExternalRenderer<T extends Element>(
     if (!ref.current) return;
 
     const root = renderCallback();
-    ref.current.appendChild(root);
+    ref.current.append(root);
 
     return () => {
       if (ref.current?.contains(root)) ref.current.removeChild(root);
@@ -156,7 +146,6 @@ export {
   OptionsContext,
   classNames,
   getScreenDimensions,
-  getFullPageScreenshot,
   getFilmstripFrames,
   getModeDescription,
   useFlowResult,

package/flow-report/src/wrappers/category-score.d.ts

@@ -0,0 +1,12 @@
+/**
+ * @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';
+export declare const CategoryScore: FunctionComponent<{
+    category: LH.ReportResult.Category;
+    href: string;
+    gatherMode: LH.Result.GatherMode;
+}>;
+//# sourceMappingURL=category-score.d.ts.map

package/flow-report/src/wrappers/markdown.d.ts

@@ -0,0 +1,10 @@
+/**
+ * @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';
+export declare const Markdown: FunctionComponent<{
+    text: string;
+}>;
+//# sourceMappingURL=markdown.d.ts.map

package/flow-report/src/wrappers/report.d.ts

@@ -0,0 +1,10 @@
+/**
+ * @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';
+export declare const Report: FunctionComponent<{
+    hashState: LH.HashState;
+}>;
+//# sourceMappingURL=report.d.ts.map

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

@@ -29,7 +29,7 @@ function convertAnchor(link: HTMLAnchorElement, index: number) {
   link.replaceWith(newLink);
 }
 
-export const Report: FunctionComponent<{hashState: LH.FlowResult.HashState}> =
+export const Report: FunctionComponent<{hashState: LH.HashState}> =
 ({hashState}) => {
   const ref = useExternalRenderer<HTMLDivElement>(() => {
     return renderReport(hashState.currentLhr, {

package/flow-report/src/wrappers/styles.d.ts

@@ -0,0 +1,8 @@
+/**
+ * @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';
+export declare const Styles: FunctionComponent;
+//# sourceMappingURL=styles.d.ts.map

package/flow-report/test/app-test.d.ts

@@ -0,0 +1,7 @@
+/**
+ * @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.
+ */
+export {};
+//# sourceMappingURL=app-test.d.ts.map

package/flow-report/test/common-test.d.ts

@@ -0,0 +1,7 @@
+/**
+ * @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.
+ */
+export {};
+//# sourceMappingURL=common-test.d.ts.map

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

@@ -4,30 +4,25 @@
  * 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 jestMock from 'jest-mock';
 import {act, render} from '@testing-library/preact';
 
+import {timers} from '../../core/test/test-env/fake-timers.js';
 import {FlowStepThumbnail} from '../src/common';
 
 let lhr: LH.Result;
 
-jest.useFakeTimers();
-
 describe('FlowStepThumbnail', () => {
+  before(() => timers.useFakeTimers());
+  after(() => timers.dispose());
+
   beforeEach(() => {
-    global.console.warn = jest.fn();
+    global.console.warn = jestMock.fn();
 
     lhr = {
       gatherMode: 'navigation',
       configSettings: {screenEmulation: {width: 400, height: 600}},
       audits: {
-        'full-page-screenshot': {
-          details: {
-            type: 'full-page-screenshot',
-            screenshot: {data: 'FPS', width: 400, height: 600},
-            nodes: {},
-          },
-        },
         'screenshot-thumbnails': {
           details: {
             type: 'filmstrip',
@@ -38,6 +33,10 @@ describe('FlowStepThumbnail', () => {
           },
         },
       },
+      fullPageScreenshot: {
+        screenshot: {data: 'FPS', width: 400, height: 600},
+        nodes: {},
+      },
     } as any;
   });
 
@@ -97,7 +96,7 @@ describe('FlowStepThumbnail', () => {
 
     expect(thumbnail.src).toContain('frame1');
     await act(() => {
-      jest.advanceTimersByTime(501);
+      timers.advanceTimersByTime(501);
     });
     expect(thumbnail.src).toContain('frame2');
   });

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

@@ -0,0 +1,7 @@
+/**
+ * @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.
+ */
+export {};
+//# sourceMappingURL=flow-report-pptr-test.d.ts.map

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

@@ -4,14 +4,12 @@
  * 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 {ReportGenerator} from '../../report/generator/report-generator.js';
+import {swapFlowLocale} from '../../shared/localization/swap-flow-locale.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');
 
@@ -19,7 +17,7 @@ describe('Lighthouse Flow Report', () => {
   let page: Page;
   const pageErrors: Error[] = [];
 
-  beforeAll(async () => {
+  before(async () => {
     browser = await puppeteer.launch({
       headless: true,
     });
@@ -27,14 +25,14 @@ describe('Lighthouse Flow Report', () => {
     page.on('pageerror', pageError => pageErrors.push(pageError));
   });
 
-  afterAll(async () => {
+  after(async () => {
     if (pageErrors.length > 0) console.error(pageErrors);
 
     await browser.close();
   });
 
   describe('Renders the flow report', () => {
-    beforeAll(async () => {
+    before(async () => {
       const html = ReportGenerator.generateFlowReportHtml(flowResult);
       await page.setContent(html);
     });
@@ -43,4 +41,19 @@ describe('Lighthouse Flow Report', () => {
       expect(pageErrors).toHaveLength(0);
     });
   });
-});
+
+  describe('Renders the flow report (i18n)', () => {
+    before(async () => {
+      const html = ReportGenerator.generateFlowReportHtml(swapFlowLocale(flowResult, 'es'));
+      await page.setContent(html);
+    });
+
+    it('should load with no errors', async () => {
+      expect(pageErrors).toHaveLength(0);
+      const el = await page.$('.SummarySectionHeader__content');
+      if (!el) throw new Error();
+      const text = await el.evaluate(el => el.textContent);
+      expect(text).toEqual('Todos los informes');
+    });
+  });
+}).timeout(35_000);

package/flow-report/test/header-test.d.ts

@@ -0,0 +1,7 @@
+/**
+ * @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.
+ */
+export {};
+//# sourceMappingURL=header-test.d.ts.map

package/flow-report/test/run-flow-report-tests.sh

@@ -0,0 +1,20 @@
+#!/usr/bin/env bash
+
+##
+# @license Copyright 2022 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.
+##
+
+set -eux
+
+SCRIPT_DIR="$( cd "$( dirname "${BASH_SOURCE[0]}" )" && pwd )"
+LH_ROOT="$SCRIPT_DIR/../.."
+
+ARGS=(
+  --testMatch='{flow-report/**/*-test.ts,flow-report/**/*-test.tsx}'
+  --require="$LH_ROOT/flow-report/test/setup/env-setup.ts"
+)
+
+cd "$LH_ROOT"
+node --loader=@esbuild-kit/esm-loader core/test/scripts/run-mocha-tests.js ${ARGS[*]} "$@"

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

@@ -0,0 +1,7 @@
+/**
+ * @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.
+ */
+export declare const flowResult: LH.FlowResult;
+//# sourceMappingURL=sample-flow.d.ts.map

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

@@ -11,7 +11,7 @@ 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`,
+    `${dirname(fileURLToPath(import.meta.url))}/../../core/test/fixtures/fraggle-rock/reports/sample-flow-result.json`,
     'utf-8'
   )
 );