PRO-12619 feat: switch to new layout

Author: uid11

autotests/pageObjects/pages/E2edReportExample/E2edReportExample.ts

@@ -65,7 +65,7 @@ export class E2edReportExample extends Page<CustomPageParams> {
    * List of test runs of retry.
    */
   get testRunsList(): Selector {
-    return locator('column1');
+    return locator('column-2');
   }
 
   /**

src/types/global.d.ts

@@ -58,6 +58,10 @@ declare global {
           class?: string;
         }
       >;
+    } & {
+      button: {popovertarget?: string};
+      input: {popovertarget?: string};
+      meta: {charset?: string};
     };
 
     /**

src/utils/getDurationWithUnits.ts

@@ -2,7 +2,7 @@
  * Get the duration of time interval in hours, minutes, seconds and milliseconds.
  * `getDurationWithUnits(1213)` = `'1s 213ms'`.
  * Should be a pure function without dependencies in the form of a function declaration,
- * because it is used in the JS code of HTML report.
+ * because it is used in the JS client code of HTML report.
  */
 export function getDurationWithUnits(durationInMs: number): string {
   const msInSecond = 1_000;

src/utils/report/client/clickOnRetry.ts

@@ -12,18 +12,16 @@ export function clickOnRetry(element: HTMLElement): void {
     retryElement.hidden = retryElement.id !== chosenRetryId;
   }
 
-  const previousChosenRetryButton = document.querySelector(
-    '.nav-tabs__button[aria-selected="true"]',
-  );
+  const previousChosenRetryButton = document.querySelector('.retry-link[aria-current="true"]');
 
   if (previousChosenRetryButton) {
-    previousChosenRetryButton.ariaSelected = 'false';
+    previousChosenRetryButton.ariaCurrent = null;
   }
 
   // eslint-disable-next-line no-param-reassign
-  element.ariaSelected = 'true';
+  element.ariaCurrent = 'true';
 
-  const leftSection = document.querySelector('.main__section._position_left');
+  const leftSection = document.querySelector('.column-2');
 
   if (leftSection) {
     leftSection.ariaLabel = `Retry ${retry}`;

src/utils/report/client/clickOnTestRun.ts

@@ -12,14 +12,14 @@ const chooseTestRun = clientChooseTestRun;
 export function clickOnTestRun(element: HTMLElement): void {
   const runHash = (element.dataset as {runhash: RunHash}).runhash;
 
-  const previousChosenTestRunButton = document.querySelector('.test-button[aria-selected="true"]');
+  const previousChosenTestRunButton = document.querySelector('.test-link[aria-current="true"]');
 
   if (previousChosenTestRunButton) {
-    previousChosenTestRunButton.ariaSelected = 'false';
+    previousChosenTestRunButton.ariaCurrent = null;
   }
 
   // eslint-disable-next-line no-param-reassign
-  element.ariaSelected = 'true';
+  element.ariaCurrent = 'true';
 
   chooseTestRun(runHash);
 }

src/utils/report/client/createJsxRuntime.ts

@@ -33,16 +33,57 @@ export function createJsxRuntime(): JSX.Runtime {
     );
     const childrenHtml = createSafeHtmlWithoutSanitize`${childrenParts.join('')}`;
 
+    const isVoidElement = [
+      'area',
+      'base',
+      'br',
+      'col',
+      'embed',
+      'hr',
+      'img',
+      'input',
+      'link',
+      'meta',
+      'source',
+      'track',
+      'wbr',
+    ].includes(type);
+
+    let closePart = createSafeHtmlWithoutSanitize``;
+
+    if (isVoidElement) {
+      if (childrenHtml.length > 0) {
+        // eslint-disable-next-line no-console
+        console.error(`Element <${type}> is void element, but has children`, childrenHtml);
+
+        closePart = childrenHtml;
+      }
+    } else {
+      closePart = sanitizeHtml`${childrenHtml}</${type}>`;
+    }
+
     if (properties == null) {
-      return sanitizeHtml`<${type}>${childrenHtml}</${type}>`;
+      return sanitizeHtml`<${type}>${closePart}`;
     }
 
-    const attributesParts: readonly SafeHtml[] = Object.entries(properties).map(
-      ([key, value]) => sanitizeHtml`${key.toLowerCase()}="${value}"`,
-    );
-    const attributesHtml = createSafeHtmlWithoutSanitize`${attributesParts.join('')}`;
+    const attributesParts: readonly SafeHtml[] = Object.entries(properties)
+      .filter(([key, value]) => {
+        if (value == null) {
+          return false;
+        }
+
+        if (value !== false) {
+          return true;
+        }
+
+        const lowerCaseKey = key.toLocaleLowerCase();
+
+        return lowerCaseKey.startsWith('aria-') || lowerCaseKey.startsWith('data-');
+      })
+      .map(([key, value]) => sanitizeHtml`${key.toLowerCase()}="${value}"`);
+    const attributesHtml = createSafeHtmlWithoutSanitize`${attributesParts.join(' ')}`;
 
-    return sanitizeHtml`<${type} ${attributesHtml}>${childrenHtml}</${type}>`;
+    return sanitizeHtml`<${type} ${attributesHtml}>${closePart}`;
   };
 
   const Fragment: JSX.Fragment = (properties) => {

src/utils/report/client/index.ts

@@ -32,7 +32,10 @@ export {
   ApiStatisticsItem,
   DatesInterval,
   Duration,
+  List,
   MaybeApiStatistics,
+  SafeHtml,
+  Screenshot,
   Step,
   StepContent,
   Steps,

src/utils/report/client/initialScript.ts

@@ -37,9 +37,9 @@ export function initialScript(): void {
 
   Object.assign<ReportClientState, Partial<ReportClientState>>(reportClientState, {locator});
 
-  addOnClickOnClass('nav-tabs__button', clickOnRetry);
+  addOnClickOnClass('retry-link', clickOnRetry);
   addOnClickOnClass('step-expanded', clickOnStep);
-  addOnClickOnClass('test-button', clickOnTestRun);
+  addOnClickOnClass('test-link', clickOnTestRun);
 
   setReadJsonReportDataObservers();
 

src/utils/report/client/onFirstJsonReportDataLoad.ts

@@ -17,7 +17,7 @@ export function onFirstJsonReportDataLoad(): void {
   }
 
   const buttonForFailedTestRun = document.querySelector(
-    '.retry:not([hidden]) .test-button_status_failed',
+    '.retry:not([hidden]) .test-link[data-status="failed"]',
   );
 
   if (!buttonForFailedTestRun) {

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

@@ -1,6 +1,5 @@
-import {createSafeHtmlWithoutSanitize as clientCreateSafeHtmlWithoutSanitize} from '../sanitizeHtml';
-
 import {ApiStatisticsItem as clientApiStatisticsItem} from './ApiStatisticsItem';
+import {List as clientList} from './List';
 
 import type {
   ApiStatistics as ApiStatisticsType,
@@ -9,8 +8,8 @@ import type {
   SafeHtml,
 } from '../../../../types/internal';
 
-const createSafeHtmlWithoutSanitize = clientCreateSafeHtmlWithoutSanitize;
 const ApiStatisticsItem = clientApiStatisticsItem;
+const List = clientList;
 
 declare const jsx: JSX.Runtime;
 
@@ -92,9 +91,7 @@ export const ApiStatistics: JSX.Component<Props> = ({apiStatistics, hash}) => {
     <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>
+      <List elements={items} />
     </article>
   );
 };