front: tests: refacto operationnal studies e2e-tests

- add global-setup and global-teardown for generating new small-infra for tests then remove it - add api calls in beforeEach and afterEach to fill database for each test - add data-testid for html elements that was triggered with french location, adapt related functions - add id for tabs typed with TabProps (related to data-testid) - update shared variables files - comment test 007 and 009 as they need refacto - move every api calls in global-setup and global-teardown - add env variables to share data between tests - edit every beforeEach and afterEach to fit with the global setup - disable map layers for tests - rename ids and classNames - set test variables in beforeAll - remove poetry commands from global-setup and global-teardown - remove testVariables.ts - change RollingStockUpsertPayload to RollingStockForm - add comment for clickOnMap - enable firefox browser since the smoothtravel is disabled - update small_infra railjson - remove env generated in global setup, replace them by api calls in beforeEach - disable firefox for tests that include map interaction
OpenRailAssociation · Feb 9, 2024 · 56e19c8 · 56e19c8
1 parent dae6528
commit 56e19c8
Show file tree

Hide file tree

Showing 44 changed files with 991 additions and 2,884 deletions.
diff --git a/.github/scripts/bake-metadata.py b/.github/scripts/bake-metadata.py
@@ -42,6 +42,7 @@ def suffix(self):
     Target(name="front-devel", image="front", variant="devel"),
     Target(name="front-nginx", image="front", variant="nginx"),
     Target(name="front-build", image="front", variant="build"),
+    Target(name="front-tests", image="front", variant="tests"),
     Target(name="gateway-standalone", image="gateway", variant="standalone"),
     Target(name="gateway-test", image="gateway", variant="test"),
     Target(name="gateway-front", image="gateway", variant="front", release=True),

diff --git a/.github/workflows/build.yml b/.github/workflows/build.yml
@@ -609,7 +609,7 @@ jobs:
             docker run --init --name=playwright-test --net=host \
               -e CI=true \
               -v $PWD/front/test-results:/app/test-results \
-              ${{ fromJSON(needs.build.outputs.stable_tags).front-build }} \
+              ${{ fromJSON(needs.build.outputs.stable_tags).front-tests }} \
               /bin/sh -c "npx playwright install --with-deps && yarn e2e-tests"
 
             exit $(docker wait playwright-test)

diff --git a/docker-compose.yml b/docker-compose.yml
@@ -57,6 +57,8 @@ services:
     container_name: osrd-front
     build:
       context: front
+      additional_contexts:
+        test_data: tests/data
       dockerfile: docker/Dockerfile.${OSRD_FRONT_MODE-devel}
       args:
         OSRD_GIT_DESCRIBE: ${OSRD_GIT_DESCRIBE}
@@ -65,6 +67,7 @@ services:
       OSRD_EDITOAST_URL: /api
     volumes:
       - "./front:/app"
+      - "./tests/data:/tests/data"
     restart: unless-stopped
     ports: ["3000:3000"]
     healthcheck:

diff --git a/docker/docker-bake-simple.hcl b/docker/docker-bake-simple.hcl
@@ -32,6 +32,10 @@ target "base-front-build" {
   tags = tags("front-build")
 }
 
+target "base-front-tests" {
+  tags = tags("front-tests")
+}
+
 target "base-gateway-standalone" {
   tags = tags("gateway-standalone")
 }

diff --git a/docker/docker-bake.hcl b/docker/docker-bake.hcl
@@ -9,6 +9,7 @@ group "default" {
     "front-devel",
     "front-nginx",
     "front-build",
+    "front-tests",
     "gateway-standalone",
     "gateway-test",
     "gateway-front",
@@ -109,6 +110,17 @@ target "front-build" {
   target = "build"
 }
 
+target "base-front-tests" {}
+target "front-tests" {
+  inherits = ["base", "base-front-tests"]
+  context = "front"
+  dockerfile = "docker/Dockerfile.nginx"
+  target = "tests"
+  contexts = {
+    test_data = "./tests/data"
+  } 
+}
+
 ###########
 # Gateway #
 ###########

diff --git a/editoast/openapi.yaml b/editoast/openapi.yaml
@@ -4160,8 +4160,8 @@ paths:
             application/json:
               schema:
                 properties:
-                  id:
-                    type: string
+                  infra:
+                    type: integer
                 type: object
           description: The imported infra id
       summary: Import an infra from railjson

diff --git a/editoast/openapi_legacy.yaml b/editoast/openapi_legacy.yaml
@@ -240,8 +240,8 @@ paths:
               schema:
                 type: object
                 properties:
-                  id:
-                    type: string
+                  infra:
+                    type: integer
 
   /infra/{id}/errors/:
     get:

diff --git a/front/docker/Dockerfile.nginx b/front/docker/Dockerfile.nginx
@@ -12,6 +12,12 @@ RUN yarn install --frozen-lockfile
 COPY . /app
 RUN yarn generate-licenses && yarn build
 
+### TESTS STAGE
+
+FROM build as tests
+
+# Allow to import tests data files
+COPY --from=test_data . /tests/data
 
 ### SERVE STAGE
 

diff --git a/front/package.json b/front/package.json
@@ -192,7 +192,7 @@
     "storybook": "storybook dev -p 6006",
     "build-storybook": "storybook build",
     "generate-licenses": "license-checker-rseidelsohn --json --production --direct --excludePackagesStartingWith '@types' --excludePrivatePackages --customPath src/common/ReleaseInformations/json/licenseCustomFormat.json > src/common/ReleaseInformations/json/licenses.json",
-    "e2e-tests": "yarn playwright test --reporter=line"
+    "e2e-tests": "yarn playwright test"
   },
   "browserslist": {
     "production": [

diff --git a/front/playwright.config.ts b/front/playwright.config.ts
@@ -1,6 +1,4 @@
-import type { PlaywrightTestConfig } from '@playwright/test';
-import { devices } from '@playwright/test';
-
+import { defineConfig, devices } from '@playwright/test';
 /**
  * Read environment variables from file.
  * /~https://github.com/motdotla/dotenv
@@ -10,7 +8,7 @@ import { devices } from '@playwright/test';
 /**
  * See https://playwright.dev/docs/test-configuration.
  */
-const config: PlaywrightTestConfig = {
+export default defineConfig({
   testDir: './tests',
 
   /* Maximum time one test can run for. */
@@ -25,7 +23,7 @@ const config: PlaywrightTestConfig = {
   /* Run tests in files in parallel */
   fullyParallel: true,
   /* Opt out of parallel tests on CI based on cpu capacity */
-  workers: process.env.CI ? '100%' : '50%',
+  workers: '50%',
   /* Fail the build on CI if you accidentally left test.only in the source code. */
   forbidOnly: !!process.env.CI,
   /* Retry on CI only */
@@ -42,27 +40,34 @@ const config: PlaywrightTestConfig = {
     locale: 'fr',
     video: 'retain-on-failure',
   },
+  reporter: process.env.CI ? 'github' : 'line',
 
   /* Configure projects for major browsers */
   projects: [
+    { name: 'setup', testMatch: 'global-setup.ts', teardown: 'teardown' },
+    {
+      name: 'teardown',
+      testMatch: 'global-teardown.ts',
+    },
     {
       name: 'chromium',
       use: {
         ...devices['Desktop Chrome'],
       },
+      dependencies: ['setup'],
     },
-
     {
       name: 'firefox',
       use: {
         ...devices['Desktop Firefox'],
       },
+      dependencies: ['setup'],
+      // ! we ignore tests that use canvas because it's not well supported in firefox with playwright
+      testIgnore: /.005-operational-studies.spec.ts/,
     },
   ],
 
   /* select tags to run specific tests */
   // TODO: remove grep when every tests are refactored
-  grep: [/home/, /project/, /study/, /scenario/],
-};
-
-export default config;
+  grep: [/(enabled)/],
+});
diff --git a/front/src/applications/operationalStudies/views/ManageTrainSchedule.tsx b/front/src/applications/operationalStudies/views/ManageTrainSchedule.tsx
@@ -62,6 +62,7 @@ export default function ManageTrainSchedule() {
     );
 
   const tabRollingStock = {
+    id: 'rollingstock',
     title: rollingStock ? (
       <div className="managetrainschedule-tab">
         <span className="rolling-stock">
@@ -86,6 +87,7 @@ export default function ManageTrainSchedule() {
   };
 
   const tabPathFinding = {
+    id: 'pathfinding',
     title: (
       <div className="managetrainschedule-tab">
         <img src={pahtFindingPic} alt="path finding" />
@@ -112,6 +114,7 @@ export default function ManageTrainSchedule() {
   };
 
   const tabAllowances = {
+    id: 'allowances',
     title: (
       <div className="managetrainschedule-tab" data-testid="allowances">
         <img src={allowancesPic} alt="allowances" />
@@ -123,6 +126,7 @@ export default function ManageTrainSchedule() {
   };
 
   const tabSimulationSettings = {
+    id: 'simulation-settings',
     title: (
       <div className="managetrainschedule-tab">
         <img src={simulationSettings} alt="simulation settings" />

diff --git a/front/src/common/BootstrapSNCF/SwitchSNCF/SwitchSNCF.tsx b/front/src/common/BootstrapSNCF/SwitchSNCF/SwitchSNCF.tsx
@@ -41,6 +41,7 @@ const SwitchSNCF: FC<SwitchSNCFProps> = ({
             return (
               <div className="custom-control custom-radio" key={`option-${id}-${option.value}`}>
                 <input
+                  data-testid={optionId}
                   type="radio"
                   id={optionId}
                   name={name}
@@ -62,6 +63,7 @@ const SwitchSNCF: FC<SwitchSNCFProps> = ({
         <label htmlFor={id} className="switch-control">
           <span className="sr-only">On/Off switch</span>
           <input
+            data-testid={name}
             id={id}
             type="checkbox"
             className="sr-only"

diff --git a/front/src/common/Map/Buttons/ButtonMapSettings.tsx b/front/src/common/Map/Buttons/ButtonMapSettings.tsx
@@ -13,6 +13,7 @@ const ButtonMapSettings = ({ toggleMapSettings }: ButtonMapSettingsProps) => {
   return (
     <Tipped mode="left">
       <button
+        data-testid="button-map-settings"
         type="button"
         className="btn-rounded btn-rounded-white btn-map-settings"
         onClick={toggleMapSettings}

diff --git a/front/src/common/Map/HeaderPopUp.tsx b/front/src/common/Map/HeaderPopUp.tsx
@@ -12,7 +12,12 @@ const HearderPopUp: React.FC<HearderPopUpProps> = ({ onClick, title, isLight, ac
   <div className="d-flex justify-content-between align-items-start">
     <div className={cx('h2', { 'text-light': isLight })}>{title}</div>
     {action && <div>{action}</div>}
-    <button type="button" className={cx('close', { 'text-light': isLight })} onClick={onClick}>
+    <button
+      type="button"
+      className={cx('close', { 'text-light': isLight })}
+      onClick={onClick}
+      data-testid="close-modal"
+    >
       &times;
     </button>
   </div>

diff --git a/front/src/common/Map/Search/MapSearch.tsx b/front/src/common/Map/Search/MapSearch.tsx
@@ -67,6 +67,7 @@ const MapSearch = ({ map, closeMapSearchPopUp }: MapSearchProps) => {
       <Tabs
         tabs={[
           {
+            id: 'station',
             label: t('map-search:station'),
             content: (
               <MapSearchStation
@@ -76,6 +77,7 @@ const MapSearch = ({ map, closeMapSearchPopUp }: MapSearchProps) => {
             ),
           },
           {
+            id: 'line',
             label: t('map-search:line'),
             content: (
               <MapSearchLine
@@ -85,6 +87,7 @@ const MapSearch = ({ map, closeMapSearchPopUp }: MapSearchProps) => {
             ),
           },
           {
+            id: 'signal',
             label: t('map-search:signal'),
             content: (
               <MapSearchSignal

diff --git a/front/src/common/Map/Settings/MapSettingsBackgroundSwitches.tsx b/front/src/common/Map/Settings/MapSettingsBackgroundSwitches.tsx
@@ -69,7 +69,7 @@ const MapSettingsBackgroundSwitches: FC<unknown> = () => {
   return (
     <>
       <FormatSwitch
-        name="showosmwitch"
+        name="show-osm-switch"
         onChange={() => dispatch(updateShowOSM(!showOSM))}
         state={showOSM}
         icon={iconOSM}
@@ -86,31 +86,31 @@ const MapSettingsBackgroundSwitches: FC<unknown> = () => {
       />
       <div className="my-2" />
       <FormatSwitch
-        name="showosmtracksectionswitch"
+        name="show-osm-track-section-switch"
         onChange={() => dispatch(updateShowOSMtracksections(!showOSMtracksections))}
         state={showOSMtracksections}
         icon={iconOSMTracks}
         label="showOSMtracksections"
       />
       <div className="my-2" />
       <FormatSwitch
-        name="showignbdorthoswitch"
+        name="show-ign-bdortho-switch"
         onChange={() => dispatch(updateShowIGNBDORTHO(!showIGNBDORTHO))}
         state={showIGNBDORTHO}
         icon={iconIGNBDORTHO}
         label="showIGNBDORTHO"
       />
       <div className="my-2" />
       <FormatSwitch
-        name="showignscan25switch"
+        name="show-ignscan25-switch"
         onChange={() => dispatch(updateShowIGNSCAN25(!showIGNSCAN25))}
         state={showIGNSCAN25}
         icon={iconIGNSCAN25}
         label="showIGNSCAN25"
       />
       <div className="my-2" />
       <FormatSwitch
-        name="showigncadastreswitch"
+        name="show-ign-cadastres-witch"
         onChange={() => dispatch(updateShowIGNCadastre(!showIGNCadastre))}
         state={showIGNCadastre}
         icon={iconIGNCadastre}

diff --git a/front/src/common/Pathfinding/Pathfinding.tsx b/front/src/common/Pathfinding/Pathfinding.tsx
@@ -538,7 +538,7 @@ function Pathfinding({ zoomToFeature, path }: PathfindingProps) {
             <GoCheckCircle />
           </span>
           <span className="flex-grow-1">{t('pathfindingDone')}</span>
-          <small className="text-secondary">
+          <small className="text-secondary" data-testid="result-pathfinding-distance">
             {geojson?.length && formatKmValue(geojson?.length / 1000, 3)}
           </small>
         </div>

diff --git a/front/src/common/Tabs.tsx b/front/src/common/Tabs.tsx
@@ -7,6 +7,7 @@ type TabComponentProps = {
 };
 
 export type TabProps = {
+  id: string;
   label: string;
   title?: React.ReactNode;
   withWarning?: boolean;
@@ -38,6 +39,7 @@ const Tabs = ({ tabs, pills = false, fullWidth = false, fullHeight = false }: Ta
       <div className={cx('tabs', pills && 'pills')}>
         {tabs.map((tab, index) => (
           <div
+            data-testid={`tab-${tab.id}`}
             className={cx(
               'tab',
               index === activeTabIndex && 'active',

diff --git a/front/src/common/api/osrdEditoastApi.ts b/front/src/common/api/osrdEditoastApi.ts
@@ -788,7 +788,7 @@ export type PostInfraApiArg = {
   };
 };
 export type PostInfraRailjsonApiResponse = /** status 201 The imported infra id */ {
-  id?: string;
+  infra?: number;
 };
 export type PostInfraRailjsonApiArg = {
   /** Infra name */

diff --git a/front/src/modules/rollingStock/components/RollingStockEditor/RollingStockEditorForm.tsx b/front/src/modules/rollingStock/components/RollingStockEditor/RollingStockEditorForm.tsx
@@ -254,6 +254,9 @@ const RollingStockEditorForm = ({
   }, [powerRestrictionsClass]);
 
   const tabRollingStockDetails: TabProps = {
+    id: 'rollingstock-details',
+    title: t('tabs.rollingStockDetails'),
+    withWarning: false,
     label: t('tabs.rollingStockDetails'),
     content: (
       <>
@@ -274,6 +277,9 @@ const RollingStockEditorForm = ({
   };
 
   const tabRollingStockCurves: TabProps = {
+    id: 'rollingstock-curves',
+    title: t('tabs.rollingStockCurves'),
+    withWarning: false,
     label: t('tabs.rollingStockCurves'),
     content: (
       <RollingStockEditorCurves

diff --git a/front/src/modules/rollingStock/components/RollingStockSelector/RollingStockSelector.tsx b/front/src/modules/rollingStock/components/RollingStockSelector/RollingStockSelector.tsx
@@ -84,7 +84,7 @@ const RollingStockSelector = ({
             )}
           </div>
         ) : (
-          <div className="d-flex align-items-center">
+          <div data-testid="rollingstock-selector-empty" className="d-flex align-items-center">
             <img width="32px" className="mr-2" src={icon} alt="infraIcon" />
             {t('rollingstockChoice')}
           </div>

diff --git a/front/src/modules/scenario/components/ScenarioCard.tsx b/front/src/modules/scenario/components/ScenarioCard.tsx
@@ -35,7 +35,7 @@ export default function StudyCard({ setFilterChips, scenario }: StudyCardProps)
   };
 
   return (
-    <div className="scenario-card">
+    <div data-testid={`scenario-card-${scenario.name}`} className="scenario-card">
       <div className="scenario-card-name" data-testid={scenario.name}>
         <span className="mr-2">
           <RiFolderChartLine />