From 0697e72869d95b53c5710b31655b5a7da6d94f0d Mon Sep 17 00:00:00 2001
From: Qichen Zhu <57348009+QichenZhu@users.noreply.github.com>
Date: Sat, 1 Feb 2025 20:35:47 +1300
Subject: [PATCH] Replace fireEvent with userEvent to test against disabled
 buttons

---
 tests/unit/CalendarPickerTest.tsx | 20 ++++++++++----------
 1 file changed, 10 insertions(+), 10 deletions(-)

diff --git a/tests/unit/CalendarPickerTest.tsx b/tests/unit/CalendarPickerTest.tsx
index 5e6dbaf26ce0..0c3e6f87c054 100644
--- a/tests/unit/CalendarPickerTest.tsx
+++ b/tests/unit/CalendarPickerTest.tsx
@@ -1,5 +1,5 @@
 import type ReactNavigationNative from '@react-navigation/native';
-import {fireEvent, render, screen, within} from '@testing-library/react-native';
+import {fireEvent, render, screen, userEvent, within} from '@testing-library/react-native';
 import {addMonths, addYears, subMonths, subYears} from 'date-fns';
 import type {ComponentType} from 'react';
 import CalendarPicker from '@components/DatePicker/CalendarPicker';
@@ -121,11 +121,9 @@ describe('CalendarPicker', () => {
         expect(onSelectedMock).toHaveBeenCalledWith('2022-02-15');
     });
 
-    test('should block the back arrow when there is no available dates in the previous month', () => {
+    test('should block the back arrow when there is no available dates in the previous month', async () => {
         const minDate = new Date('2003-02-01');
         const value = new Date('2003-02-17');
-
-        // given the min date is 1
         render(
             <CalendarPicker
                 minDate={minDate}
@@ -134,16 +132,17 @@ describe('CalendarPicker', () => {
         );
 
         // When the previous month arrow is pressed
-        fireEvent.press(screen.getByTestId('prev-month-arrow'));
+        const user = userEvent.setup();
+        await user.press(screen.getByTestId('prev-month-arrow'));
 
         // Then the previous month should not be called as the previous month button is disabled
-        const prevMonth = subMonths(new Date(), 1).getMonth();
+        const prevMonth = subMonths(value, 1).getMonth();
         expect(screen.queryByText(monthNames.at(prevMonth) ?? '')).not.toBeOnTheScreen();
     });
 
-    test('should block the next arrow when there is no available dates in the next month', () => {
+    test('should block the next arrow when there is no available dates in the next month', async () => {
         const maxDate = new Date('2003-02-24');
-        const value = '2003-02-17';
+        const value = new Date('2003-02-17');
         render(
             <CalendarPicker
                 maxDate={maxDate}
@@ -152,10 +151,11 @@ describe('CalendarPicker', () => {
         );
 
         // When the next month arrow is pressed
-        fireEvent.press(screen.getByTestId('next-month-arrow'));
+        const user = userEvent.setup();
+        await user.press(screen.getByTestId('next-month-arrow'));
 
         // Then the next month should not be called as the next month button is disabled
-        const nextMonth = addMonths(new Date(), 1).getMonth();
+        const nextMonth = addMonths(value, 1).getMonth();
         expect(screen.queryByText(monthNames.at(nextMonth) ?? '')).not.toBeOnTheScreen();
     });