partie Votre motivation + test

src/views/candidature-structure/CandidatureStructure.jsx

@@ -2,7 +2,9 @@ import React, { useState } from 'react';
 import SommaireStructure from './SommaireStructure';
 import InformationsDeContact from './InformationsDeContact';
 import BesoinEnConseillerNumerique from './BesoinEnConseillerNumerique';
+import Motivation from './Motivation';
 import { useScrollToSection } from '../../hooks/useScrollToSection';
+import ZoneDeTexte from '../../components/commun/ZoneDeTexte';
 
 import '@gouvfr/dsfr/dist/component/form/form.min.css';
 import '@gouvfr/dsfr/dist/component/input/input.min.css';
@@ -31,6 +33,8 @@ export default function CandidatureStructure() {
             {/* TODO : Vos informations de structure  */}
             <InformationsDeContact />
             <BesoinEnConseillerNumerique setDateAccueilConseillerNumerique={setDateAccueilConseillerNumerique} />
+            <Motivation />
+            {/* TODO : Engagement  */}
           </form>
         </div>
       </div>

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

@@ -118,5 +118,25 @@ describe('candidature structure', () => {
     expect(date).toBeRequired();
   });
 
-  it.todo('quand j’affiche le formulaire alors l’étape "Votre motivation" est affiché');
+  it('quand j’affiche le formulaire alors l’étape "Votre motivation" est affiché', () => {
+    // WHEN
+    render(<CandidatureStructure />);
+
+    // THEN
+    const formulaire = screen.getByRole('form', { name: 'Candidature structure' });
+    const etapeMotivation = within(formulaire).getByRole('group', { name: 'Votre motivation' });
+    expect(etapeMotivation).toHaveAttribute('id', 'votre-motivation');
+
+    const sousTitreVotreMotvation =
+      within(etapeMotivation).getByText('En quelques lignes, décrivez le motif de ' +
+          'votre besoin en recrutement. Indiquez les actions prévues, la justification du poste, ainsi que le public ciblé.',
+      { selector: 'p' }
+      );
+    expect(sousTitreVotreMotvation).toBeInTheDocument();
+
+    const votreMessage = within(etapeMotivation).getByLabelText('Votre message *');
+    expect(votreMessage).toHaveAttribute('id', 'votreMessage');
+    expect(votreMessage).toBeRequired();
+  });
+  it.todo('quand j’affiche le formulaire alors l’encart des engagements est affiché');
 });

src/views/candidature-structure/Motivation.jsx

@@ -0,0 +1,17 @@
+import React from 'react';
+import ZoneDeTexte from '../../components/commun/ZoneDeTexte';
+
+export default function Motivation() {
+  return (
+    <fieldset className="fr-border cc-section fr-p-3w fr-mb-3w" id="votre-motivation">
+      <legend className="fr-h5" id="votre-motivation">Votre motivation</legend>
+      <p className="fr-text--sm fr-hint-text">
+        En quelques lignes, décrivez le motif de votre besoin en recrutement.{' '}
+        Indiquez les actions prévues, la justification du poste, ainsi que le public ciblé.
+      </p>
+      <ZoneDeTexte id="votreMessage">
+        Votre message <span className="cc-obligatoire">*</span>
+      </ZoneDeTexte>
+    </fieldset>
+  );
+}