diff --git a/src/App.js b/src/App.js index 20b6aae..f9cfd2f 100644 --- a/src/App.js +++ b/src/App.js @@ -17,7 +17,6 @@ import '@gouvfr/dsfr/dist/component/modal/modal.module.min.js'; import '@gouvfr/dsfr/dist/component/header/header.module.min.js'; import './assets/sass/main.scss'; import '@gouvfr/dsfr/dist/core/core.min.css'; -import '@gouvfr/dsfr/dist/component/alert/alert.min.css'; const RedirectCarto = () => { const { permanence } = useParams(); diff --git a/src/views/candidature-conseiller/CandidatureConseiller.test.jsx b/src/views/candidature-conseiller/CandidatureConseiller.test.jsx index 11ee33b..1cf5b8e 100644 --- a/src/views/candidature-conseiller/CandidatureConseiller.test.jsx +++ b/src/views/candidature-conseiller/CandidatureConseiller.test.jsx @@ -1,10 +1,9 @@ -import { render, screen, within, fireEvent, act } from '@testing-library/react'; +import { render, screen, within, fireEvent, act, renderHook } from '@testing-library/react'; import { describe, expect, it, vi } from 'vitest'; import CandidatureConseiller from './CandidatureConseiller'; import { textMatcher, dateDujour } from '../../../test/test-utils'; import * as ReactRouterDom from 'react-router-dom'; import * as useApiAdmin from './useApiAdmin'; -import * as useGeoApi from './useGeoApi'; vi.mock('react-router-dom', () => ({ useLocation: () => ({ hash: '' }), @@ -520,7 +519,7 @@ describe('candidature conseiller', () => { vi.useRealTimers(); }); - it('quand je remplis complétement le formulaire avec un numéro téléphone valide, alors je suis redirigé vers la page de candidature validée', async () => { + it('quand je remplis complètementle formulaire avec un numéro téléphone valide, alors je suis redirigé vers la page de candidature validée', async () => { // GIVEN vi.useFakeTimers(); vi.setSystemTime(new Date(2023, 11, 12, 13)); @@ -568,158 +567,78 @@ describe('candidature conseiller', () => { vi.useRealTimers(); }); - it('quand je remplis complétement le formulaire avec un numéro téléphone invalide, alors je ...', async () => { + it('quand je valide le formulaire alors j’envoie toute les données nescessaires', async () => { // GIVEN - vi.useFakeTimers(); - vi.setSystemTime(new Date(2023, 11, 12, 13)); - - vi.stubGlobal('fetch', vi.fn( - () => ({ status: 200, json: async () => Promise.resolve({}) })) - ); - - const mockNavigate = vi.fn().mockReturnValue(() => { }); - vi.spyOn(ReactRouterDom, 'useNavigate').mockReturnValue(mockNavigate); - - render(); - const prenom = screen.getByLabelText('Prénom *'); - fireEvent.change(prenom, { target: { value: 'Jean' } }); - const nom = screen.getByLabelText('Nom *'); - fireEvent.change(nom, { target: { value: 'Dupont' } }); - const email = screen.getByLabelText('Adresse e-mail * Format attendu : nom@domaine.fr'); - fireEvent.change(email, { target: { value: 'jean.dupont@example.com' } }); - const telephone = screen.getByLabelText('Téléphone Format attendu : +33122334455'); - fireEvent.change(telephone, { target: { value: '0159590730' } }); - const enEmploi = screen.getByRole('checkbox', { name: 'En emploi' }); - fireEvent.click(enEmploi); - const oui = screen.getByRole('radio', { name: 'Oui' }); - fireEvent.click(oui); - const date = screen.getByLabelText('Choisir une date'); - fireEvent.change(date, { target: { value: dateDujour() } }); - const _5km = screen.getByRole('radio', { name: '5 km' }); - fireEvent.click(_5km); - const descriptionMotivation = screen.getByLabelText('Votre message *'); - fireEvent.change(descriptionMotivation, { target: { value: 'je suis motivé !' } }); - - // WHEN - const envoyer = screen.getByRole('button', { name: 'Envoyer votre candidature' }); - - // eslint-disable-next-line testing-library/no-unnecessary-act - await act(() => { - fireEvent.click(envoyer); - }); - - // THEN - expect(mockNavigate).toHaveBeenCalledTimes(0); - - vi.useRealTimers(); - }); - - it('quand je valide le formulaire alors j’envoi toute les données nescessaire', async () => { - // GIVEN - const geoApiResponse = [ - { - nom: 'Montreuil', - code: '93048', - codesPostaux: [ - '93100' - ], - centre: { - type: 'Point', - coordinates: [2.4491, 48.8637] - }, - codeDepartement: '93', - codeRegion: '11' - } + const formData = [ + [ + 'prenom', + 'Jean' + ], + [ + 'nom', + 'Dupont' + ], + [ + 'email', + 'jean.dupont@example.com' + ], + [ + 'telephone', + '' + ], + [ + 'lieuHabitation', + '93100 Montreuil' + ], + [ + 'estDemandeurEmploi', + 'on' + ], + [ + 'aUneExperienceMedNum', + 'oui' + ], + [ + 'dateDisponibilite', + '2023-12-12' + ], + [ + 'distanceMax', + '5' + ], + [ + 'motivation', + 'je suis motivé !' + ], + [ + 'g-recaptcha-response', + '1' + ], + [ + 'h-captcha-response', + '1' + ] ]; - vi.spyOn(useGeoApi, 'useGeoApi').mockReturnValue({ - villes: geoApiResponse, - getVilleParCode: async () => Promise.resolve(geoApiResponse), - }); - - vi.useFakeTimers(); - vi.setSystemTime(new Date(2023, 11, 12, 13)); - - const mockNavigate = vi.fn(); - vi.spyOn(ReactRouterDom, 'useNavigate').mockReturnValue(mockNavigate); - - - const originalBuildConseillerData = useApiAdmin.useApiAdmin().buildConseillerData; - const mockbuildConseillerData = vi.fn(originalBuildConseillerData); - - const mockcreerCandidatureConseiller = vi.fn().mockResolvedValue({ status: 200 }); - - vi.spyOn(useApiAdmin, 'useApiAdmin').mockReturnValue({ - buildConseillerData: mockbuildConseillerData, - creerCandidatureConseiller: mockcreerCandidatureConseiller, - }); + const { buildConseillerData } = renderHook(() => useApiAdmin.useApiAdmin()).result.current; - render(); - - const prenom = screen.getByLabelText('Prénom *'); - fireEvent.change(prenom, { target: { value: 'Jean' } }); - - const nom = screen.getByLabelText('Nom *'); - fireEvent.change(nom, { target: { value: 'Dupont' } }); - - const email = screen.getByLabelText('Adresse e-mail * Format attendu : nom@domaine.fr'); - fireEvent.change(email, { target: { value: 'jean.dupont@example.com' } }); - - const adresse = screen.getByLabelText('Votre lieu d’habitation Saississez le nom ou le code postal de votre commune.'); - fireEvent.change(adresse, { target: { value: '93100 Montreuil' } }); - - const enEmploi = screen.getByRole('checkbox', { name: 'En emploi' }); - fireEvent.click(enEmploi); - - const oui = screen.getByRole('radio', { name: 'Oui' }); - fireEvent.click(oui); - - const date = screen.getByLabelText('Choisir une date'); - fireEvent.change(date, { target: { value: '2023-12-12' } }); - - const _5km = screen.getByRole('radio', { name: '5 km' }); - fireEvent.click(_5km); - - const descriptionMotivation = screen.getByLabelText('Votre message *'); - fireEvent.change(descriptionMotivation, { target: { value: 'je suis motivé !' } }); - - // WHEN - const envoyer = screen.getByRole('button', { name: 'Envoyer votre candidature' }); - - // eslint-disable-next-line testing-library/no-unnecessary-act - await act(async () => { - fireEvent.click(envoyer); - }); + //WHEN + const result = await buildConseillerData(formData, '93048'); // THEN - expect(mockbuildConseillerData).toHaveBeenCalledTimes(1); - const result = await mockbuildConseillerData.mock.results[0].value; - const resultAvantAdaptation = JSON.parse(result); - const resultApresAdaptation = { - ...resultAvantAdaptation, - ...(resultAvantAdaptation['h-captcha-response'] && { 'h-captcha-response': 'OK' }), - ...(resultAvantAdaptation.location && { - 'location': { - 'type': 'Point', - 'coordinates': [2.4491, - 48.8637] - } - }), - }; - - expect(JSON.stringify(resultApresAdaptation)).toBe(JSON.stringify({ + expect(result).toBe(JSON.stringify({ 'prenom': 'Jean', 'nom': 'Dupont', 'email': 'jean.dupont@example.com', 'telephone': '', - 'estEnEmploi': true, + 'estDemandeurEmploi': true, 'aUneExperienceMedNum': true, 'dateDisponibilite': '2023-12-12', 'distanceMax': '5', 'motivation': 'je suis motivé !', - 'estDemandeurEmploi': false, + 'h-captcha-response': '1', + 'estEnEmploi': false, 'estEnFormation': false, 'estDiplomeMedNum': false, - // TODO A rajouter 'nomCommune': 'Montreuil', 'codePostal': '93100', 'codeCommune': '93048', diff --git a/src/views/candidature-conseiller/useGeoApi.js b/src/views/candidature-conseiller/useGeoApi.js index 96dc2fe..8e3727d 100644 --- a/src/views/candidature-conseiller/useGeoApi.js +++ b/src/views/candidature-conseiller/useGeoApi.js @@ -1,23 +1,18 @@ import { useState } from 'react'; export const useGeoApi = () => { - const baseUrlSearch = new URL('https://api-adresse.data.gouv.fr/search'); - baseUrlSearch.searchParams.set('type', 'municipality'); - - const baseUrl = new URL('https://geo.api.gouv.fr/communes'); - baseUrl.searchParams.set('limit', '10'); - baseUrl.searchParams.set('fields', 'nom,code,codesPostaux,centre,codeDepartement,codeRegion'); - const [villes, setVilles] = useState([]); const distinctVilles = villes => [...new Map(villes.map(item => [item.code, item])).values()]; const searchByName = async rechercheUtilisateur => { + const baseUrlSearch = new URL('https://api-adresse.data.gouv.fr/search'); + baseUrlSearch.searchParams.set('type', 'municipality'); const url = `${baseUrlSearch.toString()}&q=${rechercheUtilisateur}`; const villes = await fetch(url); - const listCommune = await villes.json(); + const communes = await villes.json(); - const resultat = listCommune?.features.map(result => ({ + const resultat = communes?.features.map(result => ({ 'nom': result.properties.municipality, 'code': result.properties.citycode, 'codesPostaux': [ @@ -29,6 +24,9 @@ export const useGeoApi = () => { }; const getVilleParCode = async (codePostal, codeCommune) => { + const baseUrl = new URL('https://geo.api.gouv.fr/communes'); + baseUrl.searchParams.set('limit', '10'); + baseUrl.searchParams.set('fields', 'nom,code,codesPostaux,centre,codeDepartement,codeRegion'); const url = `${baseUrl.toString()}&codePostal=${codePostal}&code=${codeCommune}`; const ville = await fetch(url); return await ville.json(); diff --git a/src/views/confirmation-email-candidature-conseiller/ConfirmationEmailCandidatureConseiller.jsx b/src/views/confirmation-email-candidature-conseiller/ConfirmationEmailCandidatureConseiller.jsx index 21a812d..05f5529 100644 --- a/src/views/confirmation-email-candidature-conseiller/ConfirmationEmailCandidatureConseiller.jsx +++ b/src/views/confirmation-email-candidature-conseiller/ConfirmationEmailCandidatureConseiller.jsx @@ -2,6 +2,7 @@ import React, { useEffect, useState } from 'react'; import { useParams } from 'react-router-dom'; import { useApiConfirmationEmailCandidatureConseiller } from './useApiConfirmationEmailCandidatureConseiller'; +import '@gouvfr/dsfr/dist/component/alert/alert.min.css'; export default function ConfirmationEmailCandidatureConseiller() { const [reponseStatusConfirmation, setReponseStatusConfirmation] = useState(null); diff --git a/src/views/confirmation-email-candidature-conseiller/PageConfirmationEmailCandidatureConseiller.test.jsx b/src/views/confirmation-email-candidature-conseiller/PageConfirmationEmailCandidatureConseiller.test.jsx index c4c1438..1317177 100644 --- a/src/views/confirmation-email-candidature-conseiller/PageConfirmationEmailCandidatureConseiller.test.jsx +++ b/src/views/confirmation-email-candidature-conseiller/PageConfirmationEmailCandidatureConseiller.test.jsx @@ -7,7 +7,6 @@ vi.mock('react-router-dom', () => ({ })); 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(); diff --git a/src/views/confirmation-email-candidature-structure/ConfirmationEmailCandidatureStructure.jsx b/src/views/confirmation-email-candidature-structure/ConfirmationEmailCandidatureStructure.jsx index da2ab48..7c63bb9 100644 --- a/src/views/confirmation-email-candidature-structure/ConfirmationEmailCandidatureStructure.jsx +++ b/src/views/confirmation-email-candidature-structure/ConfirmationEmailCandidatureStructure.jsx @@ -2,6 +2,8 @@ import React, { useEffect, useState } from 'react'; import { useParams } from 'react-router-dom'; import { useApiConfirmationEmailCandidatureStructure } from './useApiConfirmationEmailCandidatureStructure'; +import '@gouvfr/dsfr/dist/component/alert/alert.min.css'; + export default function ConfirmationEmailCandidatureStructure() { const [reponseStatusConfirmation, setReponseStatusConfirmation] = useState(null); const { actionConfirmationEmailCandidatureStructure } = useApiConfirmationEmailCandidatureStructure();