✨ DateSelector - Don't show error when focused

ZeroGachis · Feb 5, 2024 · 32ee842 · 32ee842
1 parent 3731031
commit 32ee842
Show file tree

Hide file tree

Showing 4 changed files with 60 additions and 25 deletions.
diff --git 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
@@ -5,22 +5,20 @@ import { render, userEvent, screen, act } from '../../shared/testUtils';
 
 const mockedTestID = 'mockedTestID';
 let mockOnChange: jest.Mock<unknown, unknown[], unknown>;
-let tree: ReturnType<typeof render>;
-
-beforeEach(() => {
-    mockOnChange = jest.fn();
-    tree = render(
-        <DateSelector
-            prefilled={new Date(2003, 1, 1)}
-            onUpdatedDate={mockOnChange}
-            testID={mockedTestID}
-        />,
-    );
-});
 
-describe('MODULE | DateField', () => {
+describe('MODULE | DateSelector', () => {
+    beforeEach(() => {
+        mockOnChange = jest.fn();
+        render(
+            <DateSelector
+                prefilled={new Date(2003, 1, 1)}
+                onUpdatedDate={mockOnChange}
+                testID={mockedTestID}
+            />,
+        );
+    });
     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(
+            <DateSelector
+                prefilled={new Date(2003, 1, 1)}
+                onUpdatedDate={mockOnChange}
+                testID={mockedTestID}
+                errorMessage={errorMessage}
+            />,
+        );
 
-    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(
             <DateSelector
                 prefilled={new Date(2003, 1, 1)}
                 onUpdatedDate={mockOnChange}
                 testID={mockedTestID}
-                errorMessage='an error'
+                errorMessage={errorMessage}
             />,
         );
 
-        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
@@ -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`] = `
 <RNCSafeAreaProvider
   onInsetsChange={[Function]}
   style={

diff --git a/src/components/dateSelector/DateSelector.tsx b/src/components/dateSelector/DateSelector.tsx
@@ -36,6 +36,7 @@ export const DateSelector = ({
     const [dayField, setDayField] = useState('');
     const [monthField, setMonthField] = useState('');
     const [yearField, setYearField] = useState('');
+    const [displayError, setDisplayError] = useState(!!errorMessage);
 
     const refDay = useRef<TextInput>(null);
     const refMonth = useRef<TextInput>(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 (
         <View style={styles.root}>
             <View style={styles.dateSelector} testID={testID}>
@@ -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}
                 />
                 <View style={styles.slashContainer}>
                     <Headline size='h4' style={styles.slash}>
@@ -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}
                 />
                 <View style={styles.slashContainer}>
                     <Headline size='h4' style={styles.slash}>
@@ -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}
                 />
             </View>
-            {errorMessage && (
+            {displayError && errorMessage && (
                 <Body testID='text/error-message' style={styles.errorMessage}>
                     {errorMessage}
                 </Body>