PRO-13138 feat: group steps in HTML report

Author: uid11

autotests/packs/allTests.ts

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

src/utils/getDurationWithUnits.ts

@@ -4,7 +4,7 @@
  * Should be a pure function without dependencies in the form of a function declaration,
  * because it is used in the JS client code of HTML report.
  */
-export function getDurationWithUnits(durationInMs: number): string {
+export const getDurationWithUnits = (durationInMs: number): string => {
   const msInSecond = 1_000;
   const timeMultiplicator = 60;
 
@@ -37,4 +37,4 @@ export function getDurationWithUnits(durationInMs: number): string {
   }
 
   return parts.slice(0, 2).join(' ') || '0ms';
-}
+};

src/utils/report/client/addOnClickOnClass.ts

@@ -7,7 +7,10 @@ declare const reportClientState: ReportClientState;
  * This base client function should not use scope variables (except other base functions).
  * @internal
  */
-export function addOnClickOnClass(className: string, onclick: (event: HTMLElement) => void): void {
+export const addOnClickOnClass = (
+  className: string,
+  onclick: (element: HTMLElement) => void,
+): void => {
   let {clickListeners} = reportClientState;
 
   if (!clickListeners) {
@@ -34,4 +37,4 @@ export function addOnClickOnClass(className: string, onclick: (event: HTMLElemen
   }
 
   clickListeners[className] = onclick;
-}
+};

src/utils/report/client/chooseTestRun.tsx

@@ -50,7 +50,7 @@ export function chooseTestRun(runHash: RunHash): void {
 
   if (
     !(previousHash in testRunDetailsElementsByHash) &&
-    !previousTestRunDetailsElement.classList.contains('test-details-empty')
+    !previousTestRunDetailsElement.classList.contains('empty-state')
   ) {
     testRunDetailsElementsByHash[previousHash] = previousTestRunDetailsElement;
   }

src/utils/report/client/clickOnRetry.ts

@@ -3,8 +3,8 @@
  * This base client function should not use scope variables (except other base functions).
  * @internal
  */
-export function clickOnRetry(element: HTMLElement): void {
-  const chosenRetryId = element.getAttribute('aria-controls');
+export const clickOnRetry = (element: HTMLElement): void => {
+  const chosenRetryId = element.dataset['retry'];
   const retry = Number(chosenRetryId?.match(/\d+/)?.[0]);
   const allRetryElements: NodeListOf<HTMLElement> = document.querySelectorAll('.retry');
 
@@ -26,4 +26,4 @@ export function clickOnRetry(element: HTMLElement): void {
   if (leftSection) {
     leftSection.ariaLabel = `Retry ${retry}`;
   }
-}
+};

src/utils/report/client/clickOnScreenshot.ts

@@ -0,0 +1,32 @@
+/**
+ * Handler for click on screenshot in step details.
+ * This base client function should not use scope variables (except other base functions).
+ * @internal
+ */
+export const clickOnScreenshot = (element: HTMLElement): void => {
+  const image = element.firstElementChild as HTMLImageElement | null;
+
+  if (image === null || image.tagName !== 'IMG') {
+    // eslint-disable-next-line no-console
+    console.error('Cannot find element <image> in clicked button', element);
+
+    return;
+  }
+
+  const screenshotDialogImage = document.getElementById(
+    'screenshotDialogImage',
+  ) as HTMLImageElement | null;
+  const screenshotDialogTitle = document.getElementById('screenshotDialogTitle');
+
+  if (screenshotDialogImage) {
+    screenshotDialogImage.alt = image.title;
+    screenshotDialogImage.src = image.src;
+    screenshotDialogImage.title = image.title;
+  }
+
+  if (screenshotDialogTitle) {
+    screenshotDialogTitle.textContent = image.title;
+  }
+
+  (document.getElementById('screenshotDialog') as HTMLDialogElement | null)?.showModal();
+};

src/utils/report/client/clickOnStep.ts

@@ -3,9 +3,9 @@
  * This base client function should not use scope variables (except other base functions).
  * @internal
  */
-export function clickOnStep(element: HTMLElement): void {
+export const clickOnStep = (element: HTMLElement): void => {
   const expanded = element.ariaExpanded === 'true';
 
   // eslint-disable-next-line no-param-reassign
   element.ariaExpanded = String(!expanded);
-}
+};

src/utils/report/client/clickOnTestRun.ts

@@ -9,7 +9,7 @@ const chooseTestRun = clientChooseTestRun;
  * This base client function should not use scope variables (except other base functions).
  * @internal
  */
-export function clickOnTestRun(element: HTMLElement): void {
+export const clickOnTestRun = (element: HTMLElement): void => {
   const runHash = (element.dataset as {runhash: RunHash}).runhash;
 
   const previousChosenTestRunButton = document.querySelector('.test-link[aria-current="true"]');
@@ -22,4 +22,4 @@ export function clickOnTestRun(element: HTMLElement): void {
   element.ariaCurrent = 'true';
 
   chooseTestRun(runHash);
-}
+};

src/utils/report/client/index.ts

@@ -9,6 +9,8 @@ export {chooseTestRun} from './chooseTestRun';
 /** @internal */
 export {clickOnRetry} from './clickOnRetry';
 /** @internal */
+export {clickOnScreenshot} from './clickOnScreenshot';
+/** @internal */
 export {clickOnStep} from './clickOnStep';
 /** @internal */
 export {clickOnTestRun} from './clickOnTestRun';

src/utils/report/client/initialScript.ts

@@ -3,6 +3,7 @@ import {createSimpleLocator as clientCreateSimpleLocator} from 'create-locator';
 import {addDomContentLoadedHandler as clientAddDomContentLoadedHandler} from './addDomContentLoadedHandler';
 import {addOnClickOnClass as clientAddOnClickOnClass} from './addOnClickOnClass';
 import {clickOnRetry as clientClickOnRetry} from './clickOnRetry';
+import {clickOnScreenshot as clientClickOnScreenshot} from './clickOnScreenshot';
 import {clickOnStep as clientClickOnStep} from './clickOnStep';
 import {clickOnTestRun as clientClickOnTestRun} from './clickOnTestRun';
 import {createJsxRuntime as clientCreateJsxRuntime} from './createJsxRuntime';
@@ -18,6 +19,7 @@ declare const reportClientState: ReportClientState;
 const addDomContentLoadedHandler = clientAddDomContentLoadedHandler;
 const addOnClickOnClass = clientAddOnClickOnClass;
 const clickOnRetry = clientClickOnRetry;
+const clickOnScreenshot = clientClickOnScreenshot;
 const clickOnStep = clientClickOnStep;
 const clickOnTestRun = clientClickOnTestRun;
 const createJsxRuntime = clientCreateJsxRuntime;
@@ -30,7 +32,7 @@ const setReadJsonReportDataObservers = clientSetReadJsonReportDataObservers;
  * This client function should not use scope variables (except global functions).
  * @internal
  */
-export function initialScript(): void {
+export const initialScript = (): void => {
   jsx = createJsxRuntime();
 
   const {locator} = createSimpleLocator(reportClientState.createLocatorOptions);
@@ -39,9 +41,10 @@ export function initialScript(): void {
 
   addOnClickOnClass('retry-link', clickOnRetry);
   addOnClickOnClass('step-expanded', clickOnStep);
+  addOnClickOnClass('step__screenshot-button', clickOnScreenshot);
   addOnClickOnClass('test-link', clickOnTestRun);
 
   setReadJsonReportDataObservers();
 
   addDomContentLoadedHandler(onDomContentLoad);
-}
+};