FI-1727 feat: support JSX rendering for HTML report

Author: uid11

src/types/global.d.ts

@@ -1,9 +1,78 @@
+// eslint-disable-next-line import/no-unused-modules
+import type {SafeHtml} from './html';
+
 /**
- * Extends node's require function.
+ * Extends global namespaces.
  * @internal
  */
-// eslint-disable-next-line import/no-unused-modules
 declare global {
+  /**
+   * JSX namespace for checking types of JSX elements.
+   */
+  namespace JSX {
+    /**
+     * Child element (value of `children` property).
+     */
+    type Child = Element | number | string | readonly Child[];
+
+    /**
+     * JSX functional component.
+     * @internal
+     */
+    type Component<Props extends Properties = Properties> = (
+      this: void,
+      properties?: Props,
+    ) => Element;
+
+    /**
+     * Creates JSX elements.
+     */
+    type CreateElement = (
+      this: void,
+      type: ElementType,
+      properties: object | null,
+      ...children: readonly Child[]
+    ) => Element;
+
+    type Element = SafeHtml;
+
+    type ElementChildrenAttribute = {children: {}};
+
+    type ElementType = Component | HtmlTag;
+
+    /**
+     * Creates fragment (`<>...</>`).
+     */
+    type Fragment = Component;
+
+    /**
+     * HTML tag name, e.g. `'a'`.
+     */
+    type HtmlTag = keyof HTMLElementTagNameMap;
+
+    type IntrinsicElements = {
+      [Tag in HtmlTag]: Partial<
+        Omit<HTMLElementTagNameMap[Tag], 'children' | 'className'> & {
+          children?: Child;
+          class?: string;
+        }
+      >;
+    };
+
+    /**
+     * JSX properties.
+     */
+    type Properties = Readonly<{children?: Child}>;
+
+    /**
+     * JSX runtime (functions `createElement` and `Fragment`).
+     */
+    type Runtime = Readonly<{Fragment: Fragment; createElement: CreateElement}>;
+  }
+
+  /**
+   * Extends nodejs's `require` function.
+   */
   namespace NodeJS {
     // eslint-disable-next-line @typescript-eslint/consistent-type-definitions
     interface Require {
@@ -12,5 +81,3 @@ declare global {
     }
   }
 }
-
-export type {};

src/types/report.ts

@@ -1,8 +1,11 @@
+import type {CreateLocatorOptions, LocatorFunction} from 'create-locator';
+
 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';
@@ -89,9 +92,13 @@ export type ReportClientData = Readonly<{
  */
 export type ReportClientState = {
   clickListeners?: Record<string, (event: HTMLElement) => void>;
+  readonly createLocatorOptions: CreateLocatorOptions;
+  readonly e2edRightColumnContainer: HTMLElement;
   readonly fullTestRuns: readonly FullTestRun[];
   readonly internalDirectoryName: string;
+  readonly jsxRuntime: JSX.Runtime;
   lengthOfReadedJsonReportDataParts: number;
+  readonly locator: LocatorFunction<SafeHtml>;
   readonly pathToScreenshotsDirectoryForReport: string | null;
   readonly readJsonReportDataObservers: MutationObserver[];
   reportClientData?: ReportClientData;

src/utils/apiStatistics/getUrlTemplate.ts

@@ -27,9 +27,10 @@ export const getUrlTemplate = (url: Url): Return => {
   const extension = extname(pathname).slice(1);
 
   if (
-    extension.length >= minExtensionLength &&
-    extension.length <= maxExtensionLength &&
-    /^[a-z]+$/.test(extension)
+    (extension.length >= minExtensionLength &&
+      extension.length <= maxExtensionLength &&
+      /^[a-z]+$/.test(extension)) ||
+    extension === 'woff2'
   ) {
     return {hasExtension: true, urlTemplate: `${origin}${pathname}` as Url};
   }

src/utils/report/client/assertValueIsDefined.ts

@@ -3,7 +3,7 @@
  * This base client function should not use scope variables (except other base functions).
  * @internal
  */
-export function assertValueIsDefined<T>(value: T): asserts value is Exclude<T, undefined> {
+export function assertValueIsDefined<Type>(value: Type): asserts value is Exclude<Type, undefined> {
   if (value === undefined) {
     throw new TypeError('Asserted value is not defined');
   }

src/utils/report/client/chooseTestRun.ts

@@ -15,7 +15,6 @@ const assertValueIsDefined: typeof clientAssertValueIsDefined = clientAssertValu
 const renderApiStatistics = clientRenderApiStatistics;
 const renderTestRunDetails = clientRenderTestRunDetails;
 
-declare const e2edRightColumnContainer: HTMLElement;
 declare const reportClientState: ReportClientState;
 
 /**
@@ -25,6 +24,7 @@ declare const reportClientState: ReportClientState;
  */
 // eslint-disable-next-line max-statements
 export function chooseTestRun(runHash: RunHash): void {
+  const {e2edRightColumnContainer} = reportClientState;
   const previousHash = window.location.hash as RunHash;
 
   window.location.hash = runHash;

src/utils/report/client/createJsxRuntime.ts

@@ -0,0 +1,11 @@
+/**
+ * Creates JSX runtime (functions `createElement` and `Fragment`).
+ * This client function should not use scope variables (except global functions).
+ * @internal
+ */
+export function createJsxRuntime(): JSX.Runtime {
+  const createElement: JSX.CreateElement = (type, properties, ...children) => '';
+  const Fragment: JSX.Fragment = ({children}) => '';
+
+  return {createElement, Fragment};
+}

src/utils/report/client/index.ts

@@ -13,6 +13,8 @@ export {clickOnStep} from './clickOnStep';
 /** @internal */
 export {clickOnTestRun} from './clickOnTestRun';
 /** @internal */
+export {createJsxRuntime} from './createJsxRuntime';
+/** @internal */
 export {onDomContentLoad} from './onDomContentLoad';
 /** @internal */
 export {onFirstJsonReportDataLoad} from './onFirstJsonReportDataLoad';

src/utils/report/client/initialScript.ts

@@ -1,28 +1,30 @@
 import {
-  type CreateLocatorOptions,
   createSimpleLocator as clientCreateSimpleLocator,
   type LocatorFunction,
 } from 'create-locator';
 
 import {addDomContentLoadedHandler as clientAddDomContentLoadedHandler} from './addDomContentLoadedHandler';
 import {addOnClickOnClass as clientAddOnClickOnClass} from './addOnClickOnClass';
+import {assertValueIsDefined as clientAssertValueIsDefined} from './assertValueIsDefined';
 import {clickOnRetry as clientClickOnRetry} from './clickOnRetry';
 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 {SafeHtml} from '../../../types/internal';
+import type {ReportClientState, SafeHtml} from '../../../types/internal';
 
-declare const createLocatorOptions: CreateLocatorOptions;
-declare let locator: LocatorFunction<SafeHtml>;
+declare const reportClientState: ReportClientState;
 
 const addDomContentLoadedHandler = clientAddDomContentLoadedHandler;
 const addOnClickOnClass = clientAddOnClickOnClass;
+const assertValueIsDefined: typeof clientAssertValueIsDefined = clientAssertValueIsDefined;
 const clickOnRetry = clientClickOnRetry;
 const clickOnStep = clientClickOnStep;
 const clickOnTestRun = clientClickOnTestRun;
+const createJsxRuntime = clientCreateJsxRuntime;
 const createSimpleLocator = clientCreateSimpleLocator;
 const onDomContentLoad = clientOnDomContentLoad;
 const renderAttributes = clientRenderAttributes;
@@ -34,11 +36,20 @@ const setReadJsonReportDataObservers = clientSetReadJsonReportDataObservers;
  * @internal
  */
 export function initialScript(): void {
-  const {locator: locatorAttributes} = createSimpleLocator(createLocatorOptions);
+  const jsxRuntime = createJsxRuntime();
+  const e2edRightColumnContainer = document.getElementById('e2edRightColumnContainer') ?? undefined;
 
-  locator = (...args): SafeHtml => renderAttributes(locatorAttributes(...(args as [string])));
+  assertValueIsDefined(e2edRightColumnContainer);
 
-  locator('');
+  const {locator: locatorAttributes} = createSimpleLocator(reportClientState.createLocatorOptions);
+  const locator: LocatorFunction<SafeHtml> = (...args) =>
+    renderAttributes(locatorAttributes(...(args as [string])));
+
+  Object.assign<ReportClientState, Partial<ReportClientState>>(reportClientState, {
+    e2edRightColumnContainer,
+    jsxRuntime,
+    locator,
+  });
 
   addOnClickOnClass('nav-tabs__button', clickOnRetry);
   addOnClickOnClass('step-expanded', clickOnStep);

src/utils/report/client/onFirstJsonReportDataLoad.ts

@@ -1,8 +1,10 @@
 import {clickOnTestRun as clientClickOnTestRun} from './clickOnTestRun';
 
+import type {ReportClientState} from '../../../types/internal';
+
 const clickOnTestRun = clientClickOnTestRun;
 
-declare const e2edRightColumnContainer: HTMLElement;
+declare const reportClientState: ReportClientState;
 
 /**
  * Handler of loading first part of JSON report data for report page.
@@ -25,6 +27,7 @@ export function onFirstJsonReportDataLoad(): void {
   clickOnTestRun(buttonForFailedTestRun as HTMLElement);
 
   const buttonOfOpenStep = document.querySelector('.step-expanded[aria-expanded="true"]');
+  const {e2edRightColumnContainer} = reportClientState;
   const scrollDelayInMs = 8;
 
   if (buttonOfOpenStep) {

src/utils/report/client/render/renderApiStatistics.ts

@@ -64,7 +64,15 @@ export function renderApiStatistics({apiStatistics, hash}: Options): SafeHtml {
 
     for (const [url, byStatusCode] of Object.entries(apiStatistics.resources)) {
       for (const [statusCode, {count, duration, size}] of Object.entries(byStatusCode)) {
-        items.push(renderApiStatisticsItem({count, duration, name: `${url} ${statusCode}`, size}));
+        items.push(
+          renderApiStatisticsItem({
+            count,
+            duration,
+            isUrl: true,
+            name: `${url} ${statusCode}`,
+            size,
+          }),
+        );
       }
     }
   }