[Missions] Corrections de l'enregistrement automatique (ENV VAR UPDAT…

…E) (#2838) ## Linked issues - Resolve #2820 - [x] Ajout de tests multi-fenêtres - [x] Ajout d'un docker-compose pour faire tourner MonitorEnv - [x] Ajout de la nouvelle CI pour run les tests multi-windows ---- - [x] Tests E2E (Cypress)
MTES-MCT · Jan 31, 2024 · 4991f0e · 4991f0e
2 parents 408e3c7 + 15e23a9
commit 4991f0e
Show file tree

Hide file tree

Showing 56 changed files with 1,897 additions and 699 deletions.
diff --git a/.github/workflows/cicd.yml b/.github/workflows/cicd.yml
@@ -252,9 +252,55 @@ jobs:
           wait-on: "http://localhost:8880"
           working-directory: ./frontend
 
+  e2e_multi_windows_test:
+    name: Run E2E multi windows tests
+    needs: [version, build]
+    runs-on: ubuntu-22.04
+    env:
+      ACTIONS_ALLOW_UNSECURE_COMMANDS: true
+      DB_PUBLIC_PORT: 5432
+      ENV_PROFILE: ${{ needs.version.outputs.ENV_PROFILE }}
+      GITHUB_TOKEN: ${{ secrets.GITHUB_TOKEN }}
+      MONITORFISH_VERSION: ${{ needs.version.outputs.VERSION }}
+      VITE_CYPRESS_PORT: 8880
+      VERSION: ${{ needs.version.outputs.VERSION }}
+    steps:
+      - name: Checkout
+        uses: actions/checkout@v4
+
+      - name: Download image
+        uses: ishworkh/docker-image-artifact-download@v1
+        with:
+          image: monitorfish-app:${{ env.VERSION }}
+
+      - name: Docker login
+        run: |
+          echo "${{ secrets.GITHUB_TOKEN }}" | docker login docker.pkg.github.com -u ${GITHUB_ACTOR} --password-stdin
+
+      - name: Run docker images
+        run: make docker-compose-puppeteer-up
+
+      - name: Setup Node.js
+        uses: actions/setup-node@v4
+        with:
+          cache: npm
+          cache-dependency-path: ./frontend/package-lock.json
+          node-version: 20
+
+      - name: Install Node.js dependencies
+        run: npm ci
+        working-directory: ./frontend
+
+      - name: Install Firefox
+        run: npx puppeteer browsers install firefox
+
+      - name: Run multi-windows tests
+        run: npm run test:multi-windows:run
+        working-directory: ./frontend
+
   push_to_registry:
     name: Push to registry
-    needs: [version, e2e_test]
+    needs: [version, e2e_test, e2e_multi_windows_test]
     runs-on: ubuntu-22.04
     if: needs.version.outputs.IS_RELEASE && !contains(github.ref, 'dependabot')
     env:

diff --git a/Makefile b/Makefile
@@ -19,6 +19,7 @@ stop-stubbed-apis:
 erase-db:
 	docker compose down -v
 	docker compose -f ./frontend/cypress/docker-compose.yml down -v
+	docker compose -f ./frontend/puppeteer/docker-compose.dev.yml down -v
 check-clean-archi:
 	cd backend/tools && ./check-clean-architecture.sh
 test: test-back
@@ -35,6 +36,12 @@ lint-back:
 		-e "Exceeded max line length" \
 		-e "Package name must not contain underscore" \
 		-e "Wildcard import"
+run-back-for-puppeteer: run-stubbed-apis
+	docker compose up -d --quiet-pull --wait db
+	docker compose -f ./frontend/puppeteer/docker-compose.dev.yml up -d
+	cd backend && MONITORENV_URL=http://localhost:8882 ./gradlew bootRun --args='--spring.profiles.active=local --spring.config.additional-location=$(INFRA_FOLDER)'
+run-front-for-puppeteer:
+	cd ./frontend && npm run dev-puppeteer
 
 # CI commands - app
 docker-build:
@@ -59,6 +66,11 @@ docker-compose-up:
 	@printf 'Waiting for backend app to be ready'
 	@until curl --output /dev/null --silent --fail "http://localhost:8880/bff/v1/healthcheck"; do printf '.' && sleep 1; done
 
+docker-compose-puppeteer-up:
+	docker compose -f ./frontend/puppeteer/docker-compose.yml up -d
+	@printf 'Waiting for backend app to be ready'
+	@until curl --output /dev/null --silent --fail "http://localhost:8880/bff/v1/healthcheck"; do printf '.' && sleep 1; done
+
 # CI commands - data pipeline
 docker-build-pipeline:
 	docker build -f "infra/docker/Dockerfile.DataPipeline" . -t monitorfish-pipeline:$(VERSION)

diff --git a/adrs/0002-mission-form-sync-e2e-tests.md b/adrs/0002-mission-form-sync-e2e-tests.md
@@ -0,0 +1,36 @@
+# Test end-to-end (e2e) multi-fenêtres pour la synchronisation des missions
+
+Date: 17/01/2024
+
+## Statut
+
+Résolu, à approfondir.
+
+## Contexte
+
+Les tests de synchronisation du formulaire des missions sont :
+- Fastidieux à effectuer (il faut ouvrir plusieurs fenêtre et switcher entre celles-ci) et difficile à repliquer
+- Impossible à exécuter de manière automatique dans `Cypress`
+
+En se basant sur [cet article](https://liveblocks.io/blog/e2e-tests-with-puppeteer-and-jest-for-multiplayer-apps), `Puppeteer` a été choisi comme pour tester
+sur plusieurs fenêtres.
+
+### `Puppeteer`
+
+L'outil est simple à mettre en place et se focalise seulement sur la manipulation d'un navigateur depuis `NodeJS`.
+Nous utilisons `jest` pour écrire les assertions.
+
+Il est possible de tester en mode `headless` (pour la CI) ou `headfull` (pour développer).
+
+Les tests ont été concluants et permettent d'avoir un premier jeu de tests de la synchronisation des missions, voir `puppeteer/e2e/*.spec.ts`.
+
+## Décision
+
+`Puppeteer` est ajouté dans la CI de tests e2e.
+
+## Conséquences
+
+Une deuxième librairie de test e2E a été ajoutée, attention à bien utiliser `Puppeteer` seulement pour les tests de plusieurs fenêtres.
+
+à creuser :
+- L'utilisation de `Puppeteer` pour les tests de `SideWindow` (ouvertes avec `document.open()`)
diff --git a/frontend/.env.example b/frontend/.env.example
@@ -1,6 +1,5 @@
 FRONTEND_GEOSERVER_LOCAL_URL=
 FRONTEND_GEOSERVER_REMOTE_URL=
-FRONTEND_IS_DEV_ENV=
 FRONTEND_MAPBOX_KEY=
 FRONTEND_MONITORENV_URL=
 FRONTEND_OIDC_AUTHORITY=

diff --git a/frontend/.eslintrc.js b/frontend/.eslintrc.js
@@ -134,7 +134,7 @@ module.exports = {
 
     // Jest
     {
-      files: ['__mocks__/**/*.[j|t]s', '**/*.test.ts', '**/*.test.tsx'],
+      files: ['__mocks__/**/*.[j|t]s', '**/*.test.ts', '**/*.test.tsx', 'puppeteer/**/*.ts'],
       plugins: ['jest'],
       env: {
         jest: true
@@ -144,7 +144,13 @@ module.exports = {
         'jest/no-focused-tests': 'error',
         'jest/no-identical-title': 'error',
         'jest/prefer-to-have-length': 'error',
-        'jest/valid-expect': 'error'
+        'jest/valid-expect': 'error',
+        'no-await-in-loop': 'off',
+        'no-console': 'off',
+        'no-restricted-syntax': 'off',
+        'no-underscore-dangle': 'off',
+        'import/no-default-export': 'off',
+        'import/no-extraneous-dependencies': 'off',
       }
     },
 

diff --git a/frontend/config/multi-windows/jest.config.js b/frontend/config/multi-windows/jest.config.js
@@ -0,0 +1,19 @@
+module.exports = {
+  rootDir: '../..',
+  globalSetup: "<rootDir>/puppeteer/setup.ts",
+  testEnvironment: '<rootDir>/puppeteer/puppeteer_environment.ts',
+  // because it's detected by the default value of testRegex
+  // https://jestjs.io/docs/configuration#testregex-string--arraystring
+  globalTeardown: "<rootDir>/puppeteer/teardown.ts",
+  testMatch: ['<rootDir>/puppeteer/e2e/*.spec.ts'],
+  preset: "ts-jest",
+  transform: {
+    ".ts": [
+      "ts-jest",
+      {
+        isolatedModules: true,
+        useESM: true,
+      }
+    ]
+  }
+}
diff --git a/frontend/cypress/docker-compose.yml b/frontend/cypress/docker-compose.yml
@@ -36,7 +36,6 @@ services:
       - MONITORFISH_API_PROTECTED_API_KEY=APIKEY
       - FRONTEND_GEOSERVER_LOCAL_URL=http://0.0.0.0:8081
       - FRONTEND_GEOSERVER_REMOTE_URL=http://0.0.0.0:8081
-      - FRONTEND_IS_DEV_ENV=true
       - FRONTEND_MAPBOX_KEY=pk.eyJ1IjoibW9uaXRvcmZpc2giLCJhIjoiY2tsdHJ6dHhhMGZ0eDJ2bjhtZmJlOHJmZiJ9.bdi1cO-cUcZKXdkEkqAoZQ
       - FRONTEND_MONITORENV_URL=http://0.0.0.0:8081
       - FRONTEND_OIDC_AUTHORITY=https://authentification.recette.din.developpement-durable.gouv.fr/authSAML/oidc/monitorfish

diff --git a/frontend/cypress/e2e/side_window/mission_form/action_list.spec.ts b/frontend/cypress/e2e/side_window/mission_form/action_list.spec.ts
@@ -6,6 +6,32 @@ import { SeaFrontGroup } from '../../../../src/domain/entities/seaFront/constant
 import { editSideWindowMissionListMissionWithId } from '../mission_list/utils'
 
 context('Side Window > Mission Form > Action List', () => {
+  it('Should focus to the last action selected', () => {
+    openSideWindowNewMission()
+
+    cy.clickButton('Ajouter')
+
+    cy.clickButton('Ajouter un contrôle en mer')
+    cy.get('*[data-cy="action-list-item"]').contains('Contrôle en mer')
+    cy.get('*[data-cy="action-list-item"]').should('have.css', 'outline', 'rgb(86, 151, 210) solid 2px')
+
+    cy.wait(250)
+
+    cy.clickButton('Ajouter')
+    cy.clickButton('Ajouter une note libre')
+
+    cy.wait(250)
+    cy.get('*[data-cy="action-list-item"]').eq(0).should('have.css', 'outline', 'rgb(86, 151, 210) solid 2px')
+    cy.get('*[data-cy="action-list-item"]').eq(0).should('not.contain', 'Contrôle en mer')
+
+    cy.get('*[data-cy="action-list-item"]').eq(1).should('not.have.css', 'outline', 'rgb(86, 151, 210) solid 2px')
+    cy.get('*[data-cy="action-list-item"]').eq(1).contains('Contrôle en mer')
+    cy.wait(250)
+
+    cy.fill('Observations, commentaires...', 'Une observation.')
+    cy.get('*[data-cy="action-list-item"]').eq(0).should('not.contain', 'Une observation.')
+  })
+
   it('Should send the expected data to the API when duplicating a mission action', () => {
     editSideWindowMissionListMissionWithId(4, SeaFrontGroup.MEMN)
 

diff --git a/frontend/cypress/e2e/side_window/mission_form/land_control.spec.ts b/frontend/cypress/e2e/side_window/mission_form/land_control.spec.ts
@@ -304,10 +304,20 @@ context('Side Window > Mission Form > Land Control', () => {
   it('Should fill the mission zone from the last land control added', () => {
     const now = getUtcDateInMultipleFormats()
 
-    cy.intercept('POST', '/api/v1/mission', {
+    cy.intercept('POST', '/api/v1/missions', {
+      body: {
+        id: 1
+      },
       statusCode: 201
     }).as('createMission')
 
+    cy.intercept('POST', '/api/v1/missions/1', {
+      body: {
+        id: 1
+      },
+      statusCode: 201
+    }).as('updateMission')
+
     cy.intercept('POST', '/bff/v1/mission_actions', {
       statusCode: 201
     }).as('createMissionAction')
@@ -371,7 +381,7 @@ context('Side Window > Mission Form > Land Control', () => {
     // Request
 
     cy.waitForLastRequest(
-      '@createMission',
+      '@updateMission',
       {
         body: {
           controlUnits: [
@@ -466,7 +476,6 @@ context('Side Window > Mission Form > Land Control', () => {
           isClosed: false,
           isGeometryComputedFromControls: true,
           isUnderJdp: true,
-          isValid: true,
           missionSource: 'MONITORFISH',
           missionTypes: ['LAND']
         }