diff --git a/src/App.js b/src/App.js index 8f5449e..2a179d6 100644 --- a/src/App.js +++ b/src/App.js @@ -40,7 +40,10 @@ function App() { const PageCandidatureStructure = lazy(() => import('./views/candidature-structure/PageCandidatureStructure')); const PageCandidatureCoordinateur = lazy(() => import('./views/candidature-coordinateur/PageCandidatureCoordinateur')); const PageCandidatureValidee = lazy(() => import('./views/candidature-validee/PageCandidatureValidee')); - const PageConfirmationEmailCandidature = lazy(() => import('./views/confirmation-email-candidature/PageConfirmationEmailCandidature')); + const PageConfirmationEmailCandidatureConseiller = + lazy(() => import('./views/confirmation-email-candidature-conseiller/PageConfirmationEmailCandidatureConseiller')); + const PageConfirmationEmailCandidatureStructure = + lazy(() => import('./views/confirmation-email-candidature-structure/PageConfirmationEmailCandidatureStructure')); return (
@@ -52,7 +55,8 @@ function App() { }/> }/> }/> - }/> + }/> + }/> }/> }/> }/> diff --git a/src/views/confirmation-email-candidature/ConfirmationEmailCandidature.jsx b/src/views/confirmation-email-candidature-conseiller/ConfirmationEmailCandidatureConseiller.jsx similarity index 81% rename from src/views/confirmation-email-candidature/ConfirmationEmailCandidature.jsx rename to src/views/confirmation-email-candidature-conseiller/ConfirmationEmailCandidatureConseiller.jsx index f9ad381..21a812d 100644 --- a/src/views/confirmation-email-candidature/ConfirmationEmailCandidature.jsx +++ b/src/views/confirmation-email-candidature-conseiller/ConfirmationEmailCandidatureConseiller.jsx @@ -1,18 +1,18 @@ import React, { useEffect, useState } from 'react'; import { useParams } from 'react-router-dom'; -import { useApiConfirmationEmailCandidature } from './useApiConfirmationEmailCandidature'; +import { useApiConfirmationEmailCandidatureConseiller } from './useApiConfirmationEmailCandidatureConseiller'; -export default function CandidatureValidee() { +export default function ConfirmationEmailCandidatureConseiller() { const [reponseStatusConfirmation, setReponseStatusConfirmation] = useState(null); - const { actionConfirmationEmailCandidature } = useApiConfirmationEmailCandidature(); + const { actionConfirmationEmailCandidatureConseiller } = useApiConfirmationEmailCandidatureConseiller(); const { token } = useParams(); useEffect(() => { window.scrollTo({ top: 0, behavior: 'smooth' }); }, []); const ClickBoutonConfirmer = async () => { - const response = await actionConfirmationEmailCandidature(token); + const response = await actionConfirmationEmailCandidatureConseiller(token); setReponseStatusConfirmation(response.status); }; return ( diff --git a/src/views/confirmation-email-candidature-conseiller/PageConfirmationEmailCandidatureConseiller.jsx b/src/views/confirmation-email-candidature-conseiller/PageConfirmationEmailCandidatureConseiller.jsx new file mode 100644 index 0000000..da40ebe --- /dev/null +++ b/src/views/confirmation-email-candidature-conseiller/PageConfirmationEmailCandidatureConseiller.jsx @@ -0,0 +1,12 @@ +import React from 'react'; +import Header from '../../components/Header'; +import ConfirmationEmailCandidatureConseiller from './ConfirmationEmailCandidatureConseiller'; + +export default function PageConfirmationEmailCandidatureConseiller() { + return ( + <> +
+ + + ); +} diff --git a/src/views/confirmation-email-candidature/PageConfirmationEmailCandidature.test.jsx b/src/views/confirmation-email-candidature-conseiller/PageConfirmationEmailCandidatureConseiller.test.jsx similarity index 87% rename from src/views/confirmation-email-candidature/PageConfirmationEmailCandidature.test.jsx rename to src/views/confirmation-email-candidature-conseiller/PageConfirmationEmailCandidatureConseiller.test.jsx index a390537..1317177 100644 --- a/src/views/confirmation-email-candidature/PageConfirmationEmailCandidature.test.jsx +++ b/src/views/confirmation-email-candidature-conseiller/PageConfirmationEmailCandidatureConseiller.test.jsx @@ -1,6 +1,6 @@ import { render, act, screen, fireEvent } from '@testing-library/react'; import { describe, expect, it, vi } from 'vitest'; -import ConfirmationEmailCandidature from './ConfirmationEmailCandidature'; +import ConfirmationEmailCandidature from './ConfirmationEmailCandidatureConseiller'; vi.mock('react-router-dom', () => ({ useParams: () => ({ token: '1' }), @@ -10,7 +10,6 @@ describe('confirmation Email', () => { it('quand j’affiche la page de confirmation de l’email validée alors le titre et les informations de la page s’affichent', () => { // WHEN render(); - vi.spyOn(window, 'scrollTo').mockImplementation(); // THEN const titre = screen.getByRole('heading', { level: 1, name: 'Confirmation de l’enregistrement de votre candidature' }); @@ -25,13 +24,12 @@ describe('confirmation Email', () => { expect(envoyer).toBeInTheDocument(); }); - it('quand l’utilisateur clique sur le bouton et que le lien est valide alors un message success s’affiche', async () => { + it('quand l’utilisateur clique sur le bouton et que le lien est valide alors un message de succès s’affiche', async () => { // WHEN - vi.spyOn(window, 'scrollTo').mockImplementation(); - render(); vi.stubGlobal('fetch', vi.fn( () => ({ status: 200, json: async () => Promise.resolve({}) })) ); + render(); const envoyer = screen.getByRole('button', { name: 'Confirmer' }); expect(envoyer).toBeInTheDocument(); @@ -39,8 +37,8 @@ describe('confirmation Email', () => { await act(() => { fireEvent.click(envoyer); }); - expect(envoyer).not.toBeInTheDocument(); // THEN + expect(envoyer).not.toBeInTheDocument(); const titre = screen.getByRole('heading', { level: 1, name: 'Confirmation de l’enregistrement de votre candidature' }); expect(titre).toBeInTheDocument(); @@ -53,14 +51,13 @@ describe('confirmation Email', () => { const messageError403 = screen.queryByText('Impossible de valider l’email, le lien a expiré ou est invalide.', { selector: 'p' }); expect(messageError403).not.toBeInTheDocument(); - const messageErrorGenerale = screen.queryByText('Une erreur s’est produite veuillez réessayer plus tard.', { selector: 'p' }); - expect(messageErrorGenerale).not.toBeInTheDocument(); + const messageErreurGenerale = screen.queryByText('Une erreur s’est produite veuillez réessayer plus tard.', { selector: 'p' }); + expect(messageErreurGenerale).not.toBeInTheDocument(); }); it('quand l’utilisateur clique sur le bouton et que le lien est invalide alors un message d’erreur s’affiche', async () => { // GIVEN - vi.spyOn(window, 'scrollTo').mockImplementation(); vi.stubGlobal('fetch', vi.fn( () => ({ status: 403, json: async () => Promise.resolve({}) })) ); @@ -87,12 +84,12 @@ describe('confirmation Email', () => { const messageSuccess = screen.queryByText('Votre email a été confirmé et votre inscription est maintenant active.' + ' Vous serez contacté par mail ou par téléphone si une structure est intéressée par votre profil.', { selector: 'p' }); expect(messageSuccess).not.toBeInTheDocument(); - const messageErrorGenerale = screen.queryByText('Une erreur s’est produite veuillez réessayer plus tard.', { selector: 'p' }); - expect(messageErrorGenerale).not.toBeInTheDocument(); + const messageErreurGenerale = screen.queryByText('Une erreur s’est produite veuillez réessayer plus tard.', { selector: 'p' }); + expect(messageErreurGenerale).not.toBeInTheDocument(); }); - it('quand l’utilisateur clique sur le bouton et qu’une erreur innatendu se produit alors un message d’erreur s’affiche', async () => { + it('quand l’utilisateur clique sur le bouton et qu’une erreur innatendue se produit alors un message d’erreur s’affiche', async () => { // GIVEN vi.stubGlobal('fetch', vi.fn( () => ({ status: 500, json: async () => Promise.resolve({}) })) diff --git a/src/views/confirmation-email-candidature/useApiConfirmationEmailCandidature.js b/src/views/confirmation-email-candidature-conseiller/useApiConfirmationEmailCandidatureConseiller.js similarity index 62% rename from src/views/confirmation-email-candidature/useApiConfirmationEmailCandidature.js rename to src/views/confirmation-email-candidature-conseiller/useApiConfirmationEmailCandidatureConseiller.js index 2115726..fd2a27f 100644 --- a/src/views/confirmation-email-candidature/useApiConfirmationEmailCandidature.js +++ b/src/views/confirmation-email-candidature-conseiller/useApiConfirmationEmailCandidatureConseiller.js @@ -1,8 +1,8 @@ -export const useApiConfirmationEmailCandidature = () => { +export const useApiConfirmationEmailCandidatureConseiller = () => { - const actionConfirmationEmailCandidature = async token => { + const actionConfirmationEmailCandidatureConseiller = async token => { const baseUrl = import.meta.env.VITE_APP_API_URL; const requestOptions = { method: 'PATCH', @@ -15,5 +15,5 @@ export const useApiConfirmationEmailCandidature = () => { } }; - return { actionConfirmationEmailCandidature }; + return { actionConfirmationEmailCandidatureConseiller }; }; diff --git a/src/views/confirmation-email-candidature-structure/ConfirmationEmailCandidatureStructure.jsx b/src/views/confirmation-email-candidature-structure/ConfirmationEmailCandidatureStructure.jsx new file mode 100644 index 0000000..da2ab48 --- /dev/null +++ b/src/views/confirmation-email-candidature-structure/ConfirmationEmailCandidatureStructure.jsx @@ -0,0 +1,40 @@ +import React, { useEffect, useState } from 'react'; +import { useParams } from 'react-router-dom'; +import { useApiConfirmationEmailCandidatureStructure } from './useApiConfirmationEmailCandidatureStructure'; + +export default function ConfirmationEmailCandidatureStructure() { + const [reponseStatusConfirmation, setReponseStatusConfirmation] = useState(null); + const { actionConfirmationEmailCandidatureStructure } = useApiConfirmationEmailCandidatureStructure(); + const { token } = useParams(); + + useEffect(() => { + window.scrollTo({ top: 0, behavior: 'smooth' }); + }, []); + const confirmerEmailCandidatureStructure = async () => { + const response = await actionConfirmationEmailCandidatureStructure(token); + setReponseStatusConfirmation(response.status); + }; + return ( +
+

Confirmation de l’enregistrement de votre candidature

+ {reponseStatusConfirmation === 200 &&
+

Votre email a été confirmé et votre inscription est maintenant active. + Vous recevrez un mail d’activation de votre espace structure lorsque votre candidature aura été validée.

+
} + {reponseStatusConfirmation === 403 &&
+

Impossible de valider l’email, le lien a expiré ou est invalide.

+
} + {reponseStatusConfirmation >= 400 && reponseStatusConfirmation !== 403 &&
+

Une erreur s’est produite veuillez réessayer plus tard.

+
} + {!reponseStatusConfirmation && <> +

+ Appuyez sur le bouton pour confirmer votre email +

+ + } +
+ ); +} diff --git a/src/views/confirmation-email-candidature-structure/PageConfirmationEmailCandidatureStructure.jsx b/src/views/confirmation-email-candidature-structure/PageConfirmationEmailCandidatureStructure.jsx new file mode 100644 index 0000000..2baffab --- /dev/null +++ b/src/views/confirmation-email-candidature-structure/PageConfirmationEmailCandidatureStructure.jsx @@ -0,0 +1,12 @@ +import React from 'react'; +import Header from '../../components/Header'; +import ConfirmationEmailCandidatureStructure from './ConfirmationEmailCandidatureStructure'; + +export default function PageConfirmationEmailCandidatureStructure() { + return ( + <> +
+ + + ); +} diff --git a/src/views/confirmation-email-candidature-structure/PageConfirmationEmailCandidatureStructure.test.jsx b/src/views/confirmation-email-candidature-structure/PageConfirmationEmailCandidatureStructure.test.jsx new file mode 100644 index 0000000..f115a3e --- /dev/null +++ b/src/views/confirmation-email-candidature-structure/PageConfirmationEmailCandidatureStructure.test.jsx @@ -0,0 +1,125 @@ +import { render, act, screen, fireEvent } from '@testing-library/react'; +import { describe, expect, it, vi } from 'vitest'; +import ConfirmationEmailCandidatureStructure from './ConfirmationEmailCandidatureStructure'; + +vi.mock('react-router-dom', () => ({ + useParams: () => ({ token: '1' }), +})); + +describe('confirmation Email', () => { + it('quand j’affiche la page de confirmation de l’email validée alors le titre et les informations de la page s’affichent', () => { + // WHEN + render(); + + // THEN + const titre = screen.getByRole('heading', { level: 1, name: 'Confirmation de l’enregistrement de votre candidature' }); + expect(titre).toBeInTheDocument(); + + const indication = screen.getByText('Appuyez sur le bouton pour confirmer votre email', + { selector: 'p' } + ); + expect(indication).toBeInTheDocument(); + + const envoyer = screen.getByRole('button', { name: 'Confirmer' }); + expect(envoyer).toBeInTheDocument(); + }); + + it('quand l’utilisateur clique sur le bouton et que le lien est valide alors un message de succès s’affiche', async () => { + // WHEN + vi.stubGlobal('fetch', vi.fn( + () => ({ status: 200, json: async () => Promise.resolve({}) })) + ); + render(); + + const envoyer = screen.getByRole('button', { name: 'Confirmer' }); + expect(envoyer).toBeInTheDocument(); + // eslint-disable-next-line testing-library/no-unnecessary-act + await act(() => { + fireEvent.click(envoyer); + }); + expect(envoyer).not.toBeInTheDocument(); + // THEN + const titre = screen.getByRole('heading', { level: 1, name: 'Confirmation de l’enregistrement de votre candidature' }); + expect(titre).toBeInTheDocument(); + + const messageSucess = screen.getByText('Votre email a été confirmé et votre inscription est maintenant active.' + + ' Vous recevrez un mail d’activation de votre espace structure lorsque votre candidature aura été validée.', + { selector: 'p' } + ); + expect(messageSucess).toBeInTheDocument(); + + const messageError403 = screen.queryByText('Impossible de valider l’email, le lien a expiré ou est invalide.', { selector: 'p' }); + expect(messageError403).not.toBeInTheDocument(); + + const messageErreurGenerale = screen.queryByText('Une erreur s’est produite veuillez réessayer plus tard.', { selector: 'p' }); + expect(messageErreurGenerale).not.toBeInTheDocument(); + }); + + it('quand l’utilisateur clique sur le bouton et que le lien est invalide alors un message d’erreur s’affiche', async () => { + + // GIVEN + vi.stubGlobal('fetch', vi.fn( + () => ({ status: 403, json: async () => Promise.resolve({}) })) + ); + // WHEN + render(); + + // THEN + const envoyer = screen.getByRole('button', { name: 'Confirmer' }); + expect(envoyer).toBeInTheDocument(); + // eslint-disable-next-line testing-library/no-unnecessary-act + await act(() => { + fireEvent.click(envoyer); + }); + expect(envoyer).not.toBeInTheDocument(); + // THEN + const titre = screen.getByRole('heading', { level: 1, name: 'Confirmation de l’enregistrement de votre candidature' }); + expect(titre).toBeInTheDocument(); + + const messageError = screen.getByText('Impossible de valider l’email, le lien a expiré ou est invalide.', + { selector: 'p' } + ); + expect(messageError).toBeInTheDocument(); + + const messageSuccess = screen.queryByText('Votre email a été confirmé et votre inscription est maintenant active.' + + ' Vous recevrez un mail d’activation de votre espace structure lorsque votre candidature aura été validée.', { selector: 'p' }); + expect(messageSuccess).not.toBeInTheDocument(); + const messageErreurGenerale = screen.queryByText('Une erreur s’est produite veuillez réessayer plus tard.', { selector: 'p' }); + expect(messageErreurGenerale).not.toBeInTheDocument(); + }); + + + it('quand l’utilisateur clique sur le bouton et qu’une erreur innatendue se produit alors un message d’erreur s’affiche', async () => { + // GIVEN + vi.stubGlobal('fetch', vi.fn( + () => ({ status: 500, json: async () => Promise.resolve({}) })) + ); + // WHEN + render(); + + // THEN + const envoyer = screen.getByRole('button', { name: 'Confirmer' }); + expect(envoyer).toBeInTheDocument(); + // eslint-disable-next-line testing-library/no-unnecessary-act + await act(() => { + fireEvent.click(envoyer); + }); + expect(envoyer).not.toBeInTheDocument(); + // THEN + const titre = screen.getByRole('heading', { level: 1, name: 'Confirmation de l’enregistrement de votre candidature' }); + expect(titre).toBeInTheDocument(); + + const messageError = screen.getByText('Une erreur s’est produite veuillez réessayer plus tard.', + { selector: 'p' } + ); + expect(messageError).toBeInTheDocument(); + + const messageError403 = screen.queryByText('Impossible de valider l’email, le lien a expiré ou est invalide.', { selector: 'p' }); + expect(messageError403).not.toBeInTheDocument(); + + const messageSuccess = screen.queryByText('Votre email a été confirmé et votre inscription est maintenant active.' + + ' Vous recevrez un mail d’activation de votre espace structure lorsque votre candidature aura été validée.', { selector: 'p' }); + expect(messageSuccess).not.toBeInTheDocument(); + + }); +}); diff --git a/src/views/confirmation-email-candidature-structure/useApiConfirmationEmailCandidatureStructure.js b/src/views/confirmation-email-candidature-structure/useApiConfirmationEmailCandidatureStructure.js new file mode 100644 index 0000000..cf445e1 --- /dev/null +++ b/src/views/confirmation-email-candidature-structure/useApiConfirmationEmailCandidatureStructure.js @@ -0,0 +1,17 @@ +export const useApiConfirmationEmailCandidatureStructure = () => { + + const actionConfirmationEmailCandidatureStructure = async token => { + const baseUrl = import.meta.env.VITE_APP_API_URL; + const requestOptions = { + method: 'PATCH', + headers: { 'Content-Type': 'application/json' }, + }; + try { + return await fetch(`${baseUrl}/confirmation-email-inscription-structure/${token}`, requestOptions); + } catch (error) { + return error; + } + }; + + return { actionConfirmationEmailCandidatureStructure }; +}; diff --git a/src/views/confirmation-email-candidature/PageConfirmationEmailCandidature.jsx b/src/views/confirmation-email-candidature/PageConfirmationEmailCandidature.jsx deleted file mode 100644 index ceedf24..0000000 --- a/src/views/confirmation-email-candidature/PageConfirmationEmailCandidature.jsx +++ /dev/null @@ -1,12 +0,0 @@ -import React from 'react'; -import Header from '../../components/Header'; -import ConfirmationEmailCandidature from './ConfirmationEmailCandidature'; - -export default function PageConfirmationEmailCandidature() { - return ( - <> -
- - - ); -}