feat: render timings of retry; render logo from file; refactor some s…

…tyles

package.json

@@ -63,7 +63,7 @@
     "build:copy:bin": "cp bin/init.sh bin/runInDocker.sh build/node_modules/e2ed/bin",
     "postbuild:copy:bin": "(cd build/node_modules/e2ed/bin && chmod +x runLocal.js && chmod +x runWithRetries.js)",
     "build:copy:scripts": "cp build/scripts/*.js build",
-    "build:copy:meta": "cp -r LICENSE package.json README.md styles build/node_modules/e2ed",
+    "build:copy:meta": "cp -r LICENSE logo.svg package.json README.md styles build/node_modules/e2ed",
     "prebuild:copy:example": "rm -r ./build/e2ed",
     "build:copy:example": "cp -r e2ed build/node_modules/e2ed/",
     "postbuild:copy:example": "rm -r ./build/node_modules/e2ed/e2ed/node_modules",

src/package/bin/runWithRetries.ts

@@ -47,7 +47,7 @@ const asyncRunTests = async (): Promise<void> => {
   await registerStartE2edRunEvent(e2edRunEvent);
 
   for (; retryIndex <= retries; retryIndex += 1) {
-    runLabel = `retry ${retryIndex}/${retries}`;
+    runLabel = `r:${retryIndex}/${retries};c:${concurrency}`;
 
     const startRetryTimeInMs = Date.now() as UtcTimeInMs;
     const printedTestsString =

src/package/types/report.ts

@@ -32,7 +32,7 @@ export type RetryButtonProps = Readonly<{
  * @internal
  */
 export type TestRunButtonProps = Readonly<{
-  durationInMs: number;
+  endTimeInMs: UtcTimeInMs;
   filePath: string;
   mainParams: string;
   name: string;
@@ -43,11 +43,13 @@ export type TestRunButtonProps = Readonly<{
 }>;
 
 /**
- * TestRunsList component props.
+ * Retry component props.
  * @internal
  */
-export type TestRunsListProps = Readonly<{
+export type RetryProps = Readonly<{
+  endTimeInMs: UtcTimeInMs;
   hidden: boolean;
   retry: number;
+  startTimeInMs: UtcTimeInMs;
   testRunButtons: readonly TestRunButtonProps[];
 }>;

src/package/utils/report/client/e2edClickOnRetry.ts

@@ -5,7 +5,7 @@
 export function e2edClickOnRetry(element: HTMLElement): void {
   const chosenRetryId = element.getAttribute('aria-controls');
   const retry = Number(chosenRetryId?.match(/\d+/)?.[0]);
-  const allRetryElements: NodeListOf<HTMLElement> = document.querySelectorAll('[id$=nav-tablist]');
+  const allRetryElements: NodeListOf<HTMLElement> = document.querySelectorAll('.retry');
   const allRetryButtonElements: NodeListOf<HTMLElement> =
     document.querySelectorAll('.nav-tabs__button');
 
@@ -19,9 +19,9 @@ export function e2edClickOnRetry(element: HTMLElement): void {
     retryButtonElement.setAttribute('aria-selected', String(selected));
   }
 
-  const retryTitleElement = document.querySelector('.main__section-title');
+  const leftSection = document.querySelector('.main__section._position_left');
 
-  if (retryTitleElement) {
-    retryTitleElement.textContent = `Retry ${retry}`;
+  if (leftSection) {
+    leftSection.ariaLabel = `Retry ${retry}`;
   }
 }

src/package/utils/report/client/e2edRenderTestRunDetails.ts

@@ -1,12 +1,16 @@
-import type {TestRun} from '../../../types/internal';
+import type {SafeHtml, TestRun} from '../../../types/internal';
+
+import type {e2edSanitizeHtml as E2edSanitizeHtml} from './sanitizeHtml';
+
+declare const e2edSanitizeHtml: typeof E2edSanitizeHtml;
 
 /**
- * Render tag <article class="test-detail"> with test run details.
+ * Render tag <article class="test-details"> with test run details.
  * This global client function should not use scope variables (except other global functions).
  * @internal
  */
-export function e2edRenderTestRunDetails(testRun: TestRun): string {
+export function e2edRenderTestRunDetails(testRun: TestRun): SafeHtml {
   void testRun;
 
-  return '<article class="test-detail"></article>';
+  return e2edSanitizeHtml`<article class="test-details"></article>`;
 }

src/package/utils/report/getTestRunsLists.ts

@@ -2,17 +2,23 @@ import {TestRunStatus} from '../../constants/internal';
 
 import {getRunHashUnificator} from './getRunHashUnificator';
 
-import type {ReportData, RunId, TestRunButtonProps, TestRunsListProps} from '../../types/internal';
+import type {
+  ReportData,
+  RetryProps,
+  RunId,
+  TestRunButtonProps,
+  UtcTimeInMs,
+} from '../../types/internal';
 
 /**
- * Get array of TestRunsListProps (by retries) from report data.
+ * Get array of RetryProps from report data.
  * @internal
  */
-export const getTestRunsLists = ({testRunsWithHooks}: ReportData): TestRunsListProps[] => {
+export const getTestRunsLists = ({testRunsWithHooks}: ReportData): RetryProps[] => {
   const runHashUnificator = getRunHashUnificator();
 
   const internallyRetriedRunIds: RunId[] = [];
-  const testRunsLists: TestRunsListProps[] = [];
+  const retries: RetryProps[] = [];
   const testRunButtonsHash: Record<number, TestRunButtonProps[]> = {};
 
   for (const testRunWithHooks of testRunsWithHooks) {
@@ -29,13 +35,11 @@ export const getTestRunsLists = ({testRunsWithHooks}: ReportData): TestRunsListP
       endTimeInMs,
     } = testRunWithHooks;
 
-    const durationInMs = endTimeInMs - startTimeInMs;
-
     if (previousRunId) {
       internallyRetriedRunIds.push(previousRunId);
     }
 
-    const retry = parseInt((runLabel || 'retry 1').slice(6), 10);
+    const retry = parseInt((runLabel || 'r:1').slice(2), 10);
 
     const {duplicate, runHash} = runHashUnificator(maybeDuplicateRunHash);
 
@@ -46,7 +50,7 @@ export const getTestRunsLists = ({testRunsWithHooks}: ReportData): TestRunsListP
     }
 
     const testRunButtonProps = {
-      durationInMs,
+      endTimeInMs,
       filePath,
       mainParams,
       name,
@@ -82,18 +86,24 @@ export const getTestRunsLists = ({testRunsWithHooks}: ReportData): TestRunsListP
       return a.startTimeInMs - b.startTimeInMs;
     });
 
+    const startTimes = testRunButtons.map((testRun) => testRun.startTimeInMs);
+    const startTimeInMs = Math.min(...startTimes) as UtcTimeInMs;
+
+    const endTimes = testRunButtons.map((testRun) => testRun.endTimeInMs);
+    const endTimeInMs = Math.max(...endTimes) as UtcTimeInMs;
+
     const retry = Number(retryString);
 
-    const testRunsList = {hidden: true, retry, testRunButtons};
+    const testRunsList = {endTimeInMs, hidden: true, retry, startTimeInMs, testRunButtons};
 
-    testRunsLists.push(testRunsList);
+    retries.push(testRunsList);
   }
 
-  testRunsLists.sort((a, b) => a.retry - b.retry);
+  retries.sort((a, b) => a.retry - b.retry);
 
-  if (testRunsLists[0]) {
-    (testRunsLists[0] as {hidden: boolean}).hidden = false;
+  if (retries[0]) {
+    (retries[0] as {hidden: boolean}).hidden = false;
   }
 
-  return testRunsLists;
+  return retries;
 };