update matchers and fix unit tests

Expensify · Dec 4, 2024 · bd32f42 · bd32f42
1 parent adb2138
commit bd32f42
Show file tree

Hide file tree

Showing 7 changed files with 47 additions and 102 deletions.
diff --git a/jest/setupAfterEnv.ts b/jest/setupAfterEnv.ts
@@ -1,4 +1,3 @@
-// This is required in order for jest to recognize custom matchers like toBeDisabled. This can be removed once testing-library/react-native version is bumped to v12.4 or later
-import '@testing-library/jest-native/extend-expect';
+import '@testing-library/react-native/extend-expect';
 
 jest.useRealTimers();
diff --git a/package-lock.json b/package-lock.json
diff --git a/package.json b/package.json
@@ -226,7 +226,6 @@
     "@storybook/react-webpack5": "^8.1.6",
     "@storybook/theming": "^8.1.10",
     "@svgr/webpack": "^6.0.0",
-    "@testing-library/jest-native": "5.4.2",
     "@testing-library/react-native": "12.8.1",
     "@trivago/prettier-plugin-sort-imports": "^4.2.0",
     "@types/base-64": "^1.0.2",

diff --git a/src/components/DatePicker/CalendarPicker/ArrowIcon.tsx b/src/components/DatePicker/CalendarPicker/ArrowIcon.tsx
@@ -14,14 +14,20 @@ type ArrowIconProps = {
 
     /** Specifies direction of icon */
     direction?: ValueOf<typeof CONST.DIRECTION>;
+
+    /** TestID for testing */
+    testID?: string;
 };
 
-function ArrowIcon({disabled = false, direction = CONST.DIRECTION.RIGHT}: ArrowIconProps) {
+function ArrowIcon({disabled = false, direction = CONST.DIRECTION.RIGHT, testID}: ArrowIconProps) {
     const theme = useTheme();
     const styles = useThemeStyles();
     const StyleUtils = useStyleUtils();
     return (
-        <View style={[styles.p1, StyleUtils.getDirectionStyle(direction), disabled ? styles.buttonOpacityDisabled : {}]}>
+        <View
+            style={[styles.p1, StyleUtils.getDirectionStyle(direction), disabled ? styles.buttonOpacityDisabled : {}]}
+            testID={testID}
+        >
             <Icon
                 fill={theme.icon}
                 src={Expensicons.ArrowRight}

diff --git a/src/components/DatePicker/CalendarPicker/index.tsx b/src/components/DatePicker/CalendarPicker/index.tsx
@@ -179,7 +179,6 @@ function CalendarPicker({
                     </Text>
                     <PressableWithFeedback
                         shouldUseAutoHitSlop={false}
-                        testID="prev-month-arrow"
                         disabled={!hasAvailableDatesPrevMonth}
                         onPress={moveToPrevMonth}
                         hoverDimmingValue={1}
@@ -188,17 +187,20 @@ function CalendarPicker({
                         <ArrowIcon
                             disabled={!hasAvailableDatesPrevMonth}
                             direction={CONST.DIRECTION.LEFT}
+                            testID="prev-month-arrow"
                         />
                     </PressableWithFeedback>
                     <PressableWithFeedback
                         shouldUseAutoHitSlop={false}
-                        testID="next-month-arrow"
                         disabled={!hasAvailableDatesNextMonth}
                         onPress={moveToNextMonth}
                         hoverDimmingValue={1}
                         accessibilityLabel={translate('common.next')}
                     >
-                        <ArrowIcon disabled={!hasAvailableDatesNextMonth} />
+                        <ArrowIcon
+                            disabled={!hasAvailableDatesNextMonth}
+                            testID="next-month-arrow"
+                        />
                     </PressableWithFeedback>
                 </View>
             </View>

diff --git a/tests/ui/components/Button.tsx b/tests/ui/components/Button.tsx
@@ -3,6 +3,7 @@ import React from 'react';
 import colors from '@styles/theme/colors';
 import Button from '@src/components/Button';
 import type {ButtonProps} from '@src/components/Button';
+import CONST from '@src/CONST';
 
 const buttonText = 'Click me';
 const accessibilityLabel = 'button-label';
@@ -17,7 +18,7 @@ describe('Button Component', () => {
             />,
         );
     const onPress = jest.fn();
-    const getButton = () => screen.getByText(buttonText);
+    const getButton = () => screen.getByRole(CONST.ROLE.BUTTON, {name: buttonText});
 
     afterEach(() => {
         jest.clearAllMocks();
@@ -55,15 +56,17 @@ describe('Button Component', () => {
         renderButton({isLoading: true});
 
         // Then the loading state is displayed
-        expect(getButton()).toBeDisabled();
+        expect(screen.getByText(buttonText)).not.toBeVisible();
     });
 
     it('disables button when isDisabled is true', () => {
         // Given the component is rendered with isDisabled true
         renderButton({isDisabled: true});
 
         // Then the button is disabled
-        expect(getButton()).toBeDisabled();
+        expect(getButton()).toHaveStyle({opacity: 0.5});
+        expect(getButton()).toHaveStyle({boxShadow: 'none'});
+        expect(getButton()).toHaveStyle({outlineStyle: 'none'});
     });
 
     it('sets accessibility label correctly', () => {

diff --git a/tests/unit/CalendarPickerTest.tsx b/tests/unit/CalendarPickerTest.tsx
@@ -124,14 +124,17 @@ describe('CalendarPicker', () => {
     test('should block the back arrow when there is no available dates in the previous month', () => {
         const minDate = new Date('2003-02-01');
         const value = new Date('2003-02-17');
+
+        // given the min date is 1
         render(
             <CalendarPicker
                 minDate={minDate}
                 value={value}
             />,
         );
 
-        expect(screen.getByTestId('prev-month-arrow')).toBeDisabled();
+        // then the back arrow should be blocked
+        expect(screen.getByTestId('prev-month-arrow')).toHaveStyle({opacity: 0.5});
     });
 
     test('should block the next arrow when there is no available dates in the next month', () => {
@@ -144,20 +147,23 @@ describe('CalendarPicker', () => {
             />,
         );
 
-        expect(screen.getByTestId('next-month-arrow')).toBeDisabled();
+        expect(screen.getByTestId('next-month-arrow')).toHaveStyle({opacity: 0.5});
     });
 
     test('should allow navigating to the month of the max date when it has less days than the selected date', () => {
         const maxDate = new Date('2003-11-27'); // This month has 30 days
         const value = '2003-10-31';
+
+        // given the max date is 27
         render(
             <CalendarPicker
                 maxDate={maxDate}
                 value={value}
             />,
         );
 
-        expect(screen.getByTestId('next-month-arrow')).not.toBeDisabled();
+        // then the next arrow should be enabled
+        expect(screen.getByTestId('next-month-arrow')).toBeEnabled();
     });
 
     test('should open the calendar on a month from max date if it is earlier than current month', () => {
@@ -198,52 +204,66 @@ describe('CalendarPicker', () => {
     test('should not allow to press earlier day than minDate', () => {
         const value = '2003-02-17';
         const minDate = new Date('2003-02-16');
+
+        // given the min date is 16
         render(
             <CalendarPicker
                 minDate={minDate}
                 value={value}
             />,
         );
 
-        expect(screen.getByLabelText('15')).toBeDisabled();
+        // then the label 15 should not be clickable
+        expect(screen.getByLabelText('15')).toHaveStyle({boxShadow: 'none'});
+        expect(screen.getByLabelText('15')).toHaveStyle({outlineStyle: 'none'});
     });
 
     test('should not allow to press later day than max', () => {
         const value = '2003-02-17';
         const maxDate = new Date('2003-02-24');
+
+        // given the max date is 24
         render(
             <CalendarPicker
                 maxDate={maxDate}
                 value={value}
             />,
         );
 
-        expect(screen.getByLabelText('25')).toBeDisabled();
+        // then the label 25 should not be clickable
+        expect(screen.getByLabelText('25')).toHaveStyle({boxShadow: 'none'});
+        expect(screen.getByLabelText('25')).toHaveStyle({outlineStyle: 'none'});
     });
 
     test('should allow to press min date', () => {
         const value = '2003-02-17';
         const minDate = new Date('2003-02-16');
+
+        // given the min date is 16
         render(
             <CalendarPicker
                 minDate={minDate}
                 value={value}
             />,
         );
 
-        expect(screen.getByLabelText('16')).not.toBeDisabled();
+        // then the label 16 should be clickable
+        expect(screen.getByLabelText('16')).toBeEnabled();
     });
 
     test('should allow to press max date', () => {
         const value = '2003-02-17';
         const maxDate = new Date('2003-02-24');
+
+        // given the max date is 24
         render(
             <CalendarPicker
                 maxDate={maxDate}
                 value={value}
             />,
         );
 
-        expect(screen.getByLabelText('24')).not.toBeDisabled();
+        // then the label 24 should be clickable
+        expect(screen.getByLabelText('24')).toBeEnabled();
     });
 });