feat(stage3eme): ajout metier proposé resultats recherche (#2592)

* feat(stage3eme): ajout appellationLibelle resultats recherche * feat(stage3eme): ajout metier cartes resultats recherche * feat(stage3eme): retour review passage ul li liste metier * feat(stage3eme): ajout padding liste metiers * feat(stage3eme): reduction padding carte resultat recherche * fix(stage3eme): erreur typage * fix(stage3eme): css en mobile
DNUM-SocialGouv · Jan 30, 2024 · 481ccc6 · 481ccc6
1 parent d5d7b2e
commit 481ccc6
Show file tree

Hide file tree

Showing 10 changed files with 72 additions and 3 deletions.
diff --git a/...tures/Stages3eEt2de/Rechercher/FormulaireRecherche/ListeResultatsStage3eEt2de.module.scss b/...tures/Stages3eEt2de/Rechercher/FormulaireRecherche/ListeResultatsStage3eEt2de.module.scss
@@ -0,0 +1,25 @@
+@use "@styles/utilities";
+
+.carteResultat {
+  @include utilities.media(medium) {
+    padding: 1.5rem;
+  }
+}
+
+.listeMetiers {
+  padding-top: 10px;
+  > li {
+    display: inline;
+
+    > p {
+      display: inline;
+    }
+  }
+
+  > li::before {
+    content: ', ';
+  }
+  > li:first-of-type::before{
+    content: none;
+  }
+}
diff --git a/...features/Stages3eEt2de/Rechercher/FormulaireRecherche/ListeResultatsStage3eEt2de.test.tsx b/...features/Stages3eEt2de/Rechercher/FormulaireRecherche/ListeResultatsStage3eEt2de.test.tsx
@@ -68,6 +68,32 @@ describe('<ListeResultatsStage3eEt2de />', () => {
 			expect(resultats[0]).toHaveTextContent('Informatique');
 			expect(resultats[1]).toHaveTextContent('Mécanique');
 		});
+		it('des metiers proposés', () => {
+			// GIVEN
+			const resultatRecherche = aResultatRechercheStage3eEt2de({
+				nombreDeResultats: 3,
+				resultats: [
+					aStage3eEt2de({
+						appellationLibelle: ['Métier 1', 'Métier 2', 'Métier 3'],
+					}),
+				],
+			});
+
+			// WHEN
+			render(<ListeResultatsStage3eEt2de resultatList={resultatRecherche} />);
+
+			// THEN
+			const resultatsUl = screen.getByRole('list', { name: 'Stages de 3e et 2de' });
+			expect(resultatsUl).toBeInTheDocument();
+			const resultatsLis = within(resultatsUl).getAllByRole('listitem');
+			const metiersPremiereOffreUl = within(resultatsLis[0]).getByRole('list', { name: 'Métiers proposés' });
+			expect(metiersPremiereOffreUl).toBeVisible();
+			const metiersPremiereOffre = within(metiersPremiereOffreUl).getAllByRole('listitem');
+			expect(metiersPremiereOffre).toHaveLength(3);
+			expect(metiersPremiereOffre[0]).toHaveTextContent('Métier 1');
+			expect(metiersPremiereOffre[1]).toHaveTextContent('Métier 2');
+			expect(metiersPremiereOffre[2]).toHaveTextContent('Métier 3');
+		});
 		it('de l’adresse', () => {
 			// GIVEN
 			const resultatRecherche = aResultatRechercheStage3eEt2de({

diff --git a/...ents/features/Stages3eEt2de/Rechercher/FormulaireRecherche/ListeResultatsStage3eEt2de.tsx b/...ents/features/Stages3eEt2de/Rechercher/FormulaireRecherche/ListeResultatsStage3eEt2de.tsx
@@ -11,6 +11,8 @@ import {
 } from '~/client/components/layouts/RechercherSolution/Résultat/RésultatRechercherSolution';
 import { ResultatRechercheStage3eEt2de, Stage3eEt2de } from '~/server/stage-3e-et-2de/domain/stage3eEt2de';
 
+import styles from './ListeResultatsStage3eEt2de.module.scss';
+
 interface ListeResultatsStage3eEt2deProps {
 	resultatList: ResultatRechercheStage3eEt2de | undefined;
 }
@@ -61,10 +63,16 @@ function ResultatStage3eEt2de(stage3eEt2de: Stage3eEt2de) {
 				sousTitreOffre={<>
 					<p>{stage3eEt2de.domaine}</p>
 					<p>{stage3eEt2de.adresse.rueEtNumero}, {stage3eEt2de.adresse.codePostal} {stage3eEt2de.adresse.ville}</p>
+					<ul className={styles.listeMetiers} aria-label="Métiers proposés">
+						{stage3eEt2de.appellationLibelle.map((appellationLibelle) =>
+							<li key={appellationLibelle}><p>{appellationLibelle}</p></li>,
+						)}
+					</ul>
 				</>}
 				étiquetteOffreList={étiquetteOffreList}
 				lienOffre={lienOffre}
 				intituléLienOffre={intituléLienOffre}
+				className={styles.carteResultat}
 			/>
 		</li>
 	);

diff --git a/src/client/components/layouts/RechercherSolution/Résultat/RésultatRechercherSolution.tsx b/src/client/components/layouts/RechercherSolution/Résultat/RésultatRechercherSolution.tsx
@@ -15,10 +15,10 @@ type RésultatRechercherSolutionProps = {
 	intituléLienOffre?: string;
 	sousTitreOffre?: string | ReactNode;
 	étiquetteOffreList: Array<string | undefined>;
-} & LogoProps
+} & React.HTMLAttributes<HTMLElement> & LogoProps;
 
 export function RésultatRechercherSolution(props: PropsWithChildren<RésultatRechercherSolutionProps>) {
-	const { lienOffre, intituléOffre, intituléLienOffre, logo, sousTitreOffre, étiquetteOffreList, children, logoAlt='' } = props;
+	const { lienOffre, intituléOffre, intituléLienOffre, logo, sousTitreOffre, étiquetteOffreList, children, logoAlt= '', className } = props;
 	const { isSmallScreen } = useBreakpoint();
 	const idLink = useId();
 	const idIntitulé = useId();
@@ -51,7 +51,7 @@ export function RésultatRechercherSolution(props: PropsWithChildren<RésultatRe
 
 	return (
 		<div
-			className={styles.card}
+			className={classNames(styles.card, className)}
 			data-testid="RésultatRechercherSolution">
 			<div className={classNames(styles.cardLead, logo && styles.logoCardLead)}>
 				{ logo && <Image alt={logoAlt} src={logo} width={120} height={120}/>}

diff --git a/src/server/stage-3e-et-2de/domain/stage3eEt2de.fixture.ts b/src/server/stage-3e-et-2de/domain/stage3eEt2de.fixture.ts
@@ -41,6 +41,7 @@ export function aStage3eEt2de(override?: Partial<Stage3eEt2de>): Stage3eEt2de {
 			ville: 'Paris',
 		},
 		appellationCodes: ['11573', '11574'],
+		appellationLibelle: ['Boulangerie', 'Pâtisserie'],
 		domaine: 'Boulangerie',
 		modeDeContact: ModeDeContact.IN_PERSON,
 		nomEntreprise: 'La Boulangerie',

diff --git a/src/server/stage-3e-et-2de/domain/stage3eEt2de.ts b/src/server/stage-3e-et-2de/domain/stage3eEt2de.ts
@@ -9,6 +9,7 @@ export interface Stage3eEt2de {
 	modeDeContact?: ModeDeContact
 	siret: string
 	appellationCodes: string[]
+	appellationLibelle: string[]
 }
 
 export namespace Stage3eEt2de {

diff --git a/src/server/stage-3e-et-2de/infra/repositories/apiImmersionFacileStage3eEt2de.fixture.ts b/src/server/stage-3e-et-2de/infra/repositories/apiImmersionFacileStage3eEt2de.fixture.ts
@@ -16,9 +16,11 @@ export function anApiImmersionFacileStage3eEt2de(override?: Partial<ApiImmersion
 		appellations: [
 			{
 				appellationCode: '11573',
+				appellationLabel: 'Boulangerie',
 			},
 			{
 				appellationCode: '11574',
+				appellationLabel: 'Pâtisserie',
 			},
 		],
 		contactMode: ModeDeContact.IN_PERSON,

diff --git a/src/server/stage-3e-et-2de/infra/repositories/apiImmersionFacileStage3eEt2de.mapper.test.ts b/src/server/stage-3e-et-2de/infra/repositories/apiImmersionFacileStage3eEt2de.mapper.test.ts
@@ -25,9 +25,11 @@ describe('map ApiImmersionFacileStage3eEt2de', () => {
 					appellations: [
 						{
 							appellationCode: '11573',
+							appellationLabel: 'Boulangerie',
 						},
 						{
 							appellationCode: '11574',
+							appellationLabel: 'Pâtisserie',
 						},
 					],
 					contactMode: ModeDeContact.IN_PERSON,
@@ -72,6 +74,7 @@ describe('map ApiImmersionFacileStage3eEt2de', () => {
 							ville: 'Paris',
 						},
 						appellationCodes: ['11573', '11574'],
+						appellationLibelle: ['Boulangerie', 'Pâtisserie'],
 						domaine: 'Boulangerie',
 						modeDeContact: ModeDeContact.IN_PERSON,
 						nomEntreprise: 'La Boulangerie',
@@ -87,6 +90,7 @@ describe('map ApiImmersionFacileStage3eEt2de', () => {
 							ville: 'Paris',
 						},
 						appellationCodes: [],
+						appellationLibelle: [],
 						domaine: 'Boulangerie',
 						modeDeContact: undefined,
 						nomEntreprise: 'La Boulangerie 2',

diff --git a/src/server/stage-3e-et-2de/infra/repositories/apiImmersionFacileStage3eEt2de.mapper.ts b/src/server/stage-3e-et-2de/infra/repositories/apiImmersionFacileStage3eEt2de.mapper.ts
@@ -18,6 +18,7 @@ export function mapRechercheStage3eEt2de(apiResponse: Array<ApiImmersionFacileSt
 				ville: stage3eEt2de.address.city,
 			},
 			appellationCodes: stage3eEt2de.appellations.map((appellation) => appellation.appellationCode),
+			appellationLibelle: stage3eEt2de.appellations.map((appellation) => appellation.appellationLabel),
 			domaine: stage3eEt2de.romeLabel,
 			modeDeContact: stage3eEt2de.contactMode,
 			nomEntreprise: stage3eEt2de.name,

diff --git a/src/server/stage-3e-et-2de/infra/repositories/apiImmersionFacileStage3eEt2de.ts b/src/server/stage-3e-et-2de/infra/repositories/apiImmersionFacileStage3eEt2de.ts
@@ -17,6 +17,7 @@ export interface ApiImmersionFacileStage3eEt2deRechercheResponse {
 	fitForDisabledWorkers: boolean
 	appellations: Array<{
 		appellationCode: string
+		appellationLabel: string
 	}>
 	siret: string
 }