front: add speed space chart e2e test

Signed-off-by: maymanaf <[email protected]>

front/playwright.config.ts

@@ -14,6 +14,7 @@ export default defineConfig({
   /* Maximum time one test can run for. */
   timeout: process.env.CI ? 90 * 1000 : 180 * 1000, // 90 seconds in CI, otherwise 180 seconds
   expect: {
+    toHaveScreenshot: { maxDiffPixelRatio: 0.02 },
     /**
      * Maximum time expect() should wait for the condition to be met.
      */

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

@@ -1,3 +1,5 @@
+import { expect } from '@playwright/test';
+
 import type {
   ElectricalProfileSet,
   Infra,
@@ -11,6 +13,7 @@ import HomePage from './pages/home-page-model';
 import OperationalStudiesInputTablePage from './pages/op-input-table-page-model';
 import OperationalStudiesOutputTablePage from './pages/op-output-table-page-model';
 import RoutePage from './pages/op-route-page-model';
+import OpSimulationResultPage from './pages/op-simulation-results-page-model';
 import OperationalStudiesSimulationSettingsPage from './pages/op-simulation-settings-page-model';
 import OperationalStudiesTimetablePage from './pages/op-timetable-page-model';
 import OperationalStudiesPage from './pages/operational-studies-page-model';
@@ -84,7 +87,7 @@ test.describe('Simulation Settings Tab Verification', () => {
   test.beforeEach(
     'Navigate to Times and Stops tab with rolling stock and route set',
     async ({ page, browserName }) => {
-      stabilityTimeout = browserName === 'webkit' ? 2000 : 500;
+      stabilityTimeout = browserName === 'webkit' ? 2000 : 1000;
       const [operationalStudiesPage, routePage, rollingStockPage, homePage] = [
         new OperationalStudiesPage(page),
         new RoutePage(page),
@@ -106,6 +109,7 @@ test.describe('Simulation Settings Tab Verification', () => {
       await page.goto(
         `/operational-studies/projects/${project.id}/studies/${study.id}/scenarios/${scenario.id}`
       );
+      await homePage.removeViteOverlay();
       // Wait for infra to be in 'CACHED' state before proceeding
       await waitForInfraStateToBeCached(infra.id);
       // Add a new train and set its properties
@@ -134,13 +138,16 @@ test.describe('Simulation Settings Tab Verification', () => {
       opTimetablePage,
       opOutputTablePage,
       opSimulationSettingsPage,
+      simulationResultPage,
     ] = [
       new OperationalStudiesPage(page),
       new OperationalStudiesInputTablePage(page),
       new OperationalStudiesTimetablePage(page),
       new OperationalStudiesOutputTablePage(page),
       new OperationalStudiesSimulationSettingsPage(page),
+      new OpSimulationResultPage(page),
     ];
+
     // Project selected language
     const translations = OSRDLanguage === 'English' ? enTranslations : frTranslations;
     const cell: CellData = {
@@ -167,6 +174,18 @@ test.describe('Simulation Settings Tab Verification', () => {
     await opTimetablePage.getTrainArrivalTime('11:53');
     await opTimetablePage.clickOnScenarioCollapseButton();
     await opOutputTablePage.verifyTimesStopsDataSheetVisibility();
+    await performOnSpecificOSAndBrowser(
+      async () => {
+        await simulationResultPage.selectAllSpeedSpaceChartCheckboxes();
+        await expect(simulationResultPage.speedSpaceChartTabindexElement).toHaveScreenshot(
+          'SpeedSpaceChart-ElectricalProfileActivated.png'
+        );
+      },
+      {
+        currentBrowser: browserName,
+        actionName: 'visual assertion',
+      }
+    );
     await scrollContainer(page, '.time-stop-outputs .time-stops-datasheet .dsg-container');
     await opOutputTablePage.getOutputTableData(expectedCellDataElectricalProfileON, OSRDLanguage);
     await opTimetablePage.clickOnTimetableCollapseButton();
@@ -179,6 +198,18 @@ test.describe('Simulation Settings Tab Verification', () => {
     await opTimetablePage.getTrainArrivalTime('11:52');
     await opTimetablePage.clickOnScenarioCollapseButton();
     await opOutputTablePage.verifyTimesStopsDataSheetVisibility();
+    await performOnSpecificOSAndBrowser(
+      async () => {
+        await simulationResultPage.selectAllSpeedSpaceChartCheckboxes();
+        await expect(simulationResultPage.speedSpaceChartTabindexElement).toHaveScreenshot(
+          'SpeedSpaceChart-ElectricalProfileDisabled.png'
+        );
+      },
+      {
+        currentBrowser: browserName,
+        actionName: 'visual assertion',
+      }
+    );
     await opOutputTablePage.getOutputTableData(expectedCellDataElectricalProfileOFF, OSRDLanguage);
   });
   test('Activate composition code', async ({ page }) => {
@@ -188,12 +219,14 @@ test.describe('Simulation Settings Tab Verification', () => {
       opTimetablePage,
       opOutputTablePage,
       opSimulationSettingsPage,
+      simulationResultPage,
     ] = [
       new OperationalStudiesPage(page),
       new OperationalStudiesInputTablePage(page),
       new OperationalStudiesTimetablePage(page),
       new OperationalStudiesOutputTablePage(page),
       new OperationalStudiesSimulationSettingsPage(page),
+      new OpSimulationResultPage(page),
     ];
 
     const translations = OSRDLanguage === 'English' ? enTranslations : frTranslations;
@@ -221,6 +254,18 @@ test.describe('Simulation Settings Tab Verification', () => {
     await opTimetablePage.getTrainArrivalTime('12:03');
     await opTimetablePage.clickOnScenarioCollapseButton();
     await opOutputTablePage.verifyTimesStopsDataSheetVisibility();
+    await performOnSpecificOSAndBrowser(
+      async () => {
+        await simulationResultPage.selectAllSpeedSpaceChartCheckboxes();
+        await expect(simulationResultPage.speedSpaceChartTabindexElement).toHaveScreenshot(
+          'SpeedSpaceChart-SpeedLimitTagActivated.png'
+        );
+      },
+      {
+        currentBrowser: browserName,
+        actionName: 'visual assertion',
+      }
+    );
     await scrollContainer(page, '.time-stop-outputs .time-stops-datasheet .dsg-container');
     await opOutputTablePage.getOutputTableData(expectedCellDataCodeCompoON, OSRDLanguage);
     await opTimetablePage.clickOnTimetableCollapseButton();
@@ -233,6 +278,18 @@ test.describe('Simulation Settings Tab Verification', () => {
     await opTimetablePage.getTrainArrivalTime('11:52');
     await opTimetablePage.clickOnScenarioCollapseButton();
     await opOutputTablePage.verifyTimesStopsDataSheetVisibility();
+    await performOnSpecificOSAndBrowser(
+      async () => {
+        await simulationResultPage.selectAllSpeedSpaceChartCheckboxes();
+        await expect(simulationResultPage.speedSpaceChartTabindexElement).toHaveScreenshot(
+          'SpeedSpaceChart-SpeedLimitTagDisabled.png'
+        );
+      },
+      {
+        currentBrowser: browserName,
+        actionName: 'visual assertion',
+      }
+    );
     await opOutputTablePage.getOutputTableData(expectedCellDataCodeCompoOFF, OSRDLanguage);
   });
   test('Activate linear and mareco margin', async ({ page }) => {
@@ -242,12 +299,14 @@ test.describe('Simulation Settings Tab Verification', () => {
       opTimetablePage,
       opOutputTablePage,
       opSimulationSettingsPage,
+      simulationResultPage,
     ] = [
       new OperationalStudiesPage(page),
       new OperationalStudiesInputTablePage(page),
       new OperationalStudiesTimetablePage(page),
       new OperationalStudiesOutputTablePage(page),
       new OperationalStudiesSimulationSettingsPage(page),
+      new OpSimulationResultPage(page),
     ];
 
     const translations = OSRDLanguage === 'English' ? enTranslations : frTranslations;
@@ -284,6 +343,18 @@ test.describe('Simulation Settings Tab Verification', () => {
     await opTimetablePage.getTrainArrivalTime('11:54');
     await opTimetablePage.clickOnScenarioCollapseButton();
     await opOutputTablePage.verifyTimesStopsDataSheetVisibility();
+    await performOnSpecificOSAndBrowser(
+      async () => {
+        await simulationResultPage.selectAllSpeedSpaceChartCheckboxes();
+        await expect(simulationResultPage.speedSpaceChartTabindexElement).toHaveScreenshot(
+          'SpeedSpaceChart-LinearMargin.png'
+        );
+      },
+      {
+        currentBrowser: browserName,
+        actionName: 'visual assertion',
+      }
+    );
     await scrollContainer(page, '.time-stop-outputs .time-stops-datasheet .dsg-container');
     await opOutputTablePage.getOutputTableData(expectedCellDataLinearMargin, OSRDLanguage);
     await opTimetablePage.clickOnTimetableCollapseButton();
@@ -296,6 +367,18 @@ test.describe('Simulation Settings Tab Verification', () => {
     await opTimetablePage.getTrainArrivalTime('11:54');
     await opTimetablePage.clickOnScenarioCollapseButton();
     await opOutputTablePage.verifyTimesStopsDataSheetVisibility();
+    await performOnSpecificOSAndBrowser(
+      async () => {
+        await simulationResultPage.selectAllSpeedSpaceChartCheckboxes();
+        await expect(simulationResultPage.speedSpaceChartTabindexElement).toHaveScreenshot(
+          'SpeedSpaceChart-MarecoMargin.png'
+        );
+      },
+      {
+        currentBrowser: browserName,
+        actionName: 'visual assertion',
+      }
+    );
     await opOutputTablePage.getOutputTableData(expectedCellDataMarecoMargin, OSRDLanguage);
   });
   test('Add all the simulation settings', async ({ page }) => {
@@ -305,12 +388,14 @@ test.describe('Simulation Settings Tab Verification', () => {
       opTimetablePage,
       opOutputTablePage,
       opSimulationSettingsPage,
+      simulationResultPage,
     ] = [
       new OperationalStudiesPage(page),
       new OperationalStudiesInputTablePage(page),
       new OperationalStudiesTimetablePage(page),
       new OperationalStudiesOutputTablePage(page),
       new OperationalStudiesSimulationSettingsPage(page),
+      new OpSimulationResultPage(page),
     ];
 
     const translations = OSRDLanguage === 'English' ? enTranslations : frTranslations;
@@ -348,6 +433,19 @@ test.describe('Simulation Settings Tab Verification', () => {
     await opTimetablePage.getTrainArrivalTime('12:06');
     await opTimetablePage.clickOnScenarioCollapseButton();
     await opOutputTablePage.verifyTimesStopsDataSheetVisibility();
+
+    await performOnSpecificOSAndBrowser(
+      async () => {
+        await simulationResultPage.selectAllSpeedSpaceChartCheckboxes();
+        await expect(simulationResultPage.speedSpaceChartTabindexElement).toHaveScreenshot(
+          'SpeedSpaceChart-AllSettingsEnabled.png'
+        );
+      },
+      {
+        currentBrowser: browserName,
+        actionName: 'visual assertion',
+      }
+    );
     await scrollContainer(page, '.time-stop-outputs .time-stops-datasheet .dsg-container');
     await opOutputTablePage.getOutputTableData(expectedCellDataForAllSettings, OSRDLanguage);
   });

front/tests/pages/common-page-model.ts

@@ -38,6 +38,11 @@ class CommonPage {
       await this.viteOverlay.evaluate((node) => node.setAttribute('style', 'display:none;'));
     }
   }
+
+  async closeToastNotification(): Promise<void> {
+    const closeToastElements = await this.closeToastButton.all();
+    await Promise.all(closeToastElements.map((closeToastElement) => closeToastElement.click()));
+  }
 }
 
 export default CommonPage;

front/tests/pages/op-output-table-page-model.ts

@@ -145,7 +145,7 @@ class OperationalStudiesOutputTablePage extends OperationalStudiesTimetablePage
   // Wait for the Times and Stops simulation data sheet to be fully loaded with a specified timeout (default: 60 seconds)
   async verifyTimesStopsDataSheetVisibility(timeout = 60 * 1000): Promise<void> {
     await this.timesStopsDataSheet.waitFor({ state: 'visible', timeout });
-    await this.page.waitForTimeout(100); // Short delay for stabilization
+    await this.page.waitForTimeout(1000); // Short delay for stabilization
     await this.timesStopsDataSheet.scrollIntoViewIfNeeded({ timeout });
   }
 }

front/tests/pages/op-simulation-results-page-model.ts

@@ -0,0 +1,53 @@
+import { expect, type Locator, type Page } from '@playwright/test';
+
+class OpSimulationResultPage {
+  readonly page: Page;
+
+  private readonly speedSpaceChartSettingsButton: Locator;
+
+  private readonly sscCloseEllipsis: Locator;
+
+  private readonly sscCheckmarks: Locator;
+
+  readonly speedSpaceChartCloseSettingsButton: Locator;
+
+  constructor(page: Page) {
+    this.page = page;
+    this.speedSpaceChartSettingsButton = page.locator('.interaction-button.elipsis-button');
+    this.speedSpaceChartCloseSettingsButton = page.locator('#close-settings-panel');
+    this.speedSpaceChartCheckboxItems = page.locator('#settings-panel .selection .checkmark');
+    this.speedSpaceChartTabindexElement = page.locator(
+      '#container-SpeedSpaceChart > div[tabindex="0"]'
+    );
+  }
+
+  private async openSettingsPanel(): Promise<void> {
+    await this.sscEllipsisButton.click();
+  }
+
+  private async closeSettingsPanel(): Promise<void> {
+    await this.sscCloseEllipsis.click();
+  }
+
+  // Toggles the checkbox at a specific index if it is not already checked.
+  private async toggleCheckboxIfUnchecked(index: number): Promise<void> {
+    const checkbox = this.sscCheckboxes.nth(index);
+    const isChecked = await checkbox.isChecked();
+
+    if (!isChecked) {
+      await this.sscCheckmarks.nth(index).click();
+    }
+    await expect(checkbox).toBeChecked();
+  }
+
+  // Ensures all checkboxes in the settings panel are checked.
+  async checkAllSscCheckboxes(): Promise<void> {
+    await this.openSettingsPanel();
+
+    const checkboxes = await this.speedSpaceChartCheckboxItems.all();
+    await Promise.all(checkboxes.map((checkbox) => checkbox.setChecked(true, { force: true })));
+    await this.closeSettingsPanel();
+  }
+}
+
+export default OpSimulationResultPage;

front/tests/utils/index.ts

@@ -138,3 +138,39 @@ export const waitForInfraStateToBeCached = async (infraId: number): Promise<void
 
   throw new Error("Infrastructure state did not reach 'CACHED' within the allotted 3 minutes.");
 };
+
+/**
+ * Perform an action only on a specified OS or a specific browser.
+ * @param action - The action to perform.
+ * @param options - Configuration options:
+ *                  - `currentBrowser`: The name of the current browser.
+ *                  - `os`: The target OS to run the action on (default: 'linux').
+ *                  - `browser`: The browser to use (default: 'chromium' and 'firefox').
+ *                  - `skipMessage`: Message to log if the action is skipped.
+ */
+export async function performOnSpecificOSAndBrowser(
+  action: () => Promise<void>,
+  options: {
+    currentBrowser?: string;
+    os?: NodeJS.Platform;
+    browsers?: string[];
+    actionName?: string;
+    skipMessage?: string;
+  }
+) {
+  const {
+    currentBrowser,
+    os = 'linux',
+    browsers = ['chromium', 'firefox'],
+    actionName = 'action',
+    skipMessage = `Skipping ${actionName} as the platform is not ${os} or the browser${browsers.length > 1 ? 's are not' : ' is not'} ${browsers.join(', ')}.`,
+  } = options;
+
+  const currentOS = process.platform;
+
+  if (currentOS === os && currentBrowser && browsers.includes(currentBrowser)) {
+    await action();
+  } else {
+    console.info(skipMessage);
+  }
+}