Add tests for GBR to validate unvalidated contact method by jnowakow · Pull Request #72463 · Expensify/App

jnowakow · 2025-10-13T13:36:56Z

Explanation of Change

Adds test suite that verifies that GBR is correctly displayed on ContactMethodsPage.

Fixed Issues

$ #69920
PROPOSAL: N/A

Tests

Automated tests:

npm run test tests/unit/UserUtilsTest.ts

Manual tests:

Go to Account -> Profile -> Contact Method
Add new email BUT DO NOT VALIDATE IT
Verify that there's GBR on new method, next to contact method menu item on profile and on Account bottom tab
Add another email, do not validate it
Open dev tools
Type: Onyx.merge('loginList', {"<email-you-added-in-step-4> ": {errorFields: {field: "someError"}}});
Verify that there's RBR on new method, next to contact method menu item on profile and on Account bottom tab

Verify that no errors appear in the JS console

Offline tests

Go to Account -> Profile -> Contact Method
Add new email BUT DO NOT VALIDATE IT
Verify that there's GBR on new method, next to contact method menu item on profile and on Account bottom tab
Add another email, do not validate it
Open dev tools
Type: Onyx.merge('loginList', {"<email-you-added-in-step-4> ": {errorFields: {field: "someError"}}});
Verify that there's RBR on new method, next to contact method menu item on profile and on Account bottom tab

QA Steps

Go to Account -> Profile -> Contact Method
Add new email BUT DO NOT VALIDATE IT
Verify that there's GBR on new method, next to contact method menu item on profile and on Account bottom tab
Add another email, do not validate it
(If tests are done on staging)
Open dev tools
Type: Onyx.merge('loginList', {"<email-you-added-in-step-4> ": {errorFields: {field: "someError"}}});
Verify that there's RBR on new method, next to contact method menu item on profile and on Account bottom tab

Verify that no errors appear in the JS console

PR Author Checklist

Screenshots/Videos

Android: Native

Android: mWeb Chrome

iOS: Native

iOS: mWeb Safari

MacOS: Chrome / Safari

MacOS: Desktop

melvin-bot · 2025-10-13T13:37:03Z

@mananjadhav Please copy/paste the Reviewer Checklist from here into a new comment on this PR and complete it. If you have the K2 extension, you can simply click: [this button]

jnowakow · 2025-10-15T09:10:10Z

@mananjadhav are you around to review? 😇

situchan · 2025-10-15T10:09:20Z

@mananjadhav is out sick. I can help if needed

mountiny · 2025-10-15T10:30:45Z

Reviewer Checklist

I have verified the author checklist is complete (all boxes are checked off).
I verified the correct issue is linked in the ### Fixed Issues section above
I verified testing steps are clear and they cover the changes made in this PR
- I verified the steps for local testing are in the Tests section
- I verified the steps for Staging and/or Production testing are in the QA steps section
- I verified the steps cover any possible failure scenarios (i.e. verify an input displays the correct error message if the entered data is not correct)
- I turned off my network connection and tested it while offline to ensure it matches the expected behavior (i.e. verify the default avatar icon is displayed if app is offline)
I checked that screenshots or videos are included for tests on all platforms
I included screenshots or videos for tests on all platforms
I verified that the composer does not automatically focus or open the keyboard on mobile unless explicitly intended. This includes checking that returning the app from the background does not unexpectedly open the keyboard.
I verified tests pass on all platforms & I tested again on:
- Android: HybridApp
- Android: mWeb Chrome
- iOS: HybridApp
- iOS: mWeb Safari
- MacOS: Chrome / Safari
- MacOS: Desktop
If there are any errors in the console that are unrelated to this PR, I either fixed them (preferred) or linked to where I reported them in Slack
I verified there are no new alerts related to the canBeMissing param for useOnyx
I verified proper code patterns were followed (see Reviewing the code)
- I verified that any callback methods that were added or modified are named for what the method does and never what callback they handle (i.e. toggleReport and not onIconClick).
- I verified that comments were added to code that is not self explanatory
- I verified that any new or modified comments were clear, correct English, and explained "why" the code was doing something instead of only explaining "what" the code was doing.
- I verified any copy / text shown in the product is localized by adding it to src/languages/* files and using the translation method
- I verified all numbers, amounts, dates and phone numbers shown in the product are using the localization methods
- I verified any copy / text that was added to the app is grammatically correct in English. It adheres to proper capitalization guidelines (note: only the first word of header/labels should be capitalized), and is either coming verbatim from figma or has been approved by marketing (in order to get marketing approval, ask the Bug Zero team member to add the Waiting for copy label to the issue)
- I verified proper file naming conventions were followed for any new files or renamed files. All non-platform specific files are named after what they export and are not named "index.js". All platform-specific files are named for the platform the code supports as outlined in the README.
- I verified the JSDocs style guidelines (in STYLE.md) were followed
If a new code pattern is added I verified it was agreed to be used by multiple Expensify engineers
I verified that this PR follows the guidelines as stated in the Review Guidelines
I verified other components that can be impacted by these changes have been tested, and I retested again (i.e. if the PR modifies a shared library or component like Avatar, I verified the components using Avatar have been tested & I retested again)
I verified all code is DRY (the PR doesn't include any logic written more than once, with the exception of tests)
I verified any variables that can be defined as constants (ie. in CONST.ts or at the top of the file that uses the constant) are defined as such
If a new component is created I verified that:
- A similar component doesn't exist in the codebase
- All props are defined accurately and each prop has a /** comment above it */
- The file is named correctly
- The component has a clear name that is non-ambiguous and the purpose of the component can be inferred from the name alone
- The only data being stored in the state is data necessary for rendering and nothing else
- For Class Components, any internal methods passed to components event handlers are bound to this properly so there are no scoping issues (i.e. for onClick={this.submit} the method this.submit should be bound to this in the constructor)
- Any internal methods bound to this are necessary to be bound (i.e. avoid this.submit = this.submit.bind(this); if this.submit is never passed to a component event handler like onClick)
- All JSX used for rendering exists in the render method
- The component has the minimum amount of code necessary for its purpose, and it is broken down into smaller components in order to separate concerns and functions
If any new file was added I verified that:
- The file has a description of what it does and/or why is needed at the top of the file if the code is not self explanatory
If a new CSS style is added I verified that:
- A similar style doesn't already exist
- The style can't be created with an existing StyleUtils function (i.e. StyleUtils.getBackgroundAndBorderStyle(theme.componentBG)
If the PR modifies code that runs when editing or sending messages, I tested and verified there is no unexpected behavior for all supported markdown - URLs, single line code, code blocks, quotes, headings, bold, strikethrough, and italic.
If the PR modifies a generic component, I tested and verified that those changes do not break usages of that component in the rest of the App (i.e. if a shared library or component like Avatar is modified, I verified that Avatar is working as expected in all cases)
If the PR modifies a component related to any of the existing Storybook stories, I tested and verified all stories for that component are still working as expected.
If the PR modifies a component or page that can be accessed by a direct deeplink, I verified that the code functions as expected when the deeplink is used - from a logged in and logged out account.
If the PR modifies the UI (e.g. new buttons, new UI components, changing the padding/spacing/sizing, moving components, etc) or modifies the form input styles:
- I verified that all the inputs inside a form are aligned with each other.
- I added Design label and/or tagged @Expensify/design so the design team can review the changes.
If a new page is added, I verified it's using the ScrollView component to make it scrollable when more elements are added to the page.
For any bug fix or new feature in this PR, I verified that sufficient unit tests are included to prevent regressions in this flow.
If the main branch was merged into this PR after a review, I tested again and verified the outcome was still expected according to the Test steps.
I have checked off every checkbox in the PR reviewer checklist, including those that don't apply to this PR.

Screenshots/Videos

Android: HybridApp

Android: mWeb Chrome

iOS: HybridApp

iOS: mWeb Safari

MacOS: Chrome / Safari

MacOS: Desktop

codecov · 2025-10-15T14:09:40Z

Codecov Report

❌ Patch coverage is 70.00000% with 9 lines in your changes missing coverage. Please review.

Files with missing lines	Patch %	Lines
...s/settings/Profile/Contacts/ContactMethodsPage.tsx	0.00%	5 Missing ⚠️
src/libs/UserUtils.ts	84.00%	4 Missing ⚠️

Files with missing lines	Coverage Δ
src/libs/UserUtils.ts	`69.23% <84.00%> (+12.26%)`	⬆️
...s/settings/Profile/Contacts/ContactMethodsPage.tsx	`0.00% <0.00%> (ø)`

... and 71 files with indirect coverage changes

🚀 New features to boost your workflow:

❄️ Test Analytics: Detect flaky tests, report on failures, and find test suite problems.
📦 JS Bundle Analysis: Save yourself from yourself by tracking and limiting bundle sizes in JS merges.

jnowakow · 2025-10-15T14:12:35Z

@mountiny thanks for valid comments! I checked how tests are done for Subscription and came to conclusion that my initial solution wasn't the best one. In this case it's better to test functions calculating if GBR/RBR should be shown instead of rendering whole components to check if the dots are there.
Because of that I slightly refactored ContactMethodsPage. I extracted logic that derives login options and moved it as separate function to UserUtils.ts. I made little modification to remove additional array that was created earlier. Also options are now memoized and components are created in render function making it a bit clearer.
Then I've added tests for getContactMethodsOptions that is the extracted method mentioned above and for getLoginListBrickRoadIndicator that controls RBR/GBR on ProfilePage.

RBR/GRB displayed on the bottom tab is controlled by useAccountTabIndicatorStatus that is already tested:

App/tests/unit/useAccountTabIndicatorStatusTest.ts

Lines 1 to 366 in d057ac4

    
           import {act, renderHook} from '@testing-library/react-native'; 
        
           import type {OnyxMultiSetInput} from 'react-native-onyx'; 
        
           import Onyx from 'react-native-onyx'; 
        
           import useAccountTabIndicatorStatus from '@hooks/useAccountTabIndicatorStatus'; 
        
           // eslint-disable-next-line no-restricted-imports 
        
           import {defaultTheme} from '@styles/theme'; 
        
           import CONST from '@src/CONST'; 
        
           import ONYXKEYS from '@src/ONYXKEYS'; 
        
           import waitForBatchedUpdatesWithAct from '../utils/waitForBatchedUpdatesWithAct'; 
        
           const getMockForStatus = (status: string) => 
        
               ({ 
        
                   [ONYXKEYS.BANK_ACCOUNT_LIST]: { 
        
                       // eslint-disable-next-line @typescript-eslint/naming-convention 
        
                       12345: { 
        
                           methodID: 12345, 
        
                           errors: 
        
                               status === CONST.INDICATOR_STATUS.HAS_PAYMENT_METHOD_ERROR 
        
                                   ? { 
        
                                         error: 'Something went wrong', 
        
                                     } 
        
                                   : undefined, 
        
                       }, 
        
                   }, 
        
                   [ONYXKEYS.USER_WALLET]: { 
        
                       bankAccountID: 12345, 
        
                       errors: 
        
                           status === CONST.INDICATOR_STATUS.HAS_USER_WALLET_ERRORS 
        
                               ? { 
        
                                     error: 'Something went wrong', 
        
                                 } 
        
                               : undefined, 
        
                   }, 
        
                   [ONYXKEYS.WALLET_TERMS]: { 
        
                       errors: 
        
                           status === CONST.INDICATOR_STATUS.HAS_WALLET_TERMS_ERRORS 
        
                               ? { 
        
                                     error: 'Something went wrong', 
        
                                 } 
        
                               : undefined, 
        
                       chatReportID: status === CONST.INDICATOR_STATUS.HAS_WALLET_TERMS_ERRORS ? undefined : '123', 
        
                   }, 
        
                   [ONYXKEYS.LOGIN_LIST]: { 
        
                       // eslint-disable-next-line @typescript-eslint/naming-convention 
        
                       'johndoe12@expensify.com': { 
        
                           partnerName: 'John Doe', 
        
                           partnerUserID: 'johndoe12@expensify.com', 
        
                           validatedDate: status !== CONST.INDICATOR_STATUS.HAS_LOGIN_LIST_INFO ? new Date().toISOString() : undefined, 
        
                           errorFields: 
        
                               status === CONST.INDICATOR_STATUS.HAS_LOGIN_LIST_ERROR 
        
                                   ? { 
        
                                         field: { 
        
                                             error: 'Something went wrong', 
        
                                         }, 
        
                                     } 
        
                                   : undefined, 
        
                       }, 
        
                       // eslint-disable-next-line @typescript-eslint/naming-convention 
        
                       'otheruser@expensify.com': { 
        
                           partnerName: 'Other User', 
        
                           partnerUserID: status === CONST.INDICATOR_STATUS.HAS_LOGIN_LIST_INFO ? 'different@expensify.com' : 'otheruser@expensify.com', 
        
                           validatedDate: status === CONST.INDICATOR_STATUS.HAS_LOGIN_LIST_INFO ? undefined : new Date().toISOString(), 
        
                           errorFields: undefined, 
        
                       }, 
        
                   }, 
        
                   [ONYXKEYS.REIMBURSEMENT_ACCOUNT]: { 
        
                       achData: { 
        
                           bankAccountID: 12345, 
        
                       }, 
        
                       errors: 
        
                           status === CONST.INDICATOR_STATUS.HAS_REIMBURSEMENT_ACCOUNT_ERRORS 
        
                               ? { 
        
                                     error: 'Something went wrong', 
        
                                 } 
        
                               : undefined, 
        
                   }, 
        
                   [ONYXKEYS.PRIVATE_PERSONAL_DETAILS]: { 
        
                       errorFields: 
        
                           status === CONST.INDICATOR_STATUS.HAS_PHONE_NUMBER_ERROR 
        
                               ? { 
        
                                     phoneNumber: 'Invalid phone number', 
        
                                 } 
        
                               : undefined, 
        
                   }, 
        
                   [`${ONYXKEYS.CARD_LIST}`]: { 
        
                       // eslint-disable-next-line @typescript-eslint/naming-convention 
        
                       card123: { 
        
                           bank: 'OTHER_BANK', 
        
                           lastScrapeResult: status === CONST.INDICATOR_STATUS.HAS_CARD_CONNECTION_ERROR ? 403 : 200, 
        
                       }, 
        
                       // eslint-disable-next-line @typescript-eslint/naming-convention 
        
                       card456: { 
        
                           bank: 'ANOTHER_BANK', 
        
                           lastScrapeResult: status === CONST.INDICATOR_STATUS.HAS_CARD_CONNECTION_ERROR ? 403 : 200, 
        
                       }, 
        
                   }, 
        
                   [ONYXKEYS.SESSION]: { 
        
                       email: 'johndoe12@expensify.com', 
        
                   }, 
        
               }) as unknown as OnyxMultiSetInput; 
        
           type TestCase = { 
        
               name: string; 
        
               indicatorColor: string; 
        
               status: string; 
        
           }; 
        
           const TEST_CASES: TestCase[] = [ 
        
               { 
        
                   name: 'has user wallet errors', 
        
                   indicatorColor: defaultTheme.danger, 
        
                   status: CONST.INDICATOR_STATUS.HAS_USER_WALLET_ERRORS, 
        
               }, 
        
               { 
        
                   name: 'has payment method error', 
        
                   indicatorColor: defaultTheme.danger, 
        
                   status: CONST.INDICATOR_STATUS.HAS_PAYMENT_METHOD_ERROR, 
        
               }, 
        
               { 
        
                   name: 'has reimbursement account errors', 
        
                   indicatorColor: defaultTheme.danger, 
        
                   status: CONST.INDICATOR_STATUS.HAS_REIMBURSEMENT_ACCOUNT_ERRORS, 
        
               }, 
        
               { 
        
                   name: 'has login list error', 
        
                   indicatorColor: defaultTheme.danger, 
        
                   status: CONST.INDICATOR_STATUS.HAS_LOGIN_LIST_ERROR, 
        
               }, 
        
               { 
        
                   name: 'has wallet terms errors', 
        
                   indicatorColor: defaultTheme.danger, 
        
                   status: CONST.INDICATOR_STATUS.HAS_WALLET_TERMS_ERRORS, 
        
               }, 
        
               { 
        
                   name: 'has card connection error', 
        
                   indicatorColor: defaultTheme.danger, 
        
                   status: CONST.INDICATOR_STATUS.HAS_CARD_CONNECTION_ERROR, 
        
               }, 
        
               { 
        
                   name: 'has phone number error', 
        
                   indicatorColor: defaultTheme.danger, 
        
                   status: CONST.INDICATOR_STATUS.HAS_PHONE_NUMBER_ERROR, 
        
               }, 
        
               { 
        
                   name: 'has login list info', 
        
                   indicatorColor: defaultTheme.success, 
        
                   status: CONST.INDICATOR_STATUS.HAS_LOGIN_LIST_INFO, 
        
               }, 
        
           ]; 
        
           describe('useAccountTabIndicatorStatus', () => { 
        
               beforeAll(() => { 
        
                   Onyx.init({ 
        
                       keys: ONYXKEYS, 
        
                   }); 
        
               }); 
        
               describe.each(TEST_CASES)('$name', (testCase) => { 
        
                   beforeAll(async () => { 
        
                       await act(async () => { 
        
                           await Onyx.multiSet(getMockForStatus(testCase.status)); 
        
                           await waitForBatchedUpdatesWithAct(); 
        
                       }); 
        
                   }); 
        
                   it('returns correct indicatorColor', async () => { 
        
                       const {result} = renderHook(() => useAccountTabIndicatorStatus()); 
        
                       await waitForBatchedUpdatesWithAct(); 
        
                       const {indicatorColor} = result.current; 
        
                       expect(indicatorColor).toBe(testCase.indicatorColor); 
        
                   }); 
        
                   it('returns correct status', async () => { 
        
                       const {result} = renderHook(() => useAccountTabIndicatorStatus()); 
        
                       await waitForBatchedUpdatesWithAct(); 
        
                       const {status} = result.current; 
        
                       expect(status).toBe(testCase.status); 
        
                   }); 
        
               }); 
        
               describe('no errors or info', () => { 
        
                   beforeAll(async () => { 
        
                       await act(async () => { 
        
                           await Onyx.multiSet({ 
        
                               [ONYXKEYS.BANK_ACCOUNT_LIST]: {}, 
        
                               [ONYXKEYS.USER_WALLET]: {}, 
        
                               [ONYXKEYS.WALLET_TERMS]: {}, 
        
                               [ONYXKEYS.LOGIN_LIST]: {}, 
        
                               [ONYXKEYS.REIMBURSEMENT_ACCOUNT]: {}, 
        
                               [ONYXKEYS.PRIVATE_PERSONAL_DETAILS]: {}, 
        
                               [`${ONYXKEYS.CARD_LIST}`]: {}, 
        
                               [ONYXKEYS.SESSION]: { 
        
                                   email: 'johndoe12@expensify.com', 
        
                               }, 
        
                           } as unknown as OnyxMultiSetInput); 
        
                           await waitForBatchedUpdatesWithAct(); 
        
                       }); 
        
                   }); 
        
                   it('returns undefined status when no errors or info exist', async () => { 
        
                       const {result} = renderHook(() => useAccountTabIndicatorStatus()); 
        
                       await waitForBatchedUpdatesWithAct(); 
        
                       const {status} = result.current; 
        
                       expect(status).toBeUndefined(); 
        
                   }); 
        
                   it('returns success color when no errors or info exist', async () => { 
        
                       const {result} = renderHook(() => useAccountTabIndicatorStatus()); 
        
                       await waitForBatchedUpdatesWithAct(); 
        
                       const {indicatorColor} = result.current; 
        
                       expect(indicatorColor).toBe(defaultTheme.success); 
        
                   }); 
        
               }); 
        
               describe('wallet terms with chatReportID', () => { 
        
                   beforeAll(async () => { 
        
                       await act(async () => { 
        
                           await Onyx.multiSet({ 
        
                               [ONYXKEYS.BANK_ACCOUNT_LIST]: {}, 
        
                               [ONYXKEYS.USER_WALLET]: {}, 
        
                               [ONYXKEYS.WALLET_TERMS]: { 
        
                                   errors: { 
        
                                       error: 'Something went wrong', 
        
                                   }, 
        
                                   chatReportID: '123', 
        
                               }, 
        
                               [ONYXKEYS.LOGIN_LIST]: {}, 
        
                               [ONYXKEYS.REIMBURSEMENT_ACCOUNT]: {}, 
        
                               [ONYXKEYS.PRIVATE_PERSONAL_DETAILS]: {}, 
        
                               [`${ONYXKEYS.CARD_LIST}`]: {}, 
        
                               [ONYXKEYS.SESSION]: { 
        
                                   email: 'johndoe12@expensify.com', 
        
                               }, 
        
                           } as unknown as OnyxMultiSetInput); 
        
                           await waitForBatchedUpdatesWithAct(); 
        
                       }); 
        
                   }); 
        
                   it('does not show wallet terms error when chatReportID exists', async () => { 
        
                       const {result} = renderHook(() => useAccountTabIndicatorStatus()); 
        
                       await waitForBatchedUpdatesWithAct(); 
        
                       const {status} = result.current; 
        
                       expect(status).toBeUndefined(); 
        
                   }); 
        
               }); 
        
               describe('multiple errors', () => { 
        
                   beforeAll(async () => { 
        
                       await act(async () => { 
        
                           await Onyx.multiSet({ 
        
                               [ONYXKEYS.BANK_ACCOUNT_LIST]: { 
        
                                   // eslint-disable-next-line @typescript-eslint/naming-convention 
        
                                   12345: { 
        
                                       methodID: 12345, 
        
                                       errors: { 
        
                                           error: 'Payment method error', 
        
                                       }, 
        
                                   }, 
        
                               }, 
        
                               [ONYXKEYS.USER_WALLET]: { 
        
                                   bankAccountID: 12345, 
        
                                   errors: { 
        
                                       error: 'Wallet error', 
        
                                   }, 
        
                               }, 
        
                               [ONYXKEYS.WALLET_TERMS]: {}, 
        
                               [ONYXKEYS.LOGIN_LIST]: {}, 
        
                               [ONYXKEYS.REIMBURSEMENT_ACCOUNT]: {}, 
        
                               [ONYXKEYS.PRIVATE_PERSONAL_DETAILS]: {}, 
        
                               [`${ONYXKEYS.CARD_LIST}`]: {}, 
        
                               [ONYXKEYS.SESSION]: { 
        
                                   email: 'johndoe12@expensify.com', 
        
                               }, 
        
                           } as unknown as OnyxMultiSetInput); 
        
                           await waitForBatchedUpdatesWithAct(); 
        
                       }); 
        
                   }); 
        
                   it('returns the first error status found', async () => { 
        
                       const {result} = renderHook(() => useAccountTabIndicatorStatus()); 
        
                       await waitForBatchedUpdatesWithAct(); 
        
                       const {status} = result.current; 
        
                       // Should return the first error in the errorChecking object 
        
                       expect(status).toBe(CONST.INDICATOR_STATUS.HAS_USER_WALLET_ERRORS); 
        
                   }); 
        
                   it('returns danger color for multiple errors', async () => { 
        
                       const {result} = renderHook(() => useAccountTabIndicatorStatus()); 
        
                       await waitForBatchedUpdatesWithAct(); 
        
                       const {indicatorColor} = result.current; 
        
                       expect(indicatorColor).toBe(defaultTheme.danger); 
        
                   }); 
        
               }); 
        
               describe('error takes priority over info', () => { 
        
                   beforeAll(async () => { 
        
                       await act(async () => { 
        
                           await Onyx.multiSet({ 
        
                               [ONYXKEYS.BANK_ACCOUNT_LIST]: {}, 
        
                               [ONYXKEYS.USER_WALLET]: { 
        
                                   bankAccountID: 12345, 
        
                                   errors: { 
        
                                       error: 'Wallet error', 
        
                                   }, 
        
                               }, 
        
                               [ONYXKEYS.WALLET_TERMS]: {}, 
        
                               [ONYXKEYS.LOGIN_LIST]: { 
        
                                   // eslint-disable-next-line @typescript-eslint/naming-convention 
        
                                   'johndoe12@expensify.com': { 
        
                                       partnerName: 'John Doe', 
        
                                       partnerUserID: 'johndoe12@expensify.com', 
        
                                       validatedDate: undefined, // This would trigger info status 
        
                                   }, 
        
                               }, 
        
                               [ONYXKEYS.REIMBURSEMENT_ACCOUNT]: {}, 
        
                               [ONYXKEYS.PRIVATE_PERSONAL_DETAILS]: {}, 
        
                               [`${ONYXKEYS.CARD_LIST}`]: {}, 
        
                               [ONYXKEYS.SESSION]: { 
        
                                   email: 'johndoe12@expensify.com', 
        
                               }, 
        
                           } as unknown as OnyxMultiSetInput); 
        
                           await waitForBatchedUpdatesWithAct(); 
        
                       }); 
        
                   }); 
        
                   it('returns error status when both error and info exist', async () => { 
        
                       const {result} = renderHook(() => useAccountTabIndicatorStatus()); 
        
                       await waitForBatchedUpdatesWithAct(); 
        
                       const {status} = result.current; 
        
                       expect(status).toBe(CONST.INDICATOR_STATUS.HAS_USER_WALLET_ERRORS); 
        
                   }); 
        
                   it('returns danger color when error takes priority', async () => { 
        
                       const {result} = renderHook(() => useAccountTabIndicatorStatus()); 
        
                       await waitForBatchedUpdatesWithAct(); 
        
                       const {indicatorColor} = result.current; 
        
                       expect(indicatorColor).toBe(defaultTheme.danger); 
        
                   }); 
        
               }); 
        
               describe('missing data', () => { 
        
                   beforeAll(async () => { 
        
                       await act(async () => { 
        
                           await Onyx.multiSet({ 
        
                               [ONYXKEYS.BANK_ACCOUNT_LIST]: null, 
        
                               [ONYXKEYS.USER_WALLET]: null, 
        
                               [ONYXKEYS.WALLET_TERMS]: null, 
        
                               [ONYXKEYS.LOGIN_LIST]: null, 
        
                               [ONYXKEYS.REIMBURSEMENT_ACCOUNT]: null, 
        
                               [ONYXKEYS.PRIVATE_PERSONAL_DETAILS]: null, 
        
                               [`${ONYXKEYS.CARD_LIST}`]: null, 
        
                               [ONYXKEYS.SESSION]: null, 
        
                           } as unknown as OnyxMultiSetInput); 
        
                           await waitForBatchedUpdatesWithAct(); 
        
                       }); 
        
                   }); 
        
                   it('handles missing data gracefully', async () => { 
        
                       const {result} = renderHook(() => useAccountTabIndicatorStatus()); 
        
                       await waitForBatchedUpdatesWithAct(); 
        
                       const {status, indicatorColor} = result.current; 
        
                       expect(status).toBeUndefined(); 
        
                       expect(indicatorColor).toBe(defaultTheme.success); 
        
                   }); 
        
               }); 
        
           });

mountiny · 2025-10-15T16:59:17Z

@situchan with this refactoring, could you please test and @jnowakow can add QA steps as now its not only about changing tests?

I think in general I agree that we should have unit tests for the logic, but we should also make sure to test the UI is rendering correctly eventually, so not sure if its a golden rule to not have them at all

jnowakow · 2025-10-16T06:58:59Z

@mountiny I've updated PR description with tests steps

I think in general I agree that we should have unit tests for the logic, but we should also make sure to test the UI is rendering correctly eventually, so not sure if its a golden rule to not have them at all

I agree that UI tests are important, but I don't think they make much sense in this case because they would just test whether React correctly renders the component given certain props. I would say, the purpose of testing GBR/RBR is to verify that, given certain data, we can accurately determine which Brick Road indicator to display. This verification is primarily handled by the hooks and utility functions that are currently under test.

situchan · 2025-10-16T08:28:51Z

BUG: Not able to close magic code input modal after failing to send new magic code and clicking error dismiss button

Screen.Recording.2025-10-16.at.2.25.31.PM.mov

(This also happens on staging so not blocker)

situchan · 2025-10-16T08:47:58Z

BUG: weird navigation transition animations and flickers on android chrome

bug.mov

(This also happens on staging so not blocker)

situchan

Screenshots/Videos

Android: HybridApp

android.mov

Android: mWeb Chrome

mchrome.mov

iOS: HybridApp

ios.mov

iOS: mWeb Safari

msafari.mov

MacOS: Chrome / Safari

web1.mov

web2.mov

MacOS: Desktop

desktop.mov

mountiny · 2025-10-16T11:13:41Z

I agree that UI tests are important, but I don't think they make much sense in this case because they would just test whether React correctly renders the component given certain props. I would say, the purpose of testing GBR/RBR is to verify that, given certain data, we can accurately determine which Brick Road indicator to display. This verification is primarily handled by the hooks and utility functions that are currently under test.

That is correct, the assumption there is though that people won't change the logic for rendering it without updating the tests - which can happen and could still introduce the regression because we only tested logic of one method but not the component itself

mountiny · 2025-10-16T11:14:09Z

@situchan CAn you please report that in #expensify-bugs so we can get that fixed

mountiny

Thanks

jnowakow · 2025-10-16T12:07:11Z

I agree that UI tests are important, but I don't think they make much sense in this case because they would just test whether React correctly renders the component given certain props. I would say, the purpose of testing GBR/RBR is to verify that, given certain data, we can accurately determine which Brick Road indicator to display. This verification is primarily handled by the hooks and utility functions that are currently under test.

That is correct, the assumption there is though that people won't change the logic for rendering it without updating the tests - which can happen and could still introduce the regression because we only tested logic of one method but not the component itself

Then I can restore UI tests from 4851d10#diff-3f080a042a6e353496a53c78a4ee838b2cff246c199534bd3262b62256b61123, fill them according to comments and open another PR to make sure we'll never find ourselves in such situation 😇

OSBotify · 2025-10-16T23:42:24Z

🚀 Deployed to staging by https://github.com/mountiny in version: 9.2.33-0 🚀

platform	result
🖥 desktop 🖥	success ✅
🕸 web 🕸	success ✅
🤖 android 🤖	success ✅
🍎 iOS 🍎	success ✅

OSBotify · 2025-10-20T09:26:12Z

🚀 Deployed to production by https://github.com/mountiny in version: 9.2.33-4 🚀

platform	result
🖥 desktop 🖥	success ✅
🕸 web 🕸	success ✅
🤖 android 🤖	success ✅
🍎 iOS 🍎	success ✅

Add tests for GRB on ContactMethodsPage

6150057

jnowakow requested a review from a team as a code owner October 13, 2025 13:36

melvin-bot Bot assigned jnowakow Oct 13, 2025

melvin-bot Bot requested review from mananjadhav and removed request for a team October 13, 2025 13:37

jnowakow marked this pull request as draft October 13, 2025 13:46

jnowakow added 4 commits October 14, 2025 09:12

Fix linter on ContactMethodsPageTest

68db2a2

Add tests GRB/RBR tests for ProfilePage

95a9940

Remove unnecessary changes

1357296

Fix linter

dab955c

jnowakow marked this pull request as ready for review October 14, 2025 10:58

mountiny removed the request for review from mananjadhav October 15, 2025 10:30

mountiny requested changes Oct 15, 2025

View reviewed changes

jnowakow added 2 commits October 15, 2025 15:16

Merge branch 'main' into jnowakow/gbr-validate-contact-method

8f4fdb0

Test logic responsible for RBR/GBR instead of components

4851d10

Remove _ to fix linter

6a1b751

jnowakow requested a review from mountiny October 15, 2025 14:22

mountiny requested a review from situchan October 15, 2025 16:56

situchan reviewed Oct 15, 2025

View reviewed changes

Comment thread src/pages/settings/Profile/Contacts/ContactMethodsPage.tsx

jnowakow changed the title ~~[No QA] Add tests for GBR to validate unvalidated contact method~~ Add tests for GBR to validate unvalidated contact method Oct 16, 2025

Restore comment

60eef9a

situchan approved these changes Oct 16, 2025

View reviewed changes

mountiny approved these changes Oct 16, 2025

View reviewed changes

mountiny merged commit 1780b45 into Expensify:main Oct 16, 2025
23 checks passed

OSBotify mentioned this pull request Oct 16, 2025

Deploy Checklist: New Expensify 2025-10-16 #72816

Closed

67 tasks

melvin-bot Bot mentioned this pull request Oct 20, 2025

[Due for payment 2025-10-28] [Due for payment 2025-10-27] [Create Automated Test] Account - GBR: validate unvalidated contact method #69920

Closed

jnowakow mentioned this pull request Oct 20, 2025

[No QA] GBR/RBR on ContactMethodsPage and ProfilePage UI tests #72966

Merged

54 tasks

Conversation

jnowakow commented Oct 13, 2025 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Explanation of Change

Fixed Issues

Tests

Automated tests:

Manual tests:

Offline tests

QA Steps

PR Author Checklist

Screenshots/Videos

Uh oh!

melvin-bot Bot commented Oct 13, 2025

Uh oh!

jnowakow commented Oct 15, 2025

Uh oh!

situchan commented Oct 15, 2025

Uh oh!

mountiny commented Oct 15, 2025

Reviewer Checklist

Screenshots/Videos

Uh oh!

Uh oh!

Uh oh!

Uh oh!

Uh oh!

Uh oh!

Uh oh!

codecov Bot commented Oct 15, 2025 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Codecov Report

Uh oh!

jnowakow commented Oct 15, 2025

Uh oh!

mountiny commented Oct 15, 2025 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Uh oh!

Uh oh!

jnowakow commented Oct 16, 2025

Uh oh!

situchan commented Oct 16, 2025

Uh oh!

situchan commented Oct 16, 2025

Uh oh!

situchan left a comment

Choose a reason for hiding this comment

Screenshots/Videos

Uh oh!

mountiny commented Oct 16, 2025

Uh oh!

mountiny commented Oct 16, 2025

Uh oh!

mountiny left a comment

Choose a reason for hiding this comment

Uh oh!

Uh oh!

jnowakow commented Oct 16, 2025

Uh oh!

OSBotify commented Oct 16, 2025

Uh oh!

OSBotify commented Oct 20, 2025

Uh oh!

Reviewers

Assignees

Labels

Projects

Milestone

Development

Uh oh!

4 participants

jnowakow commented Oct 13, 2025 •

edited

Loading

codecov Bot commented Oct 15, 2025 •

edited

Loading

mountiny commented Oct 15, 2025 •

edited

Loading