From cf892413ea1dd5fe0998dc40047dec3e03fd124a Mon Sep 17 00:00:00 2001 From: julie BRUNETTO Date: Thu, 25 Apr 2024 14:27:27 +0200 Subject: [PATCH] test(select): ajout de test sur le select multiple --- .../components/ui/Select/Select.test.tsx | 331 ++++++++---------- 1 file changed, 154 insertions(+), 177 deletions(-) diff --git a/src/client/components/ui/Select/Select.test.tsx b/src/client/components/ui/Select/Select.test.tsx index ab006046e4..b788f472d0 100644 --- a/src/client/components/ui/Select/Select.test.tsx +++ b/src/client/components/ui/Select/Select.test.tsx @@ -3,138 +3,16 @@ */ import '@testing-library/jest-dom'; -import { fireEvent, render, screen, waitFor, within } from '@testing-library/react'; +import { render, screen } from '@testing-library/react'; import { userEvent } from '@testing-library/user-event'; import React from 'react'; import { KeyBoard } from '~/client/components/keyboard.fixture'; import { Select } from '~/client/components/ui/Select/Select'; -import { mapTypeDeContratToOffreEmploiCheckboxFiltre } from '~/client/utils/offreEmploi.mapper'; -import { Offre } from '~/server/offres/domain/offre'; -describe('Select', () => { - describe('Select Multiple', () => { - it('quand on clique sur le select, retourne une liste d‘options', async () => { - //GIVEN - const user = userEvent.setup(); - render( - , - ); - - //WHEN - const button = screen.getByRole('button', { name: 'Type de contrat' }); - fireEvent.click(button); - const listbox = await screen.findByRole('listbox'); - const input = within(listbox).getAllByRole('checkbox'); - fireEvent.click(input[1]); - - //THEN - await waitFor(async () => { - const placeholder = await screen.findByTestId('Select-Placeholder'); - expect(placeholder.textContent).toEqual('1 choix sélectionné'); - }); - - const hiddenInput = await screen.findByTestId('Select-InputHidden'); - expect(hiddenInput).toHaveValue('CDI'); - }); - - it('quand on sélectionne une valeur, on appelle la fonction onChange passée au select', async () => { - // GIVEN - const user = userEvent.setup(); - const onChangeSpy = jest.fn(); - render( - , - ); - - - const button = screen.getByRole('button', { name: 'Type de contrat' }); - button.focus(); - await user.keyboard(KeyBoard.SPACE); - const optionList = await screen.findByRole('listbox'); - const firstOption = within(optionList).getAllByRole('option')[0]; - const secondOption = within(optionList).getAllByRole('option')[1]; - expect(firstOption).toHaveFocus(); - - await user.keyboard(KeyBoard.SPACE); - const hiddenInput = await screen.findByTestId('Select-InputHidden'); - expect(hiddenInput).toHaveValue('CDD'); - expect(optionList).toBeInTheDocument(); - - await user.keyboard(KeyBoard.ARROW_DOWN); - expect(secondOption).toHaveFocus(); - - await user.keyboard(KeyBoard.SPACE); - expect(hiddenInput).toHaveValue('CDD,CDI'); - expect(optionList).toBeInTheDocument(); - }); - }); -}); - - -describe('secure test', () => { - describe('keyboard support', () => { +describe('); + render(); + + await user.tab(); + await user.keyboard(KeyBoard.ENTER); + await user.keyboard(KeyBoard.ARROW_DOWN); + await user.keyboard(KeyBoard.SPACE); + + expect(screen.getByRole('textbox', { hidden: true })).toHaveValue('2'); + expect(screen.queryByRole('option')).not.toBeInTheDocument(); + }); + + it.todo('lorsque l‘utilisateur fait "alt + fleche du haut", l‘option qui a le focus visuel est séléctionné et la liste d‘option se ferme'); + + it.todo('lorsque l‘utilisateur fait "Tab", l‘option qui a le focus visuel est séléctionné, la liste d‘option se ferme et le focus se déplace sur le prochain élément focusable'); + + it('lorsque l‘utilisateur fait "echap", ferme la liste d‘option sans séléctionner l‘option qui a le focus visuel', async () => { + const user = userEvent.setup(); + const options = [{ libellé: 'options 1', valeur: '1' }, { libellé: 'options 2', valeur: '2' }]; + render(); + render(); + + await user.tab(); + await user.keyboard(KeyBoard.ENTER); + await user.keyboard(KeyBoard.ARROW_DOWN); + await user.keyboard(KeyBoard.SPACE); - it.todo('lorsque l‘utilisateur fait "Home", déplace le focus visuel sur la première option'); + expect(screen.getByRole('textbox', { hidden: true })).toHaveValue('1,2'); + expect(screen.getAllByRole('option').length).toBe(2); + }); - it.todo('lorsque l‘utilisateur fait "End", déplace le focus visuel sur la dernière option'); + it.todo('lorsque l‘utilisateur fait "alt + fleche du haut", l‘option qui a le focus visuel est séléctionné et la liste d‘option ne se ferme pas'); - describe('lorsque l‘utilisateur fait "PageUp"', () => { - it.todo('s‘il y a plus de 10 options précédentes, déplace le focus visuel de 10 options plus haut'); - it.todo('s‘il y a moins de 10 options précédentes, déplace le focus visuel sur la première option'); - }); + it.todo('lorsque l‘utilisateur fait "Tab", l‘option qui a le focus visuel est séléctionné, la liste d‘option se ferme et le focus se déplace sur le prochain élément focusable'); - describe('lorsque l‘utilisateur fait "PageDown"', () => { - it.todo('s‘il y a plus de 10 options suivantes, déplace le focus visuel de 10 options plus bas'); - it.todo('s‘il y a moins de 10 options suivantes, déplace le focus visuel sur la dernière option'); - }); - }); - }); + it('lorsque l‘utilisateur fait "echap", ferme la liste d‘option sans séléctionner l‘option qui a le focus visuel', async () => { + const user = userEvent.setup(); + const options = [{ libellé: 'options 1', valeur: '1' }, { libellé: 'options 2', valeur: '2' }]; + render(); + it.todo('lorsque l‘utilisateur fait "Home", déplace le focus visuel sur la première option'); - await user.click(screen.getByRole('button')); - await user.click(screen.getByText('options 2')); + it.todo('lorsque l‘utilisateur fait "End", déplace le focus visuel sur la dernière option'); - expect(screen.getByRole('textbox', { hidden: true })).toHaveValue('2'); - expect(screen.queryByRole('option')).not.toBeInTheDocument(); + describe('lorsque l‘utilisateur fait "PageUp"', () => { + it.todo('s‘il y a plus de 10 options précédentes, déplace le focus visuel de 10 options plus haut'); + it.todo('s‘il y a moins de 10 options précédentes, déplace le focus visuel sur la première option'); + }); + + describe('lorsque l‘utilisateur fait "PageDown"', () => { + it.todo('s‘il y a plus de 10 options suivantes, déplace le focus visuel de 10 options plus bas'); + it.todo('s‘il y a moins de 10 options suivantes, déplace le focus visuel sur la dernière option'); + }); + }); + }); }); describe('props', () => { @@ -299,7 +259,7 @@ describe('secure test', () => { it('accepte une liste d‘options', async () => { const user = userEvent.setup(); const optionsList = [{ libellé: 'options 1', valeur: '1' }, { libellé: 'options 2', valeur: '2' }]; - render(); await user.tab(); await user.keyboard(KeyBoard.ENTER); @@ -320,18 +280,18 @@ describe('secure test', () => { it('lorsque la value change, le select prend la valeur de value mise à jour', () => { const options = [{ libellé: 'options 1', valeur: '1' }, { libellé: 'options 2', valeur: '2' }]; - let valueThatCanChange= '1'; + let valueThatCanChange = '1'; const { rerender } = render(); expect(screen.getByRole('textbox', { hidden: true })).toHaveValue('2'); }); }); - it('accepte un name, on peut récupérer la valeur séléctionné depuis ce nom', async () => { + it('lorsque l‘on donne un name au select simple, on peut récupérer la valeur séléctionnée depuis ce nom', async () => { const user = userEvent.setup(); const options = [{ libellé: 'options 1', valeur: '1' }, { libellé: 'options 2', valeur: '2' }]; @@ -346,5 +306,22 @@ describe('secure test', () => { expect(screen.getByRole('form', { name: 'formulaire' })).toHaveFormValues({ nomSelect: '2' }); }); + + it('lorsque l‘on donne un name au select à choix multiple, on peut récupérer les valeur séléctionnées depuis ce nom', async () => { + const user = userEvent.setup(); + const options = [{ libellé: 'options 1', valeur: '1' }, { libellé: 'options 2', valeur: '2' }]; + + render(
+