Skip to content

Commit

Permalink
feat(multiple): custom component meilisearch current refinement
Browse files Browse the repository at this point in the history
  • Loading branch information
@olivocto
olivocto authored Jan 9, 2023
1 parent 08e68df commit b02ffb3
Show file tree
Hide file tree
Showing 22 changed files with 771 additions and 138 deletions.
13 changes: 13 additions & 0 deletions __mocks__/react-instantsearch-hooks-web.ts
View file
Original file line number Diff line number Diff line change
@@ -1,3 +1,4 @@
import { CurrentRefinementsRenderState } from 'instantsearch.js/es/connectors/current-refinements/connectCurrentRefinements';
import type { PaginationRenderState } from 'instantsearch.js/es/connectors/pagination/connectPagination';
import { RangeRenderState } from 'instantsearch.js/es/connectors/range/connectRange';
// eslint-disable-next-line import/named
Expand All @@ -6,6 +7,7 @@ import { SearchBoxRenderState } from 'instantsearch.js/es/connectors/search-box/
import type { UsePaginationProps } from 'react-instantsearch-hooks/dist/es/connectors/usePagination';
// eslint-disable-next-line import/named
import {
UseCurrentRefinementsProps,
UseInstantSearchProps,
UseRangeProps,
UseRefinementListProps,
Expand Down Expand Up @@ -93,7 +95,18 @@ function realMockUseRange(_props: UseRangeProps): RangeRenderState {
};
}

// eslint-disable-next-line @typescript-eslint/no-unused-vars
function realMockUseCurrentRefinements(_props: UseCurrentRefinementsProps): CurrentRefinementsRenderState {
return {
canRefine: true,
createURL: jest.fn(),
items: [],
refine: jest.fn(),
};
}

module.exports = {
useCurrentRefinements: realMockUseCurrentRefinements,
useInstantSearch: realMockUseInstantSearch,
usePagination: realMockUsePagination,
useRange: realMockUseRange,
Expand Down
1 change: 1 addition & 0 deletions src/client/components/features/Logement/Annonce.test.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -14,6 +14,7 @@ import { AnnonceDeLogementIndexee } from '~/client/components/features/Logement/
const uneAnnonceDeLogement: AnnonceDeLogementIndexee = {
dateDeDisponibilite: '2023-01-01',
dateDeMiseAJour: '2022-12-04',
devise: '€',
localisationAAfficher: 'Paris',
prix: 1200,
prixHT: 1000,
Expand Down
2 changes: 1 addition & 1 deletion src/client/components/features/Logement/Annonce.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -28,7 +28,7 @@ export const AnnonceDeLogement = (props : HitProps<AnnonceDeLogementIndexee>) =>
<dt>Surface</dt>
<dd>{annonce.surfaceAAfficher}</dd>
<dt>Prix</dt>
<dd>{annonce.prix} €<sup>CC</sup></dd>
<dd>{annonce.prix} {annonce.devise}<sup>CC</sup></dd>
</dl>
</CardComponent.Content>

Expand Down
1 change: 1 addition & 0 deletions src/client/components/features/Logement/AnnonceDeLogement.type.ts
View file
Original file line number Diff line number Diff line change
Expand Up @@ -10,4 +10,5 @@ export interface AnnonceDeLogementIndexee {
url: string
dateDeMiseAJour: string
localisationAAfficher: string
devise: string
}
119 changes: 61 additions & 58 deletions ...ponents/features/Logement/FormulaireRecherche/FormulaireRechercheAnnonceLogement.test.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -9,131 +9,134 @@ import {
import userEvent from '@testing-library/user-event';

import { FormulaireRechercheAnnonceLogement } from '~/client/components/features/Logement/FormulaireRecherche/FormulaireRechercheAnnonceLogement';
import { mockLargeScreen,mockSmallScreen } from '~/client/components/window.mock';
import {
mockLargeScreen,
mockSmallScreen,
} from '~/client/components/window.mock';

describe('FormulaireRechercheAnnonceLogement', () => {
describe('en Desktop', () => {
beforeEach(() => {
mockLargeScreen();
mockLargeScreen();
});

afterEach(() => {
jest.resetAllMocks();
jest.resetAllMocks();
});

it('affiche un formulaire', () => {
render(<FormulaireRechercheAnnonceLogement/>);
render(<FormulaireRechercheAnnonceLogement/>);

const form = screen.getByRole('search');
expect(form).toBeInTheDocument();
const form = screen.getByRole('search');
expect(form).toBeInTheDocument();
});

it('n‘affiche pas de bouton pour filtrer la recherche', () => {
render(<FormulaireRechercheAnnonceLogement/>);
render(<FormulaireRechercheAnnonceLogement/>);

const buttonFiltre = screen.queryByRole('button', { name: 'Filtrer ma recherche' });
expect(buttonFiltre).not.toBeInTheDocument();
const buttonFiltre = screen.queryByRole('button', { name: 'Filtrer ma recherche' });
expect(buttonFiltre).not.toBeInTheDocument();
});

it('affiche le champ ville dans le formulaire', () => {
render(<FormulaireRechercheAnnonceLogement/>);
render(<FormulaireRechercheAnnonceLogement/>);

const inputVille = screen.getByRole('textbox', { name: 'Rechercher par ville' });
expect(inputVille).toBeInTheDocument();
const inputVille = screen.getByRole('textbox', { name: 'Rechercher par ville' });
expect(inputVille).toBeInTheDocument();
});

it('affiche le champ type d‘offre dans le formulaire', () => {
render(<FormulaireRechercheAnnonceLogement/>);
render(<FormulaireRechercheAnnonceLogement/>);

const buttonTypeOffre = screen.getByRole('button', { name: 'Type d‘offre' });
expect(buttonTypeOffre).toBeInTheDocument();
const buttonTypeOffre = screen.getByRole('button', { name: 'Type d‘offre' });
expect(buttonTypeOffre).toBeInTheDocument();
});

it('affiche le champ type de bien dans le formulaire', () => {
render(<FormulaireRechercheAnnonceLogement/>);
render(<FormulaireRechercheAnnonceLogement/>);

const buttonTypeOffre = screen.getByRole('button', { name: 'Type de bien' });
expect(buttonTypeOffre).toBeInTheDocument();
const buttonTypeOffre = screen.getByRole('button', { name: 'Type de bien' });
expect(buttonTypeOffre).toBeInTheDocument();
});

it('affiche le champ prix dans le formulaire', () => {
render(<FormulaireRechercheAnnonceLogement/>);
render(<FormulaireRechercheAnnonceLogement/>);

const buttonPrix = screen.getByRole('button', { name: 'Prix' });
expect(buttonPrix).toBeInTheDocument();
const buttonPrix = screen.getByRole('button', { name: 'Prix' });
expect(buttonPrix).toBeInTheDocument();
});

it('affiche le champ surface dans le formulaire', () => {
render(<FormulaireRechercheAnnonceLogement/>);
render(<FormulaireRechercheAnnonceLogement/>);

const buttonSurface = screen.getByRole('button', { name: 'Surface (m²)' });
expect(buttonSurface).toBeInTheDocument();
const buttonSurface = screen.getByRole('button', { name: 'Surface (m²)' });
expect(buttonSurface).toBeInTheDocument();
});
});

describe('en Mobile', () => {
beforeEach(() => {
mockSmallScreen();
mockSmallScreen();
});

afterEach(() => {
jest.resetAllMocks();
jest.resetAllMocks();
});

it('affiche un formulaire', () => {
render(<FormulaireRechercheAnnonceLogement/>);
render(<FormulaireRechercheAnnonceLogement/>);

const form = screen.getByRole('search');
expect(form).toBeInTheDocument();
const form = screen.getByRole('search');
expect(form).toBeInTheDocument();
});

it('affiche le champ ville dans le formulaire', () => {
render(<FormulaireRechercheAnnonceLogement/>);
render(<FormulaireRechercheAnnonceLogement/>);

const inputVille = screen.getByRole('textbox', { name: 'Rechercher par ville' });
expect(inputVille).toBeInTheDocument();
expect(inputVille).toBeVisible();
const inputVille = screen.getByRole('textbox', { name: 'Rechercher par ville' });
expect(inputVille).toBeInTheDocument();
expect(inputVille).toBeVisible();
});

it('affiche un bouton pour filtrer la recherche', () => {
render(<FormulaireRechercheAnnonceLogement/>);
render(<FormulaireRechercheAnnonceLogement/>);

const buttonFiltre = screen.getByRole('button', { name: 'Filtrer ma recherche' });
expect(buttonFiltre).toBeInTheDocument();
const buttonFiltre = screen.getByRole('button', { name: 'Filtrer ma recherche' });
expect(buttonFiltre).toBeInTheDocument();
});

it('n‘affiche pas le champ type d‘offre dans le formulaire', () => {
render(<FormulaireRechercheAnnonceLogement/>);
render(<FormulaireRechercheAnnonceLogement/>);

const buttonTypeOffre = screen.queryByRole('button', { name: 'Type d‘offre' });
expect(buttonTypeOffre).not.toBeInTheDocument();
const buttonTypeOffre = screen.queryByRole('button', { name: 'Type d‘offre' });
expect(buttonTypeOffre).not.toBeInTheDocument();

});

it('n‘affiche pas le champ type de bien dans le formulaire', () => {
render(<FormulaireRechercheAnnonceLogement/>);
render(<FormulaireRechercheAnnonceLogement/>);

const buttonTypeBien = screen.queryByRole('button', { name: 'Type de bien' });
expect(buttonTypeBien).not.toBeInTheDocument();
const buttonTypeBien = screen.queryByRole('button', { name: 'Type de bien' });
expect(buttonTypeBien).not.toBeInTheDocument();

});

it('n‘affiche pas le champ prix dans le formulaire', () => {
render(<FormulaireRechercheAnnonceLogement/>);
render(<FormulaireRechercheAnnonceLogement/>);

const buttonPrix = screen.queryByRole('button', { name: 'Prix' });
expect(buttonPrix).not.toBeInTheDocument();
const buttonPrix = screen.queryByRole('button', { name: 'Prix' });
expect(buttonPrix).not.toBeInTheDocument();
});

it('n‘affiche pas le champ surface dans le formulaire', () => {
render(<FormulaireRechercheAnnonceLogement/>);
render(<FormulaireRechercheAnnonceLogement/>);

const buttonSurface = screen.queryByRole('button', { name: 'Surface (m²)' });
expect(buttonSurface).not.toBeInTheDocument();
const buttonSurface = screen.queryByRole('button', { name: 'Surface (m²)' });
expect(buttonSurface).not.toBeInTheDocument();
});

describe('quand l‘utilisateur ouvre les filtres de recherche', () => {
it('affiche la modale', async () => {
it('affiche la modale', async () => {
const user = userEvent.setup();

render(<FormulaireRechercheAnnonceLogement/>);
Expand All @@ -143,9 +146,9 @@ describe('FormulaireRechercheAnnonceLogement', () => {

const modalComponent = screen.getByRole('dialog');
expect(modalComponent).toHaveClass('show');
});
});

it('affiche le champ type d‘offre', async () => {
it('affiche le champ type d‘offre', async () => {
const user = userEvent.setup();

render(<FormulaireRechercheAnnonceLogement/>);
Expand All @@ -158,9 +161,9 @@ describe('FormulaireRechercheAnnonceLogement', () => {
const firstItem = accordeonItems[0];

expect(firstItem).toHaveTextContent('Type d‘offre');
});
});

it('affiche le champ type de bien', async () => {
it('affiche le champ type de bien', async () => {
const user = userEvent.setup();

render(<FormulaireRechercheAnnonceLogement/>);
Expand All @@ -173,9 +176,9 @@ describe('FormulaireRechercheAnnonceLogement', () => {
const secondItem = accordeonItems[1];

expect(secondItem).toHaveTextContent('Type de bien');
});
});

it('affiche le champ prix', async () => {
it('affiche le champ prix', async () => {
const user = userEvent.setup();

render(<FormulaireRechercheAnnonceLogement/>);
Expand All @@ -188,9 +191,9 @@ describe('FormulaireRechercheAnnonceLogement', () => {
const thirdItem = accordeonItems[2];

expect(thirdItem).toHaveTextContent('Prix');
});
});

it('affiche le champ surface', async () => {
it('affiche le champ surface', async () => {
const user = userEvent.setup();

render(<FormulaireRechercheAnnonceLogement/>);
Expand All @@ -203,7 +206,7 @@ describe('FormulaireRechercheAnnonceLogement', () => {
const fourthItem = accordeonItems[4]; // skip 3 because of fieldset which is also a group role

expect(fourthItem).toHaveTextContent('Surface');
});
});
});
});
});
16 changes: 10 additions & 6 deletions ...t/components/features/Logement/FormulaireRecherche/FormulaireRechercheAnnonceLogement.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -19,13 +19,17 @@ import { MeilisearchCustomSearchBox } from '~/client/components/ui/Meilisearch/M
import { ModalComponent } from '~/client/components/ui/Modal/ModalComponent';
import useBreakpoint from '~/client/hooks/useBreakpoint';

export const PRIX_MINIMUM = 0;
export const PRIX_MAXIMUM = 3000;
export const SURFACE_MINIMUM = 0;
export const SURFACE_MAXIMUM = 500;
export const DEVISE = '€';
export const UNITE_SURFACE = 'm²';

export function FormulaireRechercheAnnonceLogement() {
const { isSmallScreen } = useBreakpoint();
const [isFiltresAvancésMobileOpen, setIsFiltresAvancésMobileOpen] = useState(false);
const PRIX_MINIMUM = 0;
const PRIX_MAXIMUM = 3000;
const SURFACE_MINIMUM = 0;
const SURFACE_MAXIMUM = 500;

return (
<form
className={styles.RechercherLogementForm}
Expand Down Expand Up @@ -56,7 +60,7 @@ export function FormulaireRechercheAnnonceLogement() {
attribute="surface"
label="Surface (m²)"
placeholder="Indiquez une surface"
unite="m²"
unite={UNITE_SURFACE}
min={SURFACE_MINIMUM}
max={SURFACE_MAXIMUM}
/>
Expand All @@ -65,7 +69,7 @@ export function FormulaireRechercheAnnonceLogement() {
attribute="prix"
label="Prix"
placeholder="Indiquez une fourchette de prix"
unite="€"
unite={DEVISE}
min={PRIX_MINIMUM}
max={PRIX_MAXIMUM}
/>
Expand Down
Loading

0 comments on commit b02ffb3

Please sign in to comment.