fix frontend tests + bump to cypress 13

.github/workflows/cypress.yml

@@ -123,7 +123,7 @@ jobs:
       - name: Cypress run
         uses: cypress-io/github-action@v5
         with:
-          record: false
+          record: true
           working-directory: ./frontend
           start: npm run start
           wait-on: http://127.0.0.1:4200

config/test_config.toml

@@ -5,6 +5,7 @@ API_TAXHUB = 'http://127.0.0.1:5000/api'
 SECRET_KEY = '5fdc2c8fb46f44033144d07396ba082a95b8b3cc827b611a7aaaefbef414f13b'
 DEFAULT_LANGUAGE='fr'
 [MAPCONFIG]
+ZOOM_LEVEL_RELEVE = 1
 REF_LAYERS=[
     {
         code="znieff1",

contrib/occtax/frontend/app/occtax-form/releve/releve.service.ts

@@ -176,8 +176,6 @@ export class OcctaxFormReleveService {
           this.additionalFieldsForm = [];
         }),
         switchMap((editionMode: boolean) => {
-          console.log('editionMode', editionMode);
-
           //Le switch permet, selon si édition ou creation, de récuperer les valeur par defaut ou celle de l'API
           return editionMode ? this.releveValues : this.defaultValues;
         }),

docs/tests_frontend.rst

@@ -6,14 +6,18 @@ le frontend de GeoNature.
 
 L'écriture de tests frontend dans GeoNature se base sur l'outil `Cypress <https://www.cypress.io/>`_ dont il est necessaire de maitriser et comprendre le fonctionnement.
 
+Le lancement des tests cypress nécessite la présence de données en base. Les branches alembic suivantes doivent être montées : `occtax-samples-test`, `occhab-samples`. Le contenu du fichier `config/test_config.toml` doit également être utilisé.
+
+
+
 Principe de base ; Un test doit être concis. 
 Il vaut mieux écrire plusieurs tests pour tester différentes configurations plutôt qu'un seul les testant toutes d'un coup. 
 Cela permet d'identifier plus précisément le test qui n'a pas fonctionné.
 
 Rédaction
 *********
 
-La rédaction des fichiers de tests se fait dans le dossier frontend/cypress/integration.
+La rédaction des fichiers de tests se fait dans le dossier frontend/cypress/e2e.
 
 Structure
 """""""""
@@ -58,12 +62,14 @@ Implémentation
 
 La réalisation des tests frontend passe par la sélection des objets HTML du DOM.
 A fin de rendre ces sélections plus propres, on peut ajouter des tags HTML dans le dom.
-Angular suggère l'ajout de tags de ce type:
+Angular et Cypress suggèrent l'ajout de tags de ce type:
 
 - data-qa
 - test-qa
 - data-test
 
+Voir https://docs.cypress.io/guides/references/best-practices#Selecting-Elements pour les bonnes pratique de sélection d'éléments: 
+
 Exemple
 """""""
 

frontend/cypress.config.ts

@@ -0,0 +1,20 @@
+import { defineConfig } from 'cypress';
+
+export default defineConfig({
+  experimentalStudio: true,
+  projectId: 'r36uo2',
+  videosFolder: 'cypress/videos',
+  screenshotsFolder: 'cypress/screenshots',
+  fixturesFolder: 'cypress/fixtures',
+  defaultCommandTimeout: 30000,
+  requestTimeout: 10000,
+  e2e: {
+    // We've imported your old cypress plugins here.
+    // You may want to clean this up later by importing these.
+    setupNodeEvents(on, config) {
+      return require('./cypress/plugins/index.js')(on, config);
+    },
+    baseUrl: 'http://127.0.0.1:4200',
+    specPattern: 'cypress/e2e/**/*.{js,jsx,ts,tsx}',
+  },
+});

frontend/cypress/integration/control-layers-spec.js → frontend/cypress/e2e/control-layers-spec.js

@@ -2,12 +2,10 @@ describe('Testing Leaflet control layers', () => {
   const controlSelector = '.leaflet-control-layers';
   const controlExpandedSelector = `.leaflet-control-layers-expanded`;
   const overlayersTitleSelector = '[data-qa="title-overlay"]';
-  // Go to home page
-  before(() => {
-    cy.geonatureLogout();
+  beforeEach(()=> {
     cy.geonatureLogin();
     cy.visit('/#/');
-  });
+  })
   it('should display "overlayers button controler"', () => {
     cy.get(controlSelector).should('be.visible');
     cy.get(controlSelector).trigger('mouseover');

frontend/cypress/integration/homepage-spec.js → frontend/cypress/e2e/homepage-spec.js

@@ -1,7 +1,7 @@
 describe('Testing homepage', () => {
-  before(() => {
-    cy.geonatureLogout();
+  beforeEach(() => {
     cy.geonatureLogin();
+    cy.visit('/#/');
   });
 
   it('should close and open the menu', () => {
@@ -17,19 +17,12 @@ describe('Testing homepage', () => {
       .and('match', /visible/);
   });
 
-  it('should display synthese page', () => {
+  it('should display synthese page and back to home', () => {
     cy.get('[data-qa="pnx-home-content-explore-data-button"]').click({ force: true });
     cy.url().should('include', 'synthese');
-  });
-
-  it('back to home', () => {
     cy.get('[data-qa="gn-sidenav-mat-card"]').click();
   });
 
-  // it('open documentation', () => {
-  //   cy.get('#app-toolbar > a').click()
-  // })
-
   it('disconnect', () => {
     cy.get('[data-qa="pnx-home-content-exit-button"]').click({ force: true });
     cy.get('[data-qa="gn-connection-button"]');

frontend/cypress/integration/metadata-spec.js → frontend/cypress/e2e/metadata-spec.js

@@ -2,7 +2,7 @@ import promisify from 'cypress-promise';
 
 describe('Testing metadata', () => {
   const cadreAcq = 'CA-1';
-  const jdd = ' JDD-1 ';
+  const jdd = 'JDD-1';
   const jddUUID = '4d331cae-65e4-4948-b0b2-a11bc5bb46c2';
   const caUUID = '57b7d0f2-4183-4b7b-8f08-6e105d476dc5';
   const caSelector = '[data-qa="pnx-metadata-acq-framework-' + caUUID + '"]';
@@ -19,13 +19,14 @@ describe('Testing metadata', () => {
     description: 'description de mon jdd',
   };
 
-  before(() => {
-    cy.geonatureLogout();
+  beforeEach(() => {
     cy.geonatureLogin();
     cy.visit('/#/metadata');
   });
 
+
   it('should display "cadre d\'acquisition"', async () => {
+
     // const listCadreAcq = await promisify(cy.get("[data-qa='pnx-metadata-acq-framework']"));
     const wantedCA = await promisify(cy.get(caSelector));
     // listCadreAcq[0].firstChild.firstChild.firstChild.children[1].innerText;
@@ -43,23 +44,25 @@ describe('Testing metadata', () => {
     cy.get('[data-qa="pnx-metadata-acq-framework-header-' + caUUID + '"]').click();
     cy.get('[data-qa="pnx-metadata-jdd-' + jddUUID + '"]').contains(jdd);
     cy.get('[data-qa="pnx-metadata-jdd-actif-' + jddUUID + '"]').click();
-    cy.get('[data-qa="pnx-metadata-jdd-nb-obs-' + jddUUID + '"]').contains('3');
     cy.get('[data-qa="pnx-metadata-jdd-delete-' + jddUUID + '"]').should('be.disabled');
-  });
 
-  it('should display the first "jeux de données"', () => {
+    // go to the JDD detail page
     cy.get('[data-qa="pnx-metadata-jdd-' + jddUUID + '"]').click();
     cy.get('[data-qa="pnx-metadata-dataset-name"]').contains(jdd);
     cy.get('[data-qa="pnx-metadata-exit-jdd"]').click();
-  });
 
-  it('should display the good "jeux de données"', () => {
+  });
+
+  it('should search a JDD and find it"', () => {
+
     cy.get('[data-qa="pnx-metadata-search"]').type(jdd);
+    cy.get('[data-qa="pnx-metadata-acq-framework-header-' + caUUID + '"]').click();
     cy.get('[data-qa="pnx-metadata-jdd-' + jddUUID + '"]').contains(jdd);
-    cy.get('[data-qa="pnx-metadata-jdd-actif-' + jddUUID + '"]').click({ force: true });
   });
 
   it('should create a new "cardre d\'acquisition"', () => {
+    // cy.visit('/#/metadata');
+
     cy.get('[data-qa="pnx-metadata-add-af"]').click();
 
     cy.get('pnx-metadata-actor > div > form > ng-select > div > div > div.ng-input').click();
@@ -100,12 +103,10 @@ describe('Testing metadata', () => {
       .click()
       .type(newCadreAcq.startDate);
     cy.get("[data-qa='pnx-metadata-save-af']").click();
-  });
-
-  it('should new "jeux de données" created', () => {
     cy.get('[data-qa="pnx-metadata-acq-framework-name"]').contains(newCadreAcq.name);
   });
 
+
   it('should create a new "jeux de données"', () => {
     cy.visit('/#/metadata');
     cy.get('[data-qa="pnx-metadata-add-jdd"]').click();
@@ -165,9 +166,6 @@ describe('Testing metadata', () => {
     cy.get('[data-qa="1"]').click();
 
     cy.get('[data-qa="pnx-dataset-form-save-jdd"]').click();
-  });
-
-  it('should new "jeux de données" created', () => {
     cy.get('[data-qa="pnx-metadata-dataset-name"]').contains(newJdd.name);
     cy.get('[data-qa="pnx-metadata-exit-jdd"]').click();
   });

frontend/cypress/integration/occhab-spec.js → frontend/cypress/e2e/occhab-spec.js

@@ -3,13 +3,13 @@ import promisify from 'cypress-promise';
 
 describe("Testing occhab", () => {
 
-  before(() => {
-    cy.geonatureLogout();
+  beforeEach(() => {
     cy.geonatureLogin();
-    cy.visit("/#/occhab")
   });
 
-  it('should create an habitation', () => {
+  it('should create an habitation', async () => {
+    cy.visit("/#/occhab")
+
     const canvas = "[data-qa='pnx-occhab-form'] > div:nth-child(1) > pnx-map > div > div.leaflet-container.leaflet-touch.leaflet-fade-anim.leaflet-grab.leaflet-touch-drag.leaflet-touch-zoom"
     cy.get('#add-btn').click()
 
@@ -42,9 +42,6 @@ describe("Testing occhab", () => {
 
     cy.get('#validateButton').click()
 
-  })
-
-  it('should display the new habitation', async () => {
     const listHabit = await promisify(cy.get('[data-qa="pnx-occhab-map-list-datatable"] > div > datatable-body > datatable-selection > datatable-scroller'))
     expect(listHabit[0].children[0].children[0].children[1].children[4].innerText).contains('Prés salés du contact haut schorre/dune')
     listHabit[0].children[0].children[0].children[1].children[2].children[0].children[0].click()

frontend/cypress/integration/occtax-dataset-submodule-spec.js → frontend/cypress/e2e/occtax-dataset-submodule-spec.js

@@ -1,19 +1,12 @@
-//Geonature connection
-before('Geonature connection', () => {
-  cy.geonatureLogout();
-  cy.geonatureLogin();
-});
+
 
 beforeEach(() => {
-  cy.restoreLocalStorage();
+  cy.geonatureLogin();
+  cy.visit('/#/occtax_ds');
 });
 
-afterEach(() => {
-  cy.saveLocalStorage();
-});
 
 it('Should click on OCCTAX_DS module and load data with module_code in url', () => {
-  cy.visit('/#/occtax_ds');
 
   cy.intercept(Cypress.env('apiEndpoint') + 'occtax/OCCTAX_DS/releves?**').as('getReleves');
   cy.wait('@getReleves').then((interception) => {