refactor(mfa): drop trivial test helpers, target confirm button by testID

Remove single-line pass-through helpers that added indirection without logic:
- flushMfaUi: call waitForBatchedUpdatesWithAct directly.
- getSettleableLeafStates: merge the machine->root wrapper into the recursive
  collector so one function remains; callers pass mfaMachine.root.
- isModalOverlayMounted / isOutcomeScreenVisible: inline the queryAll assertions
  in the view-config test and move the marker constants next to them.

Drop the redundant MfaControlsCapture.displayName; a named function component
already exposes that name.

Add a stable testID to the outcome screen confirm Button and press it via
getByTestId instead of the translated "Got it" label, so the test no longer
depends on visible copy.

Author: dariusz-biela

src/components/MultifactorAuthentication/components/OutcomeScreen/OutcomeScreenBase.tsx

@@ -101,6 +101,7 @@ function OutcomeScreenBase({headerTitle, illustration, iconWidth, iconHeight, ti
                         style={styles.flex1}
                         onPress={onClose}
                         text={translate('common.buttonConfirm')}
+                        testID="MultifactorAuthenticationOutcomeConfirmButton"
                     />
                 </View>
             </View>

tests/unit/components/MultifactorAuthentication/machine/everyStateReachable.test.ts

@@ -8,7 +8,7 @@ import mfaMachine from '@components/MultifactorAuthentication/machine/mfaMachine
 describe('every MFA modal state is reachable', () => {
     const reachableSnapshots = getShortestPaths(mfaMachine).map((path) => path.state);
 
-    it.each(getSettleableLeafStates(mfaMachine))('reaches the $description state', ({value}) => {
+    it.each(getSettleableLeafStates(mfaMachine.root))('reaches the $description state', ({value}) => {
         expect(reachableSnapshots.some((snapshot) => matchesState(value, snapshot.value))).toBe(true);
     });
 });

tests/unit/components/MultifactorAuthentication/machine/viewMatchesMachine.test.tsx

@@ -1,9 +1,11 @@
 /* eslint-disable @typescript-eslint/no-unsafe-call, @typescript-eslint/no-unsafe-member-access, @typescript-eslint/no-unsafe-return -- jest.mock factories delegate to require()'d helpers, which resolve as `any`. */
+import {screen} from '@testing-library/react-native';
 import createMfaTestModel from 'tests/utils/mfa/flowPaths';
 import getSettleableLeafStates, {toStateValue} from 'tests/utils/mfa/reachableStates';
 import {resetMfaUiMocks} from 'tests/utils/mfa/realUi/mocks';
-import {flushMfaUi, isModalOverlayMounted, isOutcomeScreenVisible, renderMfaUi} from 'tests/utils/mfa/realUi/renderModal';
+import {renderMfaUi} from 'tests/utils/mfa/realUi/renderModal';
 import mfaEventExecutors from 'tests/utils/mfa/realUi/userGestures';
+import waitForBatchedUpdatesWithAct from 'tests/utils/waitForBatchedUpdatesWithAct';
 import {matchesState} from 'xstate';
 import mfaMachine from '@components/MultifactorAuthentication/machine/mfaMachine';
 import {resetMfaNavigation} from '@components/MultifactorAuthentication/mfaNavigation';
@@ -20,6 +22,11 @@ jest.mock('@components/MultifactorAuthentication/useSyncMfaModalNavigatorWithHis
 // Supplies the Navigation methods the flow drives with real behavior; the Proxy no-ops the rest.
 jest.mock('@libs/Navigation/Navigation', () => require('tests/utils/mfa/realUi/jestMocks').navigationMock());
 
+// The queryable markers each state asserts against. `OutcomeScreenBase` is the success or failure screen's
+// testID; the backdrop's `Close` label only renders while the MFA navigator is mounted.
+const OUTCOME_SCREEN_TEST_ID = 'OutcomeScreenBase';
+const MODAL_OVERLAY_LABEL = 'Close';
+
 const MFA_STATE = CONST.MULTIFACTOR_AUTHENTICATION.MFA_STATE;
 
 const testModel = createMfaTestModel();
@@ -31,16 +38,16 @@ const testConfig = {
     events: mfaEventExecutors,
     states: {
         [MFA_STATE.CLOSED]: () => {
-            expect(isModalOverlayMounted()).toBe(false);
-            expect(isOutcomeScreenVisible()).toBe(false);
+            expect(screen.queryAllByLabelText(MODAL_OVERLAY_LABEL)).toHaveLength(0);
+            expect(screen.queryAllByTestId(OUTCOME_SCREEN_TEST_ID)).toHaveLength(0);
         },
         [`${MFA_STATE.OPEN}.${MFA_STATE.OUTCOME}.${MFA_STATE.SUCCESS}`]: () => {
-            expect(isModalOverlayMounted()).toBe(true);
-            expect(isOutcomeScreenVisible()).toBe(true);
+            expect(screen.queryAllByLabelText(MODAL_OVERLAY_LABEL)).not.toHaveLength(0);
+            expect(screen.queryAllByTestId(OUTCOME_SCREEN_TEST_ID)).not.toHaveLength(0);
         },
         [MFA_STATE.CLOSING]: () => {
-            expect(isModalOverlayMounted()).toBe(true);
-            expect(isOutcomeScreenVisible()).toBe(false);
+            expect(screen.queryAllByLabelText(MODAL_OVERLAY_LABEL)).not.toHaveLength(0);
+            expect(screen.queryAllByTestId(OUTCOME_SCREEN_TEST_ID)).toHaveLength(0);
         },
     },
 };
@@ -61,7 +68,7 @@ describe('the real MFA modal follows the machine', () => {
     for (const path of walkedPaths) {
         it(`reaches ${JSON.stringify(path.state.value)} via [${path.description}]`, async () => {
             renderMfaUi();
-            await flushMfaUi();
+            await waitForBatchedUpdatesWithAct();
             await path.test(testConfig);
         });
     }
@@ -74,7 +81,7 @@ describe('the real MFA modal follows the machine', () => {
 describe('the UI walk reaches every settleable leaf', () => {
     const walkedLeafValues = walkedPaths.map((path) => path.state.value);
 
-    it.each(getSettleableLeafStates(mfaMachine))('walks the $description state', ({value}) => {
+    it.each(getSettleableLeafStates(mfaMachine.root))('walks the $description state', ({value}) => {
         expect(walkedLeafValues.some((reached) => matchesState(value, reached))).toBe(true);
     });
 });
@@ -88,7 +95,7 @@ describe('the UI walk reaches every settleable leaf', () => {
 // `Record<leaf, ...>` would then need an empty assertion for every pass-through state, and that empty
 // entry would make the check pass on its own once the state later loses its `always` and becomes settleable.
 describe('the view config stays in sync with the machine state by state', () => {
-    const settleableLeafStates = getSettleableLeafStates(mfaMachine);
+    const settleableLeafStates = getSettleableLeafStates(mfaMachine.root);
     const configuredStates = Object.keys(testConfig.states).map((stateValue) => ({description: stateValue, value: toStateValue(stateValue.split('.'))}));
 
     it.each(settleableLeafStates)('asserts the reachable $description state', ({value}) => {

tests/utils/mfa/reachableStates.ts

@@ -1,4 +1,4 @@
-import type {AnyStateMachine, AnyStateNode, StateValue} from 'xstate';
+import type {AnyStateNode, StateValue} from 'xstate';
 
 type SettleableLeafState = {description: string; value: StateValue};
 
@@ -10,10 +10,10 @@ function toStateValue(path: string[]): StateValue {
     return {[head]: toStateValue(rest)};
 }
 
-function collectSettleableLeafStates(node: AnyStateNode): SettleableLeafState[] {
+function getSettleableLeafStates(node: AnyStateNode): SettleableLeafState[] {
     const children = Object.values(node.states);
     if (children.length > 0) {
-        return children.flatMap(collectSettleableLeafStates);
+        return children.flatMap(getSettleableLeafStates);
     }
     // A leaf with an `always` transition is a transient router that leaves on entry and never settles.
     if ((node.always?.length ?? 0) > 0) {
@@ -22,10 +22,6 @@ function collectSettleableLeafStates(node: AnyStateNode): SettleableLeafState[]
     return [{description: node.path.join('.'), value: toStateValue(node.path)}];
 }
 
-function getSettleableLeafStates(machine: AnyStateMachine): SettleableLeafState[] {
-    return collectSettleableLeafStates(machine.root);
-}
-
 export default getSettleableLeafStates;
 export {toStateValue};
 export type {SettleableLeafState};

tests/utils/mfa/realUi/renderModal.tsx

@@ -1,17 +1,11 @@
-import {render, screen} from '@testing-library/react-native';
+import {render} from '@testing-library/react-native';
 import React, {useEffect} from 'react';
 import {SafeAreaProvider} from 'react-native-safe-area-context';
 import ComposeProviders from '@components/ComposeProviders';
 import {LocaleContextProvider} from '@components/LocaleContextProvider';
 import {MultifactorAuthenticationContextProviders, useMultifactorAuthentication} from '@components/MultifactorAuthentication/Context';
 import OnyxListItemProvider from '@components/OnyxListItemProvider';
 import MultifactorAuthenticationModalNavigator from '@navigation/AppNavigator/Navigators/MultifactorAuthenticationModalNavigator';
-import waitForBatchedUpdatesWithAct from '../../waitForBatchedUpdatesWithAct';
-
-/** The queryable markers the state tests assert against. `OutcomeScreenBase` is the success or failure
- *  screen's testID, and the backdrop's `common.close` label only ever renders inside the mounted navigator. */
-const OUTCOME_SCREEN_TEST_ID = 'OutcomeScreenBase';
-const MODAL_OVERLAY_LABEL = 'Close';
 
 type MfaUiControls = {
     executeScenario: ReturnType<typeof useMultifactorAuthentication>['executeScenario'];
@@ -30,7 +24,6 @@ function MfaControlsCapture() {
     });
     return null;
 }
-MfaControlsCapture.displayName = 'MfaControlsCapture';
 
 const INITIAL_SAFE_AREA_METRICS = {
     frame: {x: 0, y: 0, width: 390, height: 844},
@@ -54,23 +47,9 @@ function renderMfaUi() {
 
 function getMfaControls(): MfaUiControls {
     if (!controlsHolder.current) {
-        throw new Error('MFA UI controls were not captured. Call renderMfaUi() and flushMfaUi() first.');
+        throw new Error('MFA UI controls were not captured. Call renderMfaUi() and await waitForBatchedUpdatesWithAct() first.');
     }
     return controlsHolder.current;
 }
 
-async function flushMfaUi(): Promise<void> {
-    await waitForBatchedUpdatesWithAct();
-}
-
-/** True while the outcome screen (success/failure) is the visible route. */
-function isOutcomeScreenVisible(): boolean {
-    return screen.queryAllByTestId(OUTCOME_SCREEN_TEST_ID).length > 0;
-}
-
-/** True while the MFA overlay (navigator root + backdrop) is mounted. */
-function isModalOverlayMounted(): boolean {
-    return screen.queryAllByLabelText(MODAL_OVERLAY_LABEL).length > 0;
-}
-
-export {renderMfaUi, getMfaControls, flushMfaUi, isOutcomeScreenVisible, isModalOverlayMounted};
+export {renderMfaUi, getMfaControls};

tests/utils/mfa/realUi/userGestures.ts

@@ -1,15 +1,16 @@
 import {act, fireEvent, screen} from '@testing-library/react-native';
 import type {MfaEvent} from '@components/MultifactorAuthentication/machine/types';
 import {handleInitialScreenLayout} from '@components/MultifactorAuthentication/mfaNavigation';
+import waitForBatchedUpdatesWithAct from '../../waitForBatchedUpdatesWithAct';
 import {MFA_TEST_SCENARIO_NAME} from '../flowFixtures';
 import {pendingModalClose} from './mocks';
-import {flushMfaUi, getMfaControls} from './renderModal';
+import {getMfaControls} from './renderModal';
 
 type MfaEventType = MfaEvent['type'];
 type MfaEventExecutor = () => Promise<void>;
 
-/** Holds the translated `common.buttonConfirm` text shown on the outcome screen's confirm button and back button. */
-const CONFIRM_BUTTON_TEXT = 'Got it';
+/** The confirm button's testID on the outcome screen (see OutcomeScreenBase). Queried instead of the visible label. */
+const CONFIRM_BUTTON_TEST_ID = 'MultifactorAuthenticationOutcomeConfirmButton';
 
 /**
  * Maps each machine event to the gesture (or system step) that produces it in production. The model
@@ -26,19 +27,19 @@ const mfaEventExecutors = {
         await act(async () => {
             await getMfaControls().executeScenario(MFA_TEST_SCENARIO_NAME);
         });
-        await flushMfaUi();
+        await waitForBatchedUpdatesWithAct();
         // The transparent initial screen's onLayout does not fire in jsdom. Calling the exact handler it
         // wires runs the buffered push to the outcome screen, just like a real layout pass.
         act(() => handleInitialScreenLayout());
-        await flushMfaUi();
+        await waitForBatchedUpdatesWithAct();
     },
     CLOSE_MODAL: async () => {
-        fireEvent.press(screen.getByText(CONFIRM_BUTTON_TEXT));
-        await flushMfaUi();
+        fireEvent.press(screen.getByTestId(CONFIRM_BUTTON_TEST_ID));
+        await waitForBatchedUpdatesWithAct();
     },
     MODAL_CLOSED: async () => {
         act(() => pendingModalClose.run());
-        await flushMfaUi();
+        await waitForBatchedUpdatesWithAct();
     },
 } satisfies Record<MfaEventType, MfaEventExecutor>;
 /* eslint-enable @typescript-eslint/naming-convention */