retours revue et tests

components/chat/DisplayMessageBeneficiaire.tsx

@@ -61,7 +61,11 @@ export default function DisplayMessageBeneficiaire(
               <TexteAvecLien
                 texte={message.content}
                 lighten={true}
-                highlight={props.highlight}
+                highlight={
+                  props.highlight?.key === 'content'
+                    ? props.highlight
+                    : undefined
+                }
               />
             )}
 
@@ -154,7 +158,9 @@ function MessagePJ({
             id={id}
             nom={nom}
             className='fill-blanc'
-            highlight={highlight}
+            highlight={
+              highlight?.key === 'piecesJointes.nom' ? highlight : undefined
+            }
           />
         </>
       )

components/chat/DisplayMessageConseiller.tsx

@@ -131,7 +131,12 @@ function MessageConseiller(props: DisplayMessageConseillerProps) {
         {isConseillerCourant ? 'Vous' : conseillerNomComplet}
       </p>
 
-      <TexteAvecLien texte={message.content} highlight={props.highlight} />
+      <TexteAvecLien
+        texte={message.content}
+        highlight={
+          props.highlight?.key === 'content' ? props.highlight : undefined
+        }
+      />
 
       {message.type === TypeMessage.MESSAGE_OFFRE && message.infoOffre && (
         <LienOffre infoOffre={message.infoOffre} isSentByConseiller={true} />
@@ -162,7 +167,11 @@ function MessageConseiller(props: DisplayMessageConseillerProps) {
             id={id}
             nom={nom}
             className='fill-primary'
-            highlight={props.highlight}
+            highlight={
+              props.highlight?.key === 'piecesJointes.nom'
+                ? props.highlight
+                : undefined
+            }
           />
         ))}
 

components/chat/LienPieceJointe.tsx

@@ -15,14 +15,13 @@ export function LienPieceJointe({
   className?: string
   highlight?: MessageRechercheMatch
 }) {
-  const texteASurligner = highlight && highlight.key === 'piecesJointes.nom'
   function surlignerTexte(texte: string) {
-    const coordDebut = highlight!.match[0]
-    const coordFin = highlight!.match[1] + 1
+    const indexDebut = highlight!.match[0]
+    const indexFin = highlight!.match[1] + 1
 
-    const debut = texte.slice(0, coordDebut)
-    const highlightedText = texte.slice(coordDebut, coordFin)
-    const fin = texte.slice(coordFin)
+    const debut = texte.slice(0, indexDebut)
+    const highlightedText = texte.slice(indexDebut, indexFin)
+    const fin = texte.slice(indexFin)
 
     return parse(`${debut}<mark>${highlightedText}</mark>${fin}`)
   }
@@ -43,7 +42,7 @@ export function LienPieceJointe({
         className='font-bold break-all'
       >
         <span className='sr-only'>Télécharger la pièce jointe </span>
-        {texteASurligner ? surlignerTexte(nom) : nom}
+        {highlight ? surlignerTexte(nom) : nom}
       </a>
     </div>
   )

components/chat/TexteAvecLien.tsx

@@ -23,8 +23,8 @@ export default function TexteAvecLien({
     }
   }
 
-  function formateTexteAvecLien() {
-    const messageFormate = texte
+  function formateTexteAvecLien(texteAFormater: string) {
+    const messageFormate = texteAFormater
       .replaceAll('<', '&lt;')
       .replaceAll('>', '&gt;')
       .split(/\r?\n|\s+/)
@@ -77,22 +77,24 @@ export default function TexteAvecLien({
     return str.includes('http') || str.includes('https')
   }
 
-  function surlignerTexte(texte: string) {
+  function surlignerTexte(texteASurligner: string) {
     const coordDebut = highlight!.match[0]
     const coordFin = highlight!.match[1] + 1
 
-    const debut = texte.slice(0, coordDebut)
-    const highlightedText = texte.slice(coordDebut, coordFin)
-    const fin = texte.slice(coordFin)
+    const debut = texteASurligner.slice(0, coordDebut)
+    const highlightedText = texteASurligner.slice(coordDebut, coordFin)
+    const fin = texteASurligner.slice(coordFin)
 
     return `${debut}<mark>${highlightedText}</mark>${fin}`
   }
 
-  if (highlight && highlight.key === 'content') {
-    texte = surlignerTexte(texte)
+  let texteAAfficher = texte
+
+  if (highlight) {
+    texteAAfficher = surlignerTexte(texteAAfficher)
   }
 
-  if (!detecteLien(texte))
-    return parse(`<p className='whitespace-pre-wrap'>${texte}</p>`)
-  return <>{formateTexteAvecLien()}</>
+  if (!detecteLien(texteAAfficher))
+    return parse(`<p className='whitespace-pre-wrap'>${texteAAfficher}</p>`)
+  return <>{formateTexteAvecLien(texteAAfficher)}</>
 }

tests/components/DisplayMessageBeneficiaire.test.tsx

@@ -79,6 +79,33 @@ describe('<DiplayMessageBeneficiaire />', () => {
     expect(screen.getByText(/Modifié/)).toBeInTheDocument()
   })
 
+  it('affiche un résultat de recherche surligné', async () => {
+    const beneficiaireNomComplet = 'Père Castor'
+
+    //Given
+    const message = unMessage({
+      sentBy: 'jeune',
+      content: 'Je vais vous raconter une histoire',
+    })
+
+    //When
+    await act(async () => {
+      renderWithContexts(
+        <DisplayMessageBeneficiaire
+          message={message}
+          beneficiaireNomComplet={beneficiaireNomComplet}
+          highlight={{ match: [0, 1], key: 'content' }}
+        />
+      )
+    })
+
+    // Then
+    const markedElements = screen.getAllByText('Je', {
+      selector: 'mark',
+    })
+    expect(markedElements.length).toEqual(1)
+  })
+
   describe('quand il y a une pièce jointe', () => {
     it('pas de statut', async () => {
       const beneficiaireNomComplet = 'Père Castor'
@@ -248,5 +275,40 @@ describe('<DiplayMessageBeneficiaire />', () => {
       // Then
       expect(screen.getByText('Pièce jointe expirée')).toBeInTheDocument()
     })
+
+    it('affiche un résultat de recherche avec nom de la pj surligné', async () => {
+      const beneficiaireNomComplet = 'Père Castor'
+
+      //Given
+      const message = unMessage({
+        sentBy: 'jeune',
+        content: 'Je vais vous raconter une histoire',
+        infoPiecesJointes: [
+          {
+            id: 'id-pj',
+            nom: 'toto.jpg',
+            statut: 'valide',
+          },
+        ],
+        type: TypeMessage.MESSAGE_PJ,
+      })
+
+      //When
+      await act(async () => {
+        renderWithContexts(
+          <DisplayMessageBeneficiaire
+            message={message}
+            beneficiaireNomComplet={beneficiaireNomComplet}
+            highlight={{ match: [0, 3], key: 'piecesJointes.nom' }}
+          />
+        )
+      })
+
+      // Then
+      const markedElements = screen.getAllByText('toto', {
+        selector: 'mark',
+      })
+      expect(markedElements.length).toEqual(1)
+    })
   })
 })

tests/components/DisplayMessageConseiller.test.tsx

@@ -8,6 +8,8 @@ import { unConseiller } from 'fixtures/conseiller'
 import { unMessage } from 'fixtures/message'
 import { StructureConseiller } from 'interfaces/conseiller'
 import renderWithContexts from 'tests/renderWithContexts'
+import DisplayMessageBeneficiaire from 'components/chat/DisplayMessageBeneficiaire'
+import { TypeMessage } from 'interfaces/message'
 
 describe('<DiplayMessageConseiller />', () => {
   const nomConseiller = 'johnny boi'
@@ -132,4 +134,74 @@ describe('<DiplayMessageConseiller />', () => {
     expect(screen.getByText('· Modifié')).toBeInTheDocument()
     expect(screen.queryByText('· Lu')).not.toBeInTheDocument()
   })
+
+  describe('quand le message est un résultat de recherche', () => {
+    it('affiche le contenu surligné', async () => {
+      //GIVEN
+      const messageRecherche = unMessage({
+        sentBy: 'conseiller',
+        content: 'Hello, tu as pensé à envoyer ton CV ?',
+        conseillerId: customConseiller.id,
+      })
+
+      //WHEN
+      await act(async () => {
+        renderWithContexts(
+          <DisplayMessageConseiller
+            message={messageRecherche}
+            conseillerNomComplet={nomConseiller}
+            isConseillerCourant={message.conseillerId === customConseiller.id}
+            onSuppression={supprimerMessage}
+            onModification={modifierMessage}
+            isEnCoursDeModification={false}
+            highlight={{ match: [0, 4], key: 'content' }}
+          />
+        )
+      })
+
+      //THEN
+      const markedElements = screen.getAllByText('Hello', {
+        selector: 'mark',
+      })
+      expect(markedElements.length).toEqual(1)
+    })
+
+    it('affiche le nom de la pj surligné', async () => {
+      //GIVEN
+      const messageRecherche = unMessage({
+        sentBy: 'conseiller',
+        content: 'Hello, tu as pensé à envoyer ton CV ?',
+        infoPiecesJointes: [
+          {
+            id: 'id-pj',
+            nom: 'toto.jpg',
+            statut: 'valide',
+          },
+        ],
+        type: TypeMessage.MESSAGE_PJ,
+        conseillerId: customConseiller.id,
+      })
+
+      //WHEN
+      await act(async () => {
+        renderWithContexts(
+          <DisplayMessageConseiller
+            message={messageRecherche}
+            conseillerNomComplet={nomConseiller}
+            isConseillerCourant={message.conseillerId === customConseiller.id}
+            onSuppression={supprimerMessage}
+            onModification={modifierMessage}
+            isEnCoursDeModification={false}
+            highlight={{ match: [0, 3], key: 'piecesJointes.nom' }}
+          />
+        )
+      })
+
+      //THEN
+      const markedElements = screen.getAllByText('toto', {
+        selector: 'mark',
+      })
+      expect(markedElements.length).toEqual(1)
+    })
+  })
 })