test formulaire partie 'information contact' + 'votre besoin CN'

src/App.js

@@ -37,6 +37,7 @@ function App() {
   const CoordinationTerritoriale = lazy(() => import('./views/coordination-territoriale'));
   const CarteCoordinateur = lazy(() => import('./views/coordination-territoriale/CarteCoordinateur'));
   const PageCandidatureConseiller = lazy(() => import('./views/candidature-conseiller/PageCandidatureConseiller'));
+  const PageCandidatureStructure = lazy(() => import('./views/candidature-structure/PageCandidatureStructure'));
 
   return (
     <div className="App">
@@ -45,6 +46,7 @@ function App() {
           <Routes>
             <Route path="/accueil" element={<GestionHash />}/>
             <Route path="/nouveau-formulaire-conseiller" element={<PageCandidatureConseiller />}/>
+            <Route path="/nouveau-formulaire-structure" element={<PageCandidatureStructure />}/>
             <Route path="/kit-communication" element={<KitCommunication />}/>
             <Route path="/donnees-personnelles" element={<DonneesPersonnelles />}/>
             <Route path="/mentions-legales" element={<MentionsLegales />}/>

src/views/candidature-structure/BesoinEnConseillerNumerique.jsx

@@ -0,0 +1,36 @@
+import React from 'react';
+
+import BoutonRadio from '../../components/commun/BoutonRadio';
+import Datepicker from '../../components/commun/Datepicker';
+import Input from '../../components/commun/Input';
+import PropTypes from 'prop-types';
+
+export default function BesoinEnConseillerNumerique({ setDateAccueilConseillerNumerique }) {
+  return (
+    <fieldset className="fr-border cc-section fr-p-3w fr-mb-3w" id="votre-besoin-en-conseiller-numerique">
+      <legend className="fr-h5">Votre besoin en conseiller(s) numérique(s)</legend>
+      <hr />
+      <Input id="nombreConseillersSouhaites" type="number">
+        Combien de conseillers numériques souhaitez-vous accueillir ?<span className="cc-obligatoire">*</span>
+      </Input>
+      <hr />
+      <p className="fr-mb-3w cc-bold">Avez-vous déjà identifié un candidat pour le poste de conseiller numérique ?<span className="cc-obligatoire">*</span></p>
+      <p className="fr-text--sm fr-hint-text">Si oui, merci d’inviter ce candidat à s’inscrire sur la plateforme Conseiller numérique</p>
+      <BoutonRadio id="oui" nomGroupe="identificationCandidat">
+        Oui
+      </BoutonRadio>
+      <BoutonRadio id="non" nomGroupe="identificationCandidat">
+        Non
+      </BoutonRadio>
+      <hr />
+      <p className="fr-mb-3w cc-bold">À partir de quand êtes vous prêt à accueillir votre conseiller numerique ?<span className="cc-obligatoire">*</span></p>
+      <Datepicker id="choisir-date" onChange={event => setDateAccueilConseillerNumerique(event.target.value)}>
+        Choisir une date
+      </Datepicker>
+    </fieldset >
+  );
+}
+
+BesoinEnConseillerNumerique.propTypes = {
+  setDateAccueilConseillerNumerique: PropTypes.func,
+};

src/views/candidature-structure/CandidatureStructure.jsx

@@ -1,12 +1,27 @@
-import React from 'react';
+import React, { useState } from 'react';
 import Sommaire from './Sommaire';
+import InformationsDeContact from './InformationsDeContact';
+import BesoinEnConseillerNumerique from './BesoinEnConseillerNumerique';
 
 export default function CandidatureStructure() {
+  const [dateAccueilConseillerNumerique, setDateAccueilConseillerNumerique] = useState();
+
   return (
-    <div>
-      <h1>Je souhaite engager un conseiller numérique</h1>
-      <p className="fr-text--sm fr-hint-text">Les champs avec <span className="cc-obligatoire">*</span> sont obligatoires.</p>
-      <Sommaire />
+    <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 />
+        </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>
+          <p className="fr-text--sm fr-hint-text">Les champs avec <span className="cc-obligatoire">*</span> sont obligatoires.</p>
+          <form aria-label="Candidature structure" >
+            {/* TODO : Vos informations de structure  */}
+            <InformationsDeContact />
+            <BesoinEnConseillerNumerique setDateAccueilConseillerNumerique={setDateAccueilConseillerNumerique} />
+          </form>
+        </div>
+      </div>
     </div>
   );
 }

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

@@ -2,9 +2,10 @@ import { render, screen, within } from '@testing-library/react';
 import { describe, expect, it } from 'vitest';
 import CandidatureStructure from './CandidatureStructure';
 import { textMatcher } from '../../../test/test-utils';
+
 describe('candidature structure', () => {
   describe('étant une structure', () => {
-    it('quand j’affiche le formulaire alors le titre et le menu s’affichent', () => {
+    it.todo('quand j’affiche le formulaire alors le titre et le menu s’affichent', () => {
       // WHEN
       render(<CandidatureStructure />);
 
@@ -35,4 +36,81 @@ describe('candidature structure', () => {
       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
+    render(<CandidatureStructure />);
+
+    // WHEN
+    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');
+
+    const prenom = within(etapeInformationsDeContact).getByLabelText('Prénom *');
+    expect(prenom).toHaveAttribute('type', 'text');
+    expect(prenom).toBeRequired();
+
+    const nom = within(etapeInformationsDeContact).getByLabelText('Nom *');
+    expect(nom).toHaveAttribute('type', 'text');
+    expect(nom).toBeRequired();
+
+    const fonction = within(etapeInformationsDeContact).getByLabelText('Fonction *');
+    expect(fonction).toHaveAttribute('type', 'text');
+    expect(fonction).toBeRequired();
+
+    const email = within(etapeInformationsDeContact).getByLabelText('Adresse e-mail *');
+    expect(email).toHaveAttribute('type', 'email');
+    expect(email).toBeRequired();
+
+    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
+    render(<CandidatureStructure />);
+
+    // WHEN
+    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');
+
+    const combienConseillerNumerique = within(etapeBesoinConseillerNumerique).getByLabelText('Combien de conseillers numériques souhaitez-vous accueillir ?*');
+    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' });
+    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' });
+    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' });
+    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é');
+
 });

src/views/candidature-structure/InformationsDeContact.jsx

@@ -0,0 +1,39 @@
+import React from 'react';
+import Input from '../../components/commun/Input';
+
+export default function InformationsDeContact() {
+  return (
+    <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
+        id="prenom"
+      >
+        Prénom <span className="cc-obligatoire">*</span>
+      </Input>
+      <Input
+        id="nom"
+      >
+        Nom <span className="cc-obligatoire">*</span>
+      </Input>
+      <Input
+        id="fonction"
+      >
+        Fonction <span className="cc-obligatoire">*</span>
+      </Input>
+      <Input
+        id="email"
+        type="email"
+      >
+        Adresse e-mail <span className="cc-obligatoire">*</span>
+      </Input>
+      <Input
+        id="telephone"
+        type="tel"
+        pattern="0[1-9]{9}"
+      >
+        Téléphone <span className="cc-obligatoire">*</span>
+      </Input>
+    </fieldset>
+  );
+}

src/views/candidature-structure/PageCandidatureStructure.jsx

@@ -0,0 +1,12 @@
+import React from 'react';
+import Header from '../../components/Header';
+import CandidatureStructure from './CandidatureStructure';
+
+export default function PageCandidatureStructure() {
+  return (
+    <>
+      <Header />
+      <CandidatureStructure />
+    </>
+  );
+}