Fix: input date avec la règle minimum date du jour (#201)

* On ne peut pas valider le formulaire de candidature d'un conseiller si on n'a pas rempli au moins une situation Le test n'était pas correct car il testait que la phrase s'affiche mais le formulaire se validait quand même. * Simplification du formulaire de candidature conseiller en réduisant le nombre de rendu quand on coche une situation * rectif formulaire CN pour règle métier minimum date du jour * resolve test failed * Fix tests --------- Co-authored-by: Fabien Mercier <[email protected]> Co-authored-by: Alezco <[email protected]>
anct-cnum · Aug 30, 2024 · ffa80b2 · ffa80b2
1 parent e10bdbe
commit ffa80b2
Show file tree

Hide file tree

Showing 6 changed files with 24 additions and 10 deletions.
diff --git a/src/components/commun/Datepicker.jsx b/src/components/commun/Datepicker.jsx
@@ -1,13 +1,13 @@
 import React from 'react';
 import PropTypes from 'prop-types';
 
-export default function Datepicker({ children, id, isRequired = true, onChange }) {
+export default function Datepicker({ children, id, isRequired = true, onChange, min }) {
   return (
     <div className="fr-input-group">
       <label className="fr-label" htmlFor={id}>
         {children}
       </label>
-      <input className="fr-input cc-datepicker" id={id} type="date" required={isRequired} onChange={onChange} />
+      <input className="fr-input cc-datepicker" id={id} type="date" required={isRequired} onChange={onChange} min={min} />
     </div>
   );
 }
@@ -16,5 +16,6 @@ Datepicker.propTypes = {
   children: PropTypes.node,
   id: PropTypes.string,
   isRequired: PropTypes.bool,
-  onChange: PropTypes.func
+  onChange: PropTypes.func,
+  min: PropTypes.string
 };
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 { useScrollToSection } from '../../hooks/useScrollToSection';
 
 import '@gouvfr/dsfr/dist/component/form/form.min.css';

diff --git a/src/views/candidature-conseiller/CandidatureConseiller.test.jsx b/src/views/candidature-conseiller/CandidatureConseiller.test.jsx
@@ -1,7 +1,7 @@
 import { render, screen, within, fireEvent } from '@testing-library/react';
 import { describe, expect, it, vi } from 'vitest';
 import CandidatureConseiller from './CandidatureConseiller';
-import { textMatcher } from '../../../test/test-utils';
+import { textMatcher, dateDujour } from '../../../test/test-utils';
 
 vi.mock('react-router-dom', () => ({
   useLocation: () => ({ hash: '' }),
@@ -239,18 +239,22 @@ describe('candidature conseiller', () => {
 
   it('quand je modifie la date de disponibilité, alors elle s’affiche dans l’encart "En résumé"', () => {
     // GIVEN
+    vi.useFakeTimers();
+    vi.setSystemTime(new Date(2023, 11, 12, 13));
     render(<CandidatureConseiller />);
+    const date = dateDujour();
 
     // WHEN
     const dateDisponibilite = screen.getByLabelText('Choisir une date');
-    fireEvent.change(dateDisponibilite, { target: { value: '2023-12-12' } });
+    fireEvent.change(dateDisponibilite, { target: { value: date } });
 
     // THEN
     const titreResume = screen.getByText(
       textMatcher('Vous recherchez une certification et un emploi de conseiller numérique à partir du 12/12/2023.'),
       { selector: 'p' }
     );
     expect(titreResume).toBeInTheDocument();
+    vi.useRealTimers();
   });
 
   it('quand je renseigne un début de nom de ville qui existe alors plusieurs résultats sont affichés', async () => {
@@ -284,6 +288,8 @@ describe('candidature conseiller', () => {
 
   it('quand je coche au moins une case de situation et que je valide le formulaire alors il n’y a pas d’erreur de validation', () => {
     // GIVEN
+    vi.useFakeTimers();
+    vi.setSystemTime(new Date(2023, 11, 12, 13));
     render(<CandidatureConseiller />);
     const prenom = screen.getByLabelText('Prénom *');
     fireEvent.change(prenom, { target: { value: 'Jean' } });
@@ -296,7 +302,7 @@ describe('candidature conseiller', () => {
     const oui = screen.getByRole('radio', { name: 'Oui' });
     fireEvent.click(oui);
     const date = screen.getByLabelText('Choisir une date');
-    fireEvent.change(date, { target: { value: '2023-12-12' } });
+    fireEvent.change(date, { target: { value: dateDujour() } });
     const _5km = screen.getByRole('radio', { name: '5 km' });
     fireEvent.click(_5km);
     const descriptionMotivation = screen.getByLabelText('Votre message *');
@@ -309,10 +315,13 @@ describe('candidature conseiller', () => {
     // THEN
     const erreurCheckboxes = screen.queryByText('Vous devez cocher au moins une case', { selector: 'p' });
     expect(erreurCheckboxes).not.toBeInTheDocument();
+    vi.useRealTimers();
   });
 
   it('quand je ne coche pas de case de situation et que je valide le formulaire alors il y a une erreur de validation', () => {
     // GIVEN
+    vi.useFakeTimers();
+    vi.setSystemTime(new Date(2023, 11, 12, 13));
     render(<CandidatureConseiller />);
     const prenom = screen.getByLabelText('Prénom *');
     fireEvent.change(prenom, { target: { value: 'Jean' } });
@@ -323,7 +332,7 @@ describe('candidature conseiller', () => {
     const oui = screen.getByRole('radio', { name: 'Oui' });
     fireEvent.click(oui);
     const date = screen.getByLabelText('Choisir une date');
-    fireEvent.change(date, { target: { value: '2023-12-12' } });
+    fireEvent.change(date, { target: { value: dateDujour() } });
     const _5km = screen.getByRole('radio', { name: '5 km' });
     fireEvent.click(_5km);
     const descriptionMotivation = screen.getByLabelText('Votre message *');
@@ -336,5 +345,6 @@ describe('candidature conseiller', () => {
     // THEN
     const erreurCheckboxes = screen.getByText('Vous devez cocher au moins une case', { selector: 'p' });
     expect(erreurCheckboxes).toBeInTheDocument();
+    vi.useRealTimers();
   });
 });
diff --git a/src/views/candidature-conseiller/Disponibilite.jsx b/src/views/candidature-conseiller/Disponibilite.jsx
@@ -4,6 +4,8 @@ import Datepicker from '../../components/commun/Datepicker';
 import PropTypes from 'prop-types';
 
 export default function Disponibilite({ setDateDisponibilite }) {
+  const dateDuJour = new Date().toISOString().slice(0, 10);
+
   return (
     <fieldset className="fr-border cc-section fr-p-3w fr-mb-3w" id="votre-disponibilite">
       <legend className="fr-h5">Votre disponibilité</legend>
@@ -14,7 +16,7 @@ export default function Disponibilite({ setDateDisponibilite }) {
       <p className="fr-text--sm fr-hint-text">
         Accompagnement de personnes vers l’autonomie dans leurs usages de technologies, services et médias numériques.
       </p>
-      <Datepicker id="choisir-date" onChange={event => setDateDisponibilite(event.target.value)}>
+      <Datepicker id="choisir-date" onChange={event => setDateDisponibilite(event.target.value)} min={dateDuJour}>
         Choisir une date
       </Datepicker>
       <hr />

diff --git a/src/views/candidature-conseiller/EnResume.jsx b/src/views/candidature-conseiller/EnResume.jsx
@@ -8,7 +8,7 @@ export default function EnResume({ dateDisponibilite }) {
     if (dateDisponibilite === '') {
       return '[Renseignez votre date de disponibilité]';
     }
-    return new Date(dateDisponibilite).toLocaleDateString();
+    return new Date(dateDisponibilite).toLocaleDateString('fr-FR');
   };
 
   return (

diff --git a/test/test-utils.js b/test/test-utils.js
@@ -1,3 +1,5 @@
 export const textMatcher = wording => (_, element) => {
   return element?.textContent === wording;
 };
+
+export const dateDujour = () => new Date().toISOString().slice(0, 10);