fix: résolution de soucis de configuration pour cypress & une gestion…

… api de la cloture de la modal #4456

README.md

@@ -166,6 +166,10 @@ There are several levels of tests:
 
 You can safely use `npm test && npm run cypress` to drive your developments.
 
+## Development Environment and Cypress
+
+In Cypress tests, we verify that email functionality works. To check this locally, you need to copy and paste the environmental variables from .env.e2e to your .env file (and create the .env file if you don't already have one).
+
 ## Email
 
 We use the framework [MJML](https://mjml.io/) to design and integrate the templates. [Tipimail](https://fr.tipimail.com) is our service to send emails.

cypress/utils/results.js

@@ -11,7 +11,7 @@ const back = () => cy.get('[data-testid="back-button"]').click()
 const IdentifyBenefit = (id, name) => {
   cy.get(
     `[itemtype="http://schema.org/GovernmentService"][data-testid="${id}"]`,
-    { timeout: 10000 }
+    { timeout: 10000 },
   ).as(`${id}-summary`)
   cy.checkA11y()
   getBenefitSummary(id)
@@ -29,7 +29,7 @@ const hasBafaGroupPreviewBenefit = (mustBeDisplay) => {
   } else {
     cy.get(
       `[itemtype="http://schema.org/GovernmentService"][data-testid="${bafaGroupPreviewId}"]`,
-      { timeout: 10000 }
+      { timeout: 10000 },
     ).should("not.exist")
   }
 }
@@ -70,11 +70,11 @@ const hasPrimeActiviteNearbyPlaces = () => {
   cy.get('[data-testid="nearby-places"]').should("be.visible")
   cy.get('[data-testid="lieu-title"]').should(
     "contain",
-    "Caisse d'allocations familiales"
+    "Caisse d'allocations familiales",
   )
   cy.get('[data-testid="lieu-informations-link"]').should(
     "contain",
-    "Voir les informations"
+    "Voir les informations",
   )
 }
 
@@ -205,7 +205,7 @@ const hasVeloGroupPreviewBenefit = (mustBeDisplay) => {
   } else {
     cy.get(
       `[itemtype="http://schema.org/GovernmentService"][data-testid="${veloGroupPreviewId}"]`,
-      { timeout: 10000 }
+      { timeout: 10000 },
     ).should("not.exist")
   }
 }
@@ -247,17 +247,10 @@ const receiveResultsEmail = () => {
   cy.get('[data-testid="simulation-id"')
     .invoke("text")
     .then((simulationId) => {
-      cy.url().then((url) => {
-        if (url.includes("localhost")) {
-          // skip this test on localhost
-          // todo : implement a solution for testing this feature locally
-          return
-        } else {
-          // Works on CI only
-          cy.task("getLastEmail", email)
-            .its("headers.subject")
-            .should("includes", simulationId)
-        }
+      cy.url().then(() => {
+        cy.task("getLastEmail", email)
+          .its("headers.subject")
+          .should("includes", simulationId)
       })
     })
 }
@@ -275,7 +268,7 @@ const receiveResultsSms = () => {
         surveyOptin: true,
         phone: "0600000000",
       },
-    }
+    },
   ).as("post-receive-results-sms")
 
   cy.get("[data-testid='send-email-and-sms-button']", {
@@ -299,7 +292,7 @@ const checkResultsRequests = () => {
   cy.wait("@post-simulation").then(({ request, response }) => {
     cy.writeFile(
       `cypress/payloads/${Cypress.spec.fileName}-simulation.json`,
-      response.body
+      response.body,
     )
     expect(request.method).to.equal("POST")
     expect(response.statusCode).to.equal(200)

package.json

@@ -4,7 +4,7 @@
   "description": "Simulateur de prestations sociales pour les jeunes",
   "type": "module",
   "scripts": {
-    "serve": "nodemon --exec 'node --loader ts-node/esm backend/dev.ts'",
+    "serve": "nodemon --exec 'node --loader ts-node/esm backend/dev.ts --env-file=.env'",
     "build": "concurrently 'npm run build:server' && concurrently 'npm run build:iframes' 'npm run build:front' && npm run copy:templates",
     "clean:dist-server": "rm -fR dist-server",
     "copy:templates": "mkdir -p dist-server/backend/lib/mes-aides/emails/templates && cp backend/lib/mes-aides/emails/templates/* dist-server/backend/lib/mes-aides/emails/templates",

src/components/modals/recap-email-and-sms-modal.vue

@@ -1,12 +1,8 @@
 <script setup lang="ts">
 import RecapEmailAndSmsForm from "@/components/recap-email-and-sms-form.vue"
-import { useStore } from "@/stores/index.js"
 import { computed } from "vue"
 import ABTestingService from "@/plugins/ab-testing-service.js"
 
-const store = useStore()
-const hide = () => store.setModalState(undefined)
-
 const headerTitle = computed(() => {
   return process.env.VITE_SHOW_SMS_TAB &&
     ABTestingService.getValues().Followup_SMS === "show"
@@ -35,7 +31,6 @@ const headerTitle = computed(() => {
                 class="fr-btn--close fr-btn"
                 title="Fermer la fenêtre modale"
                 aria-controls="fr-modal-email"
-                @click="hide"
                 >Fermer</button
               >
             </div>

src/components/offline-results.vue

@@ -8,14 +8,28 @@ const store = useStore()
 const { modalState } = toRefs(store)
 const show = ref(modalState.value !== undefined)
 
+declare global {
+  interface Window {
+    dsfr: (element: HTMLElement) => {
+      modal: { conceal: () => void; disclose: () => void }
+    }
+  }
+}
+
 watch(modalState, (newValue) => {
   show.value = newValue !== undefined
+  if (!show.value) {
+    const modal = document.getElementById("fr-modal-email")
+    if (modal) {
+      window.dsfr(modal).modal.conceal()
+    }
+  }
 })
 </script>
 
 <template>
   <div v-if="show">
-    <h2 class="fr-text--lead"> Je garde ces informations&nbsp;! </h2>
+    <h2 class="fr-text--lead">Je garde ces informations&nbsp;!</h2>
     <p>
       Vous pouvez enregistrer les résultats de votre simulation pour les
       consulter plus tard.
@@ -25,6 +39,6 @@ watch(modalState, (newValue) => {
         <SendRecapButton></SendRecapButton>
       </li>
     </ul>
-    <RecapEmailAndSmsModal></RecapEmailAndSmsModal>
   </div>
+  <RecapEmailAndSmsModal></RecapEmailAndSmsModal>
 </template>