PRO-12619 feat: full update of HTML report layout

Author: uid11

autotests/packs/allTests.ts

@@ -80,7 +80,7 @@ export const pack: Pack = {
   skipTests,
   takeFullPageScreenshotOnError: false,
   takeViewportScreenshotOnError: true,
-  testFileGlobs: ['**/autotests/tests/**/*.ts'],
+  testFileGlobs: ['**/autotests/tests/**/exists.ts'],
   testIdleTimeout: 8_000,
   testTimeout: 15_000,
   userAgent,

src/actions/asserts/assertUrlMatchRoute.ts

@@ -4,15 +4,15 @@ import {assertValueIsDefined, assertValueIsNotNull} from '../../utils/asserts';
 import {log} from '../../utils/log';
 
 import type {Route} from '../../Route';
-import type {Url} from '../../types/internal';
+import type {MaybePromise, Url} from '../../types/internal';
 
 type MaybeUrlOrPath = Url | string | null | undefined;
 
 /**
  * Asserts that url or url path (which can be wrapped in a promise) match route.
  */
 export const assertUrlMatchRoute = async (
-  maybeUrlOrPath: MaybeUrlOrPath | Promise<MaybeUrlOrPath>,
+  maybeUrlOrPath: MaybePromise<MaybeUrlOrPath>,
   route: Route<unknown>,
 ): Promise<void> => {
   const {routeParams} = route;

src/types/report.ts

@@ -5,7 +5,6 @@ import type {EndE2edReason, ExitCode, TestRunStatus} from '../constants/internal
 import type {ApiStatistics} from './apiStatistics';
 import type {FullPackConfig} from './config';
 import type {UtcTimeInMs} from './date';
-import type {SafeHtml} from './html';
 import type {TestFilePath} from './paths';
 import type {StartInfo} from './startInfo';
 import type {FullTestRun, LiteTestRun, RunHash, RunId} from './testRun';
@@ -99,7 +98,7 @@ export type ReportClientState = {
   readonly fullTestRuns: readonly FullTestRun[];
   readonly internalDirectoryName: string;
   lengthOfReadedJsonReportDataParts: number;
-  readonly locator: LocatorFunction<SafeHtml>;
+  readonly locator: LocatorFunction;
   readonly pathToScreenshotsDirectoryForReport: string | null;
   readonly readJsonReportDataObservers: MutationObserver[];
   reportClientData?: ReportClientData;

src/utils/parse/parseValueAsJsonIfNeeded.ts

@@ -4,24 +4,24 @@ type Return = Readonly<{hasParseError: boolean; value: unknown}>;
 
 /**
  * Parses `unknown` value as JSON, if needed.
- * If `isoValueInJsonFormat` is `true`, then parses value as JSON and saves parse error.
- * If `isoValueInJsonFormat` is `false`, then returns value as is.
- * If `isoValueInJsonFormat` is `undefined`, then safely tries to parse value as JSON.
+ * If `isValueInJsonFormat` is `true`, then parses value as JSON and saves parse error.
+ * If `isValueInJsonFormat` is `false`, then returns value as is.
+ * If `isValueInJsonFormat` is `undefined`, then safely tries to parse value as JSON.
  */
 export const parseValueAsJsonIfNeeded = (
   originalValue: unknown,
-  isoValueInJsonFormat?: boolean,
+  isValueInJsonFormat?: boolean,
 ): Return => {
   let hasParseError = false;
   let value = originalValue;
 
-  if (isoValueInJsonFormat === true) {
+  if (isValueInJsonFormat === true) {
     try {
       value = parseMaybeEmptyValueAsJson(originalValue);
     } catch {
       hasParseError = true;
     }
-  } else if (isoValueInJsonFormat !== false) {
+  } else if (isValueInJsonFormat !== false) {
     try {
       value = parseMaybeEmptyValueAsJson(originalValue);
     } catch {}

src/utils/report/client/chooseTestRun.ts src/utils/report/client/chooseTestRun.tsxsrc/utils/report/client/chooseTestRun.ts renamed to src/utils/report/client/chooseTestRun.tsx

@@ -1,13 +1,16 @@
 import {assertValueIsDefined as clientAssertValueIsDefined} from './assertValueIsDefined';
-import {maybeRenderApiStatistics as clientMaybeRenderApiStatistics} from './maybeRenderApiStatistics';
-import {renderTestRunDetails as clientRenderTestRunDetails} from './render';
+import {
+  MaybeApiStatistics as clientMaybeApiStatistics,
+  TestRunDetails as clientTestRunDetails,
+} from './render';
 
-import type {ReportClientState, RunHash, SafeHtml} from '../../../types/internal';
+import type {ReportClientState, RunHash} from '../../../types/internal';
 
 const assertValueIsDefined: typeof clientAssertValueIsDefined = clientAssertValueIsDefined;
-const maybeRenderApiStatistics = clientMaybeRenderApiStatistics;
-const renderTestRunDetails = clientRenderTestRunDetails;
+const MaybeApiStatistics = clientMaybeApiStatistics;
+const TestRunDetails = clientTestRunDetails;
 
+declare const jsx: JSX.Runtime;
 declare const reportClientState: ReportClientState;
 
 /**
@@ -62,9 +65,9 @@ export function chooseTestRun(runHash: RunHash): void {
     return;
   }
 
-  let rightColumnHtml: SafeHtml | undefined = maybeRenderApiStatistics(runHash);
+  let rightColumnHtml = <MaybeApiStatistics runHash={runHash} />;
 
-  if (rightColumnHtml === undefined) {
+  if (rightColumnHtml.length === 0) {
     const {fullTestRuns} = reportClientState;
     const fullTestRun = fullTestRuns.find((testRun) => testRun.runHash === runHash);
 
@@ -77,7 +80,7 @@ export function chooseTestRun(runHash: RunHash): void {
       return;
     }
 
-    rightColumnHtml = renderTestRunDetails(fullTestRun);
+    rightColumnHtml = <TestRunDetails fullTestRun={fullTestRun} />;
   }
 
   e2edRightColumnContainer.innerHTML = String(rightColumnHtml);

src/utils/report/client/createJsxRuntime.ts

@@ -38,7 +38,7 @@ export function createJsxRuntime(): JSX.Runtime {
     }
 
     const attributesParts: readonly SafeHtml[] = Object.entries(properties).map(
-      ([key, value]) => sanitizeHtml`${key}="${value}"`,
+      ([key, value]) => sanitizeHtml`${key.toLowerCase()}="${value}"`,
     );
     const attributesHtml = createSafeHtmlWithoutSanitize`${attributesParts.join('')}`;
 

src/utils/report/client/index.ts

@@ -17,8 +17,6 @@ export {createJsxRuntime} from './createJsxRuntime';
 /** @internal */
 export {initialScript} from './initialScript';
 /** @internal */
-export {maybeRenderApiStatistics} from './maybeRenderApiStatistics';
-/** @internal */
 export {onDomContentLoad} from './onDomContentLoad';
 /** @internal */
 export {onFirstJsonReportDataLoad} from './onFirstJsonReportDataLoad';
@@ -30,17 +28,17 @@ export {readJsonReportData} from './readJsonReportData';
 export {readPartOfJsonReportData} from './readPartOfJsonReportData';
 /** @internal */
 export {
+  ApiStatistics,
   ApiStatisticsItem,
-  renderApiStatistics,
-  renderAttributes,
-  renderDatesInterval,
-  renderDuration,
-  renderStep,
-  renderStepContent,
-  renderSteps,
-  renderTestRunDescription,
-  renderTestRunDetails,
-  renderTestRunError,
+  DatesInterval,
+  Duration,
+  MaybeApiStatistics,
+  Step,
+  StepContent,
+  Steps,
+  TestRunDescription,
+  TestRunDetails,
+  TestRunError,
 } from './render';
 /** @internal */
 export {

src/utils/report/client/initialScript.ts

@@ -1,7 +1,4 @@
-import {
-  createSimpleLocator as clientCreateSimpleLocator,
-  type LocatorFunction,
-} from 'create-locator';
+import {createSimpleLocator as clientCreateSimpleLocator} from 'create-locator';
 
 import {addDomContentLoadedHandler as clientAddDomContentLoadedHandler} from './addDomContentLoadedHandler';
 import {addOnClickOnClass as clientAddOnClickOnClass} from './addOnClickOnClass';
@@ -10,10 +7,9 @@ import {clickOnStep as clientClickOnStep} from './clickOnStep';
 import {clickOnTestRun as clientClickOnTestRun} from './clickOnTestRun';
 import {createJsxRuntime as clientCreateJsxRuntime} from './createJsxRuntime';
 import {onDomContentLoad as clientOnDomContentLoad} from './onDomContentLoad';
-import {renderAttributes as clientRenderAttributes} from './render';
 import {setReadJsonReportDataObservers as clientSetReadJsonReportDataObservers} from './setReadJsonReportDataObservers';
 
-import type {ReportClientState, SafeHtml} from '../../../types/internal';
+import type {ReportClientState} from '../../../types/internal';
 
 // eslint-disable-next-line @typescript-eslint/no-unused-vars
 declare let jsx: JSX.Runtime;
@@ -27,7 +23,6 @@ const clickOnTestRun = clientClickOnTestRun;
 const createJsxRuntime = clientCreateJsxRuntime;
 const createSimpleLocator = clientCreateSimpleLocator;
 const onDomContentLoad = clientOnDomContentLoad;
-const renderAttributes = clientRenderAttributes;
 const setReadJsonReportDataObservers = clientSetReadJsonReportDataObservers;
 
 /**
@@ -38,9 +33,7 @@ const setReadJsonReportDataObservers = clientSetReadJsonReportDataObservers;
 export function initialScript(): void {
   jsx = createJsxRuntime();
 
-  const {locator: locatorAttributes} = createSimpleLocator(reportClientState.createLocatorOptions);
-  const locator: LocatorFunction<SafeHtml> = (...args) =>
-    renderAttributes(locatorAttributes(...(args as [string])));
+  const {locator} = createSimpleLocator(reportClientState.createLocatorOptions);
 
   Object.assign<ReportClientState, Partial<ReportClientState>>(reportClientState, {locator});
 

…ort/client/render/renderApiStatistics.ts …s/report/client/render/ApiStatistics.tsxsrc/utils/report/client/render/renderApiStatistics.ts renamed to src/utils/report/client/render/ApiStatistics.tsx src/utils/report/client/render/renderApiStatistics.ts renamed to src/utils/report/client/render/ApiStatistics.tsx

@@ -3,7 +3,7 @@ import {createSafeHtmlWithoutSanitize as clientCreateSafeHtmlWithoutSanitize} fr
 import {ApiStatisticsItem as clientApiStatisticsItem} from './ApiStatisticsItem';
 
 import type {
-  ApiStatistics,
+  ApiStatistics as ApiStatisticsType,
   ApiStatisticsReportHash,
   ObjectEntries,
   SafeHtml,
@@ -12,8 +12,10 @@ import type {
 const createSafeHtmlWithoutSanitize = clientCreateSafeHtmlWithoutSanitize;
 const ApiStatisticsItem = clientApiStatisticsItem;
 
-type Options = Readonly<{
-  apiStatistics: ApiStatistics;
+declare const jsx: JSX.Runtime;
+
+type Props = Readonly<{
+  apiStatistics: ApiStatisticsType;
   hash: ApiStatisticsReportHash;
 }>;
 
@@ -22,7 +24,7 @@ type Options = Readonly<{
  * This base client function should not use scope variables (except other base functions).
  * @internal
  */
-export function renderApiStatistics({apiStatistics, hash}: Options): SafeHtml {
+export const ApiStatistics: JSX.Component<Props> = ({apiStatistics, hash}) => {
   let header: string | undefined;
   const items: SafeHtml[] = [];
 
@@ -38,11 +40,13 @@ export function renderApiStatistics({apiStatistics, hash}: Options): SafeHtml {
         pageCount += count;
         pageDuration += duration;
 
-        pageItems.push(ApiStatisticsItem({count, duration, name: url, url}));
+        pageItems.push(
+          <ApiStatisticsItem count={count} duration={duration} name={url} url={url} />,
+        );
       }
 
       items.push(
-        ApiStatisticsItem({count: pageCount, duration: pageDuration, isHeader: true, name}),
+        <ApiStatisticsItem count={pageCount} duration={pageDuration} isHeader={true} name={name} />,
       );
       items.push(...pageItems);
     }
@@ -54,12 +58,12 @@ export function renderApiStatistics({apiStatistics, hash}: Options): SafeHtml {
         // eslint-disable-next-line max-depth
         for (const [statusCode, {count, duration, size}] of Object.entries(byStatusCode)) {
           items.push(
-            ApiStatisticsItem({
-              count,
-              duration,
-              name: `${method} ${url} ${statusCode}`,
-              size,
-            }),
+            <ApiStatisticsItem
+              count={count}
+              duration={duration}
+              name={`${method} ${url} ${statusCode}`}
+              size={size}
+            />,
           );
         }
       }
@@ -72,23 +76,25 @@ export function renderApiStatistics({apiStatistics, hash}: Options): SafeHtml {
     >) {
       for (const [statusCode, {count, duration, size}] of Object.entries(byStatusCode)) {
         items.push(
-          ApiStatisticsItem({
-            count,
-            duration,
-            name: `${url} ${statusCode}`,
-            size,
-            url,
-          }),
+          <ApiStatisticsItem
+            count={count}
+            duration={duration}
+            name={`${url} ${statusCode}`}
+            size={size}
+            url={url}
+          />,
         );
       }
     }
   }
 
-  return createSafeHtmlWithoutSanitize`<article class="test-details">
-  <p class="test-details__path"></p>
-  <h2 class="test-details__title">${header}</h2>
-  <div role="tabpanel">
-    <article class="overview">${items.join('')}</article>
-  </div>
-</article>`;
-}
+  return (
+    <article class="test-details">
+      <p class="test-details__path"></p>
+      <h2 class="test-details__title">{header}</h2>
+      <div role="tabpanel">
+        <article class="overview">{createSafeHtmlWithoutSanitize`${items.join('')}`}</article>
+      </div>
+    </article>
+  );
+};

src/utils/report/client/render/ApiStatisticsItem.tsx

@@ -1,8 +1,8 @@
-import {renderDuration as clientRenderDuration} from './renderDuration';
+import {Duration as clientDuration} from './Duration';
 
 import type {SafeHtml, Url} from '../../../../types/internal';
 
-const renderDuration = clientRenderDuration;
+const Duration = clientDuration;
 
 declare const jsx: JSX.Runtime;
 
@@ -29,7 +29,6 @@ export const ApiStatisticsItem: JSX.Component<Props> = ({
   url,
 }) => {
   const bytesInKiB = 1_024;
-  const durationHtml = renderDuration(duration / count);
   const countHtml = `${count}x`;
   const sizeHtml = size === undefined ? '' : `${(size / count / bytesInKiB).toFixed(2)} KiB / `;
 
@@ -52,7 +51,7 @@ export const ApiStatisticsItem: JSX.Component<Props> = ({
       <span class="step-expanded__name">{nameHtml}</span>
       <span class="step-expanded__time">
         {countHtml} / {sizeHtml}
-        {durationHtml}
+        <Duration durationInMs={duration / count} />
       </span>
     </span>
   );