From 8822278bfc95f24b890a2295b5f38278f03d243a Mon Sep 17 00:00:00 2001 From: Github Date: Mon, 25 Nov 2024 15:28:42 +0100 Subject: [PATCH 1/5] Upgrade RNTL to the newest version --- package-lock.json | 16 +++++++++++----- package.json | 4 ++-- tests/ui/UnreadIndicatorsTest.tsx | 10 +++++----- 3 files changed, 18 insertions(+), 12 deletions(-) diff --git a/package-lock.json b/package-lock.json index f33381e385d3..7be847eb9c1a 100644 --- a/package-lock.json +++ b/package-lock.json @@ -169,8 +169,8 @@ "@storybook/react-webpack5": "^8.4.0", "@storybook/theming": "^8.1.10", "@svgr/webpack": "^6.0.0", - "@testing-library/jest-native": "5.4.1", - "@testing-library/react-native": "11.5.1", + "@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", "@types/canvas-size": "^1.2.2", @@ -12935,7 +12935,9 @@ } }, "node_modules/@testing-library/jest-native": { - "version": "5.4.1", + "version": "5.4.2", + "resolved": "https://registry.npmjs.org/@testing-library/jest-native/-/jest-native-5.4.2.tgz", + "integrity": "sha512-Vo/CE1uvCVH1H8YPoOEXLXVsm+BjzSQTq35+wkri1fr0O5D+A2WZ+m3ni5g6f1OCzNKNGIAHmisBEWkDs1P1mw==", "dev": true, "license": "MIT", "dependencies": { @@ -13016,11 +13018,15 @@ } }, "node_modules/@testing-library/react-native": { - "version": "11.5.1", + "version": "12.8.1", + "resolved": "https://registry.npmjs.org/@testing-library/react-native/-/react-native-12.8.1.tgz", + "integrity": "sha512-/7PIFCpeqAD3j7nzKQhZtm1T6RR/O/tB1We7JHtYP5RpTBj8rPitEpt6xGrD8R0ymOh+DxDKK7Zovfv5uDSRWg==", "dev": true, "license": "MIT", "dependencies": { - "pretty-format": "^29.4.0" + "jest-matcher-utils": "^29.7.0", + "pretty-format": "^29.7.0", + "redent": "^3.0.0" }, "peerDependencies": { "jest": ">=28.0.0", diff --git a/package.json b/package.json index 8e22bccba6fb..65e13bbed28c 100644 --- a/package.json +++ b/package.json @@ -234,8 +234,8 @@ "@storybook/react-webpack5": "^8.4.0", "@storybook/theming": "^8.1.10", "@svgr/webpack": "^6.0.0", - "@testing-library/jest-native": "5.4.1", - "@testing-library/react-native": "11.5.1", + "@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", "@types/canvas-size": "^1.2.2", diff --git a/tests/ui/UnreadIndicatorsTest.tsx b/tests/ui/UnreadIndicatorsTest.tsx index 1b44c556e003..6f4313a9f02c 100644 --- a/tests/ui/UnreadIndicatorsTest.tsx +++ b/tests/ui/UnreadIndicatorsTest.tsx @@ -85,7 +85,7 @@ function navigateToSidebar(): Promise { function areYouOnChatListScreen(): boolean { const hintText = Localize.translateLocal('sidebarScreen.listOfChats'); - const sidebarLinks = screen.queryAllByLabelText(hintText); + const sidebarLinks = screen.queryAllByLabelText(hintText, {includeHiddenElements: true}); return !sidebarLinks?.at(0)?.props?.accessibilityElementsHidden; } @@ -369,12 +369,12 @@ describe('Unread Indicators', () => { await act(() => (NativeNavigation as NativeNavigationMock).triggerTransitionEnd()); // Verify that report we navigated to appears in a "read" state while the original unread report still shows as unread const hintText = Localize.translateLocal('accessibilityHints.chatUserDisplayNames'); - const displayNameTexts = screen.queryAllByLabelText(hintText); + const displayNameTexts = screen.queryAllByLabelText(hintText, {includeHiddenElements: true}); expect(displayNameTexts).toHaveLength(2); expect((displayNameTexts.at(0)?.props?.style as TextStyle)?.fontWeight).toBe(FontUtils.fontWeight.normal); expect(screen.getAllByText('C User').at(0)).toBeOnTheScreen(); expect((displayNameTexts.at(1)?.props?.style as TextStyle)?.fontWeight).toBe(FontUtils.fontWeight.bold); - expect(screen.getByText('B User')).toBeOnTheScreen(); + expect(screen.getByText('B User', {includeHiddenElements: true})).toBeOnTheScreen(); })); xit('Manually marking a chat message as unread shows the new line indicator and updates the LHN', () => @@ -528,7 +528,7 @@ describe('Unread Indicators', () => { .then(() => { // Verify the chat preview text matches the last comment from the current user const hintText = Localize.translateLocal('accessibilityHints.lastChatMessagePreview'); - const alternateText = screen.queryAllByLabelText(hintText); + const alternateText = screen.queryAllByLabelText(hintText, {includeHiddenElements: true}); expect(alternateText).toHaveLength(1); // This message is visible on the sidebar and the report screen, so there are two occurrences. @@ -541,7 +541,7 @@ describe('Unread Indicators', () => { }) .then(() => { const hintText = Localize.translateLocal('accessibilityHints.lastChatMessagePreview'); - const alternateText = screen.queryAllByLabelText(hintText); + const alternateText = screen.queryAllByLabelText(hintText, {includeHiddenElements: true}); expect(alternateText).toHaveLength(1); expect(screen.getAllByText('Comment 9').at(0)).toBeOnTheScreen(); }) From 9d16d4d882c48777ca7c4e5f4957d47899c15a44 Mon Sep 17 00:00:00 2001 From: Github Date: Thu, 28 Nov 2024 11:19:02 +0100 Subject: [PATCH 2/5] fix reassure test --- .../perf-test/ReportActionsList.perf-test.tsx | 30 ++++++++++++------- 1 file changed, 20 insertions(+), 10 deletions(-) diff --git a/tests/perf-test/ReportActionsList.perf-test.tsx b/tests/perf-test/ReportActionsList.perf-test.tsx index b40e412ea677..1aacaaa5471f 100644 --- a/tests/perf-test/ReportActionsList.perf-test.tsx +++ b/tests/perf-test/ReportActionsList.perf-test.tsx @@ -13,8 +13,9 @@ import {ReportAttachmentsProvider} from '@src/pages/home/report/ReportAttachment import {ActionListContext, ReactionListContext} from '@src/pages/home/ReportScreenContext'; import type {PersonalDetailsList} from '@src/types/onyx'; import createRandomReportAction from '../utils/collections/reportActions'; -import * as LHNTestUtilsModule from '../utils/LHNTestUtils'; +import createRandomReport from '../utils/collections/reports'; import * as ReportTestUtils from '../utils/ReportTestUtils'; +import * as TestHelper from '../utils/TestHelper'; import waitForBatchedUpdates from '../utils/waitForBatchedUpdates'; import wrapOnyxWithWaitForBatchedUpdates from '../utils/wrapOnyxWithWaitForBatchedUpdates'; @@ -71,11 +72,25 @@ const mockOnScroll = jest.fn(); const mockLoadChats = jest.fn(); const mockRef = {current: null, flatListRef: null, scrollPosition: null, setScrollPosition: () => {}}; +const TEST_USER_ACCOUNT_ID = 1; +const TEST_USER_LOGIN = 'test@test.com'; + +const signUpWithTestUser = () => { + TestHelper.signInWithTestUser(TEST_USER_ACCOUNT_ID, TEST_USER_LOGIN); +}; + +const report = createRandomReport(1); +const parentReportAction = createRandomReportAction(1); + beforeEach(() => { // Initialize the network key for OfflineWithFeedback Onyx.merge(ONYXKEYS.NETWORK, {isOffline: false}); wrapOnyxWithWaitForBatchedUpdates(Onyx); - Onyx.clear().then(waitForBatchedUpdates); + signUpWithTestUser(); +}); + +afterEach(() => { + Onyx.clear(); }); function ReportActionsListWrapper() { @@ -85,18 +100,18 @@ function ReportActionsListWrapper() { {}} listID={1} loadOlderChats={mockLoadChats} loadNewerChats={mockLoadChats} - transactionThreadReport={LHNTestUtilsModule.getFakeReport()} + transactionThreadReport={report} reportActions={reportActions} /> @@ -110,10 +125,5 @@ test('[ReportActionsList] should render ReportActionsList with 500 reportActions await screen.findByTestId('report-actions-list'); }; await waitForBatchedUpdates(); - - Onyx.multiSet({ - [ONYXKEYS.PERSONAL_DETAILS_LIST]: LHNTestUtilsModule.fakePersonalDetails, - }); - await measureRenders(, {scenario}); }); From c78e955b06bee36036192dfcc0e5a8487dd0dc3f Mon Sep 17 00:00:00 2001 From: Github Date: Wed, 4 Dec 2024 12:26:40 +0100 Subject: [PATCH 3/5] update matchers and fix unit tests --- jest/setupAfterEnv.ts | 3 +- package-lock.json | 84 ------------------- package.json | 1 - .../DatePicker/CalendarPicker/ArrowIcon.tsx | 10 ++- .../DatePicker/CalendarPicker/index.tsx | 8 +- tests/ui/components/Button.tsx | 9 +- tests/unit/CalendarPickerTest.tsx | 34 ++++++-- 7 files changed, 47 insertions(+), 102 deletions(-) diff --git a/jest/setupAfterEnv.ts b/jest/setupAfterEnv.ts index d59495874588..4d436316e8c0 100644 --- 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 index 7be847eb9c1a..4191cf6db1e7 100644 --- a/package-lock.json +++ b/package-lock.json @@ -169,7 +169,6 @@ "@storybook/react-webpack5": "^8.4.0", "@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", @@ -12934,89 +12933,6 @@ "node": ">=10" } }, - "node_modules/@testing-library/jest-native": { - "version": "5.4.2", - "resolved": "https://registry.npmjs.org/@testing-library/jest-native/-/jest-native-5.4.2.tgz", - "integrity": "sha512-Vo/CE1uvCVH1H8YPoOEXLXVsm+BjzSQTq35+wkri1fr0O5D+A2WZ+m3ni5g6f1OCzNKNGIAHmisBEWkDs1P1mw==", - "dev": true, - "license": "MIT", - "dependencies": { - "chalk": "^4.1.2", - "jest-diff": "^29.0.1", - "jest-matcher-utils": "^29.0.1", - "pretty-format": "^29.0.3", - "redent": "^3.0.0" - }, - "peerDependencies": { - "react": ">=16.0.0", - "react-native": ">=0.59", - "react-test-renderer": ">=16.0.0" - } - }, - "node_modules/@testing-library/jest-native/node_modules/ansi-styles": { - "version": "4.3.0", - "dev": true, - "license": "MIT", - "dependencies": { - "color-convert": "^2.0.1" - }, - "engines": { - "node": ">=8" - }, - "funding": { - "url": "https://github.com/chalk/ansi-styles?sponsor=1" - } - }, - "node_modules/@testing-library/jest-native/node_modules/chalk": { - "version": "4.1.2", - "dev": true, - "license": "MIT", - "dependencies": { - "ansi-styles": "^4.1.0", - "supports-color": "^7.1.0" - }, - "engines": { - "node": ">=10" - }, - "funding": { - "url": "https://github.com/chalk/chalk?sponsor=1" - } - }, - "node_modules/@testing-library/jest-native/node_modules/color-convert": { - "version": "2.0.1", - "dev": true, - "license": "MIT", - "dependencies": { - "color-name": "~1.1.4" - }, - "engines": { - "node": ">=7.0.0" - } - }, - "node_modules/@testing-library/jest-native/node_modules/color-name": { - "version": "1.1.4", - "dev": true, - "license": "MIT" - }, - "node_modules/@testing-library/jest-native/node_modules/has-flag": { - "version": "4.0.0", - "dev": true, - "license": "MIT", - "engines": { - "node": ">=8" - } - }, - "node_modules/@testing-library/jest-native/node_modules/supports-color": { - "version": "7.2.0", - "dev": true, - "license": "MIT", - "dependencies": { - "has-flag": "^4.0.0" - }, - "engines": { - "node": ">=8" - } - }, "node_modules/@testing-library/react-native": { "version": "12.8.1", "resolved": "https://registry.npmjs.org/@testing-library/react-native/-/react-native-12.8.1.tgz", diff --git a/package.json b/package.json index 65e13bbed28c..1b49e3f32168 100644 --- a/package.json +++ b/package.json @@ -234,7 +234,6 @@ "@storybook/react-webpack5": "^8.4.0", "@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 index 5c58ed22f6fa..9bb61931d55a 100644 --- 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; + + /** 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 ( - + - + diff --git a/tests/ui/components/Button.tsx b/tests/ui/components/Button.tsx index 60957c8c7550..1a1b97fe18fc 100644 --- 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,7 +56,7 @@ 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', () => { @@ -63,7 +64,9 @@ describe('Button Component', () => { 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 index 5cf02409ac23..3daee04f6ae9 100644 --- a/tests/unit/CalendarPickerTest.tsx +++ b/tests/unit/CalendarPickerTest.tsx @@ -124,6 +124,8 @@ 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( { />, ); - 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,12 +147,14 @@ 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( { />, ); - 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,6 +204,8 @@ 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( { />, ); - 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( { />, ); - 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( { />, ); - 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( { />, ); - expect(screen.getByLabelText('24')).not.toBeDisabled(); + // then the label 24 should be clickable + expect(screen.getByLabelText('24')).toBeEnabled(); }); }); From 1297804ed88df01deaecd7f7313ef96d784635fc Mon Sep 17 00:00:00 2001 From: Github Date: Mon, 16 Dec 2024 11:20:06 +0100 Subject: [PATCH 4/5] small tweaks --- src/components/Button/index.tsx | 4 ++ .../DatePicker/CalendarPicker/ArrowIcon.tsx | 10 +--- .../DatePicker/CalendarPicker/index.tsx | 10 ++-- tests/ui/components/Button.tsx | 13 ++--- tests/unit/CalendarPickerTest.tsx | 47 +++++++++++++++---- 5 files changed, 55 insertions(+), 29 deletions(-) diff --git a/src/components/Button/index.tsx b/src/components/Button/index.tsx index 84767c6347e7..d943886982e4 100644 --- a/src/components/Button/index.tsx +++ b/src/components/Button/index.tsx @@ -365,6 +365,10 @@ function Button( if (shouldEnableHapticFeedback) { HapticFeedback.press(); } + + if (isDisabled || isLoading) { + return; // Prevent the onPress from being triggered when the button is disabled or in a loading state + } return onPress(event); }} onLongPress={(event) => { diff --git a/src/components/DatePicker/CalendarPicker/ArrowIcon.tsx b/src/components/DatePicker/CalendarPicker/ArrowIcon.tsx index 9bb61931d55a..5c58ed22f6fa 100644 --- a/src/components/DatePicker/CalendarPicker/ArrowIcon.tsx +++ b/src/components/DatePicker/CalendarPicker/ArrowIcon.tsx @@ -14,20 +14,14 @@ type ArrowIconProps = { /** Specifies direction of icon */ direction?: ValueOf; - - /** TestID for testing */ - testID?: string; }; -function ArrowIcon({disabled = false, direction = CONST.DIRECTION.RIGHT, testID}: ArrowIconProps) { +function ArrowIcon({disabled = false, direction = CONST.DIRECTION.RIGHT}: ArrowIconProps) { const theme = useTheme(); const styles = useThemeStyles(); const StyleUtils = useStyleUtils(); return ( - + - + @@ -227,7 +225,7 @@ function CalendarPicker({ const isDisabled = !day || isBeforeMinDate || isAfterMaxDate; const isSelected = !!day && isSameDay(parseISO(value.toString()), new Date(currentYearView, currentMonthView, day)); const handleOnPress = () => { - if (!day) { + if (!day || isDisabled) { return; } diff --git a/tests/ui/components/Button.tsx b/tests/ui/components/Button.tsx index 1a1b97fe18fc..0c0a1b5e2813 100644 --- a/tests/ui/components/Button.tsx +++ b/tests/ui/components/Button.tsx @@ -60,13 +60,14 @@ describe('Button Component', () => { }); it('disables button when isDisabled is true', () => { - // Given the component is rendered with isDisabled true - renderButton({isDisabled: true}); + // Given the component is rendered with isDisabled set to true + renderButton({isDisabled: true, onPress}); - // Then the button is disabled - expect(getButton()).toHaveStyle({opacity: 0.5}); - expect(getButton()).toHaveStyle({boxShadow: 'none'}); - expect(getButton()).toHaveStyle({outlineStyle: 'none'}); + // When the button is pressed + fireEvent.press(getButton()); + + // Then the onPress function should not be called + expect(onPress).not.toHaveBeenCalled(); }); it('sets accessibility label correctly', () => { diff --git a/tests/unit/CalendarPickerTest.tsx b/tests/unit/CalendarPickerTest.tsx index 3daee04f6ae9..5e6dbaf26ce0 100644 --- a/tests/unit/CalendarPickerTest.tsx +++ b/tests/unit/CalendarPickerTest.tsx @@ -133,8 +133,12 @@ describe('CalendarPicker', () => { />, ); - // then the back arrow should be blocked - expect(screen.getByTestId('prev-month-arrow')).toHaveStyle({opacity: 0.5}); + // When the previous month arrow is pressed + fireEvent.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(); + expect(screen.queryByText(monthNames.at(prevMonth) ?? '')).not.toBeOnTheScreen(); }); test('should block the next arrow when there is no available dates in the next month', () => { @@ -147,7 +151,12 @@ describe('CalendarPicker', () => { />, ); - expect(screen.getByTestId('next-month-arrow')).toHaveStyle({opacity: 0.5}); + // When the next month arrow is pressed + fireEvent.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(); + expect(screen.queryByText(monthNames.at(nextMonth) ?? '')).not.toBeOnTheScreen(); }); test('should allow navigating to the month of the max date when it has less days than the selected date', () => { @@ -204,35 +213,55 @@ describe('CalendarPicker', () => { test('should not allow to press earlier day than minDate', () => { const value = '2003-02-17'; const minDate = new Date('2003-02-16'); + const onSelectedMock = jest.fn(); // given the min date is 16 render( , ); - // then the label 15 should not be clickable - expect(screen.getByLabelText('15')).toHaveStyle({boxShadow: 'none'}); - expect(screen.getByLabelText('15')).toHaveStyle({outlineStyle: 'none'}); + // When the day 15 is pressed + fireEvent.press(screen.getByLabelText('15')); + + // Then the onSelected should not be called as the label 15 is disabled + expect(onSelectedMock).not.toHaveBeenCalled(); + + // When the day 16 is pressed + fireEvent.press(screen.getByLabelText('16')); + + // Then the onSelected should be called as the label 16 is enabled + expect(onSelectedMock).toHaveBeenCalledWith('2003-02-16'); }); test('should not allow to press later day than max', () => { const value = '2003-02-17'; const maxDate = new Date('2003-02-24'); + const onSelectedMock = jest.fn(); // given the max date is 24 render( , ); - // then the label 25 should not be clickable - expect(screen.getByLabelText('25')).toHaveStyle({boxShadow: 'none'}); - expect(screen.getByLabelText('25')).toHaveStyle({outlineStyle: 'none'}); + // When the day 25 is pressed + fireEvent.press(screen.getByLabelText('25')); + + // Then the onSelected should not be called as the label 15 is disabled + expect(onSelectedMock).not.toHaveBeenCalled(); + + // When the day 24 is pressed + fireEvent.press(screen.getByLabelText('24')); + + // Then the onSelected should be called as the label 24 is enabled + expect(onSelectedMock).toHaveBeenCalledWith('2003-02-24'); }); test('should allow to press min date', () => { From c52234d09a31740a7098834205a5417a53032e1e Mon Sep 17 00:00:00 2001 From: Github Date: Tue, 7 Jan 2025 13:29:39 +0100 Subject: [PATCH 5/5] fix new unit tests --- tests/unit/BaseSelectionListTest.tsx | 8 ++------ tests/unit/NetworkTest.tsx | 18 ++++++++++++++---- 2 files changed, 16 insertions(+), 10 deletions(-) diff --git a/tests/unit/BaseSelectionListTest.tsx b/tests/unit/BaseSelectionListTest.tsx index cf5581e536a3..673ea50b58d6 100644 --- a/tests/unit/BaseSelectionListTest.tsx +++ b/tests/unit/BaseSelectionListTest.tsx @@ -56,12 +56,8 @@ describe('BaseSelectionList', () => { isSelected: section.keyForList === '2', })); const {rerender} = render(); - expect(screen.getByTestId(`${CONST.BASE_LIST_ITEM_TEST_ID}1`)).toHaveAccessibilityState({ - selected: true, - }); + expect(screen.getByTestId(`${CONST.BASE_LIST_ITEM_TEST_ID}1`)).toBeSelected(); rerender(); - expect(screen.getByTestId(`${CONST.BASE_LIST_ITEM_TEST_ID}2`)).toHaveAccessibilityState({ - selected: true, - }); + expect(screen.getByTestId(`${CONST.BASE_LIST_ITEM_TEST_ID}2`)).toBeSelected(); }); }); diff --git a/tests/unit/NetworkTest.tsx b/tests/unit/NetworkTest.tsx index abd5011769a4..cf5c4dd07633 100644 --- a/tests/unit/NetworkTest.tsx +++ b/tests/unit/NetworkTest.tsx @@ -1,4 +1,4 @@ -import {render, screen} from '@testing-library/react-native'; +import {fireEvent, render, screen} from '@testing-library/react-native'; import {sub as dateSubtract} from 'date-fns/sub'; import type {Mock} from 'jest-mock'; import type {OnyxEntry} from 'react-native-onyx'; @@ -398,6 +398,8 @@ describe('NetworkTests', () => { test('poor connection simulation', async () => { const logSpy = jest.spyOn(Log, 'info'); + const setShouldForceOfflineSpy = jest.spyOn(NetworkActions, 'setShouldForceOffline'); + const setShouldFailAllRequestsSpy = jest.spyOn(NetworkActions, 'setShouldFailAllRequests'); // Given an opened test tool menu render(); @@ -408,10 +410,18 @@ describe('NetworkTests', () => { NetworkActions.setShouldSimulatePoorConnection(true, undefined); await waitForBatchedUpdates(); - // Then the connection status change log should be displayed as well as Force offline/Simulate failing network requests toggles should be disabled + // Then the connection status change log should be displayed as well Simulate poor internet connection toggle should be checked expect(logSpy).toHaveBeenCalledWith(expect.stringMatching(/\[NetworkConnection\] Set connection status "(online|offline)" for (\d+(?:\.\d+)?) sec/)); - expect(screen.getByAccessibilityHint('Force offline')).toBeDisabled(); - expect(screen.getByAccessibilityHint('Simulate failing network requests')).toBeDisabled(); + expect(screen.getByAccessibilityHint('Simulate poor internet connection')).toBeChecked(); + + // And the setShouldForceOffline and setShouldFailAllRequests should not be called as the Force offline and Simulate failing network requests toggles are disabled + fireEvent.press(screen.getByAccessibilityHint('Force offline')); + await waitForBatchedUpdates(); + expect(setShouldForceOfflineSpy).not.toHaveBeenCalled(); + + fireEvent.press(screen.getByAccessibilityHint('Simulate failing network requests')); + await waitForBatchedUpdates(); + expect(setShouldFailAllRequestsSpy).not.toHaveBeenCalled(); }); test('connection changes tracking', async () => {