Release Sprint 8

* U28 - Un seul bouton pour modifier les équivalences de la livraison

* B15 - bug sur le partage de la livraison

* [U25] - Publicode : génération d'une doc plus lisible

* [A5.1] Nouvelle page : plan du site

* [A5.2] Nouveau Header

* [A5.3] Nouveau footer sur toutes les pages

* [A5.4] Fil d'ariane

.eslintrc.json

@@ -11,10 +11,11 @@
     "no-irregular-whitespace": "off",
     "better-styled-components/sort-declarations-alphabetically": 2
   },
-  "plugins": ["better-styled-components", "styled-components-a11y"],
+  "plugins": ["better-styled-components", "styled-components-a11y", "jest"],
   "env": {
     "browser": true,
     "es2022": true,
-    "node": true
+    "node": true,
+    "jest/globals": true
   }
 }

.github/workflows/e2e.yml

@@ -1,4 +1,4 @@
-name: E2E Tests with Playwright
+name: Testing => Run full test suite
 on:
   push:
 jobs:
@@ -12,10 +12,14 @@ jobs:
         node-version: 18
     - name: Install dependencies
       run: yarn
+    - name: Unit tests => with Jest
+      run: yarn testu
+    - name: Component tests => with Jest
+      run: yarn testc
     - name: Install Playwright Browsers
       run: yarn playwright install --with-deps chromium
-    - name: Run Playwright tests
-      run: yarn playwright test
+    - name: E2E test  => with Playwright
+      run: yarn teste
     - uses: actions/upload-artifact@v3
       if: always()
       with:

CHANGELOG.md

@@ -1,5 +1,33 @@
 # CHANGELOG
 
+## 1.23.2 (23/10/2023)
+
+* A5.4 - Amélioration du fil d'ariane
+
+## 1.23.1 (23/10/2023)
+
+* A5.3 - Nouveau footer sur toutes les pages
+
+## 1.23.0 (20/10/2023)
+
+* A5.2 - Nouveau header
+
+## 1.22.0 (11/10/2023)
+
+* A5.1 - Nouvelle page : plan du site
+
+## 1.21.2 (11/10/2023)
+
+* U25 - Publicode : ajout du markdown pour rendre le corps de texte lisible
+
+## 1.21.1 (10/10/2023)
+
+* B15 - Livraison : bug dans l'URL de partage
+
+## 1.21.0 (05/10/2023)
+
+* U28 - Un seul bouton pour modifier les équivalences de la livraison
+
 ## 1.20.11 (04/10/2023)
 
 * Userver - Modifications pré-migration Scalingo

README.md

@@ -46,12 +46,12 @@ Pour l'instant il n'y a que des variables d'environnement "publiques",
 Il vous faut un fichier `.env.local` à la racine
 
 ```bash
-NEXT_PUBLIC_SITE_URL=localhost:3000
+WEBSITE_URL=localhost:3000
 SENDINBLUE_API_KEY=une_valeur_compliquee
 GMAP_API_KEY=une_autre_valeur_compliquee
 ```
 
-`NEXT_PUBLIC_SITE_URL` est le nom de domaine du site, sans le protocole (mais avec le port éventuellement).
+`WEBSITE_URL` est le nom de domaine du site, sans le protocole (mais avec le port éventuellement).
 
 A vous de renseigner la/les valeurs sur l'ensemble des sites déployés.
 

jest.config.js

@@ -0,0 +1,10 @@
+const nextJest = require("next/jest");
+const createJestConfig = nextJest({
+  dir: "./",
+});
+const customJestConfig = {
+  moduleDirectories: ["node_modules", "<rootDir>/", "<rootDir>/src/"],
+  testEnvironment: "jest-environment-jsdom",
+  testMatch: ["**/testc/**/*.test.js", "**/testu/**/*.test.js"],
+};
+module.exports = createJestConfig(customJestConfig);

next.config.js

@@ -1,4 +1,15 @@
 var fs = require("fs");
+var execSync = require("child_process").execSync;
+
+const getLocalGitCommitHash = function () {
+  let res = "";
+  try {
+    res = execSync("git rev-parse HEAD").toString().trim();
+  } catch (e) {
+    console.log("Git is not executable here...");
+  }
+  return res;
+};
 
 const getLastVersion = function () {
   let result = "unknown";
@@ -12,18 +23,31 @@ const getLastVersion = function () {
   if (versions && versions.length > 1) {
     // The latest version will be the second match
     result = versions[1];
-    console.log("Latest release version:", result);
   } else {
-    console.log("No release versions found in the CHANGELOG.");
+    result = "No release versions found in the CHANGELOG.";
   }
   return result;
 };
 
-const getBeforeLastSha = function () {
-  let result = "unknown";
-  result = fs.readFileSync("./version.txt", "utf8");
-  console.log("Current name is :", result);
-  return result;
+const buildFullVersionNumber = function () {
+  const semver = getLastVersion();
+  console.log("Current semver version:", semver);
+  return semver;
+};
+
+const buildShortSha = function (scalingoLongSha) {
+  const netlifySha = process.env.COMMIT_REF;
+  const shortSha = getShortSha(scalingoLongSha || netlifySha || getLocalGitCommitHash());
+  console.log("Current shortSha is: ", shortSha);
+  return shortSha;
+};
+
+const getShortSha = function (str) {
+  let res = "";
+  if (typeof str === "string" && str.length > 0) {
+    res = str.substring(0, 7);
+  }
+  return res;
 };
 
 const nextConfig = {
@@ -36,8 +60,8 @@ const nextConfig = {
     defaultLocale: "fr",
   },
   env: {
-    thebuildid: getLastVersion() + "-" + getBeforeLastSha(),
-    customKey: "my-value",
+    thebuildid: buildFullVersionNumber() + "-" + buildShortSha(process.env.SOURCE_VERSION),
+    websiteurl: process.env.WEBSITE_URL,
   },
   async redirects() {
     return [

package.json

@@ -6,8 +6,14 @@
     "generatename": "node src/scripts/generate_name.js",
     "build:fruit": "node src/scripts/build_fruits_et_legumes.js",
     "build:boisson": "node src/scripts/build_boissons.js",
-    "test": "playwright test",
-    "test:ui": "playwright test --ui",
+    "test": "yarn testu && yarn testc && yarn teste",
+    "teste": "NODE_ENV=test playwright test --reporter=list",
+    "testc": "NODE_ENV=test jest ./testc",
+    "testu": "NODE_ENV=test jest ./testu",
+    "jest:local": "NODE_ENV=test jest --watch",
+    "testu:local": "NODE_ENV=test jest --watch ./testu",
+    "testc:local": "NODE_ENV=test jest --watch ./testc",
+    "teste:local": "NODE_ENV=test playwright test --ui",
     "dev": "next dev",
     "build": "yarn iframe && next build",
     "postbuild": "next-sitemap",
@@ -32,9 +38,9 @@
     "dotenv-cli": "^7.3.0",
     "focus-trap-react": "^10.2.1",
     "fuse.js": "^6.6.2",
-    "haikunator": "^2.1.2",
     "html-to-image": "^1.11.11",
     "iframe-resizer-react": "^1.1.0",
+    "markdown-to-jsx": "^7.3.2",
     "matomo-tracker": "^2.2.4",
     "next": "^13.1.6",
     "next-query-params": "^4.1.0",
@@ -66,6 +72,11 @@
     "webpack-cli": "^5.0.1"
   },
   "devDependencies": {
+    "@testing-library/jest-dom": "^6.1.4",
+    "@testing-library/react": "^14.0.0",
+    "eslint-plugin-jest": "^27.4.2",
+    "jest": "^29.7.0",
+    "jest-environment-jsdom": "^29.7.0",
     "@playwright/test": "^1.33.0",
     "@trivago/prettier-plugin-sort-imports": "^4.0.0",
     "babel-plugin-tailwind-components": "^0.5.10",

pages/[category].js

@@ -1,35 +1,33 @@
-import categories from 'data/categories.json'
-import React from 'react'
-
-import Web from 'components/layout/Web'
-import Web2 from 'components/layout/Web2'
-import Category from 'components/misc/Category'
-import Learning from 'components/misc/Learning'
-
-import Impactlivraison from './impactlivraison'
+import Impactlivraison from "./impactlivraison";
+import Web from "components/layout/Web";
+import WebBlue from "components/layout/WebBlue";
+import Category from "components/misc/Category";
+import Learning from "components/misc/Learning";
+import categories from "data/categories.json";
+import React from "react";
 
 export default function CategoryPage(props) {
   return (
     <>
-      {['livraison'].includes(props.category.slug) ? (
+      {["livraison"].includes(props.category.slug) ? (
         <>
-          <Web2
+          <WebBlue
             title={props.category.meta.title}
             description={props.category.meta.description}
             breadcrumb={{
-              type: 'equivalent',
+              type: "equivalent",
               category: props.category,
             }}
           >
-            {props.category.slug === 'livraison' ? <Impactlivraison /> : null}
-          </Web2>
+            {props.category.slug === "livraison" ? <Impactlivraison /> : null}
+          </WebBlue>
         </>
       ) : (
         <Web
           title={props.category.meta.title}
           description={props.category.meta.description}
           breadcrumb={{
-            type: 'equivalent',
+            type: "equivalent",
             category: props.category,
           }}
         >
@@ -38,10 +36,10 @@ export default function CategoryPage(props) {
         </Web>
       )}
     </>
-  )
+  );
 }
 
-const independantCategories = [4, 9, 10]
+const independantCategories = [4, 9, 10];
 
 export async function getStaticPaths() {
   return {
@@ -50,15 +48,13 @@ export async function getStaticPaths() {
       .map((category) => ({
         params: { category: category.slug },
       })),
-    fallback: 'blocking',
-  }
+    fallback: "blocking",
+  };
 }
 export async function getStaticProps({ params }) {
   return {
     props: {
-      category: categories?.find(
-        (category) => category.slug === params.category
-      ),
+      category: categories?.find((category) => category.slug === params.category),
     },
-  }
+  };
 }

pages/_app.js

@@ -100,10 +100,12 @@ const SkipLinks = styled.div`
   }
 
   .visible-hidden:focus {
+    background-color: white;
     clip: auto;
     height: auto;
     overflow: auto;
     position: absolute;
     width: auto;
+    z-index: 9;
   }
 `;

pages/accessibilite.js

@@ -1,18 +1,18 @@
 import Section2 from "components/base/Section2";
-import Web from "components/layout/Web";
+import WebBlue from "components/layout/WebBlue";
 import React from "react";
 import styled from "styled-components";
 
 export default function Accessibilite() {
   return (
-    <Web title={"Accessibilité"}>
+    <WebBlue title={"Accessibilité"}>
       <Section2>
         <Section2.InnerMargin>
           <FormatText>
             <h1>Déclaration d'accessibilité</h1>
             <h2 id="quest-ce-que-laccessibilité-numérique-">Qu’est-ce que l’accessibilité numérique ?</h2>
             <p>
-              Un site web accessible est un site qui permet à tous les internautes d’accéder à ses contenus sans
+              Un site webBlue accessible est un site qui permet à tous les internautes d’accéder à ses contenus sans
               difficulté, y compris aux personnes qui présentent un handicap et utilisent des logiciels ou matériels
               spécialisés.
             </p>
@@ -27,7 +27,7 @@ export default function Accessibilite() {
             <ul>
               <li>
                 <a
-                  href="https://librairie.ademe.fr/institutionnel/4817-schema-pluriannuel-de-mise-en-accessibilite-des-sites-web-de-l-ademe-2021-2023.html"
+                  href="https://librairie.ademe.fr/institutionnel/4817-schema-pluriannuel-de-mise-en-accessibilite-des-sites-webBlue-de-l-ademe-2021-2023.html"
                   target="_blank"
                   rel="noreferrer noopener"
                 >
@@ -36,7 +36,7 @@ export default function Accessibilite() {
               </li>
               <li>
                 <a
-                  href="https://librairie.ademe.fr/institutionnel/6257-plan-annuel-de-mise-en-accessibilite-des-sites-web-de-l-ademe.html"
+                  href="https://librairie.ademe.fr/institutionnel/6257-plan-annuel-de-mise-en-accessibilite-des-sites-webBlue-de-l-ademe.html"
                   target="_blank"
                   rel="noreferrer noopener"
                 >
@@ -99,8 +99,8 @@ export default function Accessibilite() {
             </h3>
             <ul>
               <li>
-                Les tests des pages web ont été effectués avec les combinaisons de navigateurs web et lecteurs d’écran
-                suivants : Néant
+                Les tests des pages webBlue ont été effectués avec les combinaisons de navigateurs webBlue et lecteurs
+                d’écran suivants : Néant
               </li>
               <li>Les outils suivants ont été utilisés lors de l’évaluation : Néant</li>
               <li>Pages du site ayant fait l’objet de la vérification de conformité : Néant</li>
@@ -150,7 +150,7 @@ export default function Accessibilite() {
           </FormatText>
         </Section2.InnerMargin>
       </Section2>
-    </Web>
+    </WebBlue>
   );
 }
 

pages/api/hello.js

@@ -2,5 +2,12 @@ export default function handler(req, res) {
   let headers = req.headers;
   let query = req.query;
   let queryString = new URLSearchParams(query).toString();
-  res.status(200).json({ h: headers, q: query, qs: queryString, def: !!process.env.GMAP_API_KEY });
+  res.status(200).json({
+    h: headers,
+    q: query,
+    qs: queryString,
+    defg: !!process.env.GMAP_API_KEY,
+    defp: !!process.env.WEBSITE_URL,
+    wu: process.env.websiteurl,
+  });
 }