PRO-15806 feat: add functionality of regroupSteps in HTML reports

Author: uid11

autotests/configurator/index.ts

@@ -7,6 +7,7 @@ export {mapLogPayloadInConsole} from './mapLogPayloadInConsole';
 export {mapLogPayloadInLogFile} from './mapLogPayloadInLogFile';
 export {mapLogPayloadInReport} from './mapLogPayloadInReport';
 export {matchScreenshot} from './matchScreenshot';
+export {regroupSteps} from './regroupSteps';
 export {skipTests} from './skipTests';
 export type {
   DoAfterPack,

src/utils/report/client/groupLogEvents.ts autotests/configurator/regroupSteps.tssrc/utils/report/client/groupLogEvents.ts renamed to autotests/configurator/regroupSteps.ts

@@ -1,13 +1,13 @@
-import {LogEventStatus, LogEventType} from '../../../constants/internal';
+import {LogEventStatus, LogEventType} from 'e2ed/constants';
 
-import type {LogEvent, LogEventWithChildren} from '../../../types/internal';
+import type {LogEvent} from 'e2ed/types';
 
 /**
- * Group log events to log events with children (for groupping of `TestRun` steps).
+ * Regroup log events (for groupping of `TestRun` steps).
  * This base client function should not use scope variables (except other base functions).
  * @internal
  */
-export const groupLogEvents = (logEvents: readonly LogEvent[]): readonly LogEventWithChildren[] => {
+export const regroupSteps = (logEvents: readonly LogEvent[]): readonly LogEvent[] => {
   const topLevelTypes: readonly LogEventType[] = [
     LogEventType.Action,
     LogEventType.Assert,
@@ -20,15 +20,15 @@ export const groupLogEvents = (logEvents: readonly LogEvent[]): readonly LogEven
     topLevelTypes.includes(logEvent.type) ||
     logEvent.payload?.logEventStatus === LogEventStatus.Failed;
 
-  const result: LogEventWithChildren[] = [];
+  const result: LogEvent[] = [];
 
   for (const logEvent of logEvents) {
     const last = result.at(-1);
-    const newEvent: LogEventWithChildren = {children: [], ...logEvent};
+    const newEvent: LogEvent = {children: [], ...logEvent};
 
     if (isTopLevelEvent(logEvent)) {
       if (last && !isTopLevelEvent(last)) {
-        const firstTopLevel: LogEventWithChildren = {
+        const firstTopLevel: LogEvent = {
           children: [...result],
           message: 'Initialization',
           payload: undefined,
@@ -43,7 +43,7 @@ export const groupLogEvents = (logEvents: readonly LogEvent[]): readonly LogEven
 
       result.push(newEvent);
     } else if (last && isTopLevelEvent(last)) {
-      (last.children as LogEventWithChildren[]).push(newEvent);
+      (last.children as LogEvent[]).push(newEvent);
     } else {
       result.push(newEvent);
     }

autotests/packs/allTests.ts

@@ -18,6 +18,7 @@ import {
   mapLogPayloadInLogFile,
   mapLogPayloadInReport,
   matchScreenshot,
+  regroupSteps,
   skipTests,
 } from '../configurator';
 
@@ -74,6 +75,7 @@ export const pack: Pack = {
   pathToScreenshotsDirectoryForReport: './screenshots',
   port1: 1337,
   port2: 1338,
+  regroupSteps,
   reportFileName: 'report.html',
   resourceUsageReadingInternal: 5_000,
   selectorTimeout: 10_000,

src/step.ts

@@ -2,29 +2,52 @@ import {LogEventType} from './constants/internal';
 import {setCustomInspectOnFunction} from './utils/fn';
 import {log} from './utils/log';
 
-import type {MaybePromise} from './types/internal';
+import type {LogPayload, MaybePromise} from './types/internal';
 
 import {test as playwrightTest} from '@playwright/test';
 
-type Options = Readonly<{skipLogs?: boolean; timeout?: number}>;
-
-const noop = (): void => {};
+type Options = Readonly<{runPlaywrightStep?: boolean; skipLogs?: boolean; timeout?: number}>;
 
 /**
  * Declares a test step (calls Playwright's `test.step` function inside).
  */
-export const step = (
+export const step = async (
   name: string,
-  body: () => MaybePromise<void> = noop,
+  body?: () => MaybePromise<LogPayload | undefined>,
   options?: Options,
 ): Promise<void> => {
   if (options?.skipLogs !== true) {
-    if (body !== noop) {
+    if (body !== undefined) {
       setCustomInspectOnFunction(body);
     }
 
-    log(name, {body: body === noop ? undefined : body, options}, LogEventType.InternalCore);
+    log(name, {body, options}, LogEventType.InternalCore);
   }
 
-  return playwrightTest.step(name, body, options);
+  try {
+    let payload: LogPayload | undefined;
+
+    if (options?.runPlaywrightStep === true) {
+      await playwrightTest.step(
+        name,
+        async () => {
+          payload = await body?.();
+        },
+        options,
+      );
+    } else {
+      payload = await body?.();
+    }
+
+    // TODO: set payload to log
+    payload;
+  } catch (error) {
+    // TODO: add error to log and set logEventStatus = 'failed'
+
+    if (error !== null && typeof error === 'object') {
+      Object.assign(error, {fromStep: name});
+    }
+
+    throw error;
+  }
 };

src/types/config/ownE2edConfig.ts

@@ -2,6 +2,7 @@ import type {PlaywrightTestConfig} from '@playwright/test';
 
 import type {TestRunStatus} from '../../constants/internal';
 
+import type {LogEvent} from '../events';
 import type {FullMocksConfig} from '../fullMocks';
 import type {LogTag, MapBackendResponseToLog, MapLogPayload, MapLogPayloadInReport} from '../log';
 import type {MatchScreenshotConfig} from '../matchScreenshot';
@@ -198,6 +199,11 @@ export type OwnE2edConfig<
    */
   pathToScreenshotsDirectoryForReport: string | null;
 
+  /**
+   * Regroup tree of test steps in the HTML report.
+   */
+  regroupSteps: (this: void, steps: readonly LogEvent[]) => readonly LogEvent[];
+
   /**
    * The name of the file under which, after running the tests,
    * the HTML report will be saved in the `autotests/reports` directory, for example, `report.html`.

src/types/events.ts

@@ -13,17 +13,13 @@ import type {TestMetaPlaceholder} from './userland';
  * Log event (on log call).
  */
 export type LogEvent = Readonly<{
+  children?: readonly LogEvent[];
   message: string;
   payload: LogPayload | undefined;
   time: UtcTimeInMs;
   type: LogEventType;
 }>;
 
-/**
- * Log event with children (for groupping of `TestRun` steps).
- */
-export type LogEventWithChildren = LogEvent & Readonly<{children: readonly LogEventWithChildren[]}>;
-
 /**
  * EndTestRun event (on closing test).
  * @internal

src/types/index.ts

@@ -16,7 +16,7 @@ export type {ConsoleMessage, ConsoleMessageType} from './console';
 export type {UtcTimeInMs} from './date';
 export type {DeepMutable, DeepPartial, DeepReadonly, DeepRequired} from './deep';
 export type {E2edPrintedFields, JsError} from './errors';
-export type {LogEvent, LogEventWithChildren, Onlog, TestRunEvent} from './events';
+export type {LogEvent, Onlog, TestRunEvent} from './events';
 export type {Fn, MergeFunctions} from './fn';
 export type {
   FullMocksConfig,

src/types/internal.ts

@@ -31,7 +31,7 @@ export type {E2edEnvironment} from './environment';
 export type {E2edPrintedFields, JsError} from './errors';
 /** @internal */
 export type {GlobalErrorType, MaybeWithIsTestRunBroken} from './errors';
-export type {LogEvent, LogEventWithChildren, Onlog, TestRunEvent} from './events';
+export type {LogEvent, Onlog, TestRunEvent} from './events';
 /** @internal */
 export type {EndTestRunEvent, FullEventsData} from './events';
 export type {Fn, MergeFunctions} from './fn';

src/utils/flatLogEvents.ts

@@ -0,0 +1,19 @@
+import type {LogEvent} from '../types/internal';
+
+/**
+ * Flats array of log events with children to flat array.
+ * @internal
+ */
+export const flatLogEvents = (logEvents: readonly LogEvent[]): readonly LogEvent[] => {
+  const result: LogEvent[] = [];
+
+  for (const logEvent of logEvents) {
+    result.push(logEvent);
+
+    if (logEvent.children !== undefined && logEvent.children.length > 0) {
+      result.push(...flatLogEvents(logEvent.children));
+    }
+  }
+
+  return result;
+};

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

@@ -4,11 +4,7 @@ import {Duration as clientDuration} from './Duration';
 import {StepContent as clientStepContent} from './StepContent';
 import {Steps as clientSteps} from './Steps';
 
-import type {
-  LogEventWithChildren,
-  ReportClientState,
-  UtcTimeInMs,
-} from '../../../../types/internal';
+import type {LogEvent, ReportClientState, UtcTimeInMs} from '../../../../types/internal';
 
 const Duration = clientDuration;
 const StepContent = clientStepContent;
@@ -19,7 +15,7 @@ declare const reportClientState: ReportClientState;
 
 type Props = Readonly<{
   isEnd?: boolean;
-  logEvent: LogEventWithChildren;
+  logEvent: LogEvent;
   nextLogEventTime: UtcTimeInMs;
   open?: boolean;
 }>;
@@ -32,8 +28,9 @@ type Props = Readonly<{
 export const Step: JSX.Component<Props> = ({isEnd = false, logEvent, nextLogEventTime, open}) => {
   const {children, message, payload, time, type} = logEvent;
   const date = new Date(time).toISOString();
+  const baseRadix = 16;
   const isPayloadEmpty = !payload || Object.keys(payload).length === 0;
-  const popoverId = Math.random().toString(16).slice(2);
+  const popoverId = Math.random().toString(baseRadix).slice(2);
   const status = payload?.logEventStatus ?? LogEventStatus.Passed;
 
   let pathToScreenshotOfPage: string | undefined;
@@ -54,7 +51,7 @@ export const Step: JSX.Component<Props> = ({isEnd = false, logEvent, nextLogEven
 
   if (!isEnd) {
     content =
-      isPayloadEmpty && children.length === 0 ? (
+      isPayloadEmpty && (children === undefined || children.length === 0) ? (
         <div class="step__head">
           <span class="step__name">{message}</span>
           <span class="step__duration">