Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

[NoQA] Enable and refactor ReportScreen perf tests #35384

Merged
merged 4 commits into from
Jan 31, 2024
Merged

[NoQA] Enable and refactor ReportScreen perf tests #35384

Show file tree
Hide file tree
Changes from 3 commits
Commits
Show all changes
4 commits
Select commit Hold shift + click to select a range
4ea2337
Refactor ReportScreen perf tests
OlimpiaZurek Jan 30, 2024
b202466
test
OlimpiaZurek Jan 30, 2024
e5ebfbb
Revert "test"
OlimpiaZurek Jan 30, 2024
68070e8
cr changes
OlimpiaZurek Jan 31, 2024
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
60 changes: 28 additions & 32 deletions tests/perf-test/ReportScreen.perf-test.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -15,7 +15,10 @@ 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 * as LHNTestUtils from '../utils/LHNTestUtils';
import createCollection from '../utils/collections/createCollection';
import createPersonalDetails from '../utils/collections/personalDetails';
import createRandomPolicy from '../utils/collections/policies';
import createRandomReport from '../utils/collections/reports';
import PusherHelper from '../utils/PusherHelper';
import * as ReportTestUtils from '../utils/ReportTestUtils';
import * as TestHelper from '../utils/TestHelper';
Expand Down Expand Up @@ -56,6 +59,7 @@ jest.mock('../../src/hooks/useEnvironment', () =>

jest.mock('../../src/libs/Permissions', () => ({
canUseLinkPreviews: jest.fn(() => true),
canUseDefaultRooms: jest.fn(() => true),
}));
jest.mock('../../src/hooks/usePermissions.ts');

Expand Down Expand Up @@ -103,6 +107,18 @@ afterEach(() => {
PusherHelper.teardown();
});

const policies = createCollection(
(item) => `${ONYXKEYS.COLLECTION.POLICY}${item.id}`,
(index) => createRandomPolicy(index),
10,
);

const personalDetails = createCollection(
(item) => item.accountID,
(index) => createPersonalDetails(index),
20,
);

/**
* This is a helper function to create a mock for the addListener function of the react-navigation library.
* The reason we need this is because we need to trigger the transitionEnd event in our tests to simulate
Expand Down Expand Up @@ -152,7 +168,11 @@ function ReportScreenWrapper(args) {
);
}

test.skip('[ReportScreen] should render ReportScreen with composer interactions', () => {
const report = {...createRandomReport(1), policyID: '1'};
const reportActions = ReportTestUtils.getMockedReportActionsMap(500);
const mockRoute = {params: {reportID: '1'}};

test('[ReportScreen] should render ReportScreen with composer interactions', () => {
const {triggerTransitionEnd, addListener} = createAddListenerMock();
const scenario = async () => {
/**
Expand All @@ -166,9 +186,6 @@ test.skip('[ReportScreen] should render ReportScreen with composer interactions'

await act(triggerTransitionEnd);

// Query for the report list
await screen.findByTestId('report-actions-list');

// Query for the composer
const composer = await screen.findByTestId('composer');

Expand All @@ -189,15 +206,6 @@ test.skip('[ReportScreen] should render ReportScreen with composer interactions'
await screen.findByLabelText(hintHeaderText);
};

const policy = {
policyID: 1,
name: 'Testing Policy',
};

const report = LHNTestUtils.getFakeReport();
const reportActions = ReportTestUtils.getMockedReportActionsMap(1000);
const mockRoute = {params: {reportID: '1'}};

const navigation = {addListener};

return waitForBatchedUpdates()
Expand All @@ -206,9 +214,9 @@ test.skip('[ReportScreen] should render ReportScreen with composer interactions'
[ONYXKEYS.IS_SIDEBAR_LOADED]: true,
[`${ONYXKEYS.COLLECTION.REPORT}${mockRoute.params.reportID}`]: report,
[`${ONYXKEYS.COLLECTION.REPORT_ACTIONS}${mockRoute.params.reportID}`]: reportActions,
[ONYXKEYS.PERSONAL_DETAILS_LIST]: LHNTestUtils.fakePersonalDetails,
[ONYXKEYS.PERSONAL_DETAILS_LIST]: personalDetails,
[ONYXKEYS.BETAS]: [CONST.BETAS.DEFAULT_ROOMS],
[`${ONYXKEYS.COLLECTION.POLICY}${policy.policyID}`]: policy,
[`${ONYXKEYS.COLLECTION.POLICY}`]: policies,
[`${ONYXKEYS.COLLECTION.REPORT_METADATA}${mockRoute.params.reportID}`]: {
isLoadingReportActions: false,
},
Expand All @@ -225,7 +233,7 @@ test.skip('[ReportScreen] should render ReportScreen with composer interactions'
);
});

test.skip('[ReportScreen] should press of the report item', () => {
test('[ReportScreen] should press of the report item', () => {
const {triggerTransitionEnd, addListener} = createAddListenerMock();
const scenario = async () => {
/**
Expand All @@ -239,12 +247,9 @@ test.skip('[ReportScreen] should press of the report item', () => {

await act(triggerTransitionEnd);

// Query for the report list
// // Query for the report list
await screen.findByTestId('report-actions-list');

// Query for the composer
await screen.findByTestId('composer');

const hintReportPreviewText = Localize.translateLocal('iou.viewDetails');

// Query for report preview buttons
Expand All @@ -254,15 +259,6 @@ test.skip('[ReportScreen] should press of the report item', () => {
fireEvent.press(reportPreviewButtons[0]);
};

const policy = {
policyID: 123,
name: 'Testing Policy',
};

const report = LHNTestUtils.getFakeReport();
const reportActions = ReportTestUtils.getMockedReportActionsMap(1000);
const mockRoute = {params: {reportID: '2'}};

const navigation = {addListener};

return waitForBatchedUpdates()
Expand All @@ -271,9 +267,9 @@ test.skip('[ReportScreen] should press of the report item', () => {
[ONYXKEYS.IS_SIDEBAR_LOADED]: true,
[`${ONYXKEYS.COLLECTION.REPORT}${mockRoute.params.reportID}`]: report,
[`${ONYXKEYS.COLLECTION.REPORT_ACTIONS}${mockRoute.params.reportID}`]: reportActions,
[ONYXKEYS.PERSONAL_DETAILS_LIST]: LHNTestUtils.fakePersonalDetails,
[ONYXKEYS.PERSONAL_DETAILS_LIST]: personalDetails,
[ONYXKEYS.BETAS]: [CONST.BETAS.DEFAULT_ROOMS],
[`${ONYXKEYS.COLLECTION.POLICY}${policy.policyID}`]: policy,
[`${ONYXKEYS.COLLECTION.POLICY}`]: policies,
[`${ONYXKEYS.COLLECTION.REPORT_METADATA}${mockRoute.params.reportID}`]: {
isLoadingReportActions: false,
},
Expand Down
9 changes: 8 additions & 1 deletion tests/utils/ReportTestUtils.js
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,4 +1,5 @@
import _ from 'underscore';
import createRandomReportAction from './collections/reportActions';

const actionNames = ['ADDCOMMENT', 'IOU', 'REPORTPREVIEW', 'CLOSED'];

Expand Down Expand Up @@ -51,7 +52,13 @@ const getMockedReportActionsMap = (length = 100) => {
const mockReports = Array.from({length}, (__, i) => {
const reportID = i + 1;
const actionName = i === 0 ? 'CREATED' : actionNames[i % actionNames.length];
const reportAction = getFakeReportAction(reportID, actionName);
const reportAction = {
...createRandomReportAction(reportID),
actionName,
originalMessage: {
linkedReportID: reportID.toString(),
},
};

return {[reportID]: reportAction};
});
Expand Down
21 changes: 17 additions & 4 deletions tests/utils/collections/reportActions.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,4 +1,4 @@
import {rand, randAggregation, randBoolean, randPastDate, randWord} from '@ngneat/falso';
import {rand, randAggregation, randBoolean, randWord} from '@ngneat/falso';
import CONST from '@src/CONST';
import type {ReportAction} from '@src/types/onyx';

Expand All @@ -17,6 +17,19 @@ const flattenActionNamesValues = (actionNames: any) => {
return result;
};

const addZero = (value: number): string | number => (value < 10 ? `0${value}` : value);

const getRandomDate = (): string => {
const randomTimestamp = Math.random() * new Date().getTime();
const randomDate = new Date(randomTimestamp);

const formattedDate = `${randomDate.getFullYear()}-${addZero(randomDate.getMonth() + 1)}-${addZero(randomDate.getDate())} ${addZero(randomDate.getHours())}:${addZero(
randomDate.getMinutes(),
)}:${addZero(randomDate.getSeconds())}.${randomDate.getMilliseconds()}`;

return formattedDate;
};

export default function createRandomReportAction(index: number): ReportAction {
return {
// we need to add any here because of the way we are generating random values
Expand All @@ -32,7 +45,7 @@ export default function createRandomReportAction(index: number): ReportAction {
text: randWord(),
},
],
created: randPastDate().toISOString(),
created: getRandomDate(),
message: [
{
type: randWord(),
Expand All @@ -57,13 +70,13 @@ export default function createRandomReportAction(index: number): ReportAction {
],
originalMessage: {
html: randWord(),
type: rand(Object.values(CONST.IOU.REPORT_ACTION_TYPE)),
lastModified: getRandomDate(),
},
whisperedToAccountIDs: randAggregation(),
avatar: randWord(),
automatic: randBoolean(),
shouldShow: randBoolean(),
lastModified: randPastDate().toISOString(),
lastModified: getRandomDate(),
pendingAction: rand(Object.values(CONST.RED_BRICK_ROAD_PENDING_ACTION)),
delegateAccountID: index,
errors: {},
Expand Down
Loading