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

src/components/DragAndDrop/Provider/types.ts

@@ -8,7 +8,7 @@ type DragAndDropProviderProps = {
     isDisabled?: boolean;
 
     /** Indicate that users are dragging file or not */
-    setIsDraggingOver: (value: boolean) => void;
+    setIsDraggingOver?: (value: boolean) => void;
 };
 
 type SetOnDropHandlerCallback = (event: DragEvent) => void;

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';
@@ -224,5 +226,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,16 +1,19 @@
 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 type {WithNavigationFocusProps} from '@components/withNavigationFocus';
+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 * as LHNTestUtils from '../utils/LHNTestUtils';
 import PusherHelper from '../utils/PusherHelper';
 import * as ReportTestUtils from '../utils/ReportTestUtils';
@@ -19,12 +22,12 @@
 
 const mockedNavigate = jest.fn();
 
-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}
             />
         );
@@ -41,16 +44,15 @@
         ...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 +63,7 @@
 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(() => {
@@ -90,7 +92,7 @@
                         onScroll={mockOnScroll}
                         loadMoreChats={mockLoadChats}
                         loadOlderChats={mockLoadChats}
                         loadNewerChats={mockLoadChats}
                         currentUserPersonalDetails={LHNTestUtils.fakePersonalDetails[currentUserAccountID]}
                     />
                 </ActionListContext.Provider>