Merge pull request #800 from MTES-MCT/test-e2e-with-cypress

Test e2e with cypress

.github/workflows/deploy.yml

@@ -15,6 +15,11 @@ on:
         type: string
         required: true
         description: The branch to deploy
+      environment:
+        type: string
+        required: true
+        description: The environment to deploy
+
     secrets:
       CLEVER_SECRET:
         required: true
@@ -29,6 +34,9 @@ on:
 jobs:
   deploy:
     if: ${{ github.ref_name == inputs.branch }}
+    environment:
+      name: ${{ inputs.environment }}
+      url: ${{ vars.HOST }}
     runs-on: ubuntu-latest
     steps:
       - name: Checkout

.github/workflows/e2e.yml

@@ -0,0 +1,33 @@
+name: End-to-end tests
+
+on:
+  push:
+    branches:
+      - main
+
+jobs:
+  e2e:
+    runs-on: ubuntu-latest
+    strategy:
+      matrix:
+        node-version: [20.x]
+    steps:
+      - name: Checkout
+        uses: actions/checkout@v4
+        with:
+          fetch-depth: 0
+
+      - name: Enable Corepack
+        run: corepack enable
+
+      - name: Cypress run
+        uses: cypress-io/github-action@v6
+        env:
+          CYPRESS_API: ${{ secrets.API_HOST }}
+          CYPRESS_BASE_URL: ${{ secrets.HOST }}
+          CYPRESS_EMAIL: ${{ secrets.CYPRESS_EMAIL }}
+          CYPRESS_PASSWORD: ${{ secrets.CYPRESS_PASSWORD }}
+        with:
+          working-directory: e2e
+          build: false
+          start: yarn cypress run

.github/workflows/github-actions.yml

@@ -77,6 +77,7 @@ jobs:
       app: Front staging
       alias: front-staging
       branch: main
+      environment: Staging
     secrets: inherit
 
   deploy-api-staging:
@@ -104,6 +105,7 @@ jobs:
       app: Front production
       alias: front-production
       branch: prod
+      environment: Production
     secrets: inherit
 
   deploy-api-production:

.talismanrc

@@ -1,7 +1,17 @@
 fileignoreconfig:
+- filename: .github/workflows/e2e.yml
+  checksum: 1994a562d1d57521c10078640cd49fdccf7b3baecbaf46f3ed383ada996b5c90
 - filename: .github/workflows/github-actions.yml
   checksum: b1a53b557b6b2ac4c57f6afce9e902582f5589f97762a963da587496a455c0c1
 - filename: database/*
+- filename: e2e/.env.example
+  checksum: 7afa05e3b64d40c9351b2a60f4ae70887b9c44d66b152c67f7d53b3d4956c93c
+- filename: e2e/README.md
+  checksum: 5f1410c6dd14683c4cb1185cfa8ef4a6018f587abc11b95ea23febcd203d3dee
+- filename: e2e/cypress/e2e/log-in.cy.ts
+  checksum: 5bae716e922600e1360d1b732cd4f0983b2deb3d012ca3bfbf450a4dac02f583
+- filename: e2e/cypress/support/commands.ts
+  checksum: 3bb7cab7d26c40e046724505a5f6dce90a9528f4f626067282ec1c6e3aa9b263
 - filename: frontend/.env.example
   checksum: 9d59fa5d5a2dd989c2aa9a06cf3ccab007df6a002cb963d63406a12ffbcfca8b
 - filename: frontend/src/components/Draft/DraftBody.tsx
@@ -72,6 +82,8 @@ fileignoreconfig:
   checksum: 17c890af8ba6ba90687468438e4615958c5604157ed86904c8c49d6bdaf98ee9
 - filename: queue/src/workers/generate-mails.ts
   checksum: 43ae28ea84ab99eab1324356419de4ade2c83b0a70ae999f3d79fea8303a6a3c
+- filename: server/.env.example
+  checksum: 6fc854a30e8083849e3dadea2bed87d1c67a5bf70e702e2e0fa0b93ecf3c98cf
 - filename: server/controllers/draftController.ts
   checksum: 3627d5cc7172a79998517e1982424462c61116e248e5b6bd29aced81470113e6
 - filename: server/repositories/campaignRepository.ts
@@ -92,6 +104,8 @@ fileignoreconfig:
   checksum: 58d7a51800df5447205a0b9c137478c5bb9d456a76cbc96f0407b9eacc676999
 - filename: server/src/infra/database/seeds/development/20240404235457_users.ts
   checksum: f3fabfbe62c13a614236fd7c9474c78de726c44515e8f116f3532765907c218c
+- filename: server/src/infra/database/seeds/development/20240627141242_e2e.ts
+  checksum: 56a46923a8cffefb7e70949b80718dc56ae2f3dd28f5057cb102461fe2fa10eb
 - filename: server/src/routers/unprotected.ts
   checksum: 520455e33ad9672c522364241789eefb4a8d62d86ce90dec626b8a7146ea343e
 - filename: server/src/test/testUtils.ts

e2e/.env.example

@@ -0,0 +1,4 @@
+CYPRESS_BASE_URL=https://zerologementvacant-staging.incubateur.net
+CYPRESS_API=https://api.zerologementvacant-staging.incubateur.net/api
+CYPRESS_EMAIL=E2E_EMAIL
+CYPRESS_PASSWORD=E2E_PASSWORD

e2e/README.md

@@ -0,0 +1,18 @@
+# e2e tests
+
+## Running locally
+
+Copy the .env.example to .env and fill in the required values.
+Run `yarn workspace @zerologementvacant/e2e dev` to open the cypress GUI.
+Run `yarn workspace @zerologementvacant/e2e test` to run the tests in headless
+mode.
+
+## Running in CI
+
+`E2E_EMAIL` and `E2E_PASSWORD` must be set on the API where you want to run the
+tests.
+The API seeds a specific environment for the end-to-end tests with variables
+defined on [our cloud provider](https://console.clever-cloud.com/organisations/orga_31f13631-abb3-48d2-a58b-24b736f02a9d/applications/app_be5bb031-0ce0-4ce1-ac71-c5434691dcb6/variables).
+
+GitHub CI runs the headless tests, thus the variables defined in [.env.example](./.env.example) must be defined in the CI environment.
+The _staging_ environment variables and secrets are defined [on GitHub](https://github.com/MTES-MCT/zero-logement-vacant/settings/environments/3313774599/edit).

e2e/config.ts

@@ -0,0 +1,39 @@
+import convict from 'convict';
+
+export interface Config {
+  api: string;
+  baseURL: string;
+  email: string;
+  password: string;
+}
+
+const config = convict<Config>({
+  api: {
+    env: 'CYPRESS_API',
+    doc: 'The API URL',
+    default: null,
+    nullable: false
+  },
+  baseURL: {
+    env: 'CYPRESS_BASE_URL',
+    doc: 'The base URL of the application',
+    default: null,
+    nullable: false
+  },
+  email: {
+    env: 'CYPRESS_EMAIL',
+    doc: 'The email to use for authentication',
+    default: null,
+    sensitive: true,
+    nullable: false
+  },
+  password: {
+    env: 'CYPRESS_PASSWORD',
+    doc: 'The password to use for authentication',
+    default: null,
+    sensitive: true,
+    nullable: false
+  }
+});
+
+export default config.get();

e2e/cypress.config.ts

@@ -0,0 +1,15 @@
+import { defineConfig } from 'cypress';
+
+import configuration from './config';
+
+export default defineConfig({
+  e2e: {
+    setupNodeEvents(on, config) {
+      // implement node event listeners here
+
+      return { ...config, env: configuration };
+    }
+  },
+  viewportWidth: 1920,
+  viewportHeight: 1080
+});

e2e/cypress/e2e/campaign.cy.ts

@@ -0,0 +1,132 @@
+describe('Campaign', () => {
+  it('should create a campaign', () => {
+    cy.intercept('POST', Cypress.env('API') + '/housing').as('findHousings');
+    cy.intercept('POST', Cypress.env('API') + '/housing/count').as(
+      'countHousings'
+    );
+
+    cy.logIn();
+    cy.get('button').contains('Bâtiment/DPE').click();
+    cy.get('label').contains('Nombre de logements').next().click();
+    cy.wait('@findHousings');
+    cy.wait('@countHousings');
+    cy.get('tbody')
+      .find('fieldset')
+      .then((checkboxes) => checkboxes.slice(0, 3))
+      .each((checkbox) => {
+        cy.wrap(checkbox).click();
+      });
+    cy.get('button').contains('Créer une campagne').click();
+    cy.get('label')
+      .contains(/^Titre de la campagne/)
+      .next()
+      .type('3 logements');
+    cy.get('button').contains('Enregistrer').click();
+    cy.location('pathname').should('match', /^\/campagnes\/.+/);
+
+    // Fill the form
+    cy.get('form[name="draft"]').within(() => {
+      cy.get('input[type="file"]')
+        .first()
+        .selectFile('cypress/fixtures/logo.png');
+
+      cy.get('label')
+        .contains(/^En date du/)
+        .next()
+        .type('2024-01-01');
+      cy.get('label')
+        .contains(/^Écrit à/)
+        .next()
+        .type('Marseille BB');
+
+      cy.get('label')
+        .contains(/^Nom de la collectivité/)
+        .next()
+        .type('Zéro Logement Vacant');
+      cy.get('label')
+        .contains(/^Service/)
+        .next()
+        .type('Logement');
+      cy.get('label').contains(/^Nom$/).next().type('Logement Vacant');
+      cy.get('label')
+        .contains(/^Prénom/)
+        .next()
+        .type('Zéro');
+      cy.get('label').contains('Adresse').next().type('1 rue de la République');
+      cy.get('label')
+        .contains(/^Adresse courriel/)
+        .next()
+        .type('[email protected]');
+      cy.get('label')
+        .contains(/^Téléphone/)
+        .next()
+        .type('0123456789');
+
+      cy.get('label')
+        .contains(/^Objet/)
+        .next()
+        .type('Votre logement vacant');
+      cy.get('div[aria-labelledby="draft-body-label"]')
+        .type('Madame, Monsieur,{enter}')
+        .type(
+          'Marseille BB fait partie des lauréats du plan national de lutte contre les logements vacants du Ministère de la Transition écologique et de la Cohésion des Territoires. Ce plan a pour objectif d’accélérer, dans les territoires pilotes, la remise sur le marché immobilier (rénovation, location, vente, restructuration) du plus grand nombre possible de logements vacants. Dans ce cadre, l’ADIL 35 a été missionnée par Rennes Métropole pour assurer une mission d’information, de sensibilisation et d’accompagnement des propriétaires de logements vacants qui le souhaitent.{enter}'
+        )
+        .type(
+          'Un formulaire vous est proposé dans le cadre d’une enquête destinée à mieux comprendre les raisons de la vacance et s’inscrit dans une politique plus globale afin de construire l’aide qui vous sera la plus adaptée, et permettrait la remise des biens sur un marché en forte demande.{enter}'
+        )
+        .type(
+          'Depuis 2011, 960 propriétaires ont été accompagnés dans le cadre de l’opération Rennes Centre Ancien. Ce sont ainsi 300 logements vacants qui ont pu être réoccupés grâce à des aides publiques.{enter}'
+        )
+        .type(
+          'Votre logement situé au 123 rue bidon, à Marseille a été recensé comme vacant, c’est-à-dire qu’il aurait été déclaré comme inoccupé depuis « Nombre année vacance du logement » au 1er Janvier 2022. Si tel n’est pas le cas, votre retour permettra d’actualiser l’état réel de son occupation.{enter}'
+        )
+        .type(
+          'Un formulaire vous est proposé dans le cadre d’une enquête destinée à mieux comprendre les raisons de la vacance et s’inscrit dans une politique plus globale afin de construire l’aide qui vous sera la plus adaptée, et permettrait la remise des biens sur un marché en forte demande.{enter}'
+        )
+        .type('Alors, pourquoi pas vous ?{enter}');
+
+      cy.get('label')
+        .contains(/^Nom du signataire/)
+        .next()
+        .type('PALAVACANCE');
+      cy.get('label')
+        .contains(/^Prénom du signataire/)
+        .next()
+        .type('Nathan');
+      cy.get('label')
+        .contains(/^Rôle du signataire/)
+        .next()
+        .type('Maire de Marseille BB');
+    });
+
+    cy.get('button')
+      .contains(/^Débuter l’envoi/)
+      .click();
+
+    cy.get('dialog[open="true"]')
+      .find('button')
+      .contains(/^Confirmer/)
+      .click();
+
+    cy.get('*')
+      .contains('Chargement de vos courriers en cours')
+      .should('be.visible');
+
+    cy.get('a')
+      .contains(/^Télécharger les courriers/, { timeout: 10_000 })
+      .should('be.visible');
+
+    cy.get('label')
+      .contains(/^Date d’envoi de votre campagne/)
+      .type(new Date().toJSON().slice(0, 'yyyy-mm-dd'.length));
+
+    cy.get('button')
+      .contains(/^Confirmer et passer au suivi/)
+      .click();
+
+    cy.get('dialog[open="true"]')
+      .find('button')
+      .contains(/^Confirmer/)
+      .click();
+  });
+});

e2e/cypress/e2e/log-in.cy.ts

@@ -0,0 +1,13 @@
+describe('Log in', () => {
+  it('should log in', () => {
+    const email = Cypress.env('EMAIL');
+    const password = Cypress.env('PASSWORD');
+
+    cy.visit('/connexion');
+    cy.get('input[label^="Adresse email"]').type(email);
+    cy.get('input[label^="Mot de passe"]').type(password);
+    cy.get('button[type="submit"]').click();
+
+    cy.location('pathname').should('eq', '/parc-de-logements');
+  });
+});

e2e/cypress/fixtures/example.json

@@ -0,0 +1,5 @@
+{
+  "name": "Using fixtures to represent data",
+  "email": "[email protected]",
+  "body": "Fixtures are a great way to mock data for responses to routes"
+}