Merge pull request #75054 from callstack-internal/fix/1807/remove-createOpitonList-call-from-app-start

Remove createOptionList call from app start

Author: mountiny

src/components/OptionListContextProvider.tsx

@@ -80,7 +80,7 @@ function OptionsListContextProvider({children}: OptionsListProviderProps) {
      * Since options might use report attributes, it's necessary to call this after report attributes are loaded with the new locale to make sure the options are generated in a proper language
      */
     useEffect(() => {
-        if (reportAttributes?.locale === prevReportAttributesLocale) {
+        if (!areOptionsInitialized.current || reportAttributes?.locale === prevReportAttributesLocale) {
             return;
         }
 

tests/unit/OptionListContextProviderTest.tsx

@@ -0,0 +1,117 @@
+import {act, renderHook} from '@testing-library/react-native';
+import React from 'react';
+import {usePersonalDetails} from '@components/OnyxListItemProvider';
+import OptionListContextProvider, {useOptionsList} from '@components/OptionListContextProvider';
+import useOnyx from '@hooks/useOnyx';
+import {createOptionList} from '@libs/OptionsListUtils';
+import ONYXKEYS from '@src/ONYXKEYS';
+
+jest.mock('@libs/OptionsListUtils', () => {
+    // eslint-disable-next-line @typescript-eslint/no-unsafe-assignment
+    const actual = jest.requireActual('@libs/OptionsListUtils');
+    // eslint-disable-next-line @typescript-eslint/no-unsafe-return
+    return {
+        ...actual,
+        createOptionList: jest.fn(),
+        processReport: jest.fn(() => ({reportOption: null})),
+        createOptionFromReport: jest.fn(),
+    };
+});
+
+jest.mock('@hooks/useOnyx', () => jest.fn());
+jest.mock('@components/OnyxListItemProvider', () => ({
+    usePersonalDetails: jest.fn(),
+}));
+
+const mockCreateOptionList = createOptionList as jest.MockedFunction<typeof createOptionList>;
+const mockUseOnyx = useOnyx as jest.MockedFunction<typeof useOnyx>;
+const mockUsePersonalDetails = usePersonalDetails as jest.MockedFunction<typeof usePersonalDetails>;
+
+const wrapper: React.FC<{children: React.ReactNode}> = ({children}) => <OptionListContextProvider>{children}</OptionListContextProvider>;
+
+describe('OptionListContextProvider', () => {
+    let onyxState: Record<string, unknown>;
+    let onyxSourceValues: Record<string, unknown>;
+
+    beforeEach(() => {
+        jest.clearAllMocks();
+
+        onyxState = {
+            [ONYXKEYS.DERIVED.REPORT_ATTRIBUTES]: {locale: 'en'},
+            [ONYXKEYS.COLLECTION.REPORT]: {},
+        };
+
+        onyxSourceValues = {
+            [ONYXKEYS.DERIVED.REPORT_ATTRIBUTES]: onyxState[ONYXKEYS.DERIVED.REPORT_ATTRIBUTES],
+            [ONYXKEYS.COLLECTION.REPORT]: {},
+            [ONYXKEYS.COLLECTION.REPORT_ACTIONS]: {},
+        };
+
+        mockCreateOptionList.mockReturnValue({reports: [], personalDetails: []});
+        mockUsePersonalDetails.mockReturnValue({});
+
+        mockUseOnyx.mockImplementation(((key: string) => {
+            if (key === ONYXKEYS.DERIVED.REPORT_ATTRIBUTES) {
+                return [onyxState[key], {sourceValue: onyxSourceValues[key]}];
+            }
+
+            if (key === ONYXKEYS.COLLECTION.REPORT) {
+                return [onyxState[key], {sourceValue: onyxSourceValues[key]}];
+            }
+
+            if (key === ONYXKEYS.COLLECTION.REPORT_ACTIONS) {
+                return [undefined, {sourceValue: onyxSourceValues[key]}];
+            }
+
+            return [undefined];
+        }) as typeof useOnyx);
+    });
+
+    it('ignores locale changes before options are initialized', () => {
+        const {rerender} = renderHook(({shouldInitialize}) => useOptionsList({shouldInitialize}), {
+            initialProps: {shouldInitialize: false},
+            wrapper,
+        });
+
+        expect(mockCreateOptionList).not.toHaveBeenCalled();
+
+        onyxState = {
+            ...onyxState,
+            [ONYXKEYS.DERIVED.REPORT_ATTRIBUTES]: {locale: 'es'},
+        };
+        onyxSourceValues = {
+            ...onyxSourceValues,
+            [ONYXKEYS.DERIVED.REPORT_ATTRIBUTES]: onyxState[ONYXKEYS.DERIVED.REPORT_ATTRIBUTES],
+        };
+        rerender({shouldInitialize: false});
+
+        expect(mockCreateOptionList).not.toHaveBeenCalled();
+    });
+
+    it('refreshes options once after initialization when locale changes', () => {
+        const {result, rerender} = renderHook(({shouldInitialize}) => useOptionsList({shouldInitialize}), {
+            initialProps: {shouldInitialize: false},
+            wrapper,
+        });
+
+        act(() => {
+            result.current.initializeOptions();
+        });
+
+        expect(mockCreateOptionList).toHaveBeenCalledTimes(1);
+
+        mockCreateOptionList.mockClear();
+
+        onyxState = {
+            ...onyxState,
+            [ONYXKEYS.DERIVED.REPORT_ATTRIBUTES]: {locale: 'fr'},
+        };
+        onyxSourceValues = {
+            ...onyxSourceValues,
+            [ONYXKEYS.DERIVED.REPORT_ATTRIBUTES]: onyxState[ONYXKEYS.DERIVED.REPORT_ATTRIBUTES],
+        };
+        rerender({shouldInitialize: false});
+
+        expect(mockCreateOptionList).toHaveBeenCalledTimes(1);
+    });
+});