fixup! Revert "front: revert: timetable performance"

Author: Maymanaf

front/tests/011-op-times-and-stops-tab.spec.ts

@@ -13,7 +13,7 @@ import { getTranslations, readJsonFile, waitForInfraStateToBeCached } from './ut
 import { getInfra } from './utils/api-setup';
 import { cleanWhitespace, cleanWhitespaceInArray } from './utils/dataNormalizer';
 import createScenario from './utils/scenario';
-import scrollContainer from './utils/scrollHelper';
+import { scrollHorizontally } from './utils/scrollHelper';
 import { deleteScenario } from './utils/teardown-utils';
 import type { StationData } from './utils/types';
 import enTranslations from '../public/locales/en/timesStops.json';
@@ -109,7 +109,7 @@ test.describe('Times and Stops Tab Verification', () => {
 
       // Navigate to the Times and Stops tab and scroll to the data sheet
       await operationalStudiesPage.clickOnTimesAndStopsTab();
-      await scrollContainer(page, '.time-stops-datasheet .dsg-container');
+      await scrollHorizontally(page, '.time-stops-datasheet .dsg-container');
     }
   );
 
@@ -171,7 +171,7 @@ test.describe('Times and Stops Tab Verification', () => {
     await opOutputTablePage.verifyTimesStopsDataSheetVisibility();
 
     // Scroll and extract output table data for verification
-    await scrollContainer(page, '.time-stop-outputs .time-stops-datasheet .dsg-container');
+    await scrollHorizontally(page, '.time-stop-outputs .time-stops-datasheet .dsg-container');
     await opOutputTablePage.getOutputTableData(outputExpectedCellData);
   });
 

front/tests/012-op-simulation-settings-tab.spec.ts

@@ -27,7 +27,7 @@ import {
 import { deleteApiRequest, getInfra, setElectricalProfile } from './utils/api-setup';
 import { cleanWhitespace } from './utils/dataNormalizer';
 import createScenario from './utils/scenario';
-import scrollContainer from './utils/scrollHelper';
+import { scrollHorizontally } from './utils/scrollHelper';
 import { deleteScenario } from './utils/teardown-utils';
 import type { StationData } from './utils/types';
 import enTranslations from '../public/locales/en/timesStops.json';
@@ -149,7 +149,7 @@ test.describe('Simulation Settings Tab Verification', () => {
       await routePage.performPathfindingByTrigram('WS', 'SES', 'MWS');
       // Navigate to the Times and Stops tab and fill in required data
       await operationalStudiesPage.clickOnTimesAndStopsTab();
-      await scrollContainer(page, '.time-stops-datasheet .dsg-container');
+      await scrollHorizontally(page, '.time-stops-datasheet .dsg-container');
     }
   );
 
@@ -193,7 +193,7 @@ test.describe('Simulation Settings Tab Verification', () => {
         actionName: 'visual assertion',
       }
     );
-    await scrollContainer(page, '.time-stop-outputs .time-stops-datasheet .dsg-container');
+    await scrollHorizontally(page, '.time-stop-outputs .time-stops-datasheet .dsg-container');
     await opOutputTablePage.getOutputTableData(expectedCellDataElectricalProfileON);
     await opTimetablePage.clickOnTimetableCollapseButton();
     // Deactivate electrical profiles and verify output results
@@ -254,7 +254,7 @@ test.describe('Simulation Settings Tab Verification', () => {
         actionName: 'visual assertion',
       }
     );
-    await scrollContainer(page, '.time-stop-outputs .time-stops-datasheet .dsg-container');
+    await scrollHorizontally(page, '.time-stop-outputs .time-stops-datasheet .dsg-container');
     await opOutputTablePage.getOutputTableData(expectedCellDataCodeCompoON);
     await opTimetablePage.clickOnTimetableCollapseButton();
     // Remove the composition code option and verify the changes
@@ -325,7 +325,7 @@ test.describe('Simulation Settings Tab Verification', () => {
         actionName: 'visual assertion',
       }
     );
-    await scrollContainer(page, '.time-stop-outputs .time-stops-datasheet .dsg-container');
+    await scrollHorizontally(page, '.time-stop-outputs .time-stops-datasheet .dsg-container');
     await opOutputTablePage.getOutputTableData(expectedCellDataLinearMargin);
     await opTimetablePage.clickOnTimetableCollapseButton();
     // Modify the margin to 'Mareco' and verify the changes
@@ -398,7 +398,7 @@ test.describe('Simulation Settings Tab Verification', () => {
         actionName: 'visual assertion',
       }
     );
-    await scrollContainer(page, '.time-stop-outputs .time-stops-datasheet .dsg-container');
+    await scrollHorizontally(page, '.time-stop-outputs .time-stops-datasheet .dsg-container');
     await opOutputTablePage.getOutputTableData(expectedCellDataForAllSettings);
   });
 });

front/tests/pages/op-timetable-page-model.ts

@@ -5,6 +5,7 @@ import enTranslations from '../../public/locales/en/operationalStudies/scenario.
 import frTranslations from '../../public/locales/fr/operationalStudies/scenario.json';
 import { EXPLICIT_UI_STABILITY_TIMEOUT, SIMULATION_RESULT_TIMEOUT } from '../assets/timeout-const';
 import { getTranslations } from '../utils';
+import { scrollVertically } from '../utils/scrollHelper';
 
 class OperationalStudiesTimetablePage extends CommonPage {
   readonly invalidTrainsMessage: Locator;
@@ -204,11 +205,12 @@ class OperationalStudiesTimetablePage extends CommonPage {
     for (let currentTrainIndex = 0; currentTrainIndex < trainCount; currentTrainIndex += 1) {
       await this.page.waitForLoadState();
       await this.simulationResult.waitFor();
+
       const trainButton = OperationalStudiesTimetablePage.getTrainButton(
         this.timetableTrains.nth(currentTrainIndex)
       );
       await trainButton.click({ position: { x: 5, y: 5 } });
-      await this.waitForSimulationResults();
+      await scrollVertically(this.page, '.scenario-timetable-trains');
       await this.verifySimulationResultsVisibility();
     }
   }

front/tests/utils/scrollHelper.ts

@@ -14,7 +14,7 @@ interface ScrollOptions {
  * @param ScrollOptions - Optional scroll configuration including step size, timeout, and scroll offset threshold.
  * @returns {Promise<void>} - Resolves once the container has been fully scrolled.
  */
-const scrollContainer = async (
+export const scrollHorizontally = async (
   page: Page,
   containerSelector: string,
   { stepSize = 300, timeout = 20, scrollOffsetThreshold = 200 }: ScrollOptions = {}
@@ -38,7 +38,7 @@ const scrollContainer = async (
     container
   );
 
-  // Exit early if there's little or no scrollable content
+  // Exit early if there's a little or no scrollable content
   if (scrollWidth <= clientWidth + scrollOffsetThreshold) {
     await container.dispose();
     return;
@@ -64,4 +64,54 @@ const scrollContainer = async (
   await container.dispose();
 };
 
-export default scrollContainer;
+/**
+ * Scroll a specified container element vertically by a small step.
+ *
+ * @param page - The Playwright page object.
+ * @param containerSelector - The CSS selector for the scrollable container element.
+ * @param ScrollOptions - Optional scroll configuration including step size and scroll offset threshold.
+ * @returns {Promise<void>} - Resolves once a small scroll action is performed.
+ */
+export const scrollVertically = async (
+  page: Page,
+  containerSelector: string,
+  { stepSize = 30, scrollOffsetThreshold = 47 }: ScrollOptions = {}
+): Promise<void> => {
+  // Locate the scrollable container on the page
+  await page.waitForSelector(containerSelector);
+  const container = await page.evaluateHandle(
+    (selector: string) => document.querySelector(selector),
+    containerSelector
+  );
+
+  // Retrieve the scrollable height and visible height of the container
+  const { scrollHeight, clientHeight } = await page.evaluate(
+    (containerElement) =>
+      containerElement
+        ? {
+            scrollHeight: containerElement.scrollHeight,
+            clientHeight: containerElement.clientHeight,
+          }
+        : { scrollHeight: 0, clientHeight: 0 },
+    container
+  );
+
+  // Exit early if there's a little or no scrollable content
+  if (scrollHeight <= clientHeight + scrollOffsetThreshold) {
+    await container.dispose();
+    return;
+  }
+
+  // Perform a small vertical scroll
+  await page.evaluate(
+    ({ containerElement, step }) => {
+      if (containerElement) {
+        containerElement.scrollTop += step;
+      }
+    },
+    { containerElement: container, step: stepSize }
+  );
+
+  // Clean up the handle after scrolling is complete
+  await container.dispose();
+};