[No QA][TS migration] Migrate multiple unit and Performance test to Typescript

src/libs/actions/EmojiPickerAction.ts

@@ -112,4 +112,4 @@ function resetEmojiPopoverAnchor() {
 }
 
 export {emojiPickerRef, showEmojiPicker, hideEmojiPicker, isActive, clearActive, isEmojiPickerVisible, resetEmojiPopoverAnchor};
-export type {AnchorOrigin};
+export type {AnchorOrigin, EmojiPickerRef};

src/types/onyx/ReportAction.ts

@@ -2,6 +2,8 @@ import type {ValueOf} from 'type-fest';
 import type {FileObject} from '@components/AttachmentModal';
 import type {AvatarSource} from '@libs/UserUtils';
 import type CONST from '@src/CONST';
+import type ONYXKEYS from '@src/ONYXKEYS';
+import type CollectionDataSet from '@src/types/utils/CollectionDataSet';
 import type {EmptyObject} from '@src/types/utils/EmptyObject';
 import type * as OnyxCommon from './OnyxCommon';
 import type {Decision, Reaction} from './OriginalMessage';
@@ -230,5 +232,7 @@ type ReportAction = ReportActionBase & OriginalMessage;
 
 type ReportActions = Record<string, ReportAction>;
 
+type ReportActionsCollectionDataSet = CollectionDataSet<typeof ONYXKEYS.COLLECTION.REPORT_ACTIONS>;
+
 export default ReportAction;
-export type {ReportActions, ReportActionBase, Message, LinkMetadata, OriginalMessage};
+export type {ReportActions, ReportActionBase, Message, LinkMetadata, OriginalMessage, ReportActionsCollectionDataSet};

tests/perf-test/ReportActionCompose.perf-test.js → tests/perf-test/ReportActionCompose.perf-test.tsx

@@ -1,25 +1,34 @@
 import {fireEvent, screen} from '@testing-library/react-native';
+import type {ComponentType} from 'react';
 import React from 'react';
 import Onyx from 'react-native-onyx';
+import type Animated from 'react-native-reanimated';
 import {measurePerformance} from 'reassure';
-import ComposeProviders from '../../src/components/ComposeProviders';
-import {LocaleContextProvider} from '../../src/components/LocaleContextProvider';
-import OnyxProvider from '../../src/components/OnyxProvider';
-import {KeyboardStateProvider} from '../../src/components/withKeyboardState';
-import {WindowDimensionsProvider} from '../../src/components/withWindowDimensions';
-import * as Localize from '../../src/libs/Localize';
-import ONYXKEYS from '../../src/ONYXKEYS';
-import ReportActionCompose from '../../src/pages/home/report/ReportActionCompose/ReportActionCompose';
+import type {WithNavigationFocusProps} from '@components/withNavigationFocus';
+import type {EmojiPickerRef} from '@libs/actions/EmojiPickerAction';
+import type Navigation from '@libs/Navigation/Navigation';
+import ComposeProviders from '@src/components/ComposeProviders';
+import {LocaleContextProvider} from '@src/components/LocaleContextProvider';
+import OnyxProvider from '@src/components/OnyxProvider';
+import {KeyboardStateProvider} from '@src/components/withKeyboardState';
+import {WindowDimensionsProvider} from '@src/components/withWindowDimensions';
+import * as Localize from '@src/libs/Localize';
+import ONYXKEYS from '@src/ONYXKEYS';
+import ReportActionCompose from '@src/pages/home/report/ReportActionCompose/ReportActionCompose';
 import * as LHNTestUtils from '../utils/LHNTestUtils';
 import waitForBatchedUpdates from '../utils/waitForBatchedUpdates';
 
 // mock PortalStateContext
 jest.mock('@gorhom/portal');
 
-jest.mock('react-native-reanimated', () => ({
-    ...jest.requireActual('react-native-reanimated/mock'),
-    useAnimatedRef: jest.fn,
-}));
+jest.mock(
+    'react-native-reanimated',
+    () =>
+        ({
+            ...jest.requireActual('react-native-reanimated/mock'),
+            useAnimatedRef: jest.fn(),
+        } as typeof Animated),
+);
 
 jest.mock('@react-navigation/native', () => {
     const actualNav = jest.requireActual('@react-navigation/native');
@@ -32,11 +41,11 @@ jest.mock('@react-navigation/native', () => {
         useIsFocused: () => ({
             navigate: jest.fn(),
         }),
-    };
+    } as typeof Navigation;
 });
 
-jest.mock('../../src/libs/actions/EmojiPickerAction', () => {
-    const actualEmojiPickerAction = jest.requireActual('../../src/libs/actions/EmojiPickerAction');
+jest.mock('@src/libs/actions/EmojiPickerAction', () => {
+    const actualEmojiPickerAction = jest.requireActual('@src/libs/actions/EmojiPickerAction');
     return {
         ...actualEmojiPickerAction,
         emojiPickerRef: {
@@ -47,15 +56,15 @@ jest.mock('../../src/libs/actions/EmojiPickerAction', () => {
         showEmojiPicker: jest.fn(),
         hideEmojiPicker: jest.fn(),
         isActive: () => true,
-    };
+    } as EmojiPickerRef;
 });
 
-jest.mock('../../src/components/withNavigationFocus', () => (Component) => {
-    function WithNavigationFocus(props) {
+jest.mock('@src/components/withNavigationFocus', <TProps extends WithNavigationFocusProps>() => (Component: ComponentType<TProps>) => {
+    function WithNavigationFocus(props: Omit<TProps, keyof WithNavigationFocusProps>) {
         return (
             <Component
                 // eslint-disable-next-line react/jsx-props-no-spreading
-                {...props}
+                {...(props as TProps)}
                 isFocused={false}
             />
         );
@@ -70,7 +79,6 @@ beforeAll(() =>
     Onyx.init({
         keys: ONYXKEYS,
         safeEvictionKeys: [ONYXKEYS.COLLECTION.REPORT_ACTIONS],
-        registerStorageEventListener: () => {},
     }),
 );
 
@@ -87,6 +95,8 @@ function ReportActionComposeWrapper() {
                 reportID="1"
                 disabled={false}
                 report={LHNTestUtils.getFakeReport()}
+                isComposerFullSize
+                listHeight={200}
             />
         </ComposeProviders>
     );

tests/perf-test/ReportActionsList.perf-test.js → tests/perf-test/ReportActionsList.perf-test.tsx

@@ -1,38 +1,51 @@
 import {fireEvent, screen} from '@testing-library/react-native';
+import type {ComponentType} from 'react';
 import Onyx from 'react-native-onyx';
 import {measurePerformance} from 'reassure';
-import ComposeProviders from '../../src/components/ComposeProviders';
-import {LocaleContextProvider} from '../../src/components/LocaleContextProvider';
-import OnyxProvider from '../../src/components/OnyxProvider';
-import {WindowDimensionsProvider} from '../../src/components/withWindowDimensions';
-import * as Localize from '../../src/libs/Localize';
-import ONYXKEYS from '../../src/ONYXKEYS';
-import ReportActionsList from '../../src/pages/home/report/ReportActionsList';
-import {ReportAttachmentsProvider} from '../../src/pages/home/report/ReportAttachmentsContext';
-import {ActionListContext, ReactionListContext} from '../../src/pages/home/ReportScreenContext';
-import variables from '../../src/styles/variables';
-import * as LHNTestUtils from '../utils/LHNTestUtils';
+import type {WithCurrentUserPersonalDetailsProps} from '@components/withCurrentUserPersonalDetails';
+import type Navigation from '@libs/Navigation/Navigation';
+import ComposeProviders from '@src/components/ComposeProviders';
+import {LocaleContextProvider} from '@src/components/LocaleContextProvider';
+import OnyxProvider from '@src/components/OnyxProvider';
+import {WindowDimensionsProvider} from '@src/components/withWindowDimensions';
+import * as Localize from '@src/libs/Localize';
+import ONYXKEYS from '@src/ONYXKEYS';
+import ReportActionsList from '@src/pages/home/report/ReportActionsList';
+import {ReportAttachmentsProvider} from '@src/pages/home/report/ReportAttachmentsContext';
+import {ActionListContext, ReactionListContext} from '@src/pages/home/ReportScreenContext';
+import variables from '@src/styles/variables';
+import createRandomReportAction from '../utils/collections/reportActions';
+import * as LHNTestUtilsModule from '../utils/LHNTestUtils';
 import PusherHelper from '../utils/PusherHelper';
 import * as ReportTestUtils from '../utils/ReportTestUtils';
 import waitForBatchedUpdates from '../utils/waitForBatchedUpdates';
 import wrapOnyxWithWaitForBatchedUpdates from '../utils/wrapOnyxWithWaitForBatchedUpdates';
 
 const mockedNavigate = jest.fn();
 
-jest.mock('../../src/components/withNavigationFocus', () => (Component) => {
-    function WithNavigationFocus(props) {
-        return (
-            <Component
-                // eslint-disable-next-line react/jsx-props-no-spreading
-                {...props}
-                isFocused={false}
-            />
-        );
-    }
+jest.mock('@components/withCurrentUserPersonalDetails', () => {
+    // Lazy loading of LHNTestUtils
+    // eslint-disable-next-line @typescript-eslint/no-unsafe-return
+    const lazyLoadLHNTestUtils = () => require('../utils/LHNTestUtils');
 
-    WithNavigationFocus.displayName = 'WithNavigationFocus';
+    return <TProps extends WithCurrentUserPersonalDetailsProps>(Component: ComponentType<TProps>) => {
+        function WrappedComponent(props: Omit<TProps, keyof WithCurrentUserPersonalDetailsProps>) {
+            const currentUserAccountID = 5;
+            const LHNTestUtils = lazyLoadLHNTestUtils(); // Load LHNTestUtils here
 
-    return WithNavigationFocus;
+            return (
+                <Component
+                    // eslint-disable-next-line react/jsx-props-no-spreading
+                    {...(props as TProps)}
+                    currentUserPersonalDetails={LHNTestUtils.fakePersonalDetails[currentUserAccountID]}
+                />
+            );
+        }
+
+        WrappedComponent.displayName = 'WrappedComponent';
+
+        return WrappedComponent;
+    };
 });
 
 jest.mock('@react-navigation/native', () => {
@@ -41,16 +54,15 @@ jest.mock('@react-navigation/native', () => {
         ...actualNav,
         useRoute: () => mockedNavigate,
         useIsFocused: () => true,
-    };
+    } as typeof Navigation;
 });
 
-jest.mock('../../src/components/ConfirmedRoute.tsx');
+jest.mock('@src/components/ConfirmedRoute.tsx');
 
 beforeAll(() =>
     Onyx.init({
         keys: ONYXKEYS,
         safeEvictionKeys: [ONYXKEYS.COLLECTION.REPORT_ACTIONS],
-        registerStorageEventListener: () => {},
     }),
 );
 
@@ -61,7 +73,7 @@ afterAll(() => {
 const mockOnLayout = jest.fn();
 const mockOnScroll = jest.fn();
 const mockLoadChats = jest.fn();
-const mockRef = {current: null};
+const mockRef = {current: null, flatListRef: null, scrollPosition: null, setScrollPosition: () => {}};
 
 // Initialize the network key for OfflineWithFeedback
 beforeEach(() => {
@@ -76,22 +88,21 @@ afterEach(() => {
     PusherHelper.teardown();
 });
 
-const currentUserAccountID = 5;
-
 function ReportActionsListWrapper() {
     return (
         <ComposeProviders components={[OnyxProvider, LocaleContextProvider, WindowDimensionsProvider, ReportAttachmentsProvider]}>
             <ReactionListContext.Provider value={mockRef}>
                 <ActionListContext.Provider value={mockRef}>
                     <ReportActionsList
+                        parentReportAction={createRandomReportAction(1)}
                         sortedReportActions={ReportTestUtils.getMockedSortedReportActions(500)}
-                        report={LHNTestUtils.getFakeReport()}
+                        report={LHNTestUtilsModule.getFakeReport()}
                         onLayout={mockOnLayout}
                         onScroll={mockOnScroll}
-                        loadMoreChats={mockLoadChats}
+                        onContentSizeChange={() => {}}
+                        listID={1}
                         loadOlderChats={mockLoadChats}
                         loadNewerChats={mockLoadChats}
-                        currentUserPersonalDetails={LHNTestUtils.fakePersonalDetails[currentUserAccountID]}
                     />
                 </ActionListContext.Provider>
             </ReactionListContext.Provider>
@@ -110,7 +121,7 @@ test('[ReportActionsList] should render ReportActionsList with 500 reportActions
     return waitForBatchedUpdates()
         .then(() =>
             Onyx.multiSet({
-                [ONYXKEYS.PERSONAL_DETAILS_LIST]: LHNTestUtils.fakePersonalDetails,
+                [ONYXKEYS.PERSONAL_DETAILS_LIST]: LHNTestUtilsModule.fakePersonalDetails,
             }),
         )
         .then(() => measurePerformance(<ReportActionsListWrapper />, {scenario}));
@@ -148,7 +159,7 @@ test('[ReportActionsList] should scroll and click some of the reports', () => {
     return waitForBatchedUpdates()
         .then(() =>
             Onyx.multiSet({
-                [ONYXKEYS.PERSONAL_DETAILS_LIST]: LHNTestUtils.fakePersonalDetails,
+                [ONYXKEYS.PERSONAL_DETAILS_LIST]: LHNTestUtilsModule.fakePersonalDetails,
             }),
         )
         .then(() => measurePerformance(<ReportActionsListWrapper />, {scenario}));