feat: ameliorations commentaire action

SocialGouv · Nov 27, 2024 · c992882 · c992882
1 parent 293c505
commit c992882
Show file tree

Hide file tree

Showing 4 changed files with 36 additions and 16 deletions.
diff --git a/...)/(with-sidebar)/(with-chat)/mes-jeunes/[idJeune]/actions/[idAction]/DetailActionPage.tsx b/...)/(with-sidebar)/(with-chat)/mes-jeunes/[idJeune]/actions/[idAction]/DetailActionPage.tsx
@@ -243,7 +243,11 @@ function DetailActionPage({
         </dl>
       </div>
 
-      <CommentaireAction action={action} beneficiaire={jeune} />
+      <CommentaireAction
+        action={action}
+        beneficiaire={jeune}
+        initiallyOpened={!action.comment}
+      />
 
       <HistoriqueAction action={action} />
 

diff --git a/components/Details.tsx b/components/Details.tsx
@@ -13,18 +13,19 @@ import IconComponent, { IconName } from 'components/ui/IconComponent'
 interface DetailsProps {
   summary: string
   children: ReactNode
+  initiallyOpened?: boolean
 }
 
 function Details(
-  { summary, children }: DetailsProps,
+  { summary, children, initiallyOpened = false }: DetailsProps,
   ref: ForwardedRef<{ focusSummary: () => void }>
 ) {
   const detailsRef = useRef<HTMLDetailsElement>(null)
   useImperativeHandle(ref, () => ({
     focusSummary: () => detailsRef.current!.querySelector('summary')!.focus(),
   }))
 
-  const [expanded, setExpanded] = useState<boolean>()
+  const [expanded, setExpanded] = useState<boolean>(initiallyOpened)
 
   useEffect(() => {
     function toggleExpanded() {
@@ -40,6 +41,7 @@ function Details(
     <details
       ref={detailsRef}
       className='bg-primary_lighten p-6 mt-8 rounded-base shadow-base'
+      open={initiallyOpened}
     >
       <summary
         className={`text-m-bold text-primary relative flex justify-between items-center cursor-pointer ${expanded ? 'mb-5' : ''}`}

diff --git a/components/action/CommentaireAction.tsx b/components/action/CommentaireAction.tsx
@@ -14,18 +14,22 @@ import { useChatCredentials } from 'utils/chat/chatCredentialsContext'
 interface CommentaireActionProps {
   beneficiaire: BaseBeneficiaire
   action: Action
+  initiallyOpened: boolean
 }
 
 export default function CommentaireAction({
   beneficiaire,
   action,
+  initiallyOpened,
 }: CommentaireActionProps) {
   const chatCredentials = useChatCredentials()
   const detailsRef = useRef<{ focusSummary: () => void }>(null)
   const inputRef = useRef<HTMLTextAreaElement>(null)
 
+  const DEFAULT_MESSAGE =
+    'Pouvez-vous compléter la description de cette action s’il vous plaît ?'
   const [message, setMessage] = useState<ValueWithError<string | undefined>>({
-    value: undefined,
+    value: DEFAULT_MESSAGE,
   })
   const [envoiEnCours, setEnvoiEnCours] = useState<boolean>(false)
   const [succesEnvoi, setSuccesEnvoi] = useState<boolean | undefined>(undefined)
@@ -58,7 +62,11 @@ export default function CommentaireAction({
   }
 
   return (
-    <Details summary='Commentaire' ref={detailsRef}>
+    <Details
+      summary='Commentaire'
+      ref={detailsRef}
+      initiallyOpened={initiallyOpened}
+    >
       {succesEnvoi && (
         <SuccessAlert
           label='Votre message a bien été envoyé, retrouvez le dans votre conversation avec le bénéficiaire.'
@@ -80,6 +88,7 @@ export default function CommentaireAction({
       <Textarea
         ref={inputRef}
         id='commentaire-action'
+        defaultValue={message.value}
         onChange={(value) => setMessage({ value })}
         invalid={Boolean(message.error)}
         required

diff --git a/tests/pages/DetailActionPage.test.tsx b/tests/pages/DetailActionPage.test.tsx
@@ -155,26 +155,31 @@ describe('ActionPage client side', () => {
 
         it('demande la saisi d’un message', async () => {
           expect(
-            within(group).getByRole('button', {
-              name: 'Envoyer au bénéficiaire',
+            within(group).getByRole('textbox', {
+              name: 'Demander plus d’information au bénéficiaire sur l’action',
             })
-          ).toHaveAttribute('disabled')
+          ).toHaveValue(
+            'Peux-tu renseigner la description de cette action s’il te plaît ?'
+          )
         })
 
         it('envoie un message', async () => {
           //
           expect(group).toHaveAttribute('open')
 
           // Given
-          const pouet = within(group).getByRole('textbox', {
-            name: 'Demander plus d’information au bénéficiaire sur l’action',
-          })
           // FIXME pourquoi ça marche pas avec userEvent.click ? 🤨
-          fireEvent.change(pouet, {
-            target: {
-              value: 'Peux tu me détailler quelles recherches tu as fait stp ?',
-            },
-          })
+          fireEvent.change(
+            within(group).getByRole('textbox', {
+              name: 'Demander plus d’information au bénéficiaire sur l’action',
+            }),
+            {
+              target: {
+                value:
+                  'Peux tu me détailler quelles recherches tu as fait stp ?',
+              },
+            }
+          )
 
           // When
           await userEvent.click(