Commit ec0c91a8 authored by Lionel DURAND's avatar Lionel DURAND
Browse files

Fevrier2022-Ajout indicateurs pesticides

parents cd5d6b2d 489b0fa6
.idea
build
_ts-build
dist
node_modules
*.iml
.DS_Store
cypress/screenshots
cypress/videos
www
\ No newline at end of file
// var apiBaseUrl = "http://127.0.0.1:3000/"
//var apiBaseUrl = 'http://127.0.0.1:3000/';
var apiBaseUrl = 'https://dev.resiliencealimentaire.org/';
context("Test de vérification des couleurs des territoires après un changement d'échelle territoriale", () => {
const COULEUR_TERRITOIRE_DONNEES_NON_DISPONIBLES = "#d7d7d7";
const COULEUR_TERRITOIRE_NOTE_0 = "#9b0000";
const COULEUR_TERRITOIRE_NOTE_3 = "#d05c2d";
const COULEUR_TERRITOIRE_NOTE_5 = "#f2994a";
const COULEUR_TERRITOIRE_NOTE_8 = "#759850";
const COULEUR_TERRITOIRE_NOTE_10 = "#219653";
it("Valider couleur des territoires pour régions", () => {
// init
cy.viewport(1500, 1000);
cy.visit("carte.html");
cy.get("#boutons__choix-echelle-territoriale__regions").click({force: true})
cy.get('.cmp__carte__id-territoire__R-24')
.should('have.attr', 'fill', COULEUR_TERRITOIRE_NOTE_8)
cy.get('.cmp__carte__id-territoire__R-44')
.should('have.attr', 'fill', COULEUR_TERRITOIRE_NOTE_10)
});
const COULEUR_TERRITOIRE_DONNEES_NON_DISPONIBLES = '#d7d7d7';
const COULEUR_TERRITOIRE_NOTE_0 = '#9b0000';
const COULEUR_TERRITOIRE_NOTE_3 = '#d05c2d';
const COULEUR_TERRITOIRE_NOTE_5 = '#f2994a';
const COULEUR_TERRITOIRE_NOTE_8 = '#759850';
const COULEUR_TERRITOIRE_NOTE_10 = '#219653';
it('Valider couleur des territoires pour régions', () => {
// init
cy.viewport(1500, 1000);
cy.visit('carte.html');
cy.get('#boutons__choix-echelle-territoriale__regions').click({ force: true });
cy.get('.cmp__carte__id-territoire__R-24').should('have.attr', 'fill', COULEUR_TERRITOIRE_NOTE_8);
cy.get('.cmp__carte__id-territoire__R-44').should('have.attr', 'fill', COULEUR_TERRITOIRE_NOTE_10);
});
});
context('Test de vérification des couleurs des territoires selon leur note sur la page carte', () => {
const COULEUR_TERRITOIRE_DONNEES_NON_DISPONIBLES = "#d7d7d7";
const COULEUR_TERRITOIRE_NOTE_0 = "#9b0000";
const COULEUR_TERRITOIRE_NOTE_3 = "#d05c2d";
const COULEUR_TERRITOIRE_NOTE_5 = "#f2994a";
const COULEUR_TERRITOIRE_NOTE_8 = "#759850";
const COULEUR_TERRITOIRE_NOTE_10 = "#219653";
it("Valider couleur des territoires pour production/besoins", () => {
// init
cy.viewport(1500, 1000);
cy.visit("carte.html");
cy.get('.cmp__carte__id-territoire__D-92')
.should('have.attr', 'fill', COULEUR_TERRITOIRE_NOTE_0)
cy.get('.cmp__carte__id-territoire__D-77')
.should('have.attr', 'fill', COULEUR_TERRITOIRE_NOTE_3)
cy.get('.cmp__carte__id-territoire__D-28')
.should('have.attr', 'fill', COULEUR_TERRITOIRE_NOTE_5)
cy.get('.cmp__carte__id-territoire__D-25')
.should('have.attr', 'fill', COULEUR_TERRITOIRE_NOTE_8)
cy.get('.cmp__carte__id-territoire__D-85')
.should('have.attr', 'fill', COULEUR_TERRITOIRE_NOTE_10)
});
it("Valider couleur des territoires pour pratiques agricoles", () => {
// init
cy.viewport(1500, 1000);
cy.visit("carte.html");
// Permet d'attendre que la carte soit chargée avant de changer de maillon
cy.get('.cmp__carte__id-territoire__D-92')
.should('have.attr', 'fill', COULEUR_TERRITOIRE_NOTE_0)
// Changer de maillon
cy.get("#boutons__choix-maillon__pratiques-agricoles").click({force: true})
cy.get('.cmp__carte__id-territoire__D-75')
.should('have.attr', 'fill', COULEUR_TERRITOIRE_DONNEES_NON_DISPONIBLES)
cy.get('.cmp__carte__id-territoire__D-55')
.should('have.attr', 'fill', COULEUR_TERRITOIRE_NOTE_3)
});
const COULEUR_TERRITOIRE_DONNEES_NON_DISPONIBLES = '#d7d7d7';
const COULEUR_TERRITOIRE_NOTE_0 = '#9b0000';
const COULEUR_TERRITOIRE_NOTE_3 = '#d05c2d';
const COULEUR_TERRITOIRE_NOTE_5 = '#f2994a';
const COULEUR_TERRITOIRE_NOTE_8 = '#759850';
const COULEUR_TERRITOIRE_NOTE_10 = '#219653';
it('Valider couleur des territoires pour production/besoins', () => {
// init
cy.viewport(1500, 1000);
cy.visit('carte.html');
cy.get('.cmp__carte__id-territoire__D-92').should('have.attr', 'fill', COULEUR_TERRITOIRE_NOTE_0);
cy.get('.cmp__carte__id-territoire__D-77').should('have.attr', 'fill', COULEUR_TERRITOIRE_NOTE_3);
cy.get('.cmp__carte__id-territoire__D-28').should('have.attr', 'fill', COULEUR_TERRITOIRE_NOTE_5);
cy.get('.cmp__carte__id-territoire__D-25').should('have.attr', 'fill', COULEUR_TERRITOIRE_NOTE_8);
cy.get('.cmp__carte__id-territoire__D-85').should('have.attr', 'fill', COULEUR_TERRITOIRE_NOTE_10);
});
it('Valider couleur des territoires pour pratiques agricoles', () => {
// init
cy.viewport(1500, 1000);
cy.visit('carte.html');
// Permet d'attendre que la carte soit chargée avant de changer d'axe
cy.get('.cmp__carte__id-territoire__D-92').should('have.attr', 'fill', COULEUR_TERRITOIRE_NOTE_0);
// Changer d'axe
cy.get('#boutons__choix-axe__pratiques-agricoles').click({ force: true });
cy.get('.cmp__carte__id-territoire__D-75').should('have.attr', 'fill', COULEUR_TERRITOIRE_DONNEES_NON_DISPONIBLES);
cy.get('.cmp__carte__id-territoire__D-55').should('have.attr', 'fill', COULEUR_TERRITOIRE_NOTE_3);
});
});
......@@ -37,9 +37,6 @@ context("Test l'affichage d'un diagnostic en mode desktop et mobile", () => {
cy.get('[data-cy^=barre-nav-item-D] h2').should('be.visible');
// on ne teste pas la région car peu fiable (selon le css elle peut etre "a cheval" sur l'ecran)
cy.get('[data-cy^=barre-nav-item-P] h1').should('be.hidden');
cy.get('[data-cy^=barre-nav-item-P] h2')
.should('be.hidden')
.scrollIntoView()
.should('be.visible')
cy.get('[data-cy^=barre-nav-item-P] h2').should('be.hidden').scrollIntoView().should('be.visible');
});
});
context("Test l'affichage du diagnostic et le remplissage des données en cache en fonction de la catégorie du territoire principal", () => {
it('Afficher les 5 échelles territoriales pour le diagnostic d\'une commune', () => {
it("Afficher les 5 échelles territoriales pour le diagnostic d'une commune", () => {
//when
cy.viewport(1500, 1000);
cy.visit('diagnostic.html?idTerritoire=C-31069');
......@@ -12,10 +11,9 @@ context("Test l'affichage du diagnostic et le remplissage des données en cache
cy.get('[data-cy^=barre-nav-item-P]').should('be.visible');
cy.get('[data-cy=synthese-valeur-sauProductiveHa]').should('contain', 77);
});
it('Vider le cache et afficher uniquement 3 échelles pour le diagnostic d\'un département', () => {
it("Vider le cache et afficher uniquement 3 échelles pour le diagnostic d'un département", () => {
//given
cy.viewport(1500, 1000);
cy.visit('diagnostic.html?idTerritoire=C-31069');
......@@ -28,8 +26,5 @@ context("Test l'affichage du diagnostic et le remplissage des données en cache
cy.get('[data-cy^=barre-nav-item-D]').should('be.visible');
cy.get('[data-cy^=barre-nav-item-R]').should('be.visible');
cy.get('[data-cy^=barre-nav-item-P]').should('be.visible');
});
});
context('Test recherche territoire et liste de suggestions', () => {
beforeEach(() => {
cy.visit('index.html')
})
it('Afficher 5 éléments maxi sur une recherche texte', () => {
cy.rechercherTerritoire('index__champ-recherche__cmp-recherche__input', 'saint', 5);
})
it('Afficher 10 éléments maxi sur une recherche par code postal', () => {
cy.rechercherTerritoire('index__champ-recherche__cmp-recherche__input', '02000', 10);
})
it("Rechercher depuis la barre de navigation en mode desktop", () => {
// init
cy.viewport(1500, 1000);
cy.visit("diagnostic.html?idTerritoire=P-FR");
// verifier visibilite/masquage des champs recherche
cy.get("nav").should("be.visible");
cy.get("#diagnostic__entete__titre-et-nav__cmp__champ-recherche__fixe")
.should("be.visible")
cy.get('[data-cy=barre-nav-bouton-loupe]')
.should("be.hidden")
// recherche
cy.rechercherTerritoire('diagnostic__entete__titre-et-nav__cmp__champ-recherche__fixe__cmp-recherche__input', 'aix', 5);
// verifier resultat
cy.get(".cmp__champ-recherche__territoire__autocomplete")
.should("not.exist");
cy.get('[data-cy^=barre-nav-item-C] h1').should('contain.html', 'Aix');
cy.get('[data-cy^=barre-nav-item-C] h2').should('contain.html', 'Commune');
});
it("Rechercher depuis la barre de navigation en mode tablette", () => {
// init
cy.viewport(1300, 1000);
cy.visit("diagnostic.html?idTerritoire=P-FR");
// verifier visibilite/masquage des champs recherche
// cy.get("header").should("be.hidden");
cy.get("nav").should("be.visible");
cy.get("#diagnostic__entete__titre-et-nav__cmp__champ-recherche__glissant")
.should("be.hidden")
cy.get("#diagnostic__entete__titre-et-nav__cmp__champ-recherche__fixe")
.should("be.hidden")
cy.get('[data-cy=barre-nav-bouton-loupe]')
.should("be.visible")
// afficher la zone de recherche
cy.get('[data-cy=barre-nav-bouton-loupe]').click();
cy.get("#diagnostic__entete__titre-et-nav__cmp__champ-recherche__glissant")
.should("be.visible")
// verifier autocomplete
cy.rechercherTerritoire('diagnostic__entete__titre-et-nav__cmp__champ-recherche__glissant__cmp-recherche__input', 'aix', 5);
// verifier resultat
cy.get(".cmp__champ-recherche__territoire__autocomplete")
.should("not.exist");
cy.get("#diagnostic__entete__titre-et-nav__cmp__champ-recherche__glissant")
.should("be.hidden")
cy.get('[data-cy^=barre-nav-item-C] h1').should('contain.html', 'Aix');
cy.get('[data-cy^=barre-nav-item-C] h2').should('contain.html', 'Commune')
});
beforeEach(() => {
cy.visit('index.html');
});
it('Afficher 5 éléments maxi sur une recherche texte', () => {
cy.rechercherTerritoire('index__champ-recherche__cmp-recherche__input', 'saint', 5);
});
it('Afficher 10 éléments maxi sur une recherche par code postal', () => {
cy.rechercherTerritoire('index__champ-recherche__cmp-recherche__input', '02000', 10);
});
it('Rechercher depuis la barre de navigation en mode desktop', () => {
// init
cy.viewport(1500, 1000);
cy.visit('diagnostic.html?idTerritoire=P-FR');
// verifier visibilite/masquage des champs recherche
cy.get('nav').should('be.visible');
cy.get('#diagnostic__entete__titre-et-nav__cmp__champ-recherche__fixe').should('be.visible');
cy.get('[data-cy=barre-nav-bouton-loupe]').should('be.hidden');
// recherche
cy.rechercherTerritoire('diagnostic__entete__titre-et-nav__cmp__champ-recherche__fixe__cmp-recherche__input', 'aix', 5);
// verifier resultat
cy.get('.cmp__champ-recherche__territoire__autocomplete').should('not.exist');
cy.get('[data-cy^=barre-nav-item-C] h1').should('contain.html', 'Aix');
cy.get('[data-cy^=barre-nav-item-C] h2').should('contain.html', 'Commune');
});
it('Rechercher depuis la barre de navigation en mode tablette', () => {
// init
cy.viewport(1300, 1000);
cy.visit('diagnostic.html?idTerritoire=P-FR');
// verifier visibilite/masquage des champs recherche
// cy.get("header").should("be.hidden");
cy.get('nav').should('be.visible');
cy.get('#diagnostic__entete__titre-et-nav__cmp__champ-recherche__glissant').should('be.hidden');
cy.get('#diagnostic__entete__titre-et-nav__cmp__champ-recherche__fixe').should('be.hidden');
cy.get('[data-cy=barre-nav-bouton-loupe]').should('be.visible');
// afficher la zone de recherche
cy.get('[data-cy=barre-nav-bouton-loupe]').click();
cy.get('#diagnostic__entete__titre-et-nav__cmp__champ-recherche__glissant').should('be.visible');
// verifier autocomplete
cy.rechercherTerritoire('diagnostic__entete__titre-et-nav__cmp__champ-recherche__glissant__cmp-recherche__input', 'aix', 5);
// verifier resultat
cy.get('.cmp__champ-recherche__territoire__autocomplete').should('not.exist');
cy.get('#diagnostic__entete__titre-et-nav__cmp__champ-recherche__glissant').should('be.hidden');
cy.get('[data-cy^=barre-nav-item-C] h1').should('contain.html', 'Aix');
cy.get('[data-cy^=barre-nav-item-C] h2').should('contain.html', 'Commune');
});
});
context('Test de vérification affichage du bandeau erreur technique', () => {
it("Afficher le bandeau erreur technique sur la page d'accueil", () => {
// init
cy.intercept('GET', '**/api/territoires**', {
statusCode: 500,
body: {}
});
cy.viewport(1500, 1000);
cy.visit('index.html');
context("Test de vérification affichage du bandeau erreur technique", () => {
it("Afficher le bandeau erreur technique sur la page d'accueil", () => {
// init
cy.intercept('GET', '**/api/territoires**', {
statusCode: 500,
body: {}
})
cy.viewport(1500, 1000);
cy.visit("index.html");
cy.get(`[data-cy=index__champ-recherche__cmp-recherche__input]`)
.should('be.visible')
.type('pari', {force: true});
cy.get('[data-cy=zone-message-erreur__zone-message-erreur]').should('be.visible');
});
cy.get(`[data-cy=index__champ-recherche__cmp-recherche__input]`).should('be.visible').type('pari', { force: true });
cy.get('[data-cy=zone-message-erreur__zone-message-erreur]').should('be.visible');
});
});
context("Test de vérification plier/deplier menu glissant", () => {
it("Le bouton du burger menu doit etre masqué sur écran large", () => {
// init
cy.viewport(1500, 1000);
cy.visit("index.html");
cy.get('[data-cy=structure-page__menu-glissant__menu]').should('be.hidden');
cy.get('[data-cy=structure-page__entete__titre-et-nav__bouton__burger-menu]').should('be.hidden');
});
it("Afficher le menu glissant", () => {
// init
cy.viewport(1000, 1000);
cy.visit("index.html");
cy.get('[data-cy=structure-page__menu-glissant__menu]').should('be.hidden');
cy.get('[data-cy=structure-page__entete__titre-et-nav__bouton__burger-menu]')
.should('be.visible')
.click()
cy.get('[data-cy=structure-page__menu-glissant__menu]')
.should('be.visible')
// Click dans la zone du menu en dehors d'un lien ne doit pas le fermer
.click(50,900)
.should('be.visible')
});
it("Masquer le menu glissant", () => {
// init
cy.viewport(1000, 1000);
cy.visit("index.html");
// click sur le bouton fermer
cy.get('[data-cy=structure-page__entete__titre-et-nav__bouton__burger-menu]')
.click()
cy.get('[data-cy=structure-page__menu-glissant__bouton-fermer]').click()
// then
cy.get('[data-cy=structure-page__menu-glissant__menu]').should('be.hidden')
// click en dehors du menu
cy.get('[data-cy=structure-page__entete__titre-et-nav__bouton__burger-menu]')
.click()
cy.get('body').click(0,0)
// then
cy.get('[data-cy=structure-page__menu-glissant__menu]').should('be.hidden')
});
context('Test de vérification plier/deplier menu glissant', () => {
it('Le bouton du burger menu doit etre masqué sur écran large', () => {
// init
cy.viewport(1500, 1000);
cy.visit('index.html');
cy.get('[data-cy=structure-page__menu-glissant__menu]').should('be.hidden');
cy.get('[data-cy=structure-page__entete__titre-et-nav__bouton__burger-menu]').should('be.hidden');
});
it('Afficher le menu glissant', () => {
// init
cy.viewport(1000, 1000);
cy.visit('index.html');
cy.get('[data-cy=structure-page__menu-glissant__menu]').should('be.hidden');
cy.get('[data-cy=structure-page__entete__titre-et-nav__bouton__burger-menu]').should('be.visible').click();
cy.get('[data-cy=structure-page__menu-glissant__menu]')
.should('be.visible')
// Click dans la zone du menu en dehors d'un lien ne doit pas le fermer
.click(50, 900)
.should('be.visible');
});
it('Masquer le menu glissant', () => {
// init
cy.viewport(1000, 1000);
cy.visit('index.html');
// click sur le bouton fermer
cy.get('[data-cy=structure-page__entete__titre-et-nav__bouton__burger-menu]').click();
cy.get('[data-cy=structure-page__menu-glissant__bouton-fermer]').click();
// then
cy.get('[data-cy=structure-page__menu-glissant__menu]').should('be.hidden');
// click en dehors du menu
cy.get('[data-cy=structure-page__entete__titre-et-nav__bouton__burger-menu]').click();
cy.get('body').click(0, 0);
// then
cy.get('[data-cy=structure-page__menu-glissant__menu]').should('be.hidden');
});
});
......@@ -16,6 +16,6 @@
* @type {Cypress.PluginConfig}
*/
module.exports = (on, config) => {
// `on` is used to hook into various events Cypress emits
// `config` is the resolved Cypress config
}
// `on` is used to hook into various events Cypress emits
// `config` is the resolved Cypress config
};
......@@ -24,16 +24,7 @@
// -- This will overwrite an existing command --
// Cypress.Commands.overwrite("visit", (originalFn, url, options) => { ... })
Cypress.Commands.add(
'rechercherTerritoire',
(idChampInput, texteSaisi, tailleListeSuggestion) => {
cy.get(`[data-cy=${idChampInput}]`)
.should('be.visible')
.type(texteSaisi, {force: true});
cy.get('.autocomplete')
.children()
.should('have.length', tailleListeSuggestion)
.first()
.click({ force: true });
}
);
Cypress.Commands.add('rechercherTerritoire', (idChampInput, texteSaisi, tailleListeSuggestion) => {
cy.get(`[data-cy=${idChampInput}]`).should('be.visible').type(texteSaisi, { force: true });
cy.get('.autocomplete').children().should('have.length', tailleListeSuggestion).first().click({ force: true });
});
......@@ -14,7 +14,7 @@
// ***********************************************************
// Import commands.js using ES2015 syntax:
import './commands'
import './commands';
// Alternatively you can use CommonJS syntax:
// require('./commands')
/**
* Composant qui porte le modèle de données central utilisé dans la page carte, avec les fonctions essentielles pour manipuler ces données
* @param donneesInitiales
* @returns {{majEchelleTerritorialeActive: majEchelleTerritorialeActive, majMaillonActif: majMaillonActif, modele, getMaillonActif: (function(): {descriptionMaillon: string, libelle: string, id: string}|{descriptionMaillon: string, libelle: string, id: string}|{descriptionMaillon: string, libelle: string, id: string}|{descriptionMaillon: string, libelle: string, id: string}), getEchelleTerritorialeActive: (function(): {libelle: string, id: string}|{libelle: string, id: string}|{libelle: string, id: string})}}
* @constructor
*/
function ModeleDonneesCarte(donneesInitiales) {
let _donnees = donneesInitiales;
let majEchelleTerritorialeActive = function (idEchelleTerritoriale) {
_donnees.indexEchelleTerritorialeActive = _donnees.echellesTerritoriales
.map((et) => et.id)
.findIndex((id) => id === idEchelleTerritoriale);
};
let setContoursTerritoires = function (idEchelleTerritoriale, contoursGeojson) {
echelleTerritoriale = _donnees.echellesTerritoriales.find((et) => et.id === idEchelleTerritoriale);
echelleTerritoriale.contoursGeojson = contoursGeojson;
};
let getEchelleTerritorialeActive = function () {
return _donnees.echellesTerritoriales[_donnees.indexEchelleTerritorialeActive];
};
let majMaillonActif = function (idMaillon) {
_donnees.indexMaillonActif = _donnees.maillons.map((maillon) => maillon.id).findIndex((id) => id === idMaillon);
};
let getMaillonActif = function () {
return _donnees.maillons[_donnees.indexMaillonActif];
};
return {
modele: _donnees,
getEchelleTerritorialeActive: getEchelleTerritorialeActive,
majEchelleTerritorialeActive: majEchelleTerritorialeActive,
setContoursTerritoires: setContoursTerritoires,
majMaillonActif: majMaillonActif,
getMaillonActif: getMaillonActif
};
}
/**
*
* Composant qui traite les évenements en provenance des boutons de l'IHM,
* et distribue les actions à effectuer en conséquence vers le modèle de données
* puis les composants UI à mettre à jour
*
* @param modeleAppCarte
* @param uiDescriptionMaillon
* @param uiCarteColoree
* @returns {{controleurMaillonActif: controleurMaillonActif, controleurEchelleTerritorialeCarte: controleurEchelleTerritorialeCarte}}
* @constructor
*/
function Controleur(modeleAppCarte, uiDescriptionMaillon, uiCarteColoree) {
let _modeleAppCarte = modeleAppCarte;
let _contenuStatiqueDescriptionMaillon = uiDescriptionMaillon;