diff --git a/Storybook/components/DateSelector/DateSelector.stories.tsx b/Storybook/components/DateSelector/DateSelector.stories.tsx index e9be711b..513d679f 100644 --- a/Storybook/components/DateSelector/DateSelector.stories.tsx +++ b/Storybook/components/DateSelector/DateSelector.stories.tsx @@ -14,7 +14,6 @@ export default { args: { prefilled: new Date(2023, 0, 8), onUpdatedDate: (date: Date | RangeError) => { - console.log(date); if (date instanceof RangeError) { action('onUpdatedDate')('Invalide date'); } else { diff --git a/src/__tests__/components/DateSelector.test.tsx b/src/__tests__/components/DateSelector.test.tsx index 252b1cff..e0a2dae9 100644 --- a/src/__tests__/components/DateSelector.test.tsx +++ b/src/__tests__/components/DateSelector.test.tsx @@ -5,22 +5,20 @@ import { render, userEvent, screen, act } from '../../shared/testUtils'; const mockedTestID = 'mockedTestID'; let mockOnChange: jest.Mock; -let tree: ReturnType; - -beforeEach(() => { - mockOnChange = jest.fn(); - tree = render( - , - ); -}); -describe('MODULE | DateField', () => { +describe('MODULE | DateSelector', () => { + beforeEach(() => { + mockOnChange = jest.fn(); + render( + , + ); + }); it('component renders correctly with prefilled values in DD/MM/YY', () => { - expect(tree.toJSON()).toMatchSnapshot(); + expect(screen.toJSON()).toMatchSnapshot(); }); it('should send date filled with missing fields', async () => { @@ -88,17 +86,41 @@ describe('MODULE | DateField', () => { expect(mockOnChange).toHaveBeenCalledWith(expect.any(RangeError)); }); +}); +describe('MODULE | DateSelector error', () => { + const errorMessage = 'an error'; + it('should display an error message if not focused', async () => { + mockOnChange = jest.fn(); + render( + , + ); - it('should display an error message', async () => { - tree.rerender( + expect(screen.getByText(errorMessage)).toBeOnTheScreen(); + }); + + it('should not display an error message if a field is focused', async () => { + mockOnChange = jest.fn(); + render( , ); - expect(screen.getByText('an error')).toBeOnTheScreen(); + const user = userEvent.setup(); + + expect(screen.getByText(errorMessage)).toBeOnTheScreen(); + + const dayField = screen.getByTestId(mockedTestID + '/day'); + await user.type(dayField, '4'); + + expect(screen.queryByText(errorMessage)).not.toBeOnTheScreen(); }); }); diff --git a/src/__tests__/components/__snapshots__/DateSelector.test.tsx.snap b/src/__tests__/components/__snapshots__/DateSelector.test.tsx.snap index e5775664..7597fca9 100644 --- a/src/__tests__/components/__snapshots__/DateSelector.test.tsx.snap +++ b/src/__tests__/components/__snapshots__/DateSelector.test.tsx.snap @@ -1,6 +1,6 @@ // Jest Snapshot v1, https://goo.gl/fbAQLP -exports[`MODULE | DateField component renders correctly with prefilled values in DD/MM/YY 1`] = ` +exports[`MODULE | DateSelector component renders correctly with prefilled values in DD/MM/YY 1`] = ` (null); const refMonth = useRef(null); @@ -54,9 +55,17 @@ export const DateSelector = ({ setDayField(completeFields.dayField); setMonthField(completeFields.monthField); setYearField(completeFields.yearField); + setDisplayError(!!errorMessage); onUpdatedDate(fromFieldsToDate(completeFields)); - }, [prefilledFields, dayField, monthField, yearField, onUpdatedDate]); + }, [ + prefilledFields, + dayField, + monthField, + yearField, + errorMessage, + onUpdatedDate, + ]); useListenerOnKeyboardHiding(leaveDateSelector); @@ -94,6 +103,8 @@ export const DateSelector = ({ }); }; + const handleOnFocus = () => setDisplayError(false); + return ( @@ -102,9 +113,10 @@ export const DateSelector = ({ testID={testID + '/day'} placeholder={prefilledFields.dayField} value={dayField} - hasError={!!errorMessage} + hasError={displayError} onBlur={handleBlurPrefixWith0(setDayField)} onChangeText={handleDayChange} + onFocus={handleOnFocus} /> @@ -116,9 +128,10 @@ export const DateSelector = ({ testID={testID + '/month'} placeholder={prefilledFields.monthField} value={monthField} - hasError={!!errorMessage} + hasError={displayError} onBlur={handleBlurPrefixWith0(setMonthField)} onChangeText={handleMonthChange} + onFocus={handleOnFocus} /> @@ -130,12 +143,13 @@ export const DateSelector = ({ testID={testID + '/year'} placeholder={prefilledFields.yearField} value={yearField} - hasError={!!errorMessage} + hasError={displayError} onBlur={handleBlurPrefixWith0(setYearField)} onChangeText={handleYearChange} + onFocus={handleOnFocus} /> - {errorMessage && ( + {displayError && errorMessage && ( {errorMessage}