From ffa80b28d31448d92e30c13c2c3bc8f2c5ec508b Mon Sep 17 00:00:00 2001 From: Ornella <68587983+Ornella452@users.noreply.github.com> Date: Fri, 30 Aug 2024 11:08:48 +0200 Subject: [PATCH] =?UTF-8?q?Fix:=20input=20date=20avec=20la=20r=C3=A8gle=20?= =?UTF-8?q?minimum=20date=20du=20jour=20(#201)?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit * 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 Co-authored-by: Alezco --- src/components/commun/Datepicker.jsx | 7 ++++--- .../CandidatureConseiller.jsx | 1 - .../CandidatureConseiller.test.jsx | 18 ++++++++++++++---- .../candidature-conseiller/Disponibilite.jsx | 4 +++- src/views/candidature-conseiller/EnResume.jsx | 2 +- test/test-utils.js | 2 ++ 6 files changed, 24 insertions(+), 10 deletions(-) diff --git a/src/components/commun/Datepicker.jsx b/src/components/commun/Datepicker.jsx index 6bf4e64e..38589500 100644 --- 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 (
- +
); } @@ -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 index ffc9234e..70a9a723 100644 --- 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 index d7c9a026..4d13fc16 100644 --- 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,11 +239,14 @@ 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(); + 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( @@ -251,6 +254,7 @@ describe('candidature conseiller', () => { { 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(); 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(); 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 index 9cbe6fb3..1ef67d54 100644 --- 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 (
Votre disponibilité @@ -14,7 +16,7 @@ export default function Disponibilite({ setDateDisponibilite }) {

Accompagnement de personnes vers l’autonomie dans leurs usages de technologies, services et médias numériques.

- setDateDisponibilite(event.target.value)}> + setDateDisponibilite(event.target.value)} min={dateDuJour}> Choisir une date
diff --git a/src/views/candidature-conseiller/EnResume.jsx b/src/views/candidature-conseiller/EnResume.jsx index 18ee81f5..218f751b 100644 --- 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 index 7b6975eb..029c5294 100644 --- 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);