From 95ab23def7fff566322736503b411f4d7ba7ffa6 Mon Sep 17 00:00:00 2001 From: ruben-rebelo Date: Mon, 4 Mar 2024 16:17:09 +0000 Subject: [PATCH 01/10] [TS migration] Migrate MiddlewareTest, markPullRequestAsDeployedTest, ReportactionsList.perf-test, ReportActionCompose-perf-test and ReportScreen-perf-test --- src/components/DragAndDrop/Provider/types.ts | 2 +- src/libs/actions/EmojiPickerAction.ts | 2 +- 2 files changed, 2 insertions(+), 2 deletions(-) diff --git a/src/components/DragAndDrop/Provider/types.ts b/src/components/DragAndDrop/Provider/types.ts index b4394056cac5..57d0fb47c637 100644 --- a/src/components/DragAndDrop/Provider/types.ts +++ b/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; diff --git a/src/libs/actions/EmojiPickerAction.ts b/src/libs/actions/EmojiPickerAction.ts index c63e1c13d29a..a54095ad9c23 100644 --- a/src/libs/actions/EmojiPickerAction.ts +++ b/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}; From 387b9b2b4cb6c1e2f468aeb3de3ce89a5d256c5b Mon Sep 17 00:00:00 2001 From: ruben-rebelo Date: Mon, 4 Mar 2024 16:17:27 +0000 Subject: [PATCH 02/10] [TS migration][G11] Added missing files --- ...t.js => ReportActionCompose.perf-test.tsx} | 48 ++++++----- ...est.js => ReportActionsList.perf-test.tsx} | 34 ++++---- ...erf-test.js => ReportScreen.perf-test.tsx} | 84 +++++++++++-------- .../{MiddlewareTest.js => MiddlewareTest.ts} | 31 ++++--- ...t.js => markPullRequestsAsDeployedTest.ts} | 66 ++++++++------- 5 files changed, 150 insertions(+), 113 deletions(-) rename tests/perf-test/{ReportActionCompose.perf-test.js => ReportActionCompose.perf-test.tsx} (77%) rename tests/perf-test/{ReportActionsList.perf-test.js => ReportActionsList.perf-test.tsx} (79%) rename tests/perf-test/{ReportScreen.perf-test.js => ReportScreen.perf-test.tsx} (70%) rename tests/unit/{MiddlewareTest.js => MiddlewareTest.ts} (69%) rename tests/unit/{markPullRequestsAsDeployedTest.js => markPullRequestsAsDeployedTest.ts} (81%) diff --git a/tests/perf-test/ReportActionCompose.perf-test.js b/tests/perf-test/ReportActionCompose.perf-test.tsx similarity index 77% rename from tests/perf-test/ReportActionCompose.perf-test.js rename to tests/perf-test/ReportActionCompose.perf-test.tsx index 5b70666632f9..32467ca360d9 100644 --- a/tests/perf-test/ReportActionCompose.perf-test.js +++ b/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,11 +56,11 @@ 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', () => (Component: ComponentType) => { + function WithNavigationFocus(props: WithNavigationFocusProps) { return ( 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} /> ); diff --git a/tests/perf-test/ReportActionsList.perf-test.js b/tests/perf-test/ReportActionsList.perf-test.tsx similarity index 79% rename from tests/perf-test/ReportActionsList.perf-test.js rename to tests/perf-test/ReportActionsList.perf-test.tsx index c760b81b2373..b2f1f38869f9 100644 --- a/tests/perf-test/ReportActionsList.perf-test.js +++ b/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,8 +22,8 @@ import wrapOnyxWithWaitForBatchedUpdates from '../utils/wrapOnyxWithWaitForBatch const mockedNavigate = jest.fn(); -jest.mock('../../src/components/withNavigationFocus', () => (Component) => { - function WithNavigationFocus(props) { +jest.mock('@src/components/withNavigationFocus', () => (Component: ComponentType) => { + function WithNavigationFocus(props: WithNavigationFocusProps) { return ( { return { ...actualNav, useRoute: () => mockedNavigate, - }; + } 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: () => {}, }), ); @@ -60,7 +62,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(() => { diff --git a/tests/perf-test/ReportScreen.perf-test.js b/tests/perf-test/ReportScreen.perf-test.tsx similarity index 70% rename from tests/perf-test/ReportScreen.perf-test.js rename to tests/perf-test/ReportScreen.perf-test.tsx index bc127ff8a1f1..4b278814f37d 100644 --- a/tests/perf-test/ReportScreen.perf-test.js +++ b/tests/perf-test/ReportScreen.perf-test.tsx @@ -1,19 +1,26 @@ +import type {StackNavigationProp} from '@react-navigation/stack'; import {fireEvent, screen, waitFor} 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 DragAndDropProvider from '../../src/components/DragAndDrop/Provider'; -import {LocaleContextProvider} from '../../src/components/LocaleContextProvider'; -import OnyxProvider from '../../src/components/OnyxProvider'; -import {CurrentReportIDContextProvider} from '../../src/components/withCurrentReportID'; -import {KeyboardStateProvider} from '../../src/components/withKeyboardState'; -import {WindowDimensionsProvider} from '../../src/components/withWindowDimensions'; -import CONST from '../../src/CONST'; -import * as Localize from '../../src/libs/Localize'; -import ONYXKEYS from '../../src/ONYXKEYS'; -import {ReportAttachmentsProvider} from '../../src/pages/home/report/ReportAttachmentsContext'; -import ReportScreen from '../../src/pages/home/ReportScreen'; +import type {WithNavigationFocusProps} from '@components/withNavigationFocus'; +import type Navigation from '@libs/Navigation/Navigation'; +import type {RootStackParamList} from '@libs/Navigation/types'; +import ComposeProviders from '@src/components/ComposeProviders'; +import DragAndDropProvider from '@src/components/DragAndDrop/Provider'; +import {LocaleContextProvider} from '@src/components/LocaleContextProvider'; +import OnyxProvider from '@src/components/OnyxProvider'; +import {CurrentReportIDContextProvider} from '@src/components/withCurrentReportID'; +import {KeyboardStateProvider} from '@src/components/withKeyboardState'; +import {WindowDimensionsProvider} from '@src/components/withWindowDimensions'; +import CONST from '@src/CONST'; +import * as Localize from '@src/libs/Localize'; +import ONYXKEYS from '@src/ONYXKEYS'; +import {ReportAttachmentsProvider} from '@src/pages/home/report/ReportAttachmentsContext'; +import ReportScreen from '@src/pages/home/ReportScreen'; +import type * as OnyxTypes from '@src/types/onyx'; import createCollection from '../utils/collections/createCollection'; import createPersonalDetails from '../utils/collections/personalDetails'; import createRandomPolicy from '../utils/collections/policies'; @@ -24,17 +31,24 @@ import * as TestHelper from '../utils/TestHelper'; import waitForBatchedUpdates from '../utils/waitForBatchedUpdates'; import wrapOnyxWithWaitForBatchedUpdates from '../utils/wrapOnyxWithWaitForBatchedUpdates'; -jest.mock('react-native-reanimated', () => ({ - ...jest.requireActual('react-native-reanimated/mock'), - useSharedValue: jest.fn, - useAnimatedStyle: jest.fn, - useAnimatedRef: jest.fn, -})); +type ReportScreenWrapperArg = { + navigation: StackNavigationProp; +}; + +jest.mock('react-native-reanimated', () => { + const actualNav = jest.requireActual('react-native-reanimated/mock'); + return { + ...actualNav, + useSharedValue: jest.fn, + useAnimatedStyle: jest.fn, + useAnimatedRef: jest.fn, + } as typeof Animated; +}); -jest.mock('../../src/components/ConfirmedRoute.tsx'); +jest.mock('@src/components/ConfirmedRoute.tsx'); -jest.mock('../../src/components/withNavigationFocus', () => (Component) => { - function WithNavigationFocus(props) { +jest.mock('@src/components/withNavigationFocus', () => (Component: ComponentType) => { + function WithNavigationFocus(props: WithNavigationFocusProps) { return ( (Component) => { return WithNavigationFocus; }); -jest.mock('../../src/hooks/useEnvironment', () => +jest.mock('@src/hooks/useEnvironment', () => jest.fn(() => ({ environment: 'development', environmentURL: 'https://new.expensify.com', @@ -58,13 +72,13 @@ jest.mock('../../src/hooks/useEnvironment', () => })), ); -jest.mock('../../src/libs/Permissions', () => ({ +jest.mock('@src/libs/Permissions', () => ({ canUseLinkPreviews: jest.fn(() => true), canUseDefaultRooms: jest.fn(() => true), })); -jest.mock('../../src/hooks/usePermissions.ts'); +jest.mock('@src/hooks/usePermissions.ts'); -jest.mock('../../src/libs/Navigation/Navigation'); +jest.mock('@src/libs/Navigation/Navigation'); const mockedNavigate = jest.fn(); jest.mock('@react-navigation/native', () => { @@ -81,7 +95,7 @@ jest.mock('@react-navigation/native', () => { addListener: () => jest.fn(), }), createNavigationContainerRef: jest.fn(), - }; + } as typeof Navigation; }); // mock PortalStateContext @@ -91,13 +105,12 @@ beforeAll(() => Onyx.init({ keys: ONYXKEYS, safeEvictionKeys: [ONYXKEYS.COLLECTION.REPORT_ACTIONS], - registerStorageEventListener: () => {}, }), ); // Initialize the network key for OfflineWithFeedback beforeEach(() => { - global.fetch = TestHelper.getGlobalFetchMock(); + global.fetch = TestHelper.getGlobalFetchMock() as typeof fetch; wrapOnyxWithWaitForBatchedUpdates(Onyx); Onyx.merge(ONYXKEYS.NETWORK, {isOffline: false}); }); @@ -109,18 +122,18 @@ afterEach(() => { }); const policies = createCollection( - (item) => `${ONYXKEYS.COLLECTION.POLICY}${item.id}`, - (index) => createRandomPolicy(index), + (item: OnyxTypes.Policy) => `${ONYXKEYS.COLLECTION.POLICY}${item.id}`, + (index: number) => createRandomPolicy(index), 10, ); const personalDetails = createCollection( - (item) => item.accountID, - (index) => createPersonalDetails(index), + (item: OnyxTypes.PersonalDetails) => item.accountID, + (index: number) => createPersonalDetails(index), 20, ); -function ReportScreenWrapper(args) { +function ReportScreenWrapper(args: ReportScreenWrapperArg) { return ( @@ -147,6 +161,7 @@ const reportActions = ReportTestUtils.getMockedReportActionsMap(500); const mockRoute = {params: {reportID: '1'}}; test('[ReportScreen] should render ReportScreen with composer interactions', () => { + // @ts-expect-error TODO: Remove this once TestHelper (https://github.com/Expensify/App/issues/25318) is migrated to TypeScript. const {triggerTransitionEnd, addListener} = TestHelper.createAddListenerMock(); const scenario = async () => { /** @@ -196,6 +211,7 @@ test('[ReportScreen] should render ReportScreen with composer interactions', () .then(() => measurePerformance( , @@ -205,6 +221,7 @@ test('[ReportScreen] should render ReportScreen with composer interactions', () }); test('[ReportScreen] should press of the report item', () => { + // @ts-expect-error TODO: Remove this once TestHelper (https://github.com/Expensify/App/issues/25318) is migrated to TypeScript. const {triggerTransitionEnd, addListener} = TestHelper.createAddListenerMock(); const scenario = async () => { /** @@ -245,6 +262,7 @@ test('[ReportScreen] should press of the report item', () => { .then(() => measurePerformance( , diff --git a/tests/unit/MiddlewareTest.js b/tests/unit/MiddlewareTest.ts similarity index 69% rename from tests/unit/MiddlewareTest.js rename to tests/unit/MiddlewareTest.ts index 85148cdb40e0..b73c094673ee 100644 --- a/tests/unit/MiddlewareTest.js +++ b/tests/unit/MiddlewareTest.ts @@ -1,10 +1,11 @@ import Onyx from 'react-native-onyx'; -import HttpUtils from '../../src/libs/HttpUtils'; -import * as MainQueue from '../../src/libs/Network/MainQueue'; -import * as NetworkStore from '../../src/libs/Network/NetworkStore'; -import * as SequentialQueue from '../../src/libs/Network/SequentialQueue'; -import * as Request from '../../src/libs/Request'; -import ONYXKEYS from '../../src/ONYXKEYS'; +import HttpUtils from '@src/libs/HttpUtils'; +import handleUnusedOptimisticID from '@src/libs/Middleware/HandleUnusedOptimisticID'; +import * as MainQueue from '@src/libs/Network/MainQueue'; +import * as NetworkStore from '@src/libs/Network/NetworkStore'; +import * as SequentialQueue from '@src/libs/Network/SequentialQueue'; +import * as Request from '@src/libs/Request'; +import ONYXKEYS from '@src/ONYXKEYS'; import * as TestHelper from '../utils/TestHelper'; import waitForNetworkPromises from '../utils/waitForNetworkPromises'; @@ -13,7 +14,7 @@ Onyx.init({ }); beforeAll(() => { - global.fetch = TestHelper.getGlobalFetchMock(); + global.fetch = TestHelper.getGlobalFetchMock() as typeof fetch; }); beforeEach(async () => { @@ -29,8 +30,6 @@ beforeEach(async () => { describe('Middleware', () => { describe('HandleUnusedOptimisticID', () => { test('Normal request', async () => { - const actual = jest.requireActual('../../src/libs/Middleware/HandleUnusedOptimisticID'); - const handleUnusedOptimisticID = jest.spyOn(actual, 'default'); Request.use(handleUnusedOptimisticID); const requests = [ { @@ -50,14 +49,12 @@ describe('Middleware', () => { expect(global.fetch).toHaveBeenCalledTimes(2); expect(global.fetch).toHaveBeenLastCalledWith('https://www.expensify.com.dev/api?command=AddComment', expect.anything()); - TestHelper.assertFormDataMatchesObject(global.fetch.mock.calls[1][1].body, {reportID: '1234', reportActionID: '5678', reportComment: 'foo'}); + TestHelper.assertFormDataMatchesObject((global.fetch as jest.Mock).mock.calls[1][1].body, {reportID: '1234', reportActionID: '5678', reportComment: 'foo'}); expect(global.fetch).toHaveBeenNthCalledWith(1, 'https://www.expensify.com.dev/api?command=OpenReport', expect.anything()); - TestHelper.assertFormDataMatchesObject(global.fetch.mock.calls[0][1].body, {reportID: '1234'}); + TestHelper.assertFormDataMatchesObject((global.fetch as jest.Mock).mock.calls[0][1].body, {reportID: '1234'}); }); test('Request with preexistingReportID', async () => { - const actual = jest.requireActual('../../src/libs/Middleware/HandleUnusedOptimisticID'); - const handleUnusedOptimisticID = jest.spyOn(actual, 'default'); Request.use(handleUnusedOptimisticID); const requests = [ { @@ -73,8 +70,10 @@ describe('Middleware', () => { SequentialQueue.push(request); } - global.fetch.mockImplementationOnce(async () => ({ + // eslint-disable-next-line @typescript-eslint/require-await + (global.fetch as jest.Mock).mockImplementationOnce(async () => ({ ok: true, + // eslint-disable-next-line @typescript-eslint/require-await json: async () => ({ jsonCode: 200, onyxData: [ @@ -94,9 +93,9 @@ describe('Middleware', () => { expect(global.fetch).toHaveBeenCalledTimes(2); expect(global.fetch).toHaveBeenLastCalledWith('https://www.expensify.com.dev/api?command=AddComment', expect.anything()); - TestHelper.assertFormDataMatchesObject(global.fetch.mock.calls[1][1].body, {reportID: '5555', reportActionID: '5678', reportComment: 'foo'}); + TestHelper.assertFormDataMatchesObject((global.fetch as jest.Mock).mock.calls[1][1].body, {reportID: '5555', reportActionID: '5678', reportComment: 'foo'}); expect(global.fetch).toHaveBeenNthCalledWith(1, 'https://www.expensify.com.dev/api?command=OpenReport', expect.anything()); - TestHelper.assertFormDataMatchesObject(global.fetch.mock.calls[0][1].body, {reportID: '1234'}); + TestHelper.assertFormDataMatchesObject((global.fetch as jest.Mock).mock.calls[0][1].body, {reportID: '1234'}); }); }); }); diff --git a/tests/unit/markPullRequestsAsDeployedTest.js b/tests/unit/markPullRequestsAsDeployedTest.ts similarity index 81% rename from tests/unit/markPullRequestsAsDeployedTest.js rename to tests/unit/markPullRequestsAsDeployedTest.ts index a401a9f96a67..edd6fbfe01e7 100644 --- a/tests/unit/markPullRequestsAsDeployedTest.js +++ b/tests/unit/markPullRequestsAsDeployedTest.ts @@ -1,10 +1,21 @@ +/* eslint-disable @typescript-eslint/naming-convention */ + /** * @jest-environment node */ -import _ from 'underscore'; import GithubUtils from '../../.github/libs/GithubUtils'; import GitUtils from '../../.github/libs/GitUtils'; +type ObjectMethodData = { + data: T; +}; + +type PullRequest = { + issue_number: number; + title: string; + merged_by: {login: string}; +}; + let run; const mockGetInput = jest.fn(); @@ -12,8 +23,10 @@ const mockGetPullRequest = jest.fn(); const mockCreateComment = jest.fn(); const mockListTags = jest.fn(); const mockGetCommit = jest.fn(); -let workflowRunURL; -const PRList = { + +let workflowRunURL: string | null; + +const PRList: Record = { 1: { issue_number: 1, title: 'Test PR 1', @@ -35,15 +48,10 @@ const defaultTags = [ {name: '42.42.42-41', commit: {sha: 'efgh'}}, ]; -/** - * @param {String} key - * @returns {Boolean|String} - * @throws {Error} - */ -function mockGetInputDefaultImplementation(key) { +function mockGetInputDefaultImplementation(key: string): boolean | string { switch (key) { case 'PR_LIST': - return JSON.stringify(_.keys(PRList)); + return JSON.stringify(Object.keys(PRList)); case 'IS_PRODUCTION_DEPLOY': return false; case 'DEPLOY_VERSION': @@ -58,11 +66,7 @@ function mockGetInputDefaultImplementation(key) { } } -/** - * @param {String} sha - * @returns {Promise<{data: {message: String}}>} - */ -async function mockGetCommitDefaultImplementation({commit_sha}) { +function mockGetCommitDefaultImplementation({commit_sha}: {commit_sha: string}): {data: {message: string}} { if (commit_sha === 'abcd') { return {data: {message: 'Test commit 1'}}; } @@ -80,6 +84,7 @@ beforeAll(() => { const moctokit = { rest: { issues: { + // eslint-disable-next-line @typescript-eslint/require-await listForRepo: jest.fn().mockImplementation(async () => ({ data: [ { @@ -87,6 +92,7 @@ beforeAll(() => { }, ], })), + // eslint-disable-next-line @typescript-eslint/require-await listEvents: jest.fn().mockImplementation(async () => ({ data: [{event: 'closed', actor: {login: 'thor'}}], })), @@ -102,18 +108,20 @@ beforeAll(() => { getCommit: mockGetCommit, }, }, - paginate: jest.fn().mockImplementation((objectMethod) => objectMethod().then(({data}) => data)), + paginate: jest.fn().mockImplementation((objectMethod: () => Promise>) => objectMethod().then(({data}) => data)), }; + + // @ts-expect-error TODO: Remove this once GithubUtils (https://github.com/Expensify/App/issues/25382) is migrated to TypeScript. GithubUtils.internalOctokit = moctokit; // Mock GitUtils GitUtils.getPullRequestsMergedBetween = jest.fn(); jest.mock('../../.github/libs/ActionUtils', () => ({ - getJSONInput: jest.fn().mockImplementation((name, defaultValue) => { + getJSONInput: jest.fn().mockImplementation((name: string, defaultValue: string) => { try { - const input = mockGetInput(name); - return JSON.parse(input); + const input: string = mockGetInput(name); + return JSON.parse(input) as unknown; } catch (err) { return defaultValue; } @@ -123,12 +131,12 @@ beforeAll(() => { // Set GH runner environment variables process.env.GITHUB_SERVER_URL = 'https://github.com'; process.env.GITHUB_REPOSITORY = 'Expensify/App'; - process.env.GITHUB_RUN_ID = 1234; + process.env.GITHUB_RUN_ID = '1234'; workflowRunURL = `${process.env.GITHUB_SERVER_URL}/${process.env.GITHUB_REPOSITORY}/actions/runs/${process.env.GITHUB_RUN_ID}`; }); beforeEach(() => { - mockGetPullRequest.mockImplementation(async ({pull_number}) => (pull_number in PRList ? {data: PRList[pull_number]} : {})); + mockGetPullRequest.mockImplementation(({pull_number}: {pull_number: number}) => (pull_number in PRList ? {data: PRList[pull_number]} : {})); mockListTags.mockResolvedValue({ data: defaultTags, }); @@ -150,8 +158,8 @@ describe('markPullRequestsAsDeployed', () => { // Note: we import this in here so that it executes after all the mocks are set up run = require('../../.github/actions/javascript/markPullRequestsAsDeployed/markPullRequestsAsDeployed'); await run(); - expect(mockCreateComment).toHaveBeenCalledTimes(_.keys(PRList).length); - for (let i = 0; i < _.keys(PRList).length; i++) { + expect(mockCreateComment).toHaveBeenCalledTimes(Object.keys(PRList).length); + for (let i = 0; i < Object.keys(PRList).length; i++) { const PR = PRList[i + 1]; expect(mockCreateComment).toHaveBeenNthCalledWith(i + 1, { body: `πŸš€ [Deployed](${workflowRunURL}) to staging by https://github.com/${PR.merged_by.login} in version: ${version} πŸš€ @@ -181,8 +189,8 @@ platform | result run = require('../../.github/actions/javascript/markPullRequestsAsDeployed/markPullRequestsAsDeployed'); await run(); - expect(mockCreateComment).toHaveBeenCalledTimes(_.keys(PRList).length); - for (let i = 0; i < _.keys(PRList).length; i++) { + expect(mockCreateComment).toHaveBeenCalledTimes(Object.keys(PRList).length); + for (let i = 0; i < Object.keys(PRList).length; i++) { expect(mockCreateComment).toHaveBeenNthCalledWith(i + 1, { body: `πŸš€ [Deployed](${workflowRunURL}) to production by https://github.com/thor in version: ${version} πŸš€ @@ -209,7 +217,7 @@ platform | result } return mockGetInputDefaultImplementation(key); }); - mockGetPullRequest.mockImplementation(async ({pull_number}) => { + mockGetPullRequest.mockImplementation(({pull_number}) => { if (pull_number === 3) { return { data: { @@ -226,7 +234,7 @@ platform | result mockListTags.mockResolvedValue({ data: [{name: '42.42.42-43', commit: {sha: 'xyz'}}, ...defaultTags], }); - mockGetCommit.mockImplementation(async ({commit_sha}) => { + mockGetCommit.mockImplementation(({commit_sha}) => { if (commit_sha === 'xyz') { return {data: {message: 'Test PR 3 (cherry picked from commit dagdag)', committer: {name: 'freyja'}}}; } @@ -271,8 +279,8 @@ platform | result // Note: we import this in here so that it executes after all the mocks are set up run = require('../../.github/actions/javascript/markPullRequestsAsDeployed/markPullRequestsAsDeployed'); await run(); - expect(mockCreateComment).toHaveBeenCalledTimes(_.keys(PRList).length); - for (let i = 0; i < _.keys(PRList).length; i++) { + expect(mockCreateComment).toHaveBeenCalledTimes(Object.keys(PRList).length); + for (let i = 0; i < Object.keys(PRList).length; i++) { const PR = PRList[i + 1]; expect(mockCreateComment).toHaveBeenNthCalledWith(i + 1, { body: `πŸš€ [Deployed](${workflowRunURL}) to staging by https://github.com/${PR.merged_by.login} in version: ${version} πŸš€ From 6244e2ea9a8ed51ecfa2138506b2260498b3b6c1 Mon Sep 17 00:00:00 2001 From: ruben-rebelo Date: Wed, 6 Mar 2024 15:40:07 +0000 Subject: [PATCH 03/10] [TS migration][G11] Feedback --- .../ReportActionCompose.perf-test.tsx | 6 +++--- .../perf-test/ReportActionsList.perf-test.tsx | 6 +++--- tests/perf-test/ReportScreen.perf-test.tsx | 19 ++++++++++--------- tests/unit/MiddlewareTest.ts | 3 ++- 4 files changed, 18 insertions(+), 16 deletions(-) diff --git a/tests/perf-test/ReportActionCompose.perf-test.tsx b/tests/perf-test/ReportActionCompose.perf-test.tsx index 32467ca360d9..8d6cb1ac7e57 100644 --- a/tests/perf-test/ReportActionCompose.perf-test.tsx +++ b/tests/perf-test/ReportActionCompose.perf-test.tsx @@ -59,12 +59,12 @@ jest.mock('@src/libs/actions/EmojiPickerAction', () => { } as EmojiPickerRef; }); -jest.mock('@src/components/withNavigationFocus', () => (Component: ComponentType) => { - function WithNavigationFocus(props: WithNavigationFocusProps) { +jest.mock('@src/components/withNavigationFocus', () => (Component: ComponentType) => { + function WithNavigationFocus(props: Omit) { return ( ); diff --git a/tests/perf-test/ReportActionsList.perf-test.tsx b/tests/perf-test/ReportActionsList.perf-test.tsx index b2f1f38869f9..7759dd6b5452 100644 --- a/tests/perf-test/ReportActionsList.perf-test.tsx +++ b/tests/perf-test/ReportActionsList.perf-test.tsx @@ -22,12 +22,12 @@ import wrapOnyxWithWaitForBatchedUpdates from '../utils/wrapOnyxWithWaitForBatch const mockedNavigate = jest.fn(); -jest.mock('@src/components/withNavigationFocus', () => (Component: ComponentType) => { - function WithNavigationFocus(props: WithNavigationFocusProps) { +jest.mock('@src/components/withNavigationFocus', () => (Component: ComponentType) => { + function WithNavigationFocus(props: Omit) { return ( ); diff --git a/tests/perf-test/ReportScreen.perf-test.tsx b/tests/perf-test/ReportScreen.perf-test.tsx index 4b278814f37d..8e9a297687ae 100644 --- a/tests/perf-test/ReportScreen.perf-test.tsx +++ b/tests/perf-test/ReportScreen.perf-test.tsx @@ -31,7 +31,7 @@ import * as TestHelper from '../utils/TestHelper'; import waitForBatchedUpdates from '../utils/waitForBatchedUpdates'; import wrapOnyxWithWaitForBatchedUpdates from '../utils/wrapOnyxWithWaitForBatchedUpdates'; -type ReportScreenWrapperArg = { +type ReportScreenWrapperProps = { navigation: StackNavigationProp; }; @@ -47,12 +47,12 @@ jest.mock('react-native-reanimated', () => { jest.mock('@src/components/ConfirmedRoute.tsx'); -jest.mock('@src/components/withNavigationFocus', () => (Component: ComponentType) => { - function WithNavigationFocus(props: WithNavigationFocusProps) { +jest.mock('@src/components/withNavigationFocus', () => (Component: ComponentType) => { + function WithNavigationFocus(props: Omit) { return ( ); @@ -110,7 +110,8 @@ beforeAll(() => // Initialize the network key for OfflineWithFeedback beforeEach(() => { - global.fetch = TestHelper.getGlobalFetchMock() as typeof fetch; + // @ts-expect-error TODO: Remove this once TestHelper (https://github.com/Expensify/App/issues/25318) is migrated to TypeScript. + global.fetch = TestHelper.getGlobalFetchMock(); wrapOnyxWithWaitForBatchedUpdates(Onyx); Onyx.merge(ONYXKEYS.NETWORK, {isOffline: false}); }); @@ -133,7 +134,7 @@ const personalDetails = createCollection( 20, ); -function ReportScreenWrapper(args: ReportScreenWrapperArg) { +function ReportScreenWrapper(props: ReportScreenWrapperProps) { return ( @@ -211,7 +212,7 @@ test('[ReportScreen] should render ReportScreen with composer interactions', () .then(() => measurePerformance( , diff --git a/tests/unit/MiddlewareTest.ts b/tests/unit/MiddlewareTest.ts index b73c094673ee..c1187853f27f 100644 --- a/tests/unit/MiddlewareTest.ts +++ b/tests/unit/MiddlewareTest.ts @@ -14,7 +14,8 @@ Onyx.init({ }); beforeAll(() => { - global.fetch = TestHelper.getGlobalFetchMock() as typeof fetch; + // @ts-expect-error TODO: Remove this once TestHelper (https://github.com/Expensify/App/issues/25318) is migrated to TypeScript. + global.fetch = TestHelper.getGlobalFetchMock(); }); beforeEach(async () => { From ccc3f569184bd4510031e8e2b90185bc318e23fa Mon Sep 17 00:00:00 2001 From: ruben-rebelo Date: Fri, 8 Mar 2024 14:30:32 +0000 Subject: [PATCH 04/10] [TS migration][G11] Feedback --- tests/perf-test/ReportScreen.perf-test.tsx | 2 +- tests/unit/markPullRequestsAsDeployedTest.ts | 28 ++++++++++++++++---- 2 files changed, 24 insertions(+), 6 deletions(-) diff --git a/tests/perf-test/ReportScreen.perf-test.tsx b/tests/perf-test/ReportScreen.perf-test.tsx index 8e9a297687ae..e4b8e2cce9a3 100644 --- a/tests/perf-test/ReportScreen.perf-test.tsx +++ b/tests/perf-test/ReportScreen.perf-test.tsx @@ -263,7 +263,7 @@ test('[ReportScreen] should press of the report item', () => { .then(() => measurePerformance( , diff --git a/tests/unit/markPullRequestsAsDeployedTest.ts b/tests/unit/markPullRequestsAsDeployedTest.ts index edd6fbfe01e7..3d024982c21d 100644 --- a/tests/unit/markPullRequestsAsDeployedTest.ts +++ b/tests/unit/markPullRequestsAsDeployedTest.ts @@ -16,6 +16,24 @@ type PullRequest = { merged_by: {login: string}; }; +type PullRequestParams = { + pull_number: number; +}; + +type PullRequestData = { + data?: PullRequest; +}; + +type Commit = { + commit_sha: string; +}; + +type CommitData = { + data: { + message: string; + }; +}; + let run; const mockGetInput = jest.fn(); @@ -66,7 +84,7 @@ function mockGetInputDefaultImplementation(key: string): boolean | string { } } -function mockGetCommitDefaultImplementation({commit_sha}: {commit_sha: string}): {data: {message: string}} { +function mockGetCommitDefaultImplementation({commit_sha}: Commit): CommitData { if (commit_sha === 'abcd') { return {data: {message: 'Test commit 1'}}; } @@ -136,7 +154,7 @@ beforeAll(() => { }); beforeEach(() => { - mockGetPullRequest.mockImplementation(({pull_number}: {pull_number: number}) => (pull_number in PRList ? {data: PRList[pull_number]} : {})); + mockGetPullRequest.mockImplementation(({pull_number}: PullRequestParams): PullRequestData => (pull_number in PRList ? {data: PRList[pull_number]} : {})); mockListTags.mockResolvedValue({ data: defaultTags, }); @@ -217,7 +235,7 @@ platform | result } return mockGetInputDefaultImplementation(key); }); - mockGetPullRequest.mockImplementation(({pull_number}) => { + mockGetPullRequest.mockImplementation(({pull_number}: PullRequestParams) => { if (pull_number === 3) { return { data: { @@ -234,11 +252,11 @@ platform | result mockListTags.mockResolvedValue({ data: [{name: '42.42.42-43', commit: {sha: 'xyz'}}, ...defaultTags], }); - mockGetCommit.mockImplementation(({commit_sha}) => { + mockGetCommit.mockImplementation(({commit_sha}: Commit) => { if (commit_sha === 'xyz') { return {data: {message: 'Test PR 3 (cherry picked from commit dagdag)', committer: {name: 'freyja'}}}; } - return mockGetCommitDefaultImplementation(commit_sha); + return mockGetCommitDefaultImplementation({commit_sha}); }); // Note: we import this in here so that it executes after all the mocks are set up From 453a287dab13611ac1f4c28c9a14e2bfd469f137 Mon Sep 17 00:00:00 2001 From: ruben-rebelo Date: Mon, 11 Mar 2024 10:16:43 +0000 Subject: [PATCH 05/10] [TS migration][G11] TS issue fix --- src/types/onyx/ReportAction.ts | 6 +++- tests/perf-test/ReportScreen.perf-test.tsx | 38 ++++++++++++++++------ 2 files changed, 33 insertions(+), 11 deletions(-) diff --git a/src/types/onyx/ReportAction.ts b/src/types/onyx/ReportAction.ts index bb5bf50ec6cf..036d223bd175 100644 --- a/src/types/onyx/ReportAction.ts +++ b/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; +type ReportActionsCollectionDataSet = CollectionDataSet; + export default ReportAction; -export type {ReportActions, ReportActionBase, Message, LinkMetadata, OriginalMessage}; +export type {ReportActions, ReportActionBase, Message, LinkMetadata, OriginalMessage, ReportActionsCollectionDataSet}; diff --git a/tests/perf-test/ReportScreen.perf-test.tsx b/tests/perf-test/ReportScreen.perf-test.tsx index e4b8e2cce9a3..a2e12f6ae2ad 100644 --- a/tests/perf-test/ReportScreen.perf-test.tsx +++ b/tests/perf-test/ReportScreen.perf-test.tsx @@ -21,6 +21,8 @@ import ONYXKEYS from '@src/ONYXKEYS'; import {ReportAttachmentsProvider} from '@src/pages/home/report/ReportAttachmentsContext'; import ReportScreen from '@src/pages/home/ReportScreen'; import type * as OnyxTypes from '@src/types/onyx'; +import type {ReportCollectionDataSet} from '@src/types/onyx/Report'; +import type {ReportActionsCollectionDataSet} from '@src/types/onyx/ReportAction'; import createCollection from '../utils/collections/createCollection'; import createPersonalDetails from '../utils/collections/personalDetails'; import createRandomPolicy from '../utils/collections/policies'; @@ -198,17 +200,25 @@ test('[ReportScreen] should render ReportScreen with composer interactions', () const navigation = {addListener}; return waitForBatchedUpdates() - .then(() => - Onyx.multiSet({ - [ONYXKEYS.IS_SIDEBAR_LOADED]: true, + .then(() => { + const reportCollectionDataSet: ReportCollectionDataSet = { [`${ONYXKEYS.COLLECTION.REPORT}${mockRoute.params.reportID}`]: report, + }; + + const reportActionsCollectionDataSet: ReportActionsCollectionDataSet = { [`${ONYXKEYS.COLLECTION.REPORT_ACTIONS}${mockRoute.params.reportID}`]: reportActions, + }; + + return Onyx.multiSet({ + [ONYXKEYS.IS_SIDEBAR_LOADED]: true, [ONYXKEYS.PERSONAL_DETAILS_LIST]: personalDetails, [ONYXKEYS.BETAS]: [CONST.BETAS.DEFAULT_ROOMS], [`${ONYXKEYS.COLLECTION.POLICY}`]: policies, [ONYXKEYS.SHOULD_SHOW_COMPOSE_INPUT]: true, - }), - ) + ...reportCollectionDataSet, + ...reportActionsCollectionDataSet, + }); + }) .then(() => measurePerformance( { const navigation = {addListener}; return waitForBatchedUpdates() - .then(() => - Onyx.multiSet({ - [ONYXKEYS.IS_SIDEBAR_LOADED]: true, + .then(() => { + const reportCollectionDataSet: ReportCollectionDataSet = { [`${ONYXKEYS.COLLECTION.REPORT}${mockRoute.params.reportID}`]: report, + }; + + const reportActionsCollectionDataSet: ReportActionsCollectionDataSet = { [`${ONYXKEYS.COLLECTION.REPORT_ACTIONS}${mockRoute.params.reportID}`]: reportActions, + }; + + return Onyx.multiSet({ + [ONYXKEYS.IS_SIDEBAR_LOADED]: true, [ONYXKEYS.PERSONAL_DETAILS_LIST]: personalDetails, [ONYXKEYS.BETAS]: [CONST.BETAS.DEFAULT_ROOMS], [`${ONYXKEYS.COLLECTION.POLICY}`]: policies, - }), - ) + ...reportCollectionDataSet, + ...reportActionsCollectionDataSet, + }); + }) .then(() => measurePerformance( Date: Tue, 12 Mar 2024 10:07:59 +0000 Subject: [PATCH 06/10] [TS migration][g11] Fixed type of drag and drop --- src/components/DragAndDrop/Provider/types.ts | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/src/components/DragAndDrop/Provider/types.ts b/src/components/DragAndDrop/Provider/types.ts index 57d0fb47c637..b4394056cac5 100644 --- a/src/components/DragAndDrop/Provider/types.ts +++ b/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; From 4fb5eaedbe6dd48fcc4b09bc5fb8718e6322727a Mon Sep 17 00:00:00 2001 From: ruben-rebelo Date: Tue, 12 Mar 2024 10:23:48 +0000 Subject: [PATCH 07/10] Revert "[TS migration][g11] Fixed type of drag and drop" This reverts commit bdd24df98b2eb03f364e43e29a872666e5d2912d. --- src/components/DragAndDrop/Provider/types.ts | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/src/components/DragAndDrop/Provider/types.ts b/src/components/DragAndDrop/Provider/types.ts index b4394056cac5..57d0fb47c637 100644 --- a/src/components/DragAndDrop/Provider/types.ts +++ b/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; From 1914e129b92d17ef86244c329f03ec8eca276a0b Mon Sep 17 00:00:00 2001 From: ruben-rebelo Date: Fri, 22 Mar 2024 09:29:49 +0000 Subject: [PATCH 08/10] [TS migration][g11] Lint fix --- .../perf-test/ReportActionsList.perf-test.tsx | 51 +++++++++++-------- tests/perf-test/ReportScreen.perf-test.tsx | 20 ++++---- 2 files changed, 41 insertions(+), 30 deletions(-) diff --git a/tests/perf-test/ReportActionsList.perf-test.tsx b/tests/perf-test/ReportActionsList.perf-test.tsx index 0898e566385b..94ebf3466b5f 100644 --- a/tests/perf-test/ReportActionsList.perf-test.tsx +++ b/tests/perf-test/ReportActionsList.perf-test.tsx @@ -2,7 +2,7 @@ import {fireEvent, screen} from '@testing-library/react-native'; import type {ComponentType} from 'react'; import Onyx from 'react-native-onyx'; import {measurePerformance} from 'reassure'; -import type {WithNavigationFocusProps} from '@components/withNavigationFocus'; +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'; @@ -14,7 +14,8 @@ 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 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'; @@ -22,20 +23,29 @@ import wrapOnyxWithWaitForBatchedUpdates from '../utils/wrapOnyxWithWaitForBatch const mockedNavigate = jest.fn(); -jest.mock('@src/components/withNavigationFocus', () => (Component: ComponentType) => { - function WithNavigationFocus(props: Omit) { - return ( - - ); - } +jest.mock('@src/components/WithCurrentUserPersonalDetails', () => { + // Lazy loading of LHNTestUtils + // eslint-disable-next-line @typescript-eslint/no-unsafe-return + const lazyLoadLHNTestUtils = () => require('../utils/LHNTestUtils'); - WithNavigationFocus.displayName = 'WithNavigationFocus'; + return (Component: ComponentType) => { + function WrappedComponent(props: Omit) { + const currentUserAccountID = 5; + const LHNTestUtils = lazyLoadLHNTestUtils(); // Load LHNTestUtils here - return WithNavigationFocus; + return ( + + ); + } + + WrappedComponent.displayName = 'WrappedComponent'; + + return WrappedComponent; + }; }); jest.mock('@react-navigation/native', () => { @@ -78,22 +88,21 @@ afterEach(() => { PusherHelper.teardown(); }); -const currentUserAccountID = 5; - function ReportActionsListWrapper() { return ( {}} + listID={1} loadOlderChats={mockLoadChats} loadNewerChats={mockLoadChats} - currentUserPersonalDetails={LHNTestUtils.fakePersonalDetails[currentUserAccountID]} /> @@ -112,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(, {scenario})); @@ -150,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(, {scenario})); diff --git a/tests/perf-test/ReportScreen.perf-test.tsx b/tests/perf-test/ReportScreen.perf-test.tsx index a2e12f6ae2ad..a34070c94d0c 100644 --- a/tests/perf-test/ReportScreen.perf-test.tsx +++ b/tests/perf-test/ReportScreen.perf-test.tsx @@ -1,4 +1,5 @@ -import type {StackNavigationProp} from '@react-navigation/stack'; +import type {RouteProp} from '@react-navigation/native'; +import type {StackScreenProps} from '@react-navigation/stack'; import {fireEvent, screen, waitFor} from '@testing-library/react-native'; import type {ComponentType} from 'react'; import React from 'react'; @@ -7,7 +8,7 @@ import type Animated from 'react-native-reanimated'; import {measurePerformance} from 'reassure'; import type {WithNavigationFocusProps} from '@components/withNavigationFocus'; import type Navigation from '@libs/Navigation/Navigation'; -import type {RootStackParamList} from '@libs/Navigation/types'; +import type {CentralPaneNavigatorParamList} from '@libs/Navigation/types'; import ComposeProviders from '@src/components/ComposeProviders'; import DragAndDropProvider from '@src/components/DragAndDrop/Provider'; import {LocaleContextProvider} from '@src/components/LocaleContextProvider'; @@ -20,6 +21,7 @@ import * as Localize from '@src/libs/Localize'; import ONYXKEYS from '@src/ONYXKEYS'; import {ReportAttachmentsProvider} from '@src/pages/home/report/ReportAttachmentsContext'; import ReportScreen from '@src/pages/home/ReportScreen'; +import type SCREENS from '@src/SCREENS'; import type * as OnyxTypes from '@src/types/onyx'; import type {ReportCollectionDataSet} from '@src/types/onyx/Report'; import type {ReportActionsCollectionDataSet} from '@src/types/onyx/ReportAction'; @@ -33,9 +35,7 @@ import * as TestHelper from '../utils/TestHelper'; import waitForBatchedUpdates from '../utils/waitForBatchedUpdates'; import wrapOnyxWithWaitForBatchedUpdates from '../utils/wrapOnyxWithWaitForBatchedUpdates'; -type ReportScreenWrapperProps = { - navigation: StackNavigationProp; -}; +type ReportScreenWrapperProps = StackScreenProps; jest.mock('react-native-reanimated', () => { const actualNav = jest.requireActual('react-native-reanimated/mock'); @@ -152,8 +152,8 @@ function ReportScreenWrapper(props: ReportScreenWrapperProps) { ); @@ -222,8 +222,9 @@ test('[ReportScreen] should render ReportScreen with composer interactions', () .then(() => measurePerformance( , {scenario}, @@ -281,8 +282,9 @@ test('[ReportScreen] should press of the report item', () => { .then(() => measurePerformance( , {scenario}, From d5e285c6d153d731ceb5dc1e3c2ef7fd72647753 Mon Sep 17 00:00:00 2001 From: ruben-rebelo Date: Fri, 22 Mar 2024 10:11:48 +0000 Subject: [PATCH 09/10] [TS migration][G11] Lint --- tests/perf-test/ReportScreen.perf-test.tsx | 1 - 1 file changed, 1 deletion(-) diff --git a/tests/perf-test/ReportScreen.perf-test.tsx b/tests/perf-test/ReportScreen.perf-test.tsx index a34070c94d0c..b79a6916b7cf 100644 --- a/tests/perf-test/ReportScreen.perf-test.tsx +++ b/tests/perf-test/ReportScreen.perf-test.tsx @@ -1,4 +1,3 @@ -import type {RouteProp} from '@react-navigation/native'; import type {StackScreenProps} from '@react-navigation/stack'; import {fireEvent, screen, waitFor} from '@testing-library/react-native'; import type {ComponentType} from 'react'; From 95164d72179b488708474b15accc311d7bcb7296 Mon Sep 17 00:00:00 2001 From: Ruben Rebelo <39693995+ruben-rebelo@users.noreply.github.com> Date: Mon, 25 Mar 2024 17:38:56 +0000 Subject: [PATCH 10/10] Update ReportActionsList.perf-test.tsx MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit Co-authored-by: FΓ‘bio Henriques --- tests/perf-test/ReportActionsList.perf-test.tsx | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/tests/perf-test/ReportActionsList.perf-test.tsx b/tests/perf-test/ReportActionsList.perf-test.tsx index 94ebf3466b5f..012d8dc8b90f 100644 --- a/tests/perf-test/ReportActionsList.perf-test.tsx +++ b/tests/perf-test/ReportActionsList.perf-test.tsx @@ -23,7 +23,7 @@ import wrapOnyxWithWaitForBatchedUpdates from '../utils/wrapOnyxWithWaitForBatch const mockedNavigate = jest.fn(); -jest.mock('@src/components/WithCurrentUserPersonalDetails', () => { +jest.mock('@components/withCurrentUserPersonalDetails', () => { // Lazy loading of LHNTestUtils // eslint-disable-next-line @typescript-eslint/no-unsafe-return const lazyLoadLHNTestUtils = () => require('../utils/LHNTestUtils');