Retours de code review

src/views/candidature-conseiller/Sommaire.jsx → src/components/Sommaire.jsx

@@ -1,27 +1,8 @@
 import React, { useState } from 'react';
+import PropTypes from 'prop-types';
 
-export default function Sommaire() {
-  const ancreInformationsDeContact = '#informationsDeContact';
-  const [dernierElementClique, setDernierElementClique] = useState(ancreInformationsDeContact);
-
-  const partiesSommaire = [
-    {
-      ancre: ancreInformationsDeContact,
-      libelle: 'Vos informations de contact'
-    },
-    {
-      ancre: '#situationEtExperience',
-      libelle: 'Votre situation et expérience'
-    },
-    {
-      ancre: '#votreDisponibilite',
-      libelle: 'Votre disponibilité'
-    },
-    {
-      ancre: '#votreMotivation',
-      libelle: 'Votre motivation'
-    },
-  ];
+export default function Sommaire({ parties }) {
+  const [dernierElementClique, setDernierElementClique] = useState(parties[0].ancre);
 
   const getAriaCurrent = ancre => {
     return ancre === dernierElementClique ? 'page' : false;
@@ -30,7 +11,7 @@ export default function Sommaire() {
   return (
     <nav aria-label="Sommaire" className="fr-sidemenu fr-mt-15w fr-sidemenu--sticky-full-height">
       <ol className="fr-sidemenu__list">
-        {partiesSommaire.map(({ ancre, libelle }, index) => (
+        {parties.map(({ ancre, libelle }, index) => (
           <li className="fr-sidemenu__item" key={index} onClick={() => setDernierElementClique(ancre)}>
             <a href={ancre} className="fr-sidemenu__link" target="_self" aria-current={getAriaCurrent(ancre)}>
               {libelle}
@@ -41,3 +22,7 @@ export default function Sommaire() {
     </nav >
   );
 }
+
+Sommaire.propTypes = {
+  parties: PropTypes.array,
+};

src/views/candidature-conseiller/CandidatureConseiller.jsx

@@ -1,5 +1,5 @@
 import React, { useState } from 'react';
-import Sommaire from './Sommaire';
+import SommaireConseiller from './SommaireConseiller';
 import InformationsDeContact from './InformationsDeContact';
 import SituationEtExperience from './SituationEtExperience';
 import Disponibilite from './Disponibilite';
@@ -34,7 +34,7 @@ export default function CandidatureConseiller() {
     <div className="fr-container fr-mt-5w fr-mb-5w">
       <div className="fr-grid-row">
         <div className="fr-col-12 fr-col-md-4">
-          <Sommaire />
+          <SommaireConseiller />
         </div>
         <div className="fr-col-12 fr-col-md-8 fr-py-12v">
           <h1 className="cc-titre fr-mb-5w">Je veux devenir conseiller numérique</h1>

src/views/candidature-conseiller/CandidatureConseiller.test.jsx

@@ -21,16 +21,16 @@ describe('candidature conseiller', () => {
       const menuItems = within(menu).getAllByRole('listitem');
 
       const informationsDeContact = within(menuItems[0]).getByRole('link', { name: 'Vos informations de contact' });
-      expect(informationsDeContact).toHaveAttribute('href', '#informationsDeContact');
+      expect(informationsDeContact).toHaveAttribute('href', '#informations-de-contact');
 
       const situationEtExperience = within(menuItems[1]).getByRole('link', { name: 'Votre situation et expérience' });
-      expect(situationEtExperience).toHaveAttribute('href', '#situationEtExperience');
+      expect(situationEtExperience).toHaveAttribute('href', '#situation-et-experience');
 
       const votreDisponibilite = within(menuItems[2]).getByRole('link', { name: 'Votre disponibilité' });
-      expect(votreDisponibilite).toHaveAttribute('href', '#votreDisponibilite');
+      expect(votreDisponibilite).toHaveAttribute('href', '#votre-disponibilite');
 
       const votreMotivation = within(menuItems[3]).getByRole('link', { name: 'Votre motivation' });
-      expect(votreMotivation).toHaveAttribute('href', '#votreMotivation');
+      expect(votreMotivation).toHaveAttribute('href', '#votre-motivation');
     });
   });
 
@@ -41,7 +41,7 @@ describe('candidature conseiller', () => {
     // THEN
     const formulaire = screen.getByRole('form', { name: 'Candidature conseiller' });
     const etapeInformationsDeContact = within(formulaire).getByRole('group', { name: 'Vos informations de contact' });
-    expect(etapeInformationsDeContact).toHaveAttribute('id', 'informationsDeContact');
+    expect(etapeInformationsDeContact).toHaveAttribute('id', 'informations-de-contact');
 
     const prenom = within(etapeInformationsDeContact).getByLabelText('Prénom *');
     expect(prenom).toHaveAttribute('type', 'text');
@@ -70,7 +70,7 @@ describe('candidature conseiller', () => {
     // THEN
     const formulaire = screen.getByRole('form', { name: 'Candidature conseiller' });
     const situationEtExperience = within(formulaire).getByRole('group', { name: 'Votre situation et expérience' });
-    expect(situationEtExperience).toHaveAttribute('id', 'situationEtExperience');
+    expect(situationEtExperience).toHaveAttribute('id', 'situation-et-experience');
 
     const situation = within(situationEtExperience).getByText(textMatcher('Êtes-vous actuellement dans l’une des situations suivantes ? *'), { selector: 'p' });
     expect(situation).toBeInTheDocument();
@@ -131,7 +131,7 @@ describe('candidature conseiller', () => {
     // THEN
     const formulaire = screen.getByRole('form', { name: 'Candidature conseiller' });
     const votreDisponibilite = within(formulaire).getByRole('group', { name: 'Votre disponibilité' });
-    expect(votreDisponibilite).toHaveAttribute('id', 'votreDisponibilite');
+    expect(votreDisponibilite).toHaveAttribute('id', 'votre-disponibilite');
 
     const questionDisponibilite = within(votreDisponibilite).getByText(
       textMatcher('À quel moment êtes-vous prêt(e) à démarrer votre mission et la formation de conseiller numérique ? *'),
@@ -197,7 +197,7 @@ describe('candidature conseiller', () => {
     // THEN
     const formulaire = screen.getByRole('form', { name: 'Candidature conseiller' });
     const votreMotivation = within(formulaire).getByRole('group', { name: 'Votre motivation' });
-    expect(votreMotivation).toHaveAttribute('id', 'votreMotivation');
+    expect(votreMotivation).toHaveAttribute('id', 'votre-motivation');
 
     const aideMotivation = within(votreMotivation).getByText(
       textMatcher('En quelques lignes, décrivez votre motivation personnelle pour devenir conseiller numérique ' +
@@ -234,7 +234,7 @@ describe('candidature conseiller', () => {
     expect(descriptionResume).toBeInTheDocument();
   });
 
-  it('quand je modifie la date de disponibilité, elle s’affiche dans l’encart "En résumé" est affiché', () => {
+  it('quand je modifie la date de disponibilité, alors elle s’affiche dans l’encart "En résumé"', () => {
     // GIVEN
     render(<CandidatureConseiller />);
     const dateDisponibilite = '2023-12-12';

src/views/candidature-conseiller/Disponibilite.jsx

@@ -5,7 +5,7 @@ import PropTypes from 'prop-types';
 
 export default function Disponibilite({ setDateDisponibilite }) {
   return (
-    <fieldset className="fr-border cc-section fr-p-3w fr-mb-3w" id="votreDisponibilite">
+    <fieldset className="fr-border cc-section fr-p-3w fr-mb-3w" id="votre-disponibilite">
       <legend className="fr-h5">Votre disponibilité</legend>
       <hr />
       <p className="fr-mb-3w cc-bold">

src/views/candidature-conseiller/InformationsDeContact.jsx

@@ -4,7 +4,7 @@ import AddressChooser from './AddressChooser';
 
 export default function InformationsDeContact() {
   return (
-    <fieldset className="fr-border cc-section fr-p-3w fr-mb-3w" id="informationsDeContact">
+    <fieldset className="fr-border cc-section fr-p-3w fr-mb-3w" id="informations-de-contact">
       <legend className="fr-h5">Vos informations de contact</legend>
       <hr />
       <Input

src/views/candidature-conseiller/Motivation.jsx

@@ -3,7 +3,7 @@ import ZoneDeTexte from '../../components/commun/ZoneDeTexte';
 
 export default function Motivation() {
   return (
-    <fieldset className="fr-border cc-section fr-p-3w fr-mb-3w" id="votreMotivation">
+    <fieldset className="fr-border cc-section fr-p-3w fr-mb-3w" id="votre-motivation">
       <legend className="fr-h5" id="titreMotivation">Votre motivation</legend>
       <p className="fr-text--sm fr-hint-text">
         En quelques lignes, décrivez votre motivation personnelle pour devenir conseiller numérique et{' '}

src/views/candidature-conseiller/SituationEtExperience.jsx

@@ -19,7 +19,7 @@ export default function SituationEtExperience({ situationChecks, setSituationChe
   };
 
   return (
-    <fieldset className="fr-border cc-section fr-p-3w fr-mb-3w" id="situationEtExperience">
+    <fieldset className="fr-border cc-section fr-p-3w fr-mb-3w" id="situation-et-experience">
       <legend className="fr-h5">Votre situation et expérience</legend>
       <hr />
       <p className="fr-mb-3w cc-bold">

src/views/candidature-conseiller/SommaireConseiller.jsx

@@ -0,0 +1,27 @@
+import React from 'react';
+import Sommaire from '../../components/Sommaire';
+
+export default function SommaireConseiller() {
+  const parties = [
+    {
+      ancre: '#informations-de-contact',
+      libelle: 'Vos informations de contact'
+    },
+    {
+      ancre: '#situation-et-experience',
+      libelle: 'Votre situation et expérience'
+    },
+    {
+      ancre: '#votre-disponibilite',
+      libelle: 'Votre disponibilité'
+    },
+    {
+      ancre: '#votre-motivation',
+      libelle: 'Votre motivation'
+    },
+  ];
+
+  return (
+    <Sommaire parties={parties} />
+  );
+}

src/views/candidature-structure/CandidatureStructure.jsx

@@ -1,16 +1,25 @@
 import React, { useState } from 'react';
-import Sommaire from './Sommaire';
+import SommaireStructure from './SommaireStructure';
 import InformationsDeContact from './InformationsDeContact';
 import BesoinEnConseillerNumerique from './BesoinEnConseillerNumerique';
 
+import '@gouvfr/dsfr/dist/component/form/form.min.css';
+import '@gouvfr/dsfr/dist/component/input/input.min.css';
+import '@gouvfr/dsfr/dist/component/checkbox/checkbox.min.css';
+import '@gouvfr/dsfr/dist/component/radio/radio.min.css';
+import '@gouvfr/dsfr/dist/component/badge/badge.min.css';
+import '@gouvfr/dsfr/dist/component/notice/notice.min.css';
+import '@gouvfr/dsfr/dist/component/sidemenu/sidemenu.min.css';
+import '../candidature-conseiller/CandidatureConseiller.css';
+
 export default function CandidatureStructure() {
   const [dateAccueilConseillerNumerique, setDateAccueilConseillerNumerique] = useState();
 
   return (
     <div className="fr-container fr-mt-5w fr-mb-5w">
       <div className="fr-grid-row">
         <div className="fr-col-12 fr-col-md-4">
-          <Sommaire />
+          <SommaireStructure />
         </div>
         <div className="fr-col-12 fr-col-md-8 fr-py-12v">
           <h1 className="cc-titre fr-mb-5w">Je souhaite engager un conseiller numérique</h1>

src/views/candidature-structure/CandidatureStructure.test.jsx

@@ -31,17 +31,19 @@ describe('candidature structure', () => {
 
       const votreBesoinEnConseillerNumerique = within(menuItems[2]).getByRole('link', { name: 'Votre besoin en conseiller numérique' });
       expect(votreBesoinEnConseillerNumerique).toHaveAttribute('href', '#votre-besoin-en-conseiller-numerique');
-      
+
       const votreMotivation = within(menuItems[3]).getByRole('link', { name: 'Votre motivation' });
       expect(votreMotivation).toHaveAttribute('href', '#votre-motivation');
     });
   });
+
   it.todo('quand j’affiche le formulaire alors l’étape "Vos informations de structure" est affiché');
+
   it('quand j’affiche le formulaire alors l’étape "Vos informations de contact" est affiché', () => {
-    // GIVEN
+    // WHEN
     render(<CandidatureStructure />);
 
-    // WHEN
+    // THEN
     const formulaire = screen.getByRole('form', { name: 'Candidature structure' });
     const etapeInformationsDeContact = within(formulaire).getByRole('group', { name: 'Vos informations de contact' });
     expect(etapeInformationsDeContact).toHaveAttribute('id', 'informations-de-contact');
@@ -65,17 +67,13 @@ describe('candidature structure', () => {
     const telephone = within(etapeInformationsDeContact).getByLabelText('Téléphone *');
     expect(telephone).toHaveAttribute('type', 'tel');
     expect(telephone).toBeRequired();
-
-    // THEN
-
-
   });
-  it('quand j’affiche le formulaire alors l’étape "Votre besoin en conseiller(s) numérique(s)" est affiché', () => {
 
-    //GIVEN
+  it('quand j’affiche le formulaire alors l’étape "Votre besoin en conseiller(s) numérique(s)" est affiché', () => {
+    // WHEN
     render(<CandidatureStructure />);
 
-    // WHEN
+    // THEN
     const formulaire = screen.getByRole('form', { name: 'Candidature structure' });
     const etapeBesoinConseillerNumerique = within(formulaire).getByRole('group', { name: 'Votre besoin en conseiller(s) numérique(s)' });
     expect(etapeBesoinConseillerNumerique).toHaveAttribute('id', 'votre-besoin-en-conseiller-numerique');
@@ -84,33 +82,37 @@ describe('candidature structure', () => {
     expect(combienConseillerNumerique).toHaveAttribute('type', 'number');
     expect(combienConseillerNumerique).toBeRequired();
 
-
-    const identificationCandidat = within(etapeBesoinConseillerNumerique).getByText(textMatcher('Avez-vous déjà identifié un candidat ' +
-      'pour le poste de conseiller numérique ?*'), { selector: 'p' });
+    const identificationCandidat = within(etapeBesoinConseillerNumerique).getByText(
+      textMatcher('Avez-vous déjà identifié un candidat pour le poste de conseiller numérique ?*'),
+      { selector: 'p' }
+    );
     expect(identificationCandidat).toBeInTheDocument();
-    
+
     const sousTitreIdentificationCandidat =
-    within(etapeBesoinConseillerNumerique).getByText(textMatcher('Si oui, merci d’inviter ce candidat ' +
-      'à s’inscrire sur la plateforme Conseiller numérique'), { selector: 'p' });
+      within(etapeBesoinConseillerNumerique).getByText(
+        textMatcher('Si oui, merci d’inviter ce candidat à s’inscrire sur la plateforme Conseiller numérique'),
+        { selector: 'p' }
+      );
     expect(sousTitreIdentificationCandidat).toBeInTheDocument();
 
     const oui = screen.getByRole('radio', { name: 'Oui' });
     expect(oui).toBeRequired();
     expect(oui).toHaveAttribute('name', 'identificationCandidat');
+
     const non = screen.getByRole('radio', { name: 'Non' });
     expect(non).toBeRequired();
     expect(non).toHaveAttribute('name', 'identificationCandidat');
 
-    const dateAccueilConseillerNumerique = within(etapeBesoinConseillerNumerique).getByText(textMatcher('À partir de quand êtes vous prêt ' +
-      'à accueillir votre conseiller numerique ?*'), { selector: 'p' });
+    const dateAccueilConseillerNumerique = within(etapeBesoinConseillerNumerique).getByText(
+      textMatcher('À partir de quand êtes vous prêt à accueillir votre conseiller numerique ?*'),
+      { selector: 'p' }
+    );
     expect(dateAccueilConseillerNumerique).toBeInTheDocument();
+
     const date = within(etapeBesoinConseillerNumerique).getByLabelText('Choisir une date');
     expect(date).toHaveAttribute('type', 'date');
     expect(date).toBeRequired();
-
-    // THEN
-
   });
-  it.todo('quand j’affiche le formulaire alors l’étape "Votre motivation" est affiché');
 
+  it.todo('quand j’affiche le formulaire alors l’étape "Votre motivation" est affiché');
 });

src/views/candidature-structure/Sommaire.jsx → src/views/candidature-structure/SommaireStructure.jsx

@@ -1,5 +1,8 @@
-export default function Sommaire() {
-  const partiesSommaire = [
+import React from 'react';
+import Sommaire from '../../components/Sommaire';
+
+export default function SommaireStructure() {
+  const parties = [
     {
       ancre: '#informations-de-structure',
       libelle: 'Vos informations de structure'
@@ -17,19 +20,8 @@ export default function Sommaire() {
       libelle: 'Votre motivation'
     }
   ];
+
   return (
-    <nav aria-label="Sommaire">
-      <ul>
-        {
-          partiesSommaire.map(partieSommaire => (
-            <li key={partieSommaire.ancre}>
-              <a href={partieSommaire.ancre}>
-                {partieSommaire.libelle}
-              </a>
-            </li>
-          ))
-        }
-      </ul>
-    </nav>
+    <Sommaire parties={parties} />
   );
 }