From 574db55d73c2ec662e16849f49c6c7bba8c6bc09 Mon Sep 17 00:00:00 2001 From: Sonny Klotz Date: Fri, 24 Jan 2025 16:48:25 +0100 Subject: [PATCH] =?UTF-8?q?feat(apprentissage):=20termine=20la=20campagne?= =?UTF-8?q?=20et=20p=C3=A9rennise=20le=20contenu=20des=20pages?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- .../CampagneApprentissageEntreprises.test.tsx | 609 ++++-------------- .../CampagneApprentissageEntreprises.tsx | 75 +-- ...InformationSurEmbaucheApprenti.module.scss | 40 +- .../InformationSurEmbaucheApprenti.tsx | 27 +- ...InformationSurEmbaucheApprenti.module.scss | 57 -- .../NewInformationSurEmbaucheApprenti.tsx | 26 - .../CampagneApprentissageJeunes.tsx | 55 +- .../Header/Navigation/NavigationStructure.tsx | 2 +- .../index.page.test.tsx | 94 +-- .../apprentissage-entreprises/index.page.tsx | 39 +- src/pages/plan-du-site/index.page.test.tsx | 3 - 11 files changed, 198 insertions(+), 829 deletions(-) delete mode 100644 src/client/components/features/CampagneApprentissage/CampagneApprentissageEntreprises/NewInformationSurEmbaucheApprenti/NewInformationSurEmbaucheApprenti.module.scss delete mode 100644 src/client/components/features/CampagneApprentissage/CampagneApprentissageEntreprises/NewInformationSurEmbaucheApprenti/NewInformationSurEmbaucheApprenti.tsx diff --git a/src/client/components/features/CampagneApprentissage/CampagneApprentissageEntreprises/CampagneApprentissageEntreprises.test.tsx b/src/client/components/features/CampagneApprentissage/CampagneApprentissageEntreprises/CampagneApprentissageEntreprises.test.tsx index f4c081fed9..f6da6b984f 100644 --- a/src/client/components/features/CampagneApprentissage/CampagneApprentissageEntreprises/CampagneApprentissageEntreprises.test.tsx +++ b/src/client/components/features/CampagneApprentissage/CampagneApprentissageEntreprises/CampagneApprentissageEntreprises.test.tsx @@ -3,15 +3,11 @@ */ import { render, screen, within } from '@testing-library/react'; -import { userEvent } from '@testing-library/user-event'; import { CampagneApprentissageEntreprises, } from '~/client/components/features/CampagneApprentissage/CampagneApprentissageEntreprises/CampagneApprentissageEntreprises'; import { mockLargeScreen, mockSmallScreen } from '~/client/components/window.mock'; -import { DependenciesProvider } from '~/client/context/dependenciesContainer.context'; -import { aVideoService } from '~/client/services/video/video.service.fixture'; -import { aVideoCampagneApprentissage } from '~/server/campagne-apprentissage/domain/videoCampagneApprentissage.fixture'; describe('CampagneApprentissageEntreprises', () => { beforeEach(() => { @@ -22,500 +18,163 @@ describe('CampagneApprentissageEntreprises', () => { jest.clearAllMocks(); }); - describe('Avant la campagne du 22 octobre 2024 sur l’apprentissage', () => { - beforeEach(() => { - // Given - process.env.NEXT_PUBLIC_CAMPAGNE_APPRENTISSAGE_FEATURE = '0'; - }); - - describe('Encart de présentation de l’apprentissage pour les employeurs', () => { - it('affiche l’ancien titre', () => { - // When - render( - - - , - ); - const titre = screen.getByRole('heading', { level: 1, name: 'L’apprentissage, pour mon entreprise c’est le bon choix\u00A0!' }); - - // Then - expect(titre).toBeVisible(); - }); - it('masque le nouveau titre', () => { - // When - render( - - - , - ); - const titre = screen.queryByRole('heading', { level: 1, name: 'Avec l’apprentissage, recrutez la future pépite de votre entreprise\u00A0' }); - - // Then - expect(titre).not.toBeInTheDocument(); - }); - - it('affiche le lien vers la simulation pour les employeurs', () => { - // Given - mockLargeScreen(); - // When - render( - - - , - ); - - // Then - const simulation = screen.getByRole('link', { name: /Simuler le coût de l’embauche d’un apprenti/i }); - expect(simulation).toBeVisible(); - expect(simulation).toHaveAttribute('href', '/apprentissage/simulation?simulateur=employeur'); - }); - it('masque le lien vers le dépot d’offres', () => { - // When - render( - - - , - ); + describe('Encart de présentation de l’apprentissage pour les employeurs', () => { + it('masque l’ancien titre', () => { + // When + render( + , + ); - // Then - const simulation = screen.queryByRole('link', { name: 'Déposer mon offre d’apprentissage' }); - expect(simulation).not.toBeInTheDocument(); - }); + // Then + const titre = screen.queryByRole('heading', { level: 1, name: 'L’apprentissage, pour mon entreprise c’est le bon choix\u00A0!' }); + expect(titre).not.toBeInTheDocument(); }); - describe('Encart redirections internes vers la FAQ et le dépot d’offre', () => { - it('affiche les informations pour accéder à la FAQ parents-enfants', () => { - render( - - - , - ); - expect(screen.getByRole('heading', { - level: 2, - name: 'On répond à toutes vos questions sur l’apprentissage', - })).toBeVisible(); - expect(screen.getByRole('link', { name: 'Consulter la FAQ' })).toHaveAttribute('href', '/faq/apprentissage-employeurs-apprentis'); - }); - it('affiche les informations pour accéder à la page d‘apprentissage pour les employeurs', () => { - render( - - - , - ); - expect(screen.getByRole('heading', { - level: 2, - name: 'Vous êtes à la recherche d’un apprenti ?', - })).toBeVisible(); - expect(screen.getByRole('link', { name: 'Déposer une offre' })).toHaveAttribute('href', '/apprentissage/deposer-offre'); - }); + it('affiche le nouveau titre', () => { + // When + render( + , + ); + + // Then + const titre = screen.getByRole('heading', { level: 1, name: 'Avec l’apprentissage, recrutez la future pépite de votre entreprise\u00A0!' }); + expect(titre).toBeVisible(); }); - describe('Section témoignages vidéos', () => { - const aVideoCampagneApprentissagesList = [ - aVideoCampagneApprentissage(), - aVideoCampagneApprentissage({ - titre: "Qu'est-ce que le Contrat d'Engagement Jeune CEJ ?", - transcription: '[transcription]', - videoId: '7zD4PCOiUvw', - }), - ]; - describe('si aucune video n’est trouvée', () => { - it('n’affiche pas la section', () => { - render( - - - , - ); - expect(screen.queryByRole('region', { name: /Ils ont choisi d’embaucher un apprenti ! Pourquoi pas vous ?/i })).not.toBeInTheDocument(); - }); - }); - it('je vois le titre de la partie videos', () => { - render( - - - , - ); - expect(screen.getByRole('heading', { - level: 2, - name: 'Ils ont choisi d’embaucher un apprenti ! Pourquoi pas vous ?', - })).toBeVisible(); - }); - it('je vois la description de la partie videos', () => { - render( - - - , - ); - expect(screen.getByText('Découvrez les témoignages des maîtres d’apprentissage et des apprentis qu’ils accompagnent au quotidien.')).toBeVisible(); - }); - it('je vois les titres vidéos et ce sont des boutons', () => { - render( - - - , - ); - - const sectionVideos = screen.getByRole('region', { name: 'Découvrez les témoignages des maîtres d’apprentissage et des apprentis qu’ils accompagnent au quotidien.' }); - const titresVideos = within(sectionVideos).getAllByRole('listitem'); - const boutons = titresVideos.map((titreVideo) => within(titreVideo).getByRole('button')); - - expect(titresVideos.length).toBe(aVideoCampagneApprentissagesList.length); - expect(titresVideos[0]).toHaveTextContent(aVideoCampagneApprentissagesList[0].titre); - expect(boutons[0]).toBeVisible(); - }); - describe('si je n’ai pas sélectionné de vidéo', () => { - it('c’est la première vidéo de la liste qui est visible par défaut', () => { - const premiereVideoCampagne = aVideoCampagneApprentissagesList[0]; - render( - - - , - ); - - const iframe = screen.getByTitle(premiereVideoCampagne.titre); - expect(iframe).toBeVisible(); - expect(iframe).toHaveAttribute('src', expect.stringMatching(`${premiereVideoCampagne.videoId}`)); - }); - }); - describe('si j’ai selectionné une vidéo', () => { - it('c’est la vidéo selectionnée qui est visible', async () => { - const deuxièmeVideoCampagne = aVideoCampagneApprentissagesList[1]; - const user = userEvent.setup(); - - render( - - - , - ); - - const boutonDeuxiemeVideo = screen.getByRole('button', { name: deuxièmeVideoCampagne.titre }); - await user.click(boutonDeuxiemeVideo); - - const iframe = screen.getByTitle(deuxièmeVideoCampagne.titre); - expect(iframe).toBeVisible(); - expect(iframe).toHaveAttribute('src', expect.stringMatching(`${deuxièmeVideoCampagne.videoId}`)); - expect(boutonDeuxiemeVideo).toHaveAttribute('aria-current', 'true'); - }); - it('j’ai l’information que la vidéo courante est celle que j’ai selectionné', async () => { - const deuxièmeVideoCampagne = aVideoCampagneApprentissagesList[1]; - const user = userEvent.setup(); - - render( - - - , - ); - - const boutonDeuxiemeVideo = screen.getByRole('button', { name: deuxièmeVideoCampagne.titre }); - await user.click(boutonDeuxiemeVideo); - - const boutonVideoCourante = screen.getByRole('button', { current: true }); - expect(boutonVideoCourante).toBe(boutonDeuxiemeVideo); - }); - it('le focus se retrouve avant la vidéo', async () => { - const deuxièmeVideoCampagne = aVideoCampagneApprentissagesList[1]; - const user = userEvent.setup(); - - render( - - - , - ); - - await user.click(screen.getByRole('button', { name: deuxièmeVideoCampagne.titre })); - - const titre = screen.getByRole('heading', { name: 'Ils ont choisi d’embaucher un apprenti ! Pourquoi pas vous ?' }); - const iframe = screen.getByTitle(deuxièmeVideoCampagne.titre); - expect(titre).toHaveFocus(); - expect(titre.compareDocumentPosition(iframe)).toBe(Node.DOCUMENT_POSITION_FOLLOWING); - }); - }); - it('je ne vois pas la transcription de la vidéo', () => { - render( - - - , - ); - - const premièreVideoCampagne = aVideoCampagneApprentissagesList[0]; - expect(screen.queryByText(premièreVideoCampagne.transcription)).not.toBeVisible(); - }); - it('je vois un bouton me permettant de voir la transcription de la vidéo', () => { - render( - - - , - ); - - const ouvrirTranscription = screen.getByText('Lire la transcription'); + it('masque le lien vers la simulation pour les employeurs', () => { + // Given + mockLargeScreen(); - expect(ouvrirTranscription).toBeVisible(); - }); - describe('si je clique sur le bouton de transcription', () => { - it('je vois la transcription de la vidéo', async () => { - const user = userEvent.setup(); - render( - - - , - ); - const premièreVideoCampagne = aVideoCampagneApprentissagesList[0]; - const ouvrirTranscription = screen.getByText('Lire la transcription'); + // When + render( + , + ); - await user.click(ouvrirTranscription); - expect(screen.getByText(premièreVideoCampagne.transcription)).toBeVisible(); - }); - }); + // Then + const simulation = screen.queryByRole('link', { name: /Simuler le coût de l’embauche d’un apprenti/i }); + expect(simulation).not.toBeInTheDocument(); }); - describe('Section redirections externes sur l’embauche d’un apprenti', () => { - describe('affiche une sous section pour se renseigner', () => { - it('comprenant un titre', () => { - // When - render( - - - , - ); - - // Then - const section = screen.getByRole('region', { name: 'Comme eux, vous souhaitez faire le choix de l’apprentissage\u00A0?' }); - const titre = within(section).getByRole('heading', { level: 2, name: 'Comme eux, vous souhaitez faire le choix de l’apprentissage\u00A0?' }); - expect(titre).toBeVisible(); - }); - - it('comprenant un lien externe vers des renseignements', () => { - // When - render( - - - , - ); - - // Then - const section = screen.getByRole('region', { name: 'Comme eux, vous souhaitez faire le choix de l’apprentissage\u00A0?' }); - const link = within(section).getByRole('link', { name: 'Se renseigner sur l’embauche - nouvelle fenêtre' }); - expect(link).toBeVisible(); - expect(link).toHaveAttribute('href', 'https://travail-emploi.gouv.fr/formation-professionnelle/formation-en-alternance-10751/apprentissage/embaucher-un-apprenti/' ); - }); - }); - describe('affiche une sous section pour l’aide financière', () => { - it('comprenant un titre et une description', () => { - // When - render(); - - // Then - const section = screen.getByRole('region', { name: 'Vous envisagez de recruter un apprenti\u00A0? Vous pouvez bénéficier d’une aide financière' }); - const titre = within(section).getByRole('heading', { level: 2, name: /Vous envisagez de recruter un apprenti ?/i }); - const description = within(section).getByText('Cette aide de 6000 euros maximum est versée pour la première année de contrat, jusqu’au niveau master'); - expect(titre).toBeVisible(); - expect(description).toBeVisible(); - }); - - it('comprenant un lien externe vers une explication sur l’aide financière', () => { - // When - render(); - - // Then - const section = screen.getByRole('region', { name: 'Vous envisagez de recruter un apprenti\u00A0? Vous pouvez bénéficier d’une aide financière' }); - const link = within(section).getByRole('link', { name: 'En savoir plus - nouvelle fenêtre' }); - expect(link).toBeVisible(); - expect(link).toHaveAttribute('href', 'https://travail-emploi.gouv.fr/formation-professionnelle/entreprise-et-alternance/aides-au-recrutement-d-un-alternant/article/aide-2023-aux-employeurs-qui-recrutent-en-alternance' ); - }); - }); + it('affiche le lien vers le dépot d’offres', () => { + // When + render( + , + ); + + // Then + const simulation = screen.getByRole('link', { name: /Déposer mon offre d’apprentissage/i }); + expect(simulation).toBeVisible(); + expect(simulation).toHaveAttribute('href', '/apprentissage/deposer-offre'); }); }); - - describe('Pendant et après la campagne du 22 octobre 2024 sur l’apprentissage', () => { - beforeEach(() => { - // Given - process.env.NEXT_PUBLIC_CAMPAGNE_APPRENTISSAGE_FEATURE = '1'; + describe('Section bonnes raisons de choisir l’apprentissage', () => { + it('comporte un titre', () => { + // WHEN + render( + , + ); + + // THEN + const sectionRaison = screen.getByRole('region', { name: /5 bonnes raisons de choisir l’apprentissage :/i }); + const titre = within(sectionRaison).getByRole('heading', { level: 2, name: /5 bonnes raisons de choisir l’apprentissage :/i }); + expect(titre).toBeVisible(); }); + it('comporte une liste des raisons', () => { + // GIVEN + const expectedRaisonList = [ + 'Former votre futur collaborateur', + 'Transmettre votre savoir-faire', + 'Bénéficier d’aides pour le recrutement', + 'Découvrir de nouvelles idées et pratiques', + 'Préparer l’avenir de votre entreprise', + ]; - describe('Encart de présentation de l’apprentissage pour les employeurs', () => { - it('masque l’ancien titre', () => { - // When - render( - - - , - ); - - // Then - const titre = screen.queryByRole('heading', { level: 1, name: 'L’apprentissage, pour mon entreprise c’est le bon choix\u00A0!' }); - expect(titre).not.toBeInTheDocument(); - }); - it('affiche le nouveau titre', () => { - // When - render( - - - , - ); - - // Then - const titre = screen.getByRole('heading', { level: 1, name: 'Avec l’apprentissage, recrutez la future pépite de votre entreprise\u00A0!' }); - expect(titre).toBeVisible(); - }); - - it('masque le lien vers la simulation pour les employeurs', () => { - // Given - mockLargeScreen(); - - // When - render( - - - , - ); - - // Then - const simulation = screen.queryByRole('link', { name: /Simuler le coût de l’embauche d’un apprenti/i }); - expect(simulation).not.toBeInTheDocument(); - }); - it('affiche le lien vers le dépot d’offres', () => { - // When - render( - - - , - ); + // WHEN + render( + , + ); - // Then - const simulation = screen.getByRole('link', { name: /Déposer mon offre d’apprentissage/i }); - expect(simulation).toBeVisible(); - expect(simulation).toHaveAttribute('href', '/apprentissage/deposer-offre'); + // THEN + const sectionRaison = screen.getByRole('region', { name: /5 bonnes raisons de choisir l’apprentissage :/i }); + const raisonList = within(sectionRaison).getAllByRole('listitem'); + expect(raisonList).toHaveLength(expectedRaisonList.length); + expectedRaisonList.forEach((raison, index) => { + expect(raisonList[index]).toHaveTextContent(raison); + expect(raisonList[index]).toBeVisible(); }); }); - describe('Encart redirections internes vers la FAQ et le dépot d’offre', () => { - it('masque les informations pour accéder à la FAQ parents-enfants', () => { - render( - - - , - ); - expect(screen.queryByRole('heading', { - level: 2, - name: 'On répond à toutes vos questions sur l’apprentissage', - })).not.toBeInTheDocument(); - }); - it('masque les informations pour accéder à la page d‘apprentissage pour les employeurs', () => { - render( - - - , - ); - expect(screen.queryByRole('heading', { - level: 2, - name: 'Vous êtes à la recherche d’un apprenti ?', - })).not.toBeInTheDocument(); - }); + }); + describe('Encart redirections internes vers la FAQ et le dépot d’offre', () => { + it('masque les informations pour accéder à la FAQ parents-enfants', () => { + render( + , + ); + expect(screen.queryByRole('heading', { + level: 2, + name: 'On répond à toutes vos questions sur l’apprentissage', + })).not.toBeInTheDocument(); }); - describe('Section témoignages vidéos', () => { - it('masque les vidéos', () => { - // Given - const serverSideVideos = null; - - // When - render( - - - , - ); - // Then - expect(screen.queryByRole('region', { name: /Ils ont choisi d’embaucher un apprenti ! Pourquoi pas vous ?/i })).not.toBeInTheDocument(); - }); + it('masque les informations pour accéder à la page d‘apprentissage pour les employeurs', () => { + render( + , + ); + expect(screen.queryByRole('heading', { + level: 2, + name: 'Vous êtes à la recherche d’un apprenti ?', + })).not.toBeInTheDocument(); + }); + }); + describe('Section témoignages vidéos', () => { + it('masque les vidéos', () => { + // When + render( + , + ); + // Then + expect(screen.queryByRole('region', { name: /Ils ont choisi d’embaucher un apprenti ! Pourquoi pas vous ?/i })).not.toBeInTheDocument(); }); - describe('Section verbatims apprentis', () => { + }); + describe('Section verbatims apprentis', () => { it('affiche une section titrée', () => { // When - render( - - - , - ); + render( + , + ); // Then - const section = screen.getByRole('region', { name: 'Ils ont choisi de former des apprentis, pourquoi pas vous ?' }); - const titre = within(section).getByRole('heading', { level: 2, name: 'Ils ont choisi de former des apprentis, pourquoi pas vous ?' }); - const sousTitre = within(section).getByText('Découvrez les témoignages de Fabrice, Gaël, Julien, et de leurs apprentis !'); - expect(titre).toBeVisible(); - expect(sousTitre).toBeVisible(); + const section = screen.getByRole('region', { name: 'Ils ont choisi de former des apprentis, pourquoi pas vous ?' }); + const titre = within(section).getByRole('heading', { level: 2, name: 'Ils ont choisi de former des apprentis, pourquoi pas vous ?' }); + const sousTitre = within(section).getByText('Découvrez les témoignages de Fabrice, Gaël, Julien, et de leurs apprentis !'); + expect(titre).toBeVisible(); + expect(sousTitre).toBeVisible(); }); + }); + describe('Section redirections externes sur l’embauche d’un apprenti', () => { + it('masque la sous-section pour se renseigner', () => { + // When + render( + , + ); + + // Then + const section = screen.queryByRole('region', { name: 'Comme eux, vous souhaitez faire le choix de l’apprentissage\u00A0?' }); + expect(section).not.toBeInTheDocument(); }); - describe('Section redirections externes sur l’embauche d’un apprenti', () => { - it('masque la sous-section pour se renseigner', () => { - // When - render( - - - , - ); - - // Then - const section = screen.queryByRole('region', { name: 'Comme eux, vous souhaitez faire le choix de l’apprentissage\u00A0?' }); - expect(section).not.toBeInTheDocument(); - }); - it('masque la sous-section pour l’aide financière', () => { - // When - render(); + it('masque la sous-section pour l’aide financière', () => { + // When + render(); - // Then - const section = screen.queryByRole('region', { name: 'Vous envisagez de recruter un apprenti\u00A0? Vous pouvez bénéficier d’une aide financière' }); - expect(section).not.toBeInTheDocument(); - }); - it('affiche une sous-section redirection FAQ', () => { - // When - render(); - - // Then - const section = screen.getByRole('region', { name: 'Vous voulez en savoir plus sur l’apprentissage ?' }); - const cta = within(section).getByRole('link', { name: 'Consultez notre FAQ' }); - expect(section).toBeVisible(); - expect(cta).toBeVisible(); - expect(cta).toHaveAttribute('href', '/faq/apprentissage-employeurs-apprentis'); - }); + // Then + const section = screen.queryByRole('region', { name: 'Vous envisagez de recruter un apprenti\u00A0? Vous pouvez bénéficier d’une aide financière' }); + expect(section).not.toBeInTheDocument(); }); - }); - - describe('Invariants', () => { - describe('Section bonnes raisons de choisir l’apprentissage', () => { - it('comporte un titre', () => { - // WHEN - render( - - - , - ); - - // THEN - const sectionRaison = screen.getByRole('region', { name: /5 bonnes raisons de choisir l’apprentissage :/i }); - const titre = within(sectionRaison).getByRole('heading', { level: 2, name: /5 bonnes raisons de choisir l’apprentissage :/i }); - expect(titre).toBeVisible(); - }); - it('comporte une liste des raisons', () => { - // GIVEN - const expectedRaisonList = [ - 'Former votre futur collaborateur', - 'Transmettre votre savoir-faire', - 'Bénéficier d’aides pour le recrutement', - 'Découvrir de nouvelles idées et pratiques', - 'Préparer l’avenir de votre entreprise', - ]; - - // WHEN - render( - - - , - ); - - // THEN - const sectionRaison = screen.getByRole('region', { name: /5 bonnes raisons de choisir l’apprentissage :/i }); - const raisonList = within(sectionRaison).getAllByRole('listitem'); - expect(raisonList).toHaveLength(expectedRaisonList.length); - expectedRaisonList.forEach((raison, index) => { - expect(raisonList[index]).toHaveTextContent(raison); - expect(raisonList[index]).toBeVisible(); - }); - }); + it('affiche une sous-section redirection FAQ', () => { + // When + render(); + + // Then + const section = screen.getByRole('region', { name: 'Vous voulez en savoir plus sur l’apprentissage ?' }); + const cta = within(section).getByRole('link', { name: 'Consultez notre FAQ' }); + expect(section).toBeVisible(); + expect(cta).toBeVisible(); + expect(cta).toHaveAttribute('href', '/faq/apprentissage-employeurs-apprentis'); }); }); diff --git a/src/client/components/features/CampagneApprentissage/CampagneApprentissageEntreprises/CampagneApprentissageEntreprises.tsx b/src/client/components/features/CampagneApprentissage/CampagneApprentissageEntreprises/CampagneApprentissageEntreprises.tsx index feab777e05..608c756d6f 100644 --- a/src/client/components/features/CampagneApprentissage/CampagneApprentissageEntreprises/CampagneApprentissageEntreprises.tsx +++ b/src/client/components/features/CampagneApprentissage/CampagneApprentissageEntreprises/CampagneApprentissageEntreprises.tsx @@ -1,14 +1,9 @@ import React from 'react'; import styles from '~/client/components/features/CampagneApprentissage/CampagneApprentissage.module.scss'; -import EnSavoirPlusApprentissageEntreprises - from '~/client/components/features/CampagneApprentissage/CampagneApprentissageEntreprises/EnSavoirPlusApprentissageEntreprises/EnSavoirPlusApprentissageEntreprises'; import { InformationSurEmbaucheApprenti, } from '~/client/components/features/CampagneApprentissage/CampagneApprentissageEntreprises/InformationSurEmbaucheApprenti/InformationSurEmbaucheApprenti'; -import { - NewInformationSurEmbaucheApprenti, -} from '~/client/components/features/CampagneApprentissage/CampagneApprentissageEntreprises/NewInformationSurEmbaucheApprenti/NewInformationSurEmbaucheApprenti'; import { VerbatimsEmployeursApprentis, } from '~/client/components/features/CampagneApprentissage/CampagneApprentissageEntreprises/VerbatimsEmployeursApprentis/VerbatimsEmployeursApprentis'; @@ -16,18 +11,11 @@ import { Raisons, RaisonsDeChoisirApprentissage, } from '~/client/components/features/CampagneApprentissage/RaisonsDeChoisirApprentissage/RaisonsDeChoisirApprentissage'; -import VideosCampagneApprentissage - from '~/client/components/features/CampagneApprentissage/VideosCampagneApprentissage/VideosCampagneApprentissage'; import { HeroWithIllustration } from '~/client/components/ui/Hero/Hero'; import { Link } from '~/client/components/ui/Link/Link'; -import { TYPE_SIMULATEUR } from '~/pages/apprentissage/simulation/index.page'; -import { VideoCampagneApprentissage } from '~/server/campagne-apprentissage/domain/videoCampagneApprentissage'; -interface CampagneApprentissageEntreprisesProps { - videos: Array | null -} -export function CampagneApprentissageEntreprises({ videos }: CampagneApprentissageEntreprisesProps) { +export function CampagneApprentissageEntreprises() { const raisons: Raisons[] = [ { iconName: 'award', @@ -51,38 +39,6 @@ export function CampagneApprentissageEntreprises({ videos }: CampagneApprentissa }, ]; - const campagneApprentissageEstEnCours = process.env.NEXT_PUBLIC_CAMPAGNE_APPRENTISSAGE_FEATURE === '1'; - - function nouveauBandeauDeCampagne() { - return ( - -

Avec l’apprentissage, recrutez la future pépite de votre entreprise !

-

Des milliers de jeunes motivés, avec des compétences à revendre, n’attendent que - vous pour démarrer leur contrat d’apprentissage.

- - Déposer mon offre d’apprentissage - - - - ); - } - - function ancienBandeauDeCampagne() { - return ( - -

L’apprentissage, pour mon entreprise c’est le bon choix !

- - Simuler le coût d’embauche - Simuler le coût de l’embauche d’un apprenti - - - - ); - } - const verbatimsApprentisListe = [ { imageUrl: '/images/campagne-verbatim-fabrice.webp', @@ -119,26 +75,19 @@ export function CampagneApprentissageEntreprises({ videos }: CampagneApprentissa return ( <>
- {campagneApprentissageEstEnCours ? nouveauBandeauDeCampagne() - : ancienBandeauDeCampagne()} + +

Avec l’apprentissage, recrutez la future pépite de votre entreprise !

+

Des milliers de jeunes motivés, avec des compétences à revendre, n’attendent que + vous pour démarrer leur contrat d’apprentissage.

+ + Déposer mon offre d’apprentissage + + +
- {(!campagneApprentissageEstEnCours && - - )} - { videos && videos.length > 0 && ( - - )} - {(campagneApprentissageEstEnCours ? ( - <> - - - - ) : - )} + + ); } diff --git a/src/client/components/features/CampagneApprentissage/CampagneApprentissageEntreprises/InformationSurEmbaucheApprenti/InformationSurEmbaucheApprenti.module.scss b/src/client/components/features/CampagneApprentissage/CampagneApprentissageEntreprises/InformationSurEmbaucheApprenti/InformationSurEmbaucheApprenti.module.scss index b5b2d5f3f0..8aa27cda49 100644 --- a/src/client/components/features/CampagneApprentissage/CampagneApprentissageEntreprises/InformationSurEmbaucheApprenti/InformationSurEmbaucheApprenti.module.scss +++ b/src/client/components/features/CampagneApprentissage/CampagneApprentissageEntreprises/InformationSurEmbaucheApprenti/InformationSurEmbaucheApprenti.module.scss @@ -1,30 +1,15 @@ -@use '@styles/utilities-deprecated'; +@use '@styles/utilities'; .informationSurEmbauche { + max-width: 100%; - @include utilities-deprecated.media(large) { - display: grid; - grid-template-columns: 1fr 1fr; - grid-gap: 2.5rem; - - max-width: 100%; - margin: 0; - padding: 0 2rem; - } - - & .renseignement { - & span { - display: inline-block; - } - } - - & .renseignement, & .aideFinanciere { + & .aideFinanciere { display: flex; flex-direction: column; gap: 1.5rem; padding: 1.75rem 1rem; - @include utilities-deprecated.media(large) { + @include utilities.media(large) { gap: 2.5rem; padding: 5rem 1rem } @@ -36,16 +21,25 @@ & h2 { @extend %subheading; - color: utilities-deprecated.$color-primary; + color: utilities.$color-primary; flex-grow: 1; - @include utilities-deprecated.media(large) { + @include utilities.media(large) { + text-align: center; + } + } + + & h2 + p { + @extend %subheading; + color: utilities.$color-title-primary-contrast; + + @include utilities.media(large) { text-align: center; } } & .description { - @include utilities-deprecated.media(large) { + @include utilities.media(large) { text-align: center; } } @@ -56,7 +50,7 @@ justify-content: center; align-self: center; - @include utilities-deprecated.media(large) { + @include utilities.media(large) { max-width: fit-content; } } diff --git a/src/client/components/features/CampagneApprentissage/CampagneApprentissageEntreprises/InformationSurEmbaucheApprenti/InformationSurEmbaucheApprenti.tsx b/src/client/components/features/CampagneApprentissage/CampagneApprentissageEntreprises/InformationSurEmbaucheApprenti/InformationSurEmbaucheApprenti.tsx index b16b4560f5..989098be83 100644 --- a/src/client/components/features/CampagneApprentissage/CampagneApprentissageEntreprises/InformationSurEmbaucheApprenti/InformationSurEmbaucheApprenti.tsx +++ b/src/client/components/features/CampagneApprentissage/CampagneApprentissageEntreprises/InformationSurEmbaucheApprenti/InformationSurEmbaucheApprenti.tsx @@ -6,29 +6,18 @@ import { Container } from '~/client/components/layouts/Container/Container'; import { Link } from '~/client/components/ui/Link/Link'; export function InformationSurEmbaucheApprenti() { - const embaucherUnApprentiLink = 'https://travail-emploi.gouv.fr/formation-professionnelle/formation-en-alternance-10751/apprentissage/embaucher-un-apprenti/'; - const enSavoirPlusSurAideLink = 'https://travail-emploi.gouv.fr/formation-professionnelle/entreprise-et-alternance/aides-au-recrutement-d-un-alternant/article/aide-2023-aux-employeurs-qui-recrutent-en-alternance'; return ( -
-

- Comme eux, vous souhaitez faire le choix de l’apprentissage ? -

- - Se renseigner sur l’embauche - - -
-

- Vous envisagez de recruter un apprenti ? Vous pouvez bénéficier d’une aide financière -

-

- Cette aide de 6000 euros maximum est versée pour la première année de contrat, jusqu’au niveau master -

- - En savoir plus +
+

+ Vous voulez en savoir plus sur l’apprentissage ? +

+

Nous avons toutes les réponses à vos questions !

+
+ + Consultez notre FAQ
diff --git a/src/client/components/features/CampagneApprentissage/CampagneApprentissageEntreprises/NewInformationSurEmbaucheApprenti/NewInformationSurEmbaucheApprenti.module.scss b/src/client/components/features/CampagneApprentissage/CampagneApprentissageEntreprises/NewInformationSurEmbaucheApprenti/NewInformationSurEmbaucheApprenti.module.scss deleted file mode 100644 index 8aa27cda49..0000000000 --- a/src/client/components/features/CampagneApprentissage/CampagneApprentissageEntreprises/NewInformationSurEmbaucheApprenti/NewInformationSurEmbaucheApprenti.module.scss +++ /dev/null @@ -1,57 +0,0 @@ -@use '@styles/utilities'; - -.informationSurEmbauche { - max-width: 100%; - - & .aideFinanciere { - display: flex; - flex-direction: column; - gap: 1.5rem; - padding: 1.75rem 1rem; - - @include utilities.media(large) { - gap: 2.5rem; - padding: 5rem 1rem - } - - & span { - display: inline-block; - } - } - - & h2 { - @extend %subheading; - color: utilities.$color-primary; - flex-grow: 1; - - @include utilities.media(large) { - text-align: center; - } - } - - & h2 + p { - @extend %subheading; - color: utilities.$color-title-primary-contrast; - - @include utilities.media(large) { - text-align: center; - } - } - - & .description { - @include utilities.media(large) { - text-align: center; - } - } - - & .link { - max-width: 60ch; - width: 100%; - justify-content: center; - align-self: center; - - @include utilities.media(large) { - max-width: fit-content; - } - } -} diff --git a/src/client/components/features/CampagneApprentissage/CampagneApprentissageEntreprises/NewInformationSurEmbaucheApprenti/NewInformationSurEmbaucheApprenti.tsx b/src/client/components/features/CampagneApprentissage/CampagneApprentissageEntreprises/NewInformationSurEmbaucheApprenti/NewInformationSurEmbaucheApprenti.tsx deleted file mode 100644 index 167eeb3765..0000000000 --- a/src/client/components/features/CampagneApprentissage/CampagneApprentissageEntreprises/NewInformationSurEmbaucheApprenti/NewInformationSurEmbaucheApprenti.tsx +++ /dev/null @@ -1,26 +0,0 @@ -import React from 'react'; - -import styles - from '~/client/components/features/CampagneApprentissage/CampagneApprentissageEntreprises/NewInformationSurEmbaucheApprenti/NewInformationSurEmbaucheApprenti.module.scss'; -import { Container } from '~/client/components/layouts/Container/Container'; -import { Link } from '~/client/components/ui/Link/Link'; - -export function NewInformationSurEmbaucheApprenti() { - - return ( - -
-
-

- Vous voulez en savoir plus sur l’apprentissage ? -

-

Nous avons toutes les réponses à vos questions !

-
- - Consultez notre FAQ - - -
- - ); -} diff --git a/src/client/components/features/CampagneApprentissage/CampagneApprentissageJeunes/CampagneApprentissageJeunes.tsx b/src/client/components/features/CampagneApprentissage/CampagneApprentissageJeunes/CampagneApprentissageJeunes.tsx index 46432d2406..49f35dd29d 100644 --- a/src/client/components/features/CampagneApprentissage/CampagneApprentissageJeunes/CampagneApprentissageJeunes.tsx +++ b/src/client/components/features/CampagneApprentissage/CampagneApprentissageJeunes/CampagneApprentissageJeunes.tsx @@ -48,49 +48,24 @@ export function CampagneApprentissageJeunes({ videos }: CampagneApprentissageJeu }, ]; - const campagneApprentissageEstEnCours = process.env.NEXT_PUBLIC_CAMPAGNE_APPRENTISSAGE_FEATURE === '1'; - - function nouveauBandeauDeCampagne() { - return ( - -

Avec l’apprentissage, vous apprenez directement sur le terrain et vous êtes payés ! -

- - - Simuler votre rémunération en tant qu’apprenti - - - - - ); - } - - function ancienBandeauDeCampagne() { - return ( - -

Avec l’apprentissage, vous apprenez directement sur le terrain et vous êtes payés ! -

- - - Simuler votre rémunération en tant qu’apprenti - - - - - ); - } - return ( <>
- {campagneApprentissageEstEnCours ? nouveauBandeauDeCampagne() : ancienBandeauDeCampagne()} + +

Avec l’apprentissage, vous apprenez directement sur le terrain et vous êtes payés ! +

+ + + Simuler votre rémunération en tant qu’apprenti + + + +
{ videos.length > 0 && ( diff --git a/src/client/components/layouts/Header/Navigation/NavigationStructure.tsx b/src/client/components/layouts/Header/Navigation/NavigationStructure.tsx index af8e43c72b..302b1890c6 100644 --- a/src/client/components/layouts/Header/Navigation/NavigationStructure.tsx +++ b/src/client/components/layouts/Header/Navigation/NavigationStructure.tsx @@ -100,7 +100,7 @@ const employeurNav = (): NavigationItemWithChildren => ({ { label: 'Je deviens mentor', link: '/je-deviens-mentor' }, { label: 'Je propose des immersions', link: '/immersions' }, { label: 'Je forme les jeunes grâce à l‘emploi', link: '/je-recrute-afpr-poei' }, - ...(process.env.NEXT_PUBLIC_CAMPAGNE_APPRENTISSAGE_FEATURE === '1' ? [{ label: 'Je recrute un apprenti', link: '/apprentissage-entreprises' }] : []), + { label: 'Je recrute un apprenti', link: '/apprentissage-entreprises' }, ], label: 'Recruter et agir pour les jeunes', }, diff --git a/src/pages/apprentissage-entreprises/index.page.test.tsx b/src/pages/apprentissage-entreprises/index.page.test.tsx index 92b088ca67..87fca5842f 100644 --- a/src/pages/apprentissage-entreprises/index.page.test.tsx +++ b/src/pages/apprentissage-entreprises/index.page.test.tsx @@ -9,13 +9,8 @@ import { render, screen } from '@testing-library/react'; import { mockSmallScreen } from '~/client/components/window.mock'; import { DependenciesProvider } from '~/client/context/dependenciesContainer.context'; import { aManualAnalyticsService } from '~/client/services/analytics/analytics.service.fixture'; -import { aVideoService } from '~/client/services/video/video.service.fixture'; -import { aVideoCampagneApprentissage } from '~/server/campagne-apprentissage/domain/videoCampagneApprentissage.fixture'; -import { createFailure, createSuccess } from '~/server/errors/either'; -import { ErreurMetier } from '~/server/errors/erreurMetier.types'; -import { dependencies } from '~/server/start'; -import ApprentissageEntreprises, { getServerSideProps } from './index.page'; +import ApprentissageEntreprises from './index.page'; jest.mock('~/server/start', () => ({ dependencies: { @@ -34,100 +29,29 @@ describe('', () => { it('doit rendre du HTML respectant la specification', () => { mockSmallScreen(); - const videos = [ - aVideoCampagneApprentissage(), - aVideoCampagneApprentissage({ - titre: "Qu'est-ce que le Contrat d'Engagement Jeune CEJ ?", - transcription: '[transcription]', - videoId: '7zD4PCOiUvw', - }), - ]; const { container } = render( - - ); + analyticsService={aManualAnalyticsService()}> + + , + ); expect(container.outerHTML).toHTMLValidate(); }); it('n’a pas de défaut d‘accessibilité', async () => { mockSmallScreen(); - const videos = [ - aVideoCampagneApprentissage(), - aVideoCampagneApprentissage({ - titre: "Qu'est-ce que le Contrat d'Engagement Jeune CEJ ?", - transcription: '[transcription]', - videoId: '7zD4PCOiUvw', - }), - ]; const { container } = render( - ); - ); + analyticsService={aManualAnalyticsService()}> + + , + ); await screen.findByText('5 bonnes raisons de choisir l’apprentissage :'); await expect(container).toBeAccessible(); }); - describe('getServerSideProps', () => { - - describe('Avant la campagne du 22 octobre 2024 sur l’apprentissage', () => { - beforeEach(() => { - // Given - process.env.NEXT_PUBLIC_CAMPAGNE_APPRENTISSAGE_FEATURE = '0'; - }); - describe('quand les vidéos ne sont pas récupérées', () => { - it('renvoie une liste vide pour les vidéos', async () => { - (dependencies.campagneApprentissageDependencies.recupererVideosCampagneApprentissageUseCase.handle as jest.Mock).mockReturnValue(createFailure(ErreurMetier.SERVICE_INDISPONIBLE)); - - const result = await getServerSideProps(); - - expect(result).toMatchObject({ props: { - videos: [], - } }); - }); - }); - describe('quand les vidéos sont récupérées', () => { - it('renvoie les props', async () => { - const videos = [ - aVideoCampagneApprentissage(), - aVideoCampagneApprentissage({ - titre: "Qu'est-ce que le Contrat d'Engagement Jeune CEJ ?", - transcription: '[transcription]', - videoId: '7zD4PCOiUvw', - }), - ]; - (dependencies.campagneApprentissageDependencies.recupererVideosCampagneApprentissageUseCase.handle as jest.Mock).mockReturnValue(createSuccess(videos)); - - const result = await getServerSideProps(); - - expect(result).toMatchObject({ props: { - videos: videos, - } }); - }); - }); - }); - describe('Pendant et après la campagne du 22 octobre 2024 sur l’apprentissage', () => { - beforeEach(() => { - // Given - process.env.NEXT_PUBLIC_CAMPAGNE_APPRENTISSAGE_FEATURE = '1'; - }); - it('ne renvoie pas de vidéos et ne requête pas le service', async () => { - // When - const result = await getServerSideProps(); - - // Then - expect(dependencies.campagneApprentissageDependencies.recupererVideosCampagneApprentissageUseCase.handle).not.toHaveBeenCalled(); - expect(result).toMatchObject({ props: { - videos: null, - } }); - }); - }); - }); }); diff --git a/src/pages/apprentissage-entreprises/index.page.tsx b/src/pages/apprentissage-entreprises/index.page.tsx index d1107104a8..88e1d93ee0 100644 --- a/src/pages/apprentissage-entreprises/index.page.tsx +++ b/src/pages/apprentissage-entreprises/index.page.tsx @@ -1,5 +1,3 @@ -import { GetServerSidePropsResult } from 'next'; - import { CampagneApprentissageEntreprises, } from '~/client/components/features/CampagneApprentissage/CampagneApprentissageEntreprises/CampagneApprentissageEntreprises'; @@ -7,49 +5,16 @@ import { Head } from '~/client/components/head/Head'; import useAnalytics from '~/client/hooks/useAnalytics'; import styles from '~/pages/apprentissage/index.module.scss'; import analyticsPageConfig from '~/pages/apprentissage-entreprises/index.analytics'; -import { VideoCampagneApprentissage } from '~/server/campagne-apprentissage/domain/videoCampagneApprentissage'; -import { isFailure } from '~/server/errors/either'; -import { dependencies } from '~/server/start'; - -type ApprentissageEntreprisesPageProps = { - videos: VideoCampagneApprentissage[] | null; -} -export default function ApprentissageEntreprises ({ videos }: ApprentissageEntreprisesPageProps) { +export default function ApprentissageEntreprises () { useAnalytics(analyticsPageConfig); return ( <>
- +
); } - -export async function getServerSideProps(): Promise> { - const campagneApprentissageEstEnCours = process.env.NEXT_PUBLIC_CAMPAGNE_APPRENTISSAGE_FEATURE === '1'; - if (campagneApprentissageEstEnCours) { - return { - props: { - videos: null, - }, - }; - } - - const videos = await dependencies.campagneApprentissageDependencies.recupererVideosCampagneApprentissageUseCase.handle(); - if (isFailure(videos)) { - return { - props: { - videos: [], - }, - }; - } - - return { - props: { - videos: videos.result, - }, - }; -} diff --git a/src/pages/plan-du-site/index.page.test.tsx b/src/pages/plan-du-site/index.page.test.tsx index f355573e1f..b2682c232b 100644 --- a/src/pages/plan-du-site/index.page.test.tsx +++ b/src/pages/plan-du-site/index.page.test.tsx @@ -14,7 +14,6 @@ describe('Plan du site', () => { process.env.NEXT_PUBLIC_FORMATIONS_INITIALES_FEATURE = '1'; process.env.NEXT_PUBLIC_EMPLOIS_EUROPE_FEATURE = '1'; process.env.NEXT_PUBLIC_STAGES_3EME_FEATURE = '1'; - process.env.NEXT_PUBLIC_CAMPAGNE_APPRENTISSAGE_FEATURE = '1'; process.env.NEXT_PUBLIC_OLD_ESPACE_JEUNE_FEATURE = '0'; process.env.NEXT_PUBLIC_1JEUNE1PERMIS_FEATURE = '1'; }); @@ -98,7 +97,6 @@ describe('Plan du site', () => { process.env.NEXT_PUBLIC_FORMATIONS_INITIALES_FEATURE = '0'; process.env.NEXT_PUBLIC_EMPLOIS_EUROPE_FEATURE = '0'; process.env.NEXT_PUBLIC_STAGES_3EME_FEATURE = '0'; - process.env.NEXT_PUBLIC_CAMPAGNE_APPRENTISSAGE_FEATURE = '0'; process.env.NEXT_PUBLIC_OLD_ESPACE_JEUNE_FEATURE = '1'; process.env.NEXT_PUBLIC_1JEUNE1PERMIS_FEATURE = '0'; }); @@ -109,7 +107,6 @@ describe('Plan du site', () => { ${'Emplois en Europe'} | ${'/emplois-europe'} ${'Formations initiales'} | ${'/formations-initiales'} ${'Aides au permis de conduire'} | ${'/1jeune1permis'} - ${'Je recrute un apprenti'} | ${'/apprentissage-entreprises'} ${'Découvrir les services jeunes liés aux offres'} | ${'/services-jeunes?filtre=vieProfessionnelle'} ${'Découvrir les services jeunes liés aux formations et à l’orientation'} | ${'/services-jeunes?filtre=orienterFormer'} ${'Découvrir les services jeunes liés à l’engagement civique'} | ${'/services-jeunes?filtre=engagement'}