-
Notifications
You must be signed in to change notification settings - Fork 3k
Commit
This commit does not belong to any branch on this repository, and may belong to a fork outside of the repository.
feat: add perf tests to ReportActionsList
- Loading branch information
1 parent
79ade92
commit 0908904
Showing
3 changed files
with
193 additions
and
0 deletions.
There are no files selected for viewing
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Original file line number | Diff line number | Diff line change |
---|---|---|
@@ -0,0 +1,191 @@ | ||
import {measurePerformance} from 'reassure'; | ||
import Onyx from 'react-native-onyx'; | ||
import {screen, fireEvent} from '@testing-library/react-native'; | ||
import ReportActionsList from '../../src/pages/home/report/ReportActionsList'; | ||
import ComposeProviders from '../../src/components/ComposeProviders'; | ||
import OnyxProvider from '../../src/components/OnyxProvider'; | ||
import {ReportAttachmentsProvider} from '../../src/pages/home/report/ReportAttachmentsContext'; | ||
import {WindowDimensionsProvider} from '../../src/components/withWindowDimensions'; | ||
import {LocaleContextProvider} from '../../src/components/LocaleContextProvider'; | ||
import * as LHNTestUtils from '../utils/LHNTestUtils'; | ||
import waitForBatchedUpdates from '../utils/waitForBatchedUpdates'; | ||
import wrapOnyxWithWaitForBatchedUpdates from '../utils/wrapOnyxWithWaitForBatchedUpdates'; | ||
import PusherHelper from '../utils/PusherHelper'; | ||
import variables from '../../src/styles/variables'; | ||
import {ActionListContext, ReactionListContext} from '../../src/pages/home/ReportScreenContext'; | ||
|
||
const ONYXKEYS = { | ||
PERSONAL_DETAILS_LIST: 'personalDetailsList', | ||
SESSION: 'session', | ||
COLLECTION: { | ||
REPORT: 'report_', | ||
REPORT_ACTIONS: 'reportActions_', | ||
}, | ||
NETWORK: 'network', | ||
}; | ||
|
||
jest.mock('@react-navigation/native', () => { | ||
const actualNav = jest.requireActual('@react-navigation/native'); | ||
return { | ||
...actualNav, | ||
useRoute: () => jest.fn(), | ||
}; | ||
}); | ||
|
||
jest.mock('../../src/hooks/useLocalize', () => | ||
jest.fn(() => ({ | ||
translate: jest.fn(), | ||
})), | ||
); | ||
|
||
beforeAll(() => | ||
Onyx.init({ | ||
keys: ONYXKEYS, | ||
safeEvictionKeys: [ONYXKEYS.COLLECTION.REPORT_ACTIONS], | ||
registerStorageEventListener: () => {}, | ||
}), | ||
); | ||
|
||
afterAll(() => { | ||
jest.clearAllMocks(); | ||
}); | ||
|
||
const mockOnLayout = jest.fn(); | ||
const mockOnScroll = jest.fn(); | ||
const mockLoadMoreChats = jest.fn(); | ||
const mockRef = {current: null}; | ||
|
||
// Initialize the network key for OfflineWithFeedback | ||
beforeEach(() => { | ||
PusherHelper.setup(); | ||
wrapOnyxWithWaitForBatchedUpdates(Onyx); | ||
return Onyx.merge(ONYXKEYS.NETWORK, {isOffline: false}); | ||
}); | ||
|
||
// Clear out Onyx after each test so that each test starts with a clean slate | ||
afterEach(() => { | ||
jest.useRealTimers(); | ||
Onyx.clear(); | ||
PusherHelper.teardown(); | ||
}); | ||
|
||
const getFakeReportAction = (index) => ({ | ||
actionName: 'ADDCOMMENT', | ||
actorAccountID: index, | ||
automatic: false, | ||
avatar: '', | ||
created: '2023-09-12 16:27:35.124', | ||
isAttachment: true, | ||
isFirstItem: false, | ||
lastModified: '2021-07-14T15:00:00Z', | ||
message: [ | ||
{ | ||
html: 'hey', | ||
isDelatedParentAction: false, | ||
isEdited: false, | ||
reactions: [], | ||
text: 'test', | ||
type: 'TEXT', | ||
whisperedTo: [], | ||
}, | ||
], | ||
originalMessage: { | ||
html: 'hey', | ||
lastModified: '2021-07-14T15:00:00Z', | ||
}, | ||
pendingAction: null, | ||
person: [ | ||
{ | ||
type: 'TEXT', | ||
style: 'strong', | ||
text: '[email protected]', | ||
}, | ||
], | ||
previousReportActionID: '1', | ||
reportActionID: index.toString(), | ||
reportActionTimestamp: 1696243169753, | ||
sequenceNumber: 2, | ||
shouldShow: true, | ||
timestamp: 1696243169, | ||
whisperedToAccountIDs: [], | ||
}); | ||
|
||
const getMockedSortedReportActions = (length = 100) => | ||
Array.from({length}, (__, i) => { | ||
const reportAction = getFakeReportAction(i); | ||
return reportAction; | ||
}); | ||
|
||
const currentUserAccountID = 5; | ||
|
||
function ReportActionsListWrapper() { | ||
return ( | ||
<ComposeProviders components={[OnyxProvider, LocaleContextProvider, WindowDimensionsProvider, ReportAttachmentsProvider]}> | ||
<ReactionListContext.Provider value={mockRef}> | ||
<ActionListContext.Provider value={mockRef}> | ||
<ReportActionsList | ||
sortedReportActions={getMockedSortedReportActions(500)} | ||
report={LHNTestUtils.getFakeReport()} | ||
onLayout={mockOnLayout} | ||
onScroll={mockOnScroll} | ||
loadMoreChats={mockLoadMoreChats} | ||
currentUserPersonalDetails={LHNTestUtils.fakePersonalDetails[currentUserAccountID]} | ||
/> | ||
</ActionListContext.Provider> | ||
</ReactionListContext.Provider> | ||
</ComposeProviders> | ||
); | ||
} | ||
|
||
test('should render ReportActionsList with 500 reportActions stored', () => { | ||
const scenario = async () => { | ||
await screen.findByTestId('report-actions-list'); | ||
}; | ||
|
||
return waitForBatchedUpdates() | ||
.then(() => | ||
Onyx.multiSet({ | ||
[ONYXKEYS.PERSONAL_DETAILS_LIST]: LHNTestUtils.fakePersonalDetails, | ||
}), | ||
) | ||
.then(() => measurePerformance(<ReportActionsListWrapper />, {scenario})); | ||
}); | ||
|
||
test('should scroll and click some of the reports', () => { | ||
const eventData = { | ||
nativeEvent: { | ||
contentOffset: { | ||
y: variables.optionRowHeight * 5, | ||
}, | ||
contentSize: { | ||
// Dimensions of the scrollable content | ||
height: variables.optionRowHeight * 10, | ||
width: 100, | ||
}, | ||
layoutMeasurement: { | ||
// Dimensions of the device | ||
height: variables.optionRowHeight * 5, | ||
width: 100, | ||
}, | ||
}, | ||
}; | ||
|
||
const scenario = async () => { | ||
const reportActionsList = await screen.findByTestId('report-actions-list'); | ||
expect(reportActionsList).toBeDefined(); | ||
|
||
fireEvent.scroll(reportActionsList, eventData); | ||
|
||
const reportItem = await screen.findByTestId('1'); | ||
|
||
fireEvent.press(reportItem, 'onLongPress'); | ||
}; | ||
|
||
return waitForBatchedUpdates() | ||
.then(() => | ||
Onyx.multiSet({ | ||
[ONYXKEYS.PERSONAL_DETAILS_LIST]: LHNTestUtils.fakePersonalDetails, | ||
}), | ||
) | ||
.then(() => measurePerformance(<ReportActionsListWrapper />, {scenario})); | ||
}); |