:fix réinitialisation du drawer après invitation #89

package.json

@@ -88,6 +88,7 @@
     "knip": "^5.37.2",
     "prettier": "^3.3.3",
     "prisma": "^5.21.1",
+    "react-select-event": "^5.5.1",
     "stylelint": "^16.10.0",
     "stylelint-config-standard": "^36.0.1",
     "stylelint-order": "^6.0.4",

src/components/MesUtilisateurs/InviterUnUtilisateur.tsx

@@ -186,6 +186,7 @@ export default function InviterUnUtilisateur({
 
   function fermerEtReinitialiser(htmlFormElement: HTMLFormElement): void {
     setIsOpen(false)
+    setRoleSelectionne('')
     window.dsfr(dialogRef.current).modal.conceal()
     htmlFormElement.reset()
   }

src/components/MesUtilisateurs/MesUtilisateurs.test.tsx

@@ -1,4 +1,5 @@
 import { fireEvent, screen, waitFor, within } from '@testing-library/react'
+import selectEvent from 'react-select-event'
 import { Mock } from 'vitest'
 
 import MesUtilisateurs from './MesUtilisateurs'
@@ -852,7 +853,7 @@ describe('mes utilisateurs', () => {
       expect(envoyerInvitation).toHaveAttribute('type', 'submit')
     })
 
-    it('dans le drawer d’invitation, quand je remplis correctement le formulaire et avec un nouveau mail, alors un message de validation s’affiche', async () => {
+    it('en invitant un membre du groupe admin, dans le drawer d’invitation, quand je remplis correctement le formulaire et avec un nouveau mail, alors un message de validation s’affiche et le drawer est réinitialisé', async () => {
       // GIVEN
       const inviterUnUtilisateurAction = vi.fn(async () => Promise.resolve(['OK']))
       const windowDsfr = window.dsfr
@@ -917,6 +918,84 @@ describe('mes utilisateurs', () => {
       window.dsfr = windowDsfr
     })
 
+    it('en invitant un membre du groupe gestionnaire, dans le drawer d’invitation, quand je remplis correctement le formulaire et avec un nouveau mail, alors un message de validation s’affiche et le drawer est réinitialisé', async () => {
+      const roleGestionnaireLabelSelectionMapping = {
+        'Gestionnaire département': 'Département',
+        'Gestionnaire groupement': 'Groupement',
+        'Gestionnaire région': 'Région',
+        'Gestionnaire structure': 'Structure',
+      }
+      // GIVEN
+      const inviterUnUtilisateurAction = vi.fn(async () => Promise.resolve(['OK']))
+      const windowDsfr = window.dsfr
+      window.dsfr = (): {modal: {conceal: Mock}} => {
+        return {
+          modal: {
+            conceal: vi.fn(),
+          },
+        }
+      }
+      const mesUtilisateursViewModel = mesUtilisateursPresenter([utilisateurActifReadModel, utilisateurEnAttenteReadModel], 'fooId', totalUtilisateur)
+      renderComponent(
+        <MesUtilisateurs mesUtilisateursViewModel={mesUtilisateursViewModel} />, {
+          inviterUnUtilisateurAction,
+          sessionUtilisateurViewModel: sessionUtilisateurViewModelFactory({
+            role: {
+              groupe: 'admin',
+              libelle: 'Rhône',
+              nom: 'Administrateur dispositif',
+              pictogramme: 'maille',
+              rolesGerables: [
+                'Administrateur dispositif',
+                'Gestionnaire département',
+                'Gestionnaire groupement',
+                'Gestionnaire région',
+                'Gestionnaire structure',
+                'Instructeur',
+                'Pilote politique publique',
+                'Support animation',
+              ],
+            },
+          }),
+        }
+      )
+      const inviter = screen.getByRole('button', { name: 'Inviter une personne' })
+      fireEvent.click(inviter)
+      const formulaireInvitation = screen.getByRole('dialog', { name: 'Invitez un utilisateur à rejoindre l’espace de gestion' })
+      const roleRadios = within(formulaireInvitation).getAllByRole('radio')
+      // WHEN
+      const nom = within(formulaireInvitation).getByLabelText('Nom *')
+      fireEvent.change(nom, { target: { value: 'Tartempion' } })
+      const prenom = within(formulaireInvitation).getByLabelText('Prénom *')
+      fireEvent.change(prenom, { target: { value: 'Martin' } })
+      const email = within(formulaireInvitation).getByLabelText(/Adresse électronique/)
+      fireEvent.change(email, { target: { value: '[email protected]' } })
+      const gestionnaireRole = within(formulaireInvitation).getByLabelText('Gestionnaire département')
+      fireEvent.click(gestionnaireRole)
+      const departementSelect = within(formulaireInvitation).getByLabelText('Département *')
+      expect(departementSelect).toBeInTheDocument()
+      // eslint-disable-next-line import/no-named-as-default-member
+      await selectEvent.select(departementSelect, 'Ain')
+      const envoyerInvitation = await within(formulaireInvitation).findByRole('button', { name: 'Envoyer l’invitation' })
+      fireEvent.click(envoyerInvitation)
+
+      // THEN
+      const notification = await screen.findByRole('alert')
+      expect(notification).toHaveTextContent('Invitation envoyée à [email protected]')
+      expect(formulaireInvitation).not.toHaveAttribute('open', '')
+      expect(nom).toHaveValue('')
+      expect(prenom).toHaveValue('')
+      expect(email).toHaveValue('')
+      roleRadios.forEach((roleRadio) => {
+        expect(roleRadio).not.toBeChecked()
+      })
+      Object.values(roleGestionnaireLabelSelectionMapping).forEach((labelChampSelection) => {
+        const champSelection = within(formulaireInvitation).queryByLabelText(`${labelChampSelection} *`)
+        expect(champSelection).not.toBeInTheDocument()
+      })
+      window.dsfr = windowDsfr
+    })
+
     it('dans le drawer d’invitation, quand je remplis correctement le formulaire et avec un mail existant, alors il y a un message d’erreur', async () => {
       // GIVEN
       const inviterUnUtilisateurAction = vi.fn(async () => Promise.resolve(['emailExistant']))

yarn.lock

@@ -3732,7 +3732,7 @@ __metadata:
   languageName: node
   linkType: hard
 
-"@testing-library/dom@npm:^10.4.0":
+"@testing-library/dom@npm:>=7, @testing-library/dom@npm:^10.4.0":
   version: 10.4.0
   resolution: "@testing-library/dom@npm:10.4.0"
   dependencies:
@@ -10425,6 +10425,15 @@ __metadata:
   languageName: node
   linkType: hard
 
+"react-select-event@npm:^5.5.1":
+  version: 5.5.1
+  resolution: "react-select-event@npm:5.5.1"
+  dependencies:
+    "@testing-library/dom": "npm:>=7"
+  checksum: 10c0/908b4961b0c981223b2731ecf28e707b600fb71e9681c9be7185693623663b5e319cd2b77a8bdae471aa27f2b7838773e593982fea1523bde5fd5485dd9b154a
+  languageName: node
+  linkType: hard
+
 "react-select@npm:^5.8.3":
   version: 5.8.3
   resolution: "react-select@npm:5.8.3"
@@ -11494,6 +11503,7 @@ __metadata:
     react: "npm:^18"
     react-dom: "npm:^18"
     react-select: "npm:^5.8.3"
+    react-select-event: "npm:^5.5.1"
     react-toastify: "npm:^10.0.6"
     stylelint: "npm:^16.10.0"
     stylelint-config-standard: "npm:^36.0.1"