Commit 0421ac41 authored by Lionel DURAND's avatar Lionel DURAND
Browse files

Livraison sur master decembre 2021

parents 2921f61f cab6c340
# Created by .ignore support plugin (hsz.mobi)
/.idea/
/build/
/_ts-build/
/dist/
/node_modules/
*.iml
......
......@@ -17,9 +17,33 @@ cache:
- cache/Cypress
- node_modules
npm-build-dev:
stage: build
except:
- master
image: node:14-alpine
script:
- npm ci
- npm run build:o2switch:dev
artifacts:
paths:
- build/
npm-build-prod:
stage: build
only:
- master
image: node:14-alpine
script:
- npm ci
- npm run build:o2switch:crater
artifacts:
paths:
- build/
# this job installs NPM dependencies and Cypress
cypress-install:
image: cypress/base:10
image: cypress/browsers:node14.17.0-chrome88-ff89
stage: build
script:
- npm ci
......@@ -31,10 +55,10 @@ cypress-install:
- npm run cypress:info
cypress-tests:
image: cypress/base:10
image: cypress/browsers:node14.17.0-chrome88-ff89
stage: test
script:
- npm run test:ci
- npm run cypress:test:shell-mode:firefox
artifacts:
when: always
paths:
......@@ -49,13 +73,7 @@ deploy-prod:
- master
script:
- apk --no-cache add lftp ca-certificates openssh
- mv www/scripts/env-o2s-prod.js www/scripts/env.js
- rm www/scripts/env-*
- mv www/crater/api/.htaccess-app www/crater/api/.htaccess
- rm www/crater/api/.htaccess-*
- mv www/.htaccess-app www/.htaccess
- rm www/.htaccess-*
- lftp -c "set ftp:ssl-allow no; open -u $O2S_FTP_USERNAME,$O2S_FTP_PASSWORD $O2S_FTP_HOST; mirror -Rev www ./crater/app/crater-ui --parallel=10"
- lftp -c "set ftp:ssl-allow no; open -u $O2S_FTP_USERNAME,$O2S_FTP_PASSWORD $O2S_FTP_HOST; mirror -Rev build ./crater/app/crater-ui --parallel=10"
deploy-dev:
image: alpine
......@@ -64,10 +82,4 @@ deploy-dev:
- develop
script:
- apk --no-cache add lftp ca-certificates openssh
- mv www/scripts/env-o2s-dev.js www/scripts/env.js
- rm www/scripts/env-*
- mv www/crater/api/.htaccess-dev www/crater/api/.htaccess
- rm www/crater/api/.htaccess-*
- mv www/.htaccess-dev www/.htaccess
- rm www/.htaccess-*
- lftp -c "set ftp:ssl-allow no; open -u $O2S_FTP_USERNAME,$O2S_FTP_PASSWORD $O2S_FTP_HOST; mirror -Rev www ./crater/dev/crater-ui --parallel=10"
- lftp -c "set ftp:ssl-allow no; open -u $O2S_FTP_USERNAME,$O2S_FTP_PASSWORD $O2S_FTP_HOST; mirror -Rev build ./crater/dev/crater-ui --parallel=10"
......@@ -2,6 +2,6 @@
"semi": true,
"trailingComma": "none",
"singleQuote": true,
"printWidth": 120,
"printWidth": 150,
"tabWidth": 4
}
}
\ No newline at end of file
# Crater UI
# CRATER UI
## Installer l'environnement
Ce repo contient l'application web de CRATer, accessible à cette adresse : https://crater.resiliencealimentaire.org
Pre-requis : installer [nodejs](https://nodejs.org/en/download/) (version 14.15.1 ou supérieure)
Pour contribuer :
Puis :
* Voir la [liste des tâches](https://framagit.org/groups/lga/-/issues)
* Consulter également les [pratiques de développement et règles de codage du projet](https://framagit.org/lga/crater-ui/-/blob/develop/pratiques-de-developpement.md)
1. Cloner le dépôt.
2. Configurer l'application : `npm install`
3. Pour voir un résultat localement : `npx serve www`
L'application est accessible sur [localhost:5000](http://localhost:5000).
4. Ajuster la valeur de `apiBaseUrl` dans le fichier [`env.js`](www/scripts/env.js) si besoin.
Ex: `var apiBaseUrl = "https://dev.resiliencealimentaire.org/"`
Les instructions ci-dessous décrivent comment installer et utiliser crater-ui. Elles sont valables pour linux et mac.
## 1) Installer l'environnement
## Contribuer
Pre-requis : installer [nodejs](https://nodejs.org/en/download/) (version 14.15.1 ou supérieure)
La liste des tâches en attente est décrite dans le board global ici : https://framagit.org/groups/lga/-/boards
Puis :
Les tâches sont organisées par ordre de priorité décroissante, les plus prioritaires en haut
1. Cloner le dépôt.
2. Configurer l'application : `npm install`
3. Installer cypress : `cypress install`
Pour traiter une tâche :
## 2) Lancer l'application en local
* il faut être membre du projet (gitlab n'autorise pas la création de merge request pour les invités) => faire une demande d'accès
* se positionner sur la tâche et la passer au statut "En cours"
* travailler dans une branche dédiée, et proposer son code sous forme de merge request dans la branche `develop`
Compiler et lancer l'application en local, avec prise en compte à chaud des modifications : `npm run start`
Pour écrire du code : voir les [pratiques de développement](pratiques-de-developpement.md)
Remarque :
* Cette configuration utilise l'environnement `dev` par défaut avec l'api disponible à cette adresse https://dev.resiliencealimentaire.org/.
* Ajuster cette configuration si nécessaire en modifiant la valeur de `apiBaseUrl` dans le fichier [`config.js`](config/dev.o2switch/config.js) (par ex: `var apiBaseUrl = "http://127.0.0.1:3000/"` pour utiliser une instance de crater-api qui tourne en local).
## Développer et tester
## 3) Lancer les tests cypress
Pour développer et voir en temps réel l'effet des modifications sur les pages :
Pour lancer les tests cypress :
* lancer un serveur et activer la synchro auto entre le code et le navigateur : `npm run serve:sync`
* lancer les tests en mode interactif dans l'app cypress `npm run cypress:test:app-mode:local`
* lancer les tests dans un shell en ligne de commande `npm run cypress:test:app-mode:local:local`
Pour lancer les tests cypress :
## 4) Builder l'application en local et exécuter le build
* lancer les tests en mode interactif dans l'app cypress `npm run test:dev`
* lancer les tests en ligne de commande `npm run test:ci`
Pour tester un build sur l'environnement `dev` (cad qui utilise l'api `https://dev.resiliencealimentaire.org/`) :
* `npm run build:o2switch:dev` : construit l'application dans `build`
* `npm run serve:build` : lance un serveur et exposer l'application à l'adresse `http://localhost:8088`
Pour tester un build sur l'environnement `crater` (cad qui utilise l'api `https://crater.resiliencealimentaire.org/`) :
* `npm run build:o2switch:crater` : construit l'application dans `build`, en optimisant le build pour un environnement de production (voir le fichier snowpack.config.o2switch.crater.mjs)
* `npm run serve:build` : lance un serveur et exposer l'application à l'adresse `http://localhost:8088`
## Livrer
## 5) Livrer sur les environnements dev et crater
L'application est déployée automatiquement sur les 2 environnements de développement et de production, via des pipelines gitlab définis dans le fichier [.gitlab-ci.yml](.gitlab-ci.yml)
L'application est déployée automatiquement sur les 2 environnements de développement (`dev`) et de production (`crater`), via des pipelines gitlab définis dans le fichier [.gitlab-ci.yml](.gitlab-ci.yml)
L'avancement et le résultat des pipelines sont visible ici https://framagit.org/lga/crater-ui/pipelines
......
//var apiBaseUrl = "http://127.0.0.1:3000/"
var apiBaseUrl = 'https://dev.resiliencealimentaire.org/';
#!/usr/bin/env bash
# Script utilisé pour lancer les tests cypress dans un environnement similaire à celui de gitlab
# Permet de reproduire certains bugs que l'on ne voit pas sinon
docker run -it -v $PWD:/app -w /app cypress/browsers:node14.17.0-chrome88-ff89 /bin/bash -c "npm ci;npm run cypress:test:shell-mode:chrome"
{
"name": "Using fixtures to represent data",
"email": "hello@cypress.io",
"body": "Fixtures are a great way to mock data for responses to routes"
}
\ No newline at end of file
......@@ -10,16 +10,16 @@ context("Test l'affichage d'un diagnostic en mode desktop et mobile", () => {
cy.rechercherTerritoire('index__champ-recherche__cmp-recherche__input', 'aur', 5);
// then
cy.get('#barre-menu-territoires').should('be.visible');
cy.get('[data-cy=barre-nav-item-commune] h1').should('be.visible');
cy.get('[data-cy=barre-nav-item-commune] h2').should('be.visible');
cy.get('[data-cy=barre-nav-item-epci] h1').should('be.visible');
cy.get('[data-cy=barre-nav-item-epci] h2').should('be.visible');
cy.get('[data-cy=barre-nav-item-departement] h1').should('be.visible');
cy.get('[data-cy=barre-nav-item-departement] h2').should('be.visible');
cy.get('[data-cy=barre-nav-item-region] h1').should('be.visible');
cy.get('[data-cy=barre-nav-item-region] h2').should('be.visible');
cy.get('[data-cy=barre-nav-item-pays] h1').should('be.visible');
cy.get('[data-cy=barre-nav-item-pays] h2').should('be.visible');
cy.get('[data-cy^=barre-nav-item-C] h1').should('be.visible');
cy.get('[data-cy^=barre-nav-item-C] h2').should('be.visible');
cy.get('[data-cy^=barre-nav-item-E] h1').should('be.visible');
cy.get('[data-cy^=barre-nav-item-E] h2').should('be.visible');
cy.get('[data-cy^=barre-nav-item-D] h1').should('be.visible');
cy.get('[data-cy^=barre-nav-item-D] h2').should('be.visible');
cy.get('[data-cy^=barre-nav-item-R] h1').should('be.visible');
cy.get('[data-cy^=barre-nav-item-R] h2').should('be.visible');
cy.get('[data-cy^=barre-nav-item-P] h1').should('be.visible');
cy.get('[data-cy^=barre-nav-item-P] h2').should('be.visible');
});
it('Afficher un diagnostic niveau commune sur écran mobile', () => {
......@@ -29,15 +29,15 @@ context("Test l'affichage d'un diagnostic en mode desktop et mobile", () => {
cy.rechercherTerritoire('index__champ-recherche__cmp-recherche__input', 'aur', 5);
// then
cy.get('#barre-menu-territoires').should('be.visible');
cy.get('[data-cy=barre-nav-item-commune] h1').should('be.hidden');
cy.get('[data-cy=barre-nav-item-commune] h2').should('be.visible');
cy.get('[data-cy=barre-nav-item-epci] h1').should('be.hidden');
cy.get('[data-cy=barre-nav-item-epci] h2').should('be.visible');
cy.get('[data-cy=barre-nav-item-departement] h1').should('be.hidden');
cy.get('[data-cy=barre-nav-item-departement] h2').should('be.visible');
cy.get('[data-cy^=barre-nav-item-C] h1').should('be.hidden');
cy.get('[data-cy^=barre-nav-item-C] h2').should('be.visible');
cy.get('[data-cy^=barre-nav-item-E] h1').should('be.hidden');
cy.get('[data-cy^=barre-nav-item-E] h2').should('be.visible');
cy.get('[data-cy^=barre-nav-item-D] h1').should('be.hidden');
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-pays] h1').should('be.hidden');
cy.get('[data-cy=barre-nav-item-pays] h2')
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')
......
......@@ -5,22 +5,14 @@ context("Test l'affichage du diagnostic et le remplissage des données en cache
cy.viewport(1500, 1000);
cy.visit('diagnostic.html?idTerritoire=C-31069');
//then
cy.get('[data-cy=barre-nav-item-commune]').should('be.visible');
cy.get('[data-cy=barre-nav-item-epci]').should('be.visible');
cy.get('[data-cy=barre-nav-item-departement]').should('be.visible');
cy.get('[data-cy=barre-nav-item-region]').should('be.visible');
cy.get('[data-cy=barre-nav-item-pays]').should('be.visible');
cy.get('[data-cy^=barre-nav-item-C]').should('be.visible');
cy.get('[data-cy^=barre-nav-item-E]').should('be.visible');
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');
cy.get('[data-cy=synthese-valeur-sauProductiveHa]').should('contain', 77);
cy.get('body').should('have.attr', 'data-id-territoire-principal', 'C-31069')
cy.get('body').should('have.attr', 'data-categorie-territoire-actif', 'commune')
cy.get('body').invoke('attr', 'data-diagnostic-pays').should('contain', '"idTerritoire":"P-FR"')
cy.get('body').invoke('attr', 'data-diagnostic-region').should('contain', '"idTerritoire":"R-76"')
cy.get('body').invoke('attr', 'data-diagnostic-departement').should('contain', '"idTerritoire":"D-31"')
cy.get('body').invoke('attr', 'data-diagnostic-epci').should('contain', '"idTerritoire":"E-243100518"')
cy.get('body').invoke('attr', 'data-diagnostic-commune').should('contain', '"idTerritoire":"C-31069"')
});
it('Vider le cache et afficher uniquement 3 échelles pour le diagnostic d\'un département', () => {
......@@ -31,20 +23,12 @@ context("Test l'affichage du diagnostic et le remplissage des données en cache
// when
cy.rechercherTerritoire('diagnostic__entete__titre-et-nav__cmp__champ-recherche__fixe__cmp-recherche__input', 'haute-garonne', 1);
//then
cy.get('[data-cy=barre-nav-item-commune]').should('be.hidden');
cy.get('[data-cy=barre-nav-item-epci]').should('be.hidden');
cy.get('[data-cy=barre-nav-item-departement]').should('be.visible');
cy.get('[data-cy=barre-nav-item-region]').should('be.visible');
cy.get('[data-cy=barre-nav-item-pays]').should('be.visible');
cy.get('body').should('have.attr', 'data-id-territoire-principal', 'D-31')
cy.get('body').should('have.attr', 'data-categorie-territoire-actif', 'departement')
cy.get('[data-cy^=barre-nav-item-C]').should('not.exist');
cy.get('[data-cy^=barre-nav-item-E]').should('not.exist');
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');
cy.get('body').invoke('attr', 'data-diagnostic-pays').should('contain', '"idTerritoire":"P-FR"')
cy.get('body').invoke('attr', 'data-diagnostic-region').should('contain', '"idTerritoire":"R-76"')
cy.get('body').invoke('attr', 'data-diagnostic-departement').should('contain', '"idTerritoire":"D-31"')
cy.get('body').invoke('attr', 'data-diagnostic-epci').should('be.empty')
cy.get('body').invoke('attr', 'data-diagnostic-commune').should('be.empty')
});
......
......@@ -32,8 +32,8 @@ context('Test recherche territoire et liste de suggestions', () => {
// verifier resultat
cy.get(".cmp__champ-recherche__territoire__autocomplete")
.should("not.exist");
cy.get('[data-cy=barre-nav-item-commune] h1').should('contain.html', 'Aix');
cy.get('[data-cy=barre-nav-item-commune] h2').should('contain.html', 'Commune');
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", () => {
......@@ -64,8 +64,8 @@ context('Test recherche territoire et liste de suggestions', () => {
.should("not.exist");
cy.get("#diagnostic__entete__titre-et-nav__cmp__champ-recherche__glissant")
.should("be.hidden")
cy.get('[data-cy=barre-nav-item-commune] h1').should('contain.html', 'Aix');
cy.get('[data-cy=barre-nav-item-commune] h2').should('contain.html', 'Commune')
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");
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')
});
});
......@@ -29,7 +29,7 @@ Cypress.Commands.add(
(idChampInput, texteSaisi, tailleListeSuggestion) => {
cy.get(`[data-cy=${idChampInput}]`)
.should('be.visible')
.type(texteSaisi);
.type(texteSaisi, {force: true});
cy.get('.autocomplete')
.children()
.should('have.length', tailleListeSuggestion)
......
Supports Markdown
0% or .
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment