feat(emplois-europe): gestion des localisations multiples (#2642)

DNUM-SocialGouv · Feb 6, 2024 · 7c88602 · 7c88602
1 parent f59763b
commit 7c88602
Show file tree

Hide file tree

Showing 12 changed files with 397 additions and 164 deletions.
diff --git a/...ient/components/features/EmploisEurope/ConsulterOffre/ConsulterOffreEmploiEurope.test.tsx b/...ient/components/features/EmploisEurope/ConsulterOffre/ConsulterOffreEmploiEurope.test.tsx
@@ -161,45 +161,64 @@ describe('DetailOffreEmploiEurope', () => {
 		describe('quand un résultat contient un pays et une ville', () => {
 			it('affiche le résultat avec le pays et la ville', () => {
 				// GIVEN
-				const offreEmploiEurope = anEmploiEurope({ pays: 'France', ville: 'Paris' });
+				const offreEmploiEurope = anEmploiEurope({ localisations: [{ pays: 'France', ville: 'Paris' }] });
 
 				// WHEN
 				render(<DetailEmploiEurope annonceEmploiEurope={offreEmploiEurope}/>);
 
 				// THEN
 				const listTags = screen.getByRole('list', { name: 'Caractéristiques de l‘offre d‘emploi' });
-				const tagTypeContrat = within(listTags).getByText('France/Paris');
-				expect(tagTypeContrat).toBeVisible();
+				const tagLocalisation = within(listTags).getByText('France/Paris');
+				expect(tagLocalisation).toBeVisible();
 			});
 		});
 
 		describe('quand un résultat contient un pays mais pas de ville', () => {
 			it('affiche le résultat avec le pays', () => {
 				// GIVEN
-				const offreEmploiEurope = anEmploiEurope({ pays: 'France', ville: undefined });
+				const offreEmploiEurope = anEmploiEurope({ localisations: [{ pays: 'France', ville: undefined }] });
 
 				// WHEN
 				render(<DetailEmploiEurope annonceEmploiEurope={offreEmploiEurope}/>);
 
 				// THEN
 				const listTags = screen.getByRole('list', { name: 'Caractéristiques de l‘offre d‘emploi' });
-				const tagTypeContrat = within(listTags).getByText('France');
-				expect(tagTypeContrat).toBeVisible();
+				const tagLocalisation = within(listTags).getByText('France');
+				expect(tagLocalisation).toBeVisible();
 			});
 		});
 
 		describe('quand un résultat contient une ville mais pas de pays', () => {
 			it('affiche le résultat avec la ville', () => {
 				// GIVEN
-				const offreEmploiEurope = anEmploiEurope({ pays: undefined, ville: 'Paris' });
+				const offreEmploiEurope = anEmploiEurope({ localisations: [{ pays: undefined, ville: 'Paris' }] });
 
 				// WHEN
 				render(<DetailEmploiEurope annonceEmploiEurope={offreEmploiEurope}/>);
 
 				// THEN
 				const listTags = screen.getByRole('list', { name: 'Caractéristiques de l‘offre d‘emploi' });
-				const tagTypeContrat = within(listTags).getByText('Paris');
-				expect(tagTypeContrat).toBeVisible();
+				const tagLocalisation = within(listTags).getByText('Paris');
+				expect(tagLocalisation).toBeVisible();
+			});
+		});
+
+		describe('quand un résultat contient plusieurs localisations', () => {
+			it('affiche un tag indiquant la multi-localisation', () => {
+				// GIVEN
+				const offreEmploiEurope = anEmploiEurope({ localisations: [
+					{ pays: 'Suède', ville: undefined },
+					{ pays: 'Allemagne', ville: undefined },
+				],
+				});
+
+				// WHEN
+				render(<DetailEmploiEurope annonceEmploiEurope={offreEmploiEurope}/>);
+
+				// THEN
+				const listTags = screen.getByRole('list', { name: 'Caractéristiques de l‘offre d‘emploi' });
+				const tagLocalisation = within(listTags).getByText('Multi-localisation');
+				expect(tagLocalisation).toBeVisible();
 			});
 		});
 	});
@@ -267,6 +286,76 @@ describe('DetailOffreEmploiEurope', () => {
 		});
 	});
 
+	describe('localisations', () => {
+
+		describe('si il y a une seule localisation', () => {
+			it('affiche la ville et le pays si ils sont présents', () => {
+				const offreEmploiEurope = anEmploiEurope({ localisations: [{ pays: 'France', ville: 'La Rochelle' }] });
+
+				const { getByDescriptionTerm } = render(<DetailEmploiEurope
+					annonceEmploiEurope={offreEmploiEurope}/>, { queries });
+
+				expect(getByDescriptionTerm('Localisation')).toHaveTextContent('France, La Rochelle');
+			});
+
+			it('affiche seulement la ville si le pays n‘est pas renseigné' , () => {
+				const offreEmploiEurope = anEmploiEurope({ localisations: [{ ville: 'La Rochelle' }] });
+
+				const { getByDescriptionTerm } = render(<DetailEmploiEurope
+					annonceEmploiEurope={offreEmploiEurope}/>, { queries });
+
+				expect(getByDescriptionTerm('Localisation')).toHaveTextContent('La Rochelle');
+			});
+
+			it('affiche seulement le pays si la ville n‘est pas renseignée' , () => {
+				const offreEmploiEurope = anEmploiEurope({ localisations: [{ pays: 'France' }] });
+
+				const { getByDescriptionTerm } = render(<DetailEmploiEurope
+					annonceEmploiEurope={offreEmploiEurope}/>, { queries });
+
+				expect(getByDescriptionTerm('Localisation')).toHaveTextContent('France');
+			});
+
+		});
+
+		describe('si il y a plusieurs localisations', () => {
+			it('affiche les localisations dans une liste', () => {
+				// Given
+				const offreEmploiEurope = anEmploiEurope({ localisations: [
+					{ pays: 'France', ville: 'La Rochelle' },
+					{ pays: 'Belgique', ville: 'Charleroi' },
+				],
+				});
+
+				// When
+				const { getByDescriptionTerm } = render(<DetailEmploiEurope
+					annonceEmploiEurope={offreEmploiEurope}/>, { queries });
+
+
+				// Then
+				const localisations = getByDescriptionTerm('Localisations');
+				const listeLocalisation = within(localisations).getByRole('list');
+
+				const LaRochelle = within(listeLocalisation).getByText('France, La Rochelle');
+				const Charleroi = within(listeLocalisation).getByText('Belgique, Charleroi');
+
+				expect(LaRochelle).toBeVisible();
+				expect(Charleroi).toBeVisible();
+			});
+		});
+
+
+		it('n‘affiche pas la localisation si elle n‘est pas disponible', () => {
+			const offreEmploiEurope = anEmploiEurope({ localisations: [] });
+
+			const { queryByDescriptionTerm } = render(<DetailEmploiEurope
+				annonceEmploiEurope={offreEmploiEurope}/>, { queries });
+
+			expect(queryByDescriptionTerm('Localisation')).not.toBeInTheDocument();
+			expect(queryByDescriptionTerm('Localisations')).not.toBeInTheDocument();
+		});
+	});
+
 	describe('langue de travail', () => {
 		it('affiche les langues si elles sont disponibles', () => {
 			const offreEmploiEurope = anEmploiEurope({ langueDeTravail: ['Anglais', 'Français'] });

diff --git a/src/client/components/features/EmploisEurope/ConsulterOffre/ConsulterOffreEmploiEurope.tsx b/src/client/components/features/EmploisEurope/ConsulterOffre/ConsulterOffreEmploiEurope.tsx
@@ -1,6 +1,6 @@
 import React from 'react';
 
-import { getTagsFromAnnonce } from '~/client/components/features/EmploisEurope/utils';
+import { getTagsFromAnnonce } from '~/client/components/features/EmploisEurope/tags.utils';
 import { ConsulterOffreLayout } from '~/client/components/layouts/ConsulterOffre/ConsulterOffreLayout';
 import { LinkStyledAsButtonWithIcon } from '~/client/components/ui/LinkStyledAsButton/LinkStyledAsButton';
 import { TagList } from '~/client/components/ui/Tag/TagList';
@@ -42,6 +42,27 @@ export function DetailEmploiEurope({ annonceEmploiEurope }: ConsulterOffreEmploi
 		});
 	}
 
+	function getLibelleLocalisation(localisation: { pays?: string, ville?: string}) {
+		if (localisation.pays && localisation.ville) {
+			return `${localisation.pays}, ${localisation.ville}`;
+		} else {
+			return localisation.ville || localisation.pays;
+		}
+	}
+
+	function getLocalisations() {
+		if (annonceEmploiEurope.localisations.length > 1) {
+			return <ul>
+				{annonceEmploiEurope.localisations.map((localisation) =>
+					<li key={`${localisation.pays}-${localisation.ville}`}>
+						{getLibelleLocalisation(localisation)}
+					</li>)}
+			</ul>;
+		} else {
+			return getLibelleLocalisation(annonceEmploiEurope.localisations[0]);
+		}
+	}
+
 	function getExperienceRequired(experienceNecessaire: ExperienceNecessaire) {
 		if (experienceNecessaire.duree === 0) return 'Aucune expérience requise';
 		const isPlural = experienceNecessaire.duree > 1;
@@ -79,13 +100,9 @@ export function DetailEmploiEurope({ annonceEmploiEurope }: ConsulterOffreEmploi
 						<dt>Description du poste</dt>
 						<dd dangerouslySetInnerHTML={{ __html: descriptionSanitized }} lang={codeLangueDeLOffre}/>
 					</div>}
-					{annonceEmploiEurope.listePermis?.length > 0 && <div className={styles.caracteristique}>
-						<dt>Type de permis requis</dt>
-						<dd>{annonceEmploiEurope.listePermis.join(', ')}</dd>
-					</div>}
-					{annonceEmploiEurope.laPlusLongueExperienceNecessaire !== undefined && <div className={styles.caracteristique}>
-						<dt>Expérience</dt>
-						<dd>{getExperienceRequired(annonceEmploiEurope.laPlusLongueExperienceNecessaire)}</dd>
+					{annonceEmploiEurope.localisations.length > 0 && <div className={styles.caracteristique}>
+						<dt>{annonceEmploiEurope.localisations.length > 1 ? 'Localisations' : 'Localisation'}</dt>
+						<dd>{getLocalisations()}</dd>
 					</div>}
 					{annonceEmploiEurope.langueDeTravail.length > 0 && <div className={styles.caracteristique}>
 						<dt>Langue de travail</dt>
@@ -95,6 +112,14 @@ export function DetailEmploiEurope({ annonceEmploiEurope }: ConsulterOffreEmploi
 						<dt>Compétences linguistiques requises</dt>
 						<dd>{getCompetencesLinguistiquesRequises()}</dd>
 					</div>}
+					{annonceEmploiEurope.laPlusLongueExperienceNecessaire !== undefined && <div className={styles.caracteristique}>
+						<dt>Expérience</dt>
+						<dd>{getExperienceRequired(annonceEmploiEurope.laPlusLongueExperienceNecessaire)}</dd>
+					</div>}
+					{annonceEmploiEurope.listePermis?.length > 0 && <div className={styles.caracteristique}>
+						<dt>Type de permis requis</dt>
+						<dd>{annonceEmploiEurope.listePermis.join(', ')}</dd>
+					</div>}
 				</dl>
 			</section>
 		</ConsulterOffreLayout>

diff --git a/...ient/components/features/EmploisEurope/FormulaireRecherche/ListeResultatsEmploiEurope.tsx b/...ient/components/features/EmploisEurope/FormulaireRecherche/ListeResultatsEmploiEurope.tsx
@@ -1,4 +1,4 @@
-import { getTagsFromAnnonce } from '~/client/components/features/EmploisEurope/utils';
+import { getTagsFromAnnonce } from '~/client/components/features/EmploisEurope/tags.utils';
 import {
 	ListeRésultatsRechercherSolution,
 } from '~/client/components/layouts/RechercherSolution/ListeRésultats/ListeRésultatsRechercherSolution';