Commit d0f4e857 authored by Benjam's avatar Benjam
Browse files

fix suite review

parent 6da307da
const { defineConfig } = require("cypress");
const { defineConfig } = require('cypress');
module.exports = defineConfig({
experimentalStudio: true,
includeShadowDom: true,
experimentalStudio: true,
includeShadowDom: true,
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);
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://localhost:8088/'
},
baseUrl: "http://localhost:8088/",
},
component: {
devServer: {
framework: "react",
bundler: "vite",
},
},
component: {
devServer: {
framework: 'react',
bundler: 'vite'
}
}
});
context('Test de vérification affichage du bandeau erreur technique', () => {
it("Afficher le bandeau erreur technique sur la page d'accueil", () => {
it("Afficher le bandeau erreur technique sur la page carte", () => {
// init
cy.intercept('GET', '**/api/territoires**', {
cy.intercept('GET', '**/api/**', {
statusCode: 500,
body: {}
});
cy.viewport(1500, 1000);
cy.visit('accueil');
cy.visit('carte');
cy.get(`[data-cy=champ-recherche-territoire]`).find('input').should('be.visible').type('pari', { force: true });
//cy.get(`[data-cy=champ-recherche-territoire]`).find('input').should('be.visible').type('pari', { force: true });
cy.get('[data-cy=message-erreur]').should('be.visible');
});
......
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width,initial-scale=1.0">
<title>Components App</title>
</head>
<body>
<div data-cy-root></div>
</body>
</html>
\ No newline at end of file
<head>
<meta charset="utf-8" />
<meta http-equiv="X-UA-Compatible" content="IE=edge" />
<meta name="viewport" content="width=device-width,initial-scale=1.0" />
<title>Components App</title>
</head>
<body>
<div data-cy-root></div>
</body>
</html>
......@@ -14,14 +14,14 @@
// ***********************************************************
// Import commands.js using ES2015 syntax:
import './commands'
import './commands';
// Alternatively you can use CommonJS syntax:
// require('./commands')
import { mount } from 'cypress/react'
import { mount } from 'cypress/react';
Cypress.Commands.add('mount', mount)
Cypress.Commands.add('mount', mount);
// Example use:
// cy.mount(<MyComponent />)
\ No newline at end of file
// cy.mount(<MyComponent />)
......@@ -11,7 +11,6 @@ import { customElement, query, state } from 'lit/decorators.js';
import { ifDefined } from 'lit/directives/if-defined.js';
import page, { Context } from 'page';
import { BarreNavigationEchelleTerritoriale } from './composants/structure/BarreNavigationEchelleTerritoriale';
import { Entete } from './composants/structure/Entete';
import { importDynamique } from './composants/structure/importDynamiqueDirective';
import { MessageErreurGlissant } from './composants/structure/MessageErreurGlissant';
......@@ -107,7 +106,7 @@ export class CraterApp extends LitElement {
render() {
return html`
<c-message-erreur-glissant></c-message-erreur-glissant>
<c-message-erreur-glissant class="masquer-dans-pdf"></c-message-erreur-glissant>
${this.renderPageCourante()}
`;
}
......
......@@ -6,7 +6,7 @@ import '../../base/TimeLine.js';
import { getVariableCss } from '@lga/commun/build/composants/composants-base';
import baseRawCss from '@lga/commun/build/composants/composants-base.css';
import { formaterNombreEnEntierString } from '@lga/commun/build/outils/base';
import { html, LitElement, unsafeCSS } from 'lit';
import { css, html, LitElement, unsafeCSS } from 'lit';
import { customElement, property, query } from 'lit/decorators.js';
import { IndicateurSynthese, NOTE_VALEUR_WARNING, Rapport } from '../../../domaines/diagnostics';
......@@ -23,7 +23,135 @@ import { MessageCle } from '../sections/MessageCle';
@customElement('c-chapitre-synthese')
export class ChapitreSynthese extends LitElement {
static styles = [unsafeCSS(baseRawCss), unsafeCSS(diagnosticRawCss)];
static styles = [
unsafeCSS(baseRawCss),
unsafeCSS(diagnosticRawCss),
css`
section {
padding-left: max((100vw - var(--largeur-maximum-contenu)) / 2, 1rem);
padding-right: max((100vw - var(--largeur-maximum-contenu)) / 2, 1rem);
}
section h1 {
font-size: var(--normal);
font-weight: normal;
border-bottom: none;
margin-bottom: 0;
text-transform: uppercase;
color: var(--c-synthese-texte-titre1);
}
section h2 {
text-transform: uppercase;
margin: 0;
margin-bottom: 1rem;
font-size: var(--title1);
font-weight: bolder;
color: var(--c-synthese-texte-titre2);
}
section h3 {
color: var(--c-texte-base);
}
section h4 {
color: var(--c-texte-base);
margin: 0 0 0.1rem;
}
/*Grille */
.grid-synthese {
display: grid;
grid-template-columns: 4fr 4fr;
grid-template-rows: 1fr 5fr;
grid-template-areas:
'infos-generales messages-cles'
'chart-radar messages-cles';
gap: 1rem;
align-items: stretch;
justify-items: stretch;
align-content: space-around;
}
.grid-synthese-item {
background-color: var(--c-synthese-arriereplan-boites);
box-shadow: 0 2px 6px 0 var(--ombre);
padding: 0.5rem;
}
/*Infos générales */
.infos-generales {
grid-area: infos-generales;
margin: 10px 5px;
display: flex;
flex-wrap: wrap;
text-decoration: none;
min-height: 90px;
}
.info-generale {
display: flex;
flex-grow: 1;
flex-basis: 33%;
align-items: center;
}
.info {
text-align: left;
flex-grow: 1;
padding: 0.3rem;
}
.indicateur-synthese {
font-family: var(--chiffre-font-family);
font-size: var(--title2);
}
.indicateur-synthese-source {
color: var(--c-texte-source);
font-size: var(--smaller3);
}
/* Message cle */
.messages-cles {
grid-area: messages-cles;
display: grid;
align-items: center;
font-size: var(--smaller1);
padding-top: 0.1rem;
padding-bottom: 0.1rem;
}
@media screen and (max-width: 1024px) {
.grid-synthese {
grid-template-columns: 1fr;
grid-template-rows: auto;
grid-template-areas: 'infos-generales' 'chart-radar' 'messages-cles';
}
}
@media print {
.grid-synthese {
display: grid;
grid-template-columns: 1fr;
grid-template-areas: 'infos-generales' 'messages-cles';
gap: 0;
}
.grid-synthese-item {
box-shadow: 0 0 0 0;
padding: 0;
}
.chart-radar {
display: none;
}
}
`
];
@property()
rapport?: Rapport;
......@@ -51,7 +179,7 @@ export class ChapitreSynthese extends LitElement {
render() {
return html`
<section id="section-synthese">
<section>
<div style="display: flex; justify-content: space-between">
<h2 class="soulignage">${this.rapport?.getTerritoireActif()?.nom || ''}</h2>
<c-menu-exporter></c-menu-exporter>
......
......@@ -148,16 +148,18 @@ export class MenuNavigationSections extends LitElement {
</h1>
</div>
<ul>
${this.sections
? this.sections!.map(
(s) =>
html`<li class="${this.idSectionActive === s.id ? 'item-actif' : 'item-non-actif'}">&#8594 <a href="${
s.id === 'synthese'
? `/diagnostic${document.location.search}`
: `/diagnostic/maillons/${s.id}${document.location.search}`
}">${s.nom}</a></li>`
)
: ``}
${
this.sections
? this.sections!.map(
(s) =>
html`<li class="${this.idSectionActive === s.id ? 'item-actif' : 'item-non-actif'}">&#8594 <a href="${
s.id === 'synthese'
? `/diagnostic${document.location.search}`
: `/diagnostic/maillons/${s.id}${document.location.search}`
}">${s.nom}</a></li>`
)
: ``
}
</ul>
<a id="bouton-remonter-haut" @click="${() => window.scrollTo(0, 0)}" title="Retour haut de page" role="button">
......
......@@ -78,7 +78,6 @@ export class TitreIndicateur extends LitElement {
@state()
private visible = false;
maj(titre: string, description: string, idChapitreMethodologie?: string, lienCarte?: string) {
this.titre = titre;
this.description = description;
......@@ -96,7 +95,12 @@ export class TitreIndicateur extends LitElement {
formeBouton="${FORME_BOUTON.rond}"
></c-bouton>
${this.lienCarte
? html`<c-bouton @click="${() => this.naviguer(this.lienCarte!)}" libelle="" libelleTooltip="Voir la carte" formeBouton="${FORME_BOUTON.rond}">
? html`<c-bouton
@click="${() => this.naviguer(this.lienCarte!)}"
libelle=""
libelleTooltip="Voir la carte"
formeBouton="${FORME_BOUTON.rond}"
>
${unsafeSVG(ICONES_SVG.carte)}
</c-bouton>`
: ''}
......@@ -105,7 +109,7 @@ export class TitreIndicateur extends LitElement {
? html` <div class="details">
<div>${unsafeHTML(this.description)}</div>
${this.idChapitreMethodologie
? html`<a href="/methodologie#${this.idChapitreMethodologie}" target='_blank'>→ voir la méthodologie</a>`
? html`<a href="/methodologie#${this.idChapitreMethodologie}" target="_blank">→ voir la méthodologie</a>`
: ``}
</div>`
: ``;
......
......@@ -26,8 +26,9 @@ export class BarreNavigationEchelleTerritoriale extends LitElement {
background-color: var(--gris2);
align-items: center;
overflow-x: auto;
position: relative;
position: fixed;
width: 100%;
z-index: 100;
}
#bouton-retour {
display: flex;
......
......@@ -146,14 +146,16 @@ export class MenuGlissant extends LitElement {
<li><a href="${`/diagnostic${document.location.search}`}">Synthèse</a></li>
<li><a href="${`/diagnostic/territoire/${document.location.search}`}">Présentation du territoire</a></li>
${this.maillons
? this.maillons!.map((m) => html`<li><a href="${`/diagnostic/maillons/${m.id}${document.location.search}`}">${m.nom}</a></li>`)
? this.maillons!.map(
(m) => html`<li><a href="${`/diagnostic/maillons/${m.id}${document.location.search}`}">${m.nom}</a></li>`
)
: ``}
</ul>`
: ``;
const sousMenuGeneral = html`
<h4>Menu</h4>
<ul>
<li><a href="/accueil">Accueil</a></li>
<li><a href="/diagnostic">Diagnostic</a></li>
<li><a href="/carte">Carte</a></li>
<li><a href="/projet">Le projet CRATer</a></li>
<li><a href="/methodologie">Méthodologie</a></li>
......@@ -203,5 +205,4 @@ export class MenuGlissant extends LitElement {
private fermer() {
this.dispatchEvent(new EvenementFermer());
}
}
......@@ -44,7 +44,7 @@ export class MessageErreurGlissant extends LitElement {
return html`
<section class="${this.classVisibilite}" data-cy="message-erreur">
<p id="message-erreur">&#x26A0 Un problème technique est survenu.<br> Merci d'essayer à nouveau dans quelques
secondes.</p>
instants.</p>
</section>
`;
}
......
......@@ -79,7 +79,7 @@ describe('Tests de la classe Rapport', () => {
// when
const rapport_etat1 = Rapport.creerVide();
// then
expect(rapport_etat1.getEtat()).toEqual(EtatRapport.CHARGEMENT_EN_COURS);
expect(rapport_etat1.getEtat()).toEqual(EtatRapport.AUCUN_TERRITOIRE);
// when
const rapport_etat2 = rapport_etat1.setHierarchieTerritoires(hierarchieCommune).ajouterDiagnostic(diagnosticCommune);
// then
......
......@@ -21,6 +21,7 @@ export class Rapport {
public static creerVide(): Rapport {
return new Rapport(EtatRapport.AUCUN_TERRITOIRE, null, undefined, undefined, new Map<string, Diagnostic>());
}
private clone(): Rapport {
return new Rapport(this.etat, this.erreur, this.hierarchieTerritoires, this.idTerritoireActif, this.diagnostics);
}
......@@ -33,6 +34,10 @@ export class Rapport {
return this.erreur;
}
mettreEnChargement() {
this.etat = EtatRapport.CHARGEMENT_EN_COURS;
}
mettreEnErreur(erreur: Error): Rapport {
const rapport = Rapport.creerVide();
rapport.etat = EtatRapport.ERREUR;
......@@ -46,6 +51,7 @@ export class Rapport {
setHierarchieTerritoires(hierarchieTerritoires: HierarchieTerritoires): Rapport {
const rapport = Rapport.creerVide();
rapport.mettreEnChargement();
rapport.hierarchieTerritoires = hierarchieTerritoires;
rapport.idTerritoireActif = hierarchieTerritoires.territoirePrincipal.id;
return rapport;
......
......@@ -25,25 +25,6 @@
color: var(--c-texte-titre3);
}
#section__accueil__diagnostic aside {
padding-top: 0.3rem;
text-align: center;
max-width: 30rem;
color: var(--c-texte-titre3);
}
#section__accueil__diagnostic aside img{
width: 32px;
vertical-align:bottom;
}
#section__accueil__diagnostic aside a{
color: var(--c-texte-titre3);
}
#section__accueil__diagnostic aside a:hover{
color: var(--gris3);
}
/*--------------------------------------
// Page d'accueil - section carte
--------------------------------------*/
......
......@@ -6,39 +6,55 @@ import { EvenementNaviguer, EvenementSelectionnerTerritoire, IDS_EVENEMENTS } fr
import baseRawCss from '@lga/commun/build/composants/composants-base.css';
import { css, html, LitElement, unsafeCSS } from 'lit';
import { customElement, property } from 'lit/decorators.js';
import { unsafeHTML } from 'lit/directives/unsafe-html.js';
import { genererLienPageDiagnostic } from '../commun/pages-utils';
import diagnosticRawCss from './diagnostic.css';
@customElement('c-page-diagnostic-accueil')
export class PageDiagnosticAccueil extends LitElement {
@customElement('c-coeur-page-diagnostic-accueil')
export class CoeurPageDiagnosticAccueil extends LitElement {
static styles = [
unsafeCSS(baseRawCss),
unsafeCSS(diagnosticRawCss),
css`
main {
height: var(--hauteur-totale-hors-entete);
padding-top: 5rem;
background-color: var(--c-background);
padding-top: 5rem;
margin-top: var(--hauteur-entete);
min-height: calc(100vh - var(--hauteur-entete));
}
h1 {
font-size: var(--title0);
text-align: center;
}
.bandeau {
padding: 0.5rem;
margin: 5rem auto 5rem auto;
max-width: 800px;
border: solid 1 px red;
}
.message {
padding: 0.5rem;
border-radius: 10px;
}
#message-erreur {
text-align: center;
padding: 0.2rem;
margin: auto;
margin-bottom: 5rem;
background-color: var(--c-warning-c);
border-radius: 10px;
max-width: 800px;
}
#message-erreur h1 {
#message-explicatif {
background-color: var(--bleu);
color: var(--blanc);
text-align: left;
}
#titre-message-erreur {
font-size: var(--title2);
font-weight: bold;
padding: 0.2rem;
text-align: center;
}
#recherche {
......@@ -56,24 +72,31 @@ export class PageDiagnosticAccueil extends LitElement {
render() {
return html`
<main class="zone-scroll-principal">
${unsafeHTML(
!this.afficherErreur
? `<h1 class="text-center padding-2">Découvrez le diagnostic alimentaire de votre territoire !</h1>`
: `<div id="message-erreur">
<h1 class="text-center padding-2">Territoire inconnu...</h1>
<p>
Il peut s'agir d'une erreur de saisie dans le nom ou le code du territoire dans l'URL, ou bien d'une indisponibilité
temporaire du serveur.
<br>Merci de vérifier votre saisie et d'essayer à nouveau dans quelques secondes ou de refaire une recherche.
<br/>Si le problème persiste, vous pouvez nous envoyer un message via le
<a href="https://resiliencealimentaire.org/formulaire-crater/" target="_blank">formulaire de contact</a>.
</p>
</div>`
)}
<h1>Découvrez le diagnostic alimentaire de votre territoire !</h1>
<div id="recherche">
<c-champ-recherche-territoire data-cy="champ-recherche-territoire"></c-champ-recherche-territoire>
</div>
${this.afficherErreur
? html` <div class="bandeau">
<div class="message" id="message-erreur">
<div id="titre-message-erreur">Territoire inconnu...</div>
<p>
Merci de vérifier votre saisie et d'essayer à nouveau dans quelques secondes ou de refaire une recherche.
<br />Si le problème persiste, vous pouvez nous envoyer un message via le
<a href="https://resiliencealimentaire.org/formulaire-crater/" target="_blank">formulaire de contact</a>.
</p>
</div>
</div>`
: html` <div class="bandeau">
<div class="message" id="message-explicatif">
<p>
Un diagnostic ciblé de résilience et de durabilité du système alimentaire à l’échelon local.
<br /><br />
Disponible pour les communes, EPCI, bassins de vie, parcs naturels et nationaux, SCoT, PAT, départements, régions,
pays, parcs nationaux, PETR ou pays
</p>
</div>
</div>`}
</main>
`;
}
......
......@@ -10,22 +10,17 @@ import '../../composants/diagnostic/chapitres/ChapitreTransformationDistribution
import '../../composants/diagnostic/chapitres/ChapitreConsommation.js';
import '../../composants/diagnostic/chapitres/MenuNavigationSections.js';
import '../commun/PageSablier.js';
import './PageDiagnosticAccueil.js';
import './CoeurPageAccueil.js';
import '../../composants/structure/PiedPage.js';
import {
EvenementErreur,
EvenementSelectionner,
EvenementSelectionnerTerritoire,
IDS_EVENEMENTS
} from '@lga/commun/build/composants/composants-base';
import { EvenementSelectionner, EvenementSelectionnerTerritoire, IDS_EVENEMENTS } from '@lga/commun/build/composants/composants-base';
import baseRawCss from '@lga/commun/build/composants/composants-base.css';
import { getApiBaseUrl } from '@lga/commun/build/env/config-baseurl';
import { html, LitElement, unsafeCSS } from 'lit';
import { css, html, LitElement, unsafeCSS } from 'lit';
import { customElement, property, query } from 'lit/decorators.js';
import { choose } from 'lit/directives/choose.js';
import { when } from 'lit/directives/when.js';
import { unsafeHTML } from 'lit/directives/unsafe-html.js';
import { when } from 'lit/directives/when.js';
import { MenuNavigationSections, Section } from '../../composants/diagnostic/chapitres/MenuNavigationSections';
import { BarreNavigationEchelleTerritoriale } from '../../composants/structure/BarreNavigationEchelleTerritoriale';
......@@ -41,7 +36,24 @@ import diagnosticRawCss from './diagnostic.css';
@customElement('c-page-diagnostic')
export class PageDiagnostic extends LitElement {
static styles = [unsafeCSS(baseRawCss), unsafeCSS(diagnosticRawCss)];
static styles = [
unsafeCSS(baseRawCss),