Simplification du formulaire de candidature conseiller en réduisant l…

…e nombre de rendu quand on coche une situation
anct-cnum · Aug 12, 2024 · f2ceb10 · f2ceb10
1 parent 06f3d5b
commit f2ceb10
Show file tree

Hide file tree

Showing 5 changed files with 19 additions and 37 deletions.
diff --git a/src/components/commun/Checkbox.jsx b/src/components/commun/Checkbox.jsx
@@ -1,11 +1,11 @@
 import React from 'react';
 import PropTypes from 'prop-types';
 
-export default function Checkbox({ children, id, name, onCheck, checked }) {
+export default function Checkbox({ children, id, name, onCheck }) {
   return (
     <div className="fr-fieldset__element">
       <div className="fr-checkbox-group">
-        <input id={id} type="checkbox" name={name} onChange={onCheck} checked={checked} />
+        <input id={id} type="checkbox" name={name} onChange={onCheck} />
         <label className="fr-label" htmlFor={id}>
           {children}
         </label>
@@ -19,5 +19,4 @@ Checkbox.propTypes = {
   id: PropTypes.string,
   name: PropTypes.string,
   onCheck: PropTypes.func,
-  checked: PropTypes.bool,
 };
diff --git a/src/views/candidature-conseiller/CandidatureConseiller.jsx b/src/views/candidature-conseiller/CandidatureConseiller.jsx
@@ -5,7 +5,6 @@ import SituationEtExperience from './SituationEtExperience';
 import Disponibilite from './Disponibilite';
 import Motivation from './Motivation';
 import EnResume from './EnResume';
-import { situations } from './situations';
 
 import '@gouvfr/dsfr/dist/component/form/form.min.css';
 import '@gouvfr/dsfr/dist/component/input/input.min.css';
@@ -17,11 +16,8 @@ import '@gouvfr/dsfr/dist/component/sidemenu/sidemenu.min.css';
 import './CandidatureConseiller.css';
 
 export default function CandidatureConseiller() {
-  const [dateDisponibilite, setDateDisponibilite] = useState();
+  const [dateDisponibilite, setDateDisponibilite] = useState('');
   const [isSituationValid, setIsSituationValid] = useState(true);
-  const [situationChecks, setSituationChecks] = useState(
-    new Array(situations.length).fill(false)
-  );
 
   const validerLaCandidature = event => {
     event.preventDefault();
@@ -48,11 +44,7 @@ export default function CandidatureConseiller() {
           <p className="fr-text--sm fr-hint-text">Les champs avec <span className="cc-obligatoire">*</span> sont obligatoires.</p>
           <form aria-label="Candidature conseiller" onSubmit={validerLaCandidature}>
             <InformationsDeContact />
-            <SituationEtExperience
-              situationChecks={situationChecks}
-              setSituationChecks={setSituationChecks}
-              isSituationValid={isSituationValid}
-            />
+            <SituationEtExperience isSituationValid={isSituationValid} />
             <Disponibilite setDateDisponibilite={setDateDisponibilite} />
             <Motivation />
             <EnResume dateDisponibilite={dateDisponibilite} />

diff --git a/src/views/candidature-conseiller/CandidatureConseiller.test.jsx b/src/views/candidature-conseiller/CandidatureConseiller.test.jsx
@@ -106,7 +106,7 @@ describe('candidature conseiller', () => {
     expect(non).toHaveAttribute('name', 'experienceProfessionnelle');
   });
 
-  it('quand je coche "diplomé", un champ pour préciser le diplôme s’affiche', () => {
+  it('quand je coche "diplomé" alors un champ pour préciser le diplôme s’affiche', () => {
     // GIVEN
     render(<CandidatureConseiller />);
 
@@ -214,7 +214,7 @@ describe('candidature conseiller', () => {
     render(<CandidatureConseiller />);
 
     // THEN
-    const enResume = screen.getByText(textMatcher('En résumé'), { selector: 'p' });
+    const enResume = screen.getByText('En résumé', { selector: 'p' });
     expect(enResume).toBeInTheDocument();
 
     const titreResume = screen.getByText(
@@ -232,14 +232,13 @@ 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é" est affiché', () => {
     // GIVEN
     render(<CandidatureConseiller />);
-    const dateDisponibilite = '2023-12-12';
 
     // WHEN
-    const date = screen.getByLabelText('Choisir une date');
-    fireEvent.change(date, { target: { value: dateDisponibilite } });
+    const dateDisponibilite = screen.getByLabelText('Choisir une date');
+    fireEvent.change(dateDisponibilite, { target: { value: '2023-12-12' } });
 
     // THEN
     const titreResume = screen.getByText(
@@ -263,17 +262,17 @@ describe('candidature conseiller', () => {
       },
     ];
 
-    vi.spyOn(global, 'fetch').mockResolvedValue({
-      json: () => Promise.resolve(geoApiResponse)
+    vi.spyOn(global, 'fetch').mockResolvedValueOnce({
+      json: async () => Promise.resolve(geoApiResponse)
     });
 
     // WHEN
     const adresse = screen.getByLabelText('Votre lieu d’habitation Saississez le nom ou le code postal de votre commune.');
     fireEvent.change(adresse, { target: { value: 'par' } });
 
     // THEN
-    const paris = await screen.findByText(textMatcher('75001 Paris'), { selector: 'option' });
-    const parisot = await screen.findByText(textMatcher('82137 Parisot'), { selector: 'option' });
+    const paris = await screen.findByRole('option', { name: '75001 Paris', hidden: true });
+    const parisot = await screen.findByRole('option', { name: '82137 Parisot', hidden: true });
     expect(paris).toBeInTheDocument();
     expect(parisot).toBeInTheDocument();
   });
@@ -303,7 +302,7 @@ describe('candidature conseiller', () => {
     fireEvent.click(envoyer);
 
     // THEN
-    const erreurCheckboxes = screen.queryByText(textMatcher('Vous devez cocher au moins une case'), { selector: 'p' });
+    const erreurCheckboxes = screen.queryByText('Vous devez cocher au moins une case', { selector: 'p' });
     expect(erreurCheckboxes).not.toBeInTheDocument();
   });
 
@@ -330,7 +329,7 @@ describe('candidature conseiller', () => {
     fireEvent.click(envoyer);
 
     // THEN
-    const erreurCheckboxes = screen.getByText(textMatcher('Vous devez cocher au moins une case'), { selector: 'p' });
+    const erreurCheckboxes = screen.getByText('Vous devez cocher au moins une case', { selector: 'p' });
     expect(erreurCheckboxes).toBeInTheDocument();
   });
 });
diff --git a/src/views/candidature-conseiller/EnResume.jsx b/src/views/candidature-conseiller/EnResume.jsx
@@ -5,7 +5,7 @@ import PropTypes from 'prop-types';
 
 export default function EnResume({ dateDisponibilite }) {
   const formatDate = () => {
-    if (!dateDisponibilite) {
+    if (dateDisponibilite === '') {
       return '[Renseignez votre date de disponibilité]';
     }
     return new Date(dateDisponibilite).toLocaleDateString();

diff --git a/src/views/candidature-conseiller/SituationEtExperience.jsx b/src/views/candidature-conseiller/SituationEtExperience.jsx
@@ -5,16 +5,10 @@ import Input from '../../components/commun/Input';
 import { situations } from './situations';
 import PropTypes from 'prop-types';
 
-export default function SituationEtExperience({ situationChecks, setSituationChecks, isSituationValid }) {
+export default function SituationEtExperience({ isSituationValid }) {
   const [isDiplomeSelected, setIsDiplomeSelected] = useState(false);
 
   const handleCheck = event => {
-    const indexCaseCochee = situations.findIndex(situation => situation.id === event.target.id);
-    const updatedCheckedState = situationChecks.map((item, index) =>
-      index === indexCaseCochee ? !item : item
-    );
-    setSituationChecks(updatedCheckedState);
-
     setIsDiplomeSelected(event.target.id === 'diplome' && event.target.checked);
   };
 
@@ -25,8 +19,8 @@ export default function SituationEtExperience({ situationChecks, setSituationChe
       <p className="fr-mb-3w cc-bold">
         Êtes-vous actuellement dans l’une des situations suivantes ? <span className="cc-obligatoire">*</span>
       </p>
-      {situations.map(({ id, libelle }, index) =>
-        <Checkbox id={id} key={id} name="situations" onCheck={handleCheck} checked={situationChecks[index]}>
+      {situations.map(({ id, libelle }) =>
+        <Checkbox id={id} key={id} name="situations" onCheck={handleCheck}>
           {libelle}
         </Checkbox>
       )}
@@ -58,7 +52,5 @@ export default function SituationEtExperience({ situationChecks, setSituationChe
 }
 
 SituationEtExperience.propTypes = {
-  situationChecks: PropTypes.array,
-  setSituationChecks: PropTypes.func,
   isSituationValid: PropTypes.bool
 };