a11y: historique beneficiaire page tests

SocialGouv · Jul 8, 2024 · dc7a866 · dc7a866
1 parent f2b356b
commit dc7a866
Show file tree

Hide file tree

Showing 3 changed files with 167 additions and 67 deletions.
diff --git a/components/jeune/BlocInformationJeune.tsx b/components/jeune/BlocInformationJeune.tsx
@@ -46,19 +46,21 @@ export function BlocInformationJeune({
             </dd>
           </div>
         )}
+      </dl>
 
-        {email && <Email email={email} />}
+      {email && <Email email={email} />}
 
-        {!conseillerEstMilo &&
-          onIdentifiantPartenaireCopie &&
-          onIdentifiantPartenaireClick && (
-            <IdentifiantPartenaire
-              identifiantPartenaire={identifiantPartenaire}
-              onCopy={onIdentifiantPartenaireCopie}
-              onClick={onIdentifiantPartenaireClick}
-            />
-          )}
+      {!conseillerEstMilo &&
+        onIdentifiantPartenaireCopie &&
+        onIdentifiantPartenaireClick && (
+          <IdentifiantPartenaire
+            identifiantPartenaire={identifiantPartenaire}
+            onCopy={onIdentifiantPartenaireCopie}
+            onClick={onIdentifiantPartenaireClick}
+          />
+        )}
 
+      <dl>
         {urlDossier && (
           <DossierExterne href={urlDossier} onClick={onDossierMiloClick} />
         )}

diff --git a/tests/pages/InformationsPage.server.test.tsx → tests/pages/HistoriquePage.server.test.tsx b/tests/pages/InformationsPage.server.test.tsx → tests/pages/HistoriquePage.server.test.tsx
diff --git a/tests/pages/InformationsPage.test.tsx → tests/pages/HistoriquePage.test.tsx b/tests/pages/InformationsPage.test.tsx → tests/pages/HistoriquePage.test.tsx
@@ -1,5 +1,6 @@
-import { act, screen } from '@testing-library/react'
+import { act, RenderResult, screen } from '@testing-library/react'
 import userEvent from '@testing-library/user-event'
+import { axe, toHaveNoViolations } from 'jest-axe'
 import { DateTime } from 'luxon'
 import { usePathname, useRouter } from 'next/navigation'
 import React from 'react'
@@ -23,11 +24,13 @@ import { recupererAgenda } from 'services/agenda.service'
 import { getIndicateursJeuneComplets } from 'services/jeunes.service'
 import { getByTextContent } from 'tests/querySelector'
 import renderWithContexts from 'tests/renderWithContexts'
+expect.extend(toHaveNoViolations)
 
 jest.mock('services/jeunes.service')
 jest.mock('services/agenda.service')
 
-describe('InformationsPage client side', () => {
+describe('HistoriquePage client side', () => {
+  let container: HTMLElement
   const listeSituations = [
     {
       etat: EtatSituation.EN_COURS,
@@ -48,50 +51,97 @@ describe('InformationsPage client side', () => {
 
   describe('quand l’utilisateur est un conseiller Mission Locale', () => {
     describe('pour les Situations', () => {
-      it('affiche un onglet dédié', async () => {
-        // Given
-        await renderHistorique([], [], StructureConseiller.MILO, jeune)
+      describe('affiche un onglet dédié', () => {
+        beforeEach(async () => {
+          // Given
+          container = await renderHistorique(
+            [],
+            [],
+            StructureConseiller.MILO,
+            jeune
+          )
+        })
 
-        // Then
-        expect(
-          screen.getByRole('tab', { selected: true })
-        ).toHaveAccessibleName('Informations')
+        it('a11y', async () => {
+          const results = await axe(container)
+          expect(results).toHaveNoViolations()
+        })
+
+        it('contenu', () => {
+          // Then
+          expect(
+            screen.getByRole('tab', { selected: true })
+          ).toHaveAccessibleName('Informations')
+        })
       })
 
-      it('afiche les informations de la fiche d’un bénéficiaire', async () => {
-        //When
-        await renderHistorique([], [], StructureConseiller.MILO, jeune)
-        //Then
-        expect(screen.getByText('Bénéficiaire')).toBeInTheDocument()
-        expect(screen.getByText('kenji.jirac@email.fr')).toBeInTheDocument()
-        expect(screen.getByText('07/12/2021')).toBeInTheDocument()
-        expect(screen.getByText('Dossier jeune i-milo')).toHaveAttribute(
-          'href',
-          'https://dossier-milo.fr'
-        )
+      describe('affiche les informations de la fiche d’un bénéficiaire', () => {
+        beforeEach(async () => {
+          //When
+          container = await renderHistorique(
+            [],
+            [],
+            StructureConseiller.MILO,
+            jeune
+          )
+        })
+
+        it('a11y', async () => {
+          const results = await axe(container)
+          expect(results).toHaveNoViolations()
+        })
+
+        it('contenu', () => {
+          //Then
+          expect(screen.getByText('Bénéficiaire')).toBeInTheDocument()
+          expect(screen.getByText('kenji.jirac@email.fr')).toBeInTheDocument()
+          expect(screen.getByText('07/12/2021')).toBeInTheDocument()
+          expect(screen.getByText('Dossier jeune i-milo')).toHaveAttribute(
+            'href',
+            'https://dossier-milo.fr'
+          )
+        })
       })
 
       describe('quand le jeune n’a aucune situation', () => {
-        it('affiche les informations concernant la situation du jeune', async () => {
+        beforeEach(async () => {
           // Given
-          await renderHistorique([], [], StructureConseiller.MILO, jeune)
+          container = await renderHistorique(
+            [],
+            [],
+            StructureConseiller.MILO,
+            jeune
+          )
+        })
 
+        it('a11y', async () => {
+          const results = await axe(container)
+          expect(results).toHaveNoViolations()
+        })
+
+        it('affiche les informations concernant la situation du jeune', () => {
           // Then
           expect(screen.getByText('Sans situation')).toBeInTheDocument()
         })
       })
 
       describe('quand le jeune a une liste de situations', () => {
-        it('affiche les informations concernant la situation du jeune ', async () => {
+        beforeEach(async () => {
           // Given
-
-          await renderHistorique(
+          container = await renderHistorique(
             listeSituations,
             [],
             StructureConseiller.MILO,
             jeune
           )
+        })
 
+        it('a11y', async () => {
+          const results = await axe(container)
+          expect(results).toHaveNoViolations()
+        })
+
+        it('affiche les informations concernant la situation du jeune ', async () => {
           // Then
           expect(screen.getByText('Emploi')).toBeInTheDocument()
           expect(screen.getByText('en cours')).toBeInTheDocument()
@@ -104,7 +154,12 @@ describe('InformationsPage client side', () => {
     describe('pour l’indicateur des conseillers', () => {
       beforeEach(async () => {
         //Given
-        await renderHistorique([], [], StructureConseiller.MILO, jeune)
+        container = await renderHistorique(
+          [],
+          [],
+          StructureConseiller.MILO,
+          jeune
+        )
 
         // When
         const tabIndicateurs = screen.getByRole('tab', {
@@ -113,6 +168,11 @@ describe('InformationsPage client side', () => {
         await userEvent.click(tabIndicateurs)
       })
 
+      it('a11y', async () => {
+        const results = await axe(container)
+        expect(results).toHaveNoViolations()
+      })
+
       it('affiche un onglet dédié', async () => {
         //Then
         expect(
@@ -176,50 +236,85 @@ describe('InformationsPage client side', () => {
     })
 
     describe('pour l’Historique des conseillers', () => {
-      it('affiche un onglet dédié', async () => {
-        // Given
-        await renderHistorique([], [], StructureConseiller.MILO, jeune)
+      describe('affiche un onglet dédié', () => {
+        beforeEach(async () => {
+          // Given
+          container = await renderHistorique(
+            [],
+            [],
+            StructureConseiller.MILO,
+            jeune
+          )
 
-        // When
-        const tabConseillers = screen.getByRole('tab', {
-          name: 'Historique des conseillers',
+          // When
+          const tabConseillers = screen.getByRole('tab', {
+            name: 'Historique des conseillers',
+          })
+          await userEvent.click(tabConseillers)
         })
-        await userEvent.click(tabConseillers)
 
-        // Then
-        expect(
-          screen.getByRole('tab', { selected: true })
-        ).toHaveAccessibleName('Historique des conseillers')
+        it('a11y', async () => {
+          const results = await axe(container)
+          expect(results).toHaveNoViolations()
+        })
+
+        it('contenu', () => {
+          // Then
+          expect(
+            screen.getByRole('tab', { selected: true })
+          ).toHaveAccessibleName('Historique des conseillers')
+        })
       })
 
-      it('affiche la liste complète des conseillers du jeune', async () => {
-        // Given
-        await renderHistorique(
-          [],
-          listeConseillers,
-          StructureConseiller.MILO,
-          jeune
-        )
+      describe('affiche la liste complète des conseillers du jeune', () => {
+        beforeEach(async () => {
+          //Given
+          container = await renderHistorique(
+            [],
+            listeConseillers,
+            StructureConseiller.MILO,
+            jeune
+          )
 
-        // When
-        const tabConseillers = screen.getByRole('tab', {
-          name: 'Historique des conseillers',
+          // When
+          const tabConseillers = screen.getByRole('tab', {
+            name: 'Historique des conseillers',
+          })
+          await userEvent.click(tabConseillers)
         })
-        await userEvent.click(tabConseillers)
 
-        //Then
-        listeConseillers.forEach(({ nom, prenom }: ConseillerHistorique) => {
-          expect(screen.getByText(`${nom} ${prenom}`)).toBeInTheDocument()
+        it('a11y', async () => {
+          const results = await axe(container)
+          expect(results).toHaveNoViolations()
+        })
+
+        it('contenu', () => {
+          //Then
+          listeConseillers.forEach(({ nom, prenom }: ConseillerHistorique) => {
+            expect(screen.getByText(`${nom} ${prenom}`)).toBeInTheDocument()
+          })
         })
       })
     })
   })
 
   describe('quand l’utilisateur est un conseiller France Travail', () => {
-    it('n’affiche pas l’onglet Indicateurs', async () => {
+    beforeEach(async () => {
       // Given
-      await renderHistorique([], [], StructureConseiller.POLE_EMPLOI, jeune)
+      container = await renderHistorique(
+        [],
+        [],
+        StructureConseiller.POLE_EMPLOI,
+        jeune
+      )
+    })
+
+    it('a11y', async () => {
+      const results = await axe(container)
+      expect(results).toHaveNoViolations()
+    })
 
+    it('n’affiche pas l’onglet Indicateurs', async () => {
       // Then
       expect(() => screen.getByText('Indicateurs')).toThrow()
       expect(
@@ -241,14 +336,15 @@ async function renderHistorique(
   conseillers: ConseillerHistorique[],
   structure: StructureConseiller,
   beneficiaire: DetailBeneficiaire
-) {
+): Promise<HTMLElement> {
+  let container: HTMLElement
   const SEPTEMBRE_1 = DateTime.fromISO('2022-09-01T14:00:00.000+02:00')
   jest.spyOn(DateTime, 'now').mockReturnValue(SEPTEMBRE_1)
   ;(getIndicateursJeuneComplets as jest.Mock).mockResolvedValue(
     desIndicateursSemaine()
   )
   await act(async () => {
-    renderWithContexts(
+    ;({ container } = renderWithContexts(
       <Historique
         idBeneficiaire={'id'}
         situations={situations}
@@ -259,6 +355,8 @@ async function renderHistorique(
         onglet={'INFORMATIONS'}
       />,
       { customConseiller: { structure: structure } }
-    )
+    ))
   })
+
+  return container
 }