Skip to content

Commit

Permalink
feat(services-jeunes): ajoute le filtrage par catégorie
Browse files Browse the repository at this point in the history
  • Loading branch information
@sokl-octo
sokl-octo committed Nov 5, 2024
1 parent 6a696e4 commit 40db044
Show file tree
Hide file tree
Showing 6 changed files with 314 additions and 88 deletions.
4 changes: 0 additions & 4 deletions src/client/components/features/ServicesJeunes/ServicesJeunes.module.scss
View file
Original file line number Diff line number Diff line change
Expand Up @@ -5,10 +5,6 @@
}

.container {
@include utilities.media(medium) {
padding-top: 2rem;
}

& div > ul > li {
flex-grow: 1;
flex-basis: 100%;
Expand Down
17 changes: 10 additions & 7 deletions src/client/components/features/ServicesJeunes/ServicesJeunes.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -24,13 +24,16 @@ export function ServicesJeunes(props: ServicesJeunesProps) {
return (
<>
<Container className={styles.container}>
<SeeMoreItemList
seeLessLabel="Voir moins de services"
seeMoreLabel="Voir plus de services"
seeLessAriaLabel={'Voir moins de services conçus pour les jeunes'}
seeMoreAriaLabel={'Voir plus de services conçus pour les jeunes'}
numberOfVisibleItems={NUMBER_OF_VISIBLE_ITEMS}
itemList={cardListToDisplay} />
{ props.cardList.length > 0 ? (
<SeeMoreItemList
seeLessLabel="Voir moins de services"
seeMoreLabel="Voir plus de services"
seeLessAriaLabel={'Voir moins de services conçus pour les jeunes'}
seeMoreAriaLabel={'Voir plus de services conçus pour les jeunes'}
numberOfVisibleItems={NUMBER_OF_VISIBLE_ITEMS}
itemList={cardListToDisplay} />
)
: <p>Aucun service jeune disponible. Veuillez modifier votre sélection.</p>}
</Container>
</>
);
Expand Down
5 changes: 4 additions & 1 deletion src/client/components/useRouter.mock.ts
View file
Original file line number Diff line number Diff line change
Expand Up @@ -17,7 +17,10 @@ interface MockUseRouter {
isReady?: boolean
}

export function mockUseRouter({ asPath = '', pathname = '', query = {}, route = '', prefetch = jest.fn(), push = jest.fn(), reload = jest.fn(), replace = jest.fn(), back = jest.fn(), isReady = true }: MockUseRouter) {
export function mockUseRouter({ asPath = '', pathname = '', query = {},
route = '', prefetch = jest.fn(), push = jest.fn(),
reload = jest.fn(), replace = jest.fn(), back = jest.fn(),
isReady = true }: MockUseRouter) {
useRouter.mockImplementation(() => ({
asPath,
back,
Expand Down
13 changes: 13 additions & 0 deletions src/pages/services-jeunes/index.module.scss
View file
Original file line number Diff line number Diff line change
@@ -1,8 +1,21 @@
@use "@styles/utilities-deprecated";
@use "@styles/utilities";

.section {
padding-inline: 1rem;
margin-bottom: 3rem;

@include utilities.media(medium) {
padding-inline: 5rem;
}
}

.selectCategorie {
margin-bottom: 1rem;
}

.etiquetteList {
margin-bottom: 2rem;
}

.cartesActualitesList {
Expand Down
294 changes: 220 additions & 74 deletions src/pages/services-jeunes/index.page.test.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -13,6 +13,7 @@ import { aManualAnalyticsService } from '~/client/services/analytics/analytics.s
import ServicesJeunePage, { getStaticProps } from '~/pages/services-jeunes/index.page';
import { createFailure, createSuccess } from '~/server/errors/either';
import { ErreurMetier } from '~/server/errors/erreurMetier.types';
import { ServiceJeune } from '~/server/services-jeunes/domain/servicesJeunes';
import { aServiceJeune, aServiceJeuneList } from '~/server/services-jeunes/domain/servicesJeunes.fixture';
import { dependencies } from '~/server/start';

Expand All @@ -30,11 +31,19 @@ jest.mock('~/server/start', () => ({
},
}));

jest.mock('next/navigation', () => ({
usePathname: jest.fn().mockReturnValue('/services-jeunes'),
useSearchParams: () => ({
getAll: jest.fn().mockReturnValue([]),
}),
}));

describe('Page Services Jeunes', () => {
beforeEach(() => {
mockSmallScreen();
mockUseRouter({});
mockScrollIntoView();

});
afterEach(() => {
jest.clearAllMocks();
Expand Down Expand Up @@ -131,83 +140,220 @@ describe('Page Services Jeunes', () => {
});

describe('Si des services jeunes sont récupérés', () => {
it('affiche au maximum 6 services initialement', () => {
// Given
const serviceJeuneList = [
aServiceJeune({ titre: 'service 1' }),
aServiceJeune({ titre: 'service 2' }),
aServiceJeune({ titre: 'service 3' }),
aServiceJeune({ titre: 'service 4' }),
aServiceJeune({ titre: 'service 5' }),
aServiceJeune({ titre: 'service 6' }),
aServiceJeune({ titre: 'service 7' }),
];
const analyticsService = aManualAnalyticsService();

// When
render(
<DependenciesProvider analyticsService={analyticsService}>
<ServicesJeunePage serviceJeuneList={serviceJeuneList} />
</DependenciesProvider>,
);

// Then
const mesuresJeunesSection = screen.getByRole('region', { name: 'les services jeunes' });
const servicesJeunesList = within(mesuresJeunesSection).getAllByRole('listitem');
expect(servicesJeunesList.length).toBe(6);
describe('Sélection des filtres', () => {
describe('aucun filtre n’est renseigné', () => {
it('affiche l’ensemble des types de services', () => {
// Given
const serviceJeuneList = [
aServiceJeune({ categorie: ServiceJeune.Categorie.ACCOMPAGNEMENT, titre: 'service 1' }),
aServiceJeune({ categorie: ServiceJeune.Categorie.AIDES_FINANCIERES, titre: 'service 2' }),
aServiceJeune({ categorie: ServiceJeune.Categorie.ENGAGEMENT, titre: 'service 3' }),
aServiceJeune({ categorie: ServiceJeune.Categorie.ENTREE_VIE_PROFESSIONELLE, titre: 'service 4' }),
aServiceJeune({ categorie: ServiceJeune.Categorie.LOGEMENT, titre: 'service 5' }),
aServiceJeune({ categorie: ServiceJeune.Categorie.ORIENTATION_FORMATION, titre: 'service 6' }),
];
const analyticsService = aManualAnalyticsService();

// When
render(
<DependenciesProvider analyticsService={analyticsService}>
<ServicesJeunePage serviceJeuneList={serviceJeuneList} />
</DependenciesProvider>,
);

// Then
const mesuresJeunesSection = screen.getByRole('region', { name: 'les services jeunes' });
const servicesJeunesList = within(mesuresJeunesSection).getAllByRole('list')[1];
const servicesJeunesResultats = within(servicesJeunesList).getAllByRole('listitem');
expect(servicesJeunesResultats.length).toBe(6);
});
});
describe('au moins un filtre est renseigné', () => {
beforeEach(() => {
mockUseRouter({ query : { filtre : ['Accompagnement', 'Logement', 'Engagement'] } });
});
it('affiche la liste des filtres dans des étiquettes', () => {
// Given
const serviceJeuneList = [
aServiceJeune({ categorie: ServiceJeune.Categorie.ACCOMPAGNEMENT, titre: 'service 1' }),
aServiceJeune({ categorie: ServiceJeune.Categorie.AIDES_FINANCIERES, titre: 'service 2' }),
aServiceJeune({ categorie: ServiceJeune.Categorie.ENGAGEMENT, titre: 'service 3' }),
aServiceJeune({ categorie: ServiceJeune.Categorie.ENTREE_VIE_PROFESSIONELLE, titre: 'service 4' }),
aServiceJeune({ categorie: ServiceJeune.Categorie.LOGEMENT, titre: 'service 5' }),
aServiceJeune({ categorie: ServiceJeune.Categorie.ORIENTATION_FORMATION, titre: 'service 6' }),
];
const analyticsService = aManualAnalyticsService();

// When
render(
<DependenciesProvider analyticsService={analyticsService}>
<ServicesJeunePage serviceJeuneList={serviceJeuneList} />
</DependenciesProvider>,
);

// Then
const mesuresJeunesSection = screen.getByRole('region', { name: 'les services jeunes' });
const servicesJeunesList = within(mesuresJeunesSection).getAllByRole('list')[0];
const servicesJeunesEtiquettes = within(servicesJeunesList).getAllByRole('listitem');
expect(servicesJeunesEtiquettes.length).toBe(3);
});
it('supprime le filtre au clic sur son étiquette', async () => {
// Given
const routerPush = jest.fn();
mockUseRouter({ push: routerPush, query: { filtre : ['Accompagnement', 'Logement', 'Engagement'] } });
const user = userEvent.setup();

const serviceJeuneList = [
aServiceJeune({ categorie: ServiceJeune.Categorie.ACCOMPAGNEMENT, titre: 'service 1' }),
aServiceJeune({ categorie: ServiceJeune.Categorie.AIDES_FINANCIERES, titre: 'service 2' }),
];
const analyticsService = aManualAnalyticsService();

// When
render(
<DependenciesProvider analyticsService={analyticsService}>
<ServicesJeunePage serviceJeuneList={serviceJeuneList} />
</DependenciesProvider>,
);
const mesuresJeunesSectionBefore = screen.getByRole('region', { name: 'les services jeunes' });
const servicesJeunesListBefore = within(mesuresJeunesSectionBefore).getAllByRole('list')[0];
const servicesJeunesEtiquettesBefore = within(servicesJeunesListBefore).getAllByRole('listitem');
expect(servicesJeunesEtiquettesBefore.length).toBe(3);

const resetButton = within(servicesJeunesEtiquettesBefore[0]).getByRole('button');
await user.click(resetButton);

// Then
expect(routerPush).toHaveBeenCalledTimes(1);
expect(routerPush).toHaveBeenCalledWith(expect.stringContaining('filtre=Logement'));
expect(routerPush).toHaveBeenCalledWith(expect.stringContaining('filtre=Engagement'));
});
it('affiche les services des catégories filtrées', () => {
const serviceJeuneList = [
aServiceJeune({ categorie: ServiceJeune.Categorie.ACCOMPAGNEMENT, titre: 'service 1' }),
aServiceJeune({ categorie: ServiceJeune.Categorie.AIDES_FINANCIERES, titre: 'service 2' }),
aServiceJeune({ categorie: ServiceJeune.Categorie.ENGAGEMENT, titre: 'service 3' }),
aServiceJeune({ categorie: ServiceJeune.Categorie.ENTREE_VIE_PROFESSIONELLE, titre: 'service 4' }),
aServiceJeune({ categorie: ServiceJeune.Categorie.LOGEMENT, titre: 'service 5' }),
aServiceJeune({ categorie: ServiceJeune.Categorie.ORIENTATION_FORMATION, titre: 'service 6' }),
];
const analyticsService = aManualAnalyticsService();

// When
render(
<DependenciesProvider analyticsService={analyticsService}>
<ServicesJeunePage serviceJeuneList={serviceJeuneList} />
</DependenciesProvider>,
);

// Then
const mesuresJeunesSection = screen.getByRole('region', { name: 'les services jeunes' });
const servicesJeunesList = within(mesuresJeunesSection).getAllByRole('list')[1];
const servicesJeunesEtiquettes = within(servicesJeunesList).getAllByRole('listitem');
expect(servicesJeunesEtiquettes.length).toBe(3);
});
});
});
it('affiche un bouton voir plus quand il y a plus de 6 services', () => {
describe('Liste de résultats', () => {
it('affiche un message d’erreur quand aucun service n’est disponible', () => {
// Given
mockUseRouter({ query: { filtre : ['Accompagnement'] } });
const serviceJeuneList = [
aServiceJeune({ categorie: ServiceJeune.Categorie.AIDES_FINANCIERES, titre: 'service 2' }),
];
const analyticsService = aManualAnalyticsService();

// When
render(
<DependenciesProvider analyticsService={analyticsService}>
<ServicesJeunePage serviceJeuneList={serviceJeuneList} />
</DependenciesProvider>,
);

// Then
const mesuresJeunesSection = screen.getByRole('region', { name: 'les services jeunes' });
const messageErreur = within(mesuresJeunesSection).getByText('Aucun service jeune disponible. Veuillez modifier votre sélection.');
expect(messageErreur).toBeVisible();
});
it('affiche au maximum 6 services initialement', () => {
// Given
const serviceJeuneList = [
aServiceJeune({ titre: 'service 1' }),
aServiceJeune({ titre: 'service 2' }),
aServiceJeune({ titre: 'service 3' }),
aServiceJeune({ titre: 'service 4' }),
aServiceJeune({ titre: 'service 5' }),
aServiceJeune({ titre: 'service 6' }),
aServiceJeune({ titre: 'service 7' }),
];
const analyticsService = aManualAnalyticsService();

// When
render(
<DependenciesProvider analyticsService={analyticsService}>
<ServicesJeunePage serviceJeuneList={serviceJeuneList} />
</DependenciesProvider>,
);

// Then
const mesuresJeunesSection = screen.getByRole('region', { name: 'les services jeunes' });
const voirPlusDeServicesJeunesBouton = within(mesuresJeunesSection).getByRole('button', { name: 'Voir plus de services conçus pour les jeunes' });
expect(voirPlusDeServicesJeunesBouton).toBeVisible();
});
it('affiche un bouton voir moins quand plus de 6 services jeunes sont visibles', async () => {
const serviceJeuneList = [
aServiceJeune({ titre: 'service 1' }),
aServiceJeune({ titre: 'service 2' }),
aServiceJeune({ titre: 'service 3' }),
aServiceJeune({ titre: 'service 4' }),
aServiceJeune({ titre: 'service 5' }),
aServiceJeune({ titre: 'service 6' }),
aServiceJeune({ titre: 'service 7' }),
];
const analyticsService = aManualAnalyticsService();

// When
render(
<DependenciesProvider analyticsService={analyticsService}>
<ServicesJeunePage serviceJeuneList={serviceJeuneList} />
</DependenciesProvider>,
);

// Then
const mesuresJeunesSection = screen.getByRole('region', { name: 'les services jeunes' });
const servicesJeunesList = within(mesuresJeunesSection).getAllByRole('list')[1];
const servicesJeunesResultats = within(servicesJeunesList).getAllByRole('listitem');
expect(servicesJeunesResultats.length).toBe(6);
});
it('affiche un bouton voir plus quand il y a plus de 6 services', () => {
// Given
const serviceJeuneList = [
aServiceJeune({ titre: 'service 1' }),
aServiceJeune({ titre: 'service 2' }),
aServiceJeune({ titre: 'service 3' }),
aServiceJeune({ titre: 'service 4' }),
aServiceJeune({ titre: 'service 5' }),
aServiceJeune({ titre: 'service 6' }),
aServiceJeune({ titre: 'service 7' }),
];
const analyticsService = aManualAnalyticsService();

render(
<DependenciesProvider analyticsService={analyticsService}>
<ServicesJeunePage serviceJeuneList={serviceJeuneList} />
</DependenciesProvider>,
);
const mesuresJeunesSection = screen.getByRole('region', { name: 'les services jeunes' });
const voirPlusDeServicesJeunesBouton = within(mesuresJeunesSection).getByRole('button', { name: 'Voir plus de services conçus pour les jeunes' });

// When
await userEvent.click(voirPlusDeServicesJeunesBouton);

// Then
const voirMoinsDeServicesJeunesBouton = within(mesuresJeunesSection).getByRole('button', { name: 'Voir moins de services conçus pour les jeunes' });
expect(voirMoinsDeServicesJeunesBouton).toBeVisible();
const serviceJeuneList = [
aServiceJeune({ titre: 'service 1' }),
aServiceJeune({ titre: 'service 2' }),
aServiceJeune({ titre: 'service 3' }),
aServiceJeune({ titre: 'service 4' }),
aServiceJeune({ titre: 'service 5' }),
aServiceJeune({ titre: 'service 6' }),
aServiceJeune({ titre: 'service 7' }),
];
const analyticsService = aManualAnalyticsService();

// When
render(
<DependenciesProvider analyticsService={analyticsService}>
<ServicesJeunePage serviceJeuneList={serviceJeuneList} />
</DependenciesProvider>,
);

// Then
const mesuresJeunesSection = screen.getByRole('region', { name: 'les services jeunes' });
const voirPlusDeServicesJeunesBouton = within(mesuresJeunesSection).getByRole('button', { name: 'Voir plus de services conçus pour les jeunes' });
expect(voirPlusDeServicesJeunesBouton).toBeVisible();
});
it('affiche un bouton voir moins quand plus de 6 services jeunes sont visibles', async () => {
// Given
const serviceJeuneList = [
aServiceJeune({ titre: 'service 1' }),
aServiceJeune({ titre: 'service 2' }),
aServiceJeune({ titre: 'service 3' }),
aServiceJeune({ titre: 'service 4' }),
aServiceJeune({ titre: 'service 5' }),
aServiceJeune({ titre: 'service 6' }),
aServiceJeune({ titre: 'service 7' }),
];
const analyticsService = aManualAnalyticsService();

render(
<DependenciesProvider analyticsService={analyticsService}>
<ServicesJeunePage serviceJeuneList={serviceJeuneList} />
</DependenciesProvider>,
);
const mesuresJeunesSection = screen.getByRole('region', { name: 'les services jeunes' });
const voirPlusDeServicesJeunesBouton = within(mesuresJeunesSection).getByRole('button', { name: 'Voir plus de services conçus pour les jeunes' });

// When
await userEvent.click(voirPlusDeServicesJeunesBouton);

// Then
const voirMoinsDeServicesJeunesBouton = within(mesuresJeunesSection).getByRole('button', { name: 'Voir moins de services conçus pour les jeunes' });
expect(voirMoinsDeServicesJeunesBouton).toBeVisible();
});
});
});
});
Expand Down
Loading

0 comments on commit 40db044

Please sign in to comment.