diff --git a/src/pages/settings/Profile/Contacts/ContactMethodDetailsPage.tsx b/src/pages/settings/Profile/Contacts/ContactMethodDetailsPage.tsx index 2a578f9515c4..7ab0fd56e97d 100644 --- a/src/pages/settings/Profile/Contacts/ContactMethodDetailsPage.tsx +++ b/src/pages/settings/Profile/Contacts/ContactMethodDetailsPage.tsx @@ -92,6 +92,7 @@ function ContactMethodDetailsPage({route}: ContactMethodDetailsPageProps) { const loginData = useMemo(() => loginList?.[contactMethod], [loginList, contactMethod]); const isDefaultContactMethod = useMemo(() => session?.email === loginData?.partnerUserID, [session?.email, loginData?.partnerUserID]); const validateLoginError = getEarliestErrorField(loginData, 'validateLogin'); + const prevPendingDeletedLogin = usePrevious(loginData?.pendingFields?.deletedLogin); /** * Attempt to set this contact method as user's "Default contact method" @@ -167,10 +168,12 @@ function ContactMethodDetailsPage({route}: ContactMethodDetailsPageProps) { }, [loginData?.validatedDate, loginData?.errorFields?.addedLogin]); useEffect(() => { - if (loginData?.validatedDate) { + // eslint-disable-next-line @typescript-eslint/prefer-nullish-coalescing + if (loginData?.validatedDate || prevPendingDeletedLogin) { return; } resetContactMethodValidateCodeSentState(contactMethod); + // eslint-disable-next-line react-compiler/react-compiler, react-hooks/exhaustive-deps -- The prevPendingDeletedLogin is a ref, so no need to add it to dependencies. }, [contactMethod, loginData?.validatedDate]); const getThreeDotsMenuItems = useCallback(() => { diff --git a/tests/unit/ContactMethodDetailsPageTest.tsx b/tests/unit/ContactMethodDetailsPageTest.tsx new file mode 100644 index 000000000000..b71cb7e5e74b --- /dev/null +++ b/tests/unit/ContactMethodDetailsPageTest.tsx @@ -0,0 +1,84 @@ +import {render} from '@testing-library/react-native'; +import Onyx from 'react-native-onyx'; +// eslint-disable-next-line no-restricted-syntax +import * as UserActions from '@libs/actions/User'; +import ContactMethodDetailsPage from '@pages/settings/Profile/Contacts/ContactMethodDetailsPage'; +import ONYXKEYS from '@src/ONYXKEYS'; +import type {MockFetch} from '../utils/TestHelper'; +import {getGlobalFetchMock} from '../utils/TestHelper'; +import waitForBatchedUpdates from '../utils/waitForBatchedUpdates'; +import waitForBatchedUpdatesWithAct from '../utils/waitForBatchedUpdatesWithAct'; + +jest.mock('@libs/Navigation/Navigation', () => ({ + goBack: jest.fn(), +})); + +jest.mock('@libs/actions/User', () => { + // eslint-disable-next-line @typescript-eslint/no-unsafe-assignment + const originalModule = jest.requireActual('@libs/actions/User'); + // eslint-disable-next-line @typescript-eslint/no-unsafe-return + return { + ...originalModule, + resetContactMethodValidateCodeSentState: jest.fn(), + }; +}); + +const fakeEmail = 'fake@gmail.com'; +const mockRoute = { + params: { + backTo: '', + contactMethod: fakeEmail, + }, +}; +const mockLoginList = { + [fakeEmail]: { + partnerName: 'expensify.com', + partnerUserID: fakeEmail, + validatedDate: 'fake-validatedDate', + }, +}; + +describe('ContactMethodDetailsPage', () => { + let mockFetch: MockFetch; + beforeAll(() => { + Onyx.init({ + keys: ONYXKEYS, + }); + }); + beforeEach(() => { + global.fetch = getGlobalFetchMock(); + mockFetch = fetch as MockFetch; + return Onyx.clear().then(waitForBatchedUpdates); + }); + + function ContactMethodDetailsPageRenderer() { + return ( + + ); + } + + it('should not call resetContactMethodValidateCodeSentState when we got a delete pending field', async () => { + // Given a login list with a validated contact method + Onyx.merge(ONYXKEYS.LOGIN_LIST, mockLoginList); + await waitForBatchedUpdates(); + + // Given the page is rendered + render(); + + // When a deleteContactMethod called + UserActions.deleteContactMethod(fakeEmail, mockLoginList); + await waitForBatchedUpdatesWithAct(); + + // When the deletion is successful + mockFetch?.succeed(); + await waitForBatchedUpdates(); + mockFetch?.resume(); + await waitForBatchedUpdates(); + + // Then resetContactMethodValidateCodeSentState should not be called + expect(UserActions.resetContactMethodValidateCodeSentState).not.toHaveBeenCalled(); + }); +});