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] fix reassure test suit errors #50869

Merged
merged 1 commit into from
Oct 17, 2024
Merged

[NOQA] fix reassure test suit errors #50869

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
1 commit
Select commit
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
54 changes: 34 additions & 20 deletions tests/perf-test/BaseOptionsList.perf-test.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,10 +1,11 @@
import {fireEvent} from '@testing-library/react-native';
import type {RenderResult} from '@testing-library/react-native';
import React, {useState} from 'react';
import {measurePerformance} from 'reassure';
import {measureRenders} from 'reassure';
import BaseOptionsList from '@components/OptionsList/BaseOptionsList';
import type {OptionData} from '@libs/ReportUtils';
import variables from '@styles/variables';
import wrapInAct from '../utils/wrapInActHelper';

type BaseOptionsListWrapperProps = {
/** Whether this is a multi-select list */
Expand Down Expand Up @@ -66,32 +67,41 @@ describe('[BaseOptionsList]', () => {
);
}

test('Should render 1 section and a thousand items', () => {
measurePerformance(<BaseOptionsListWrapper />);
test('Should render 1 section and a thousand items', async () => {
await measureRenders(<BaseOptionsListWrapper />);
});

test('Should press a list item', () => {
test('Should press a list item', async () => {
// eslint-disable-next-line @typescript-eslint/require-await
const scenario = async (screen: RenderResult) => {
fireEvent.press(screen.getByText('Item 5'));
// use act to ensure that any state updates caused by interactions are processed correctly before we proceed with any further logic,
// otherwise the error "An update to BaseOptionsList inside a test was not wrapped in act(...)" will be thrown
// eslint-disable-next-line testing-library/no-unnecessary-act
await wrapInAct(async () => {
fireEvent.press(await screen.findByText('Item 5'));
});
};

measurePerformance(<BaseOptionsListWrapper />, {scenario});
await measureRenders(<BaseOptionsListWrapper />, {scenario});
});

test('Should render multiple selection and select 4 items', () => {
test('Should render multiple selection and select 4 items', async () => {
// eslint-disable-next-line @typescript-eslint/require-await
const scenario = async (screen: RenderResult) => {
fireEvent.press(screen.getByText('Item 1'));
fireEvent.press(screen.getByText('Item 2'));
fireEvent.press(screen.getByText('Item 3'));
fireEvent.press(screen.getByText('Item 4'));
// use act to ensure that any state updates caused by interactions are processed correctly before we proceed with any further logic,
// otherwise the error "An update to BaseOptionsList inside a test was not wrapped in act(...)" will be thrown
await wrapInAct(async () => {
fireEvent.press(await screen.findByText('Item 1'));
fireEvent.press(screen.getByText('Item 2'));
fireEvent.press(screen.getByText('Item 3'));
fireEvent.press(screen.getByText('Item 4'));
});
};

measurePerformance(<BaseOptionsListWrapper canSelectMultipleOptions />, {scenario});
await measureRenders(<BaseOptionsListWrapper canSelectMultipleOptions />, {scenario});
});

test('Should scroll and select a few items', () => {
test('Should scroll and select a few items', async () => {
const eventData = {
nativeEvent: {
contentOffset: {
Expand All @@ -112,14 +122,18 @@ describe('[BaseOptionsList]', () => {

// eslint-disable-next-line @typescript-eslint/require-await
const scenario = async (screen: RenderResult) => {
fireEvent.press(screen.getByText('Item 1'));
// see https://github.com/callstack/react-native-testing-library/issues/1540
fireEvent(screen.getByTestId('options-list'), 'onContentSizeChange', eventData.nativeEvent.contentSize.width, eventData.nativeEvent.contentSize.height);
fireEvent.scroll(screen.getByTestId('options-list'), eventData);
fireEvent.press(screen.getByText('Item 7'));
fireEvent.press(screen.getByText('Item 15'));
// use act to ensure that any state updates caused by interactions are processed correctly before we proceed with any further logic,
// otherwise the error "An update to BaseOptionsList inside a test was not wrapped in act(...)" will be thrown
await wrapInAct(async () => {
fireEvent.press(await screen.findByText('Item 1'));
// see https://github.com/callstack/react-native-testing-library/issues/1540
fireEvent(await screen.findByTestId('options-list'), 'onContentSizeChange', eventData.nativeEvent.contentSize.width, eventData.nativeEvent.contentSize.height);
fireEvent.scroll(await screen.findByTestId('options-list'), eventData);
fireEvent.press(await screen.findByText('Item 7'));
fireEvent.press(await screen.findByText('Item 15'));
});
};

measurePerformance(<BaseOptionsListWrapper canSelectMultipleOptions />, {scenario});
await measureRenders(<BaseOptionsListWrapper canSelectMultipleOptions />, {scenario});
});
});
25 changes: 15 additions & 10 deletions tests/perf-test/ReportActionCompose.perf-test.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -3,7 +3,7 @@ import type {ComponentType, EffectCallback} from 'react';
import React from 'react';
import Onyx from 'react-native-onyx';
import type Animated from 'react-native-reanimated';
import {measurePerformance} from 'reassure';
import {measureRenders} from 'reassure';
import type {WithNavigationFocusProps} from '@components/withNavigationFocus';
import type {EmojiPickerRef} from '@libs/actions/EmojiPickerAction';
import type Navigation from '@libs/Navigation/Navigation';
Expand All @@ -25,6 +25,11 @@ jest.mock('react-native-reanimated', () => ({
useAnimatedRef: jest.fn(),
}));

jest.mock('../../src/libs/Navigation/Navigation', () => ({
navigate: jest.fn(),
getReportRHPActiveRoute: jest.fn(),
}));

jest.mock('@react-navigation/native', () => {
const actualNav = jest.requireActual<typeof Navigation>('@react-navigation/native');
return {
Expand Down Expand Up @@ -105,7 +110,7 @@ test('[ReportActionCompose] should render Composer with text input interactions'
};

await waitForBatchedUpdates();
await measurePerformance(<ReportActionComposeWrapper />, {scenario});
await measureRenders(<ReportActionComposeWrapper />, {scenario});
});

test('[ReportActionCompose] should scroll to hide suggestions', async () => {
Expand All @@ -118,7 +123,7 @@ test('[ReportActionCompose] should scroll to hide suggestions', async () => {
};

await waitForBatchedUpdates();
await measurePerformance(<ReportActionComposeWrapper />, {scenario});
await measureRenders(<ReportActionComposeWrapper />, {scenario});
});

test('[ReportActionCompose] should press to block suggestions', async () => {
Expand All @@ -131,7 +136,7 @@ test('[ReportActionCompose] should press to block suggestions', async () => {
};

await waitForBatchedUpdates();
await measurePerformance(<ReportActionComposeWrapper />, {scenario});
await measureRenders(<ReportActionComposeWrapper />, {scenario});
});

test('[ReportActionCompose] should press add attachemnt button', async () => {
Expand All @@ -144,7 +149,7 @@ test('[ReportActionCompose] should press add attachemnt button', async () => {
};

await waitForBatchedUpdates();
await measurePerformance(<ReportActionComposeWrapper />, {scenario});
await measureRenders(<ReportActionComposeWrapper />, {scenario});
});

test('[ReportActionCompose] should press add emoji button', async () => {
Expand All @@ -157,7 +162,7 @@ test('[ReportActionCompose] should press add emoji button', async () => {
};

await waitForBatchedUpdates();
await measurePerformance(<ReportActionComposeWrapper />, {scenario});
await measureRenders(<ReportActionComposeWrapper />, {scenario});
});

test('[ReportActionCompose] should press send message button', async () => {
Expand All @@ -170,7 +175,7 @@ test('[ReportActionCompose] should press send message button', async () => {
};

await waitForBatchedUpdates();
await measurePerformance(<ReportActionComposeWrapper />, {scenario});
await measureRenders(<ReportActionComposeWrapper />, {scenario});
});

test('[ReportActionCompose] press add attachment button', async () => {
Expand All @@ -182,7 +187,7 @@ test('[ReportActionCompose] press add attachment button', async () => {
};

await waitForBatchedUpdates();
await measurePerformance(<ReportActionComposeWrapper />, {scenario});
await measureRenders(<ReportActionComposeWrapper />, {scenario});
});

test('[ReportActionCompose] should press split bill button', async () => {
Expand All @@ -193,7 +198,7 @@ test('[ReportActionCompose] should press split bill button', async () => {
};

await waitForBatchedUpdates();
await measurePerformance(<ReportActionComposeWrapper />, {scenario});
await measureRenders(<ReportActionComposeWrapper />, {scenario});
});

test('[ReportActionCompose] should press assign task button', async () => {
Expand All @@ -204,5 +209,5 @@ test('[ReportActionCompose] should press assign task button', async () => {
};

await waitForBatchedUpdates();
await measurePerformance(<ReportActionComposeWrapper />, {scenario});
await measureRenders(<ReportActionComposeWrapper />, {scenario});
});
25 changes: 17 additions & 8 deletions tests/perf-test/ReportScreen.perf-test.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,12 +1,12 @@
import type {StackNavigationProp, StackScreenProps} from '@react-navigation/stack';
import {screen} from '@testing-library/react-native';
import {screen, waitFor} from '@testing-library/react-native';
import type {ComponentType} from 'react';
import React from 'react';
import type ReactNative from 'react-native';
import {Dimensions, InteractionManager} from 'react-native';
import Onyx from 'react-native-onyx';
import type Animated from 'react-native-reanimated';
import {measurePerformance} from 'reassure';
import {measureRenders} from 'reassure';
import type {WithNavigationFocusProps} from '@components/withNavigationFocus';
import type Navigation from '@libs/Navigation/Navigation';
import type {AuthScreensParamList} from '@libs/Navigation/types';
Expand Down Expand Up @@ -206,7 +206,10 @@ const mockRoute = {params: {reportID: '1', reportActionID: ''}, key: 'Report', n
test('[ReportScreen] should render ReportScreen', async () => {
const {addListener} = createAddListenerMock();
const scenario = async () => {
await screen.findByTestId(`report-screen-${report.reportID}`);
// wrapp the screen with waitFor to wait for the screen to be rendered
Copy link
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Suggested change
// wrapp the screen with waitFor to wait for the screen to be rendered
// wrap the screen with waitFor to wait for the screen to be rendered

await waitFor(async () => {
await screen.findByTestId(`report-screen-${report.reportID}`);
});
};

const navigation = {addListener} as unknown as StackNavigationProp<AuthScreensParamList, 'Report', undefined>;
Expand All @@ -228,7 +231,8 @@ test('[ReportScreen] should render ReportScreen', async () => {
...reportCollectionDataSet,
...reportActionsCollectionDataSet,
});
await measurePerformance(

await measureRenders(
<ReportScreenWrapper
navigation={navigation}
route={mockRoute}
Expand All @@ -240,7 +244,9 @@ test('[ReportScreen] should render ReportScreen', async () => {
test('[ReportScreen] should render composer', async () => {
const {addListener} = createAddListenerMock();
const scenario = async () => {
await screen.findByTestId('composer');
await waitFor(async () => {
await screen.findByTestId('composer');
});
};

const navigation = {addListener} as unknown as StackNavigationProp<AuthScreensParamList, 'Report', undefined>;
Expand All @@ -263,7 +269,7 @@ test('[ReportScreen] should render composer', async () => {
...reportCollectionDataSet,
...reportActionsCollectionDataSet,
});
await measurePerformance(
await measureRenders(
<ReportScreenWrapper
navigation={navigation}
route={mockRoute}
Expand All @@ -275,7 +281,9 @@ test('[ReportScreen] should render composer', async () => {
test('[ReportScreen] should render report list', async () => {
const {addListener} = createAddListenerMock();
const scenario = async () => {
await screen.findByTestId('report-actions-list');
await waitFor(async () => {
await screen.findByTestId('report-actions-list');
});
};

const navigation = {addListener} as unknown as StackNavigationProp<AuthScreensParamList, 'Report', undefined>;
Expand Down Expand Up @@ -303,7 +311,8 @@ test('[ReportScreen] should render report list', async () => {
...reportCollectionDataSet,
...reportActionsCollectionDataSet,
});
await measurePerformance(

await measureRenders(
<ReportScreenWrapper
navigation={navigation}
route={mockRoute}
Expand Down
16 changes: 8 additions & 8 deletions tests/perf-test/SelectionList.perf-test.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -126,31 +126,31 @@ function SelectionListWrapper({canSelectMultiple}: SelectionListWrapperProps) {
);
}

test('[SelectionList] should render 1 section and a thousand items', () => {
measureRenders(<SelectionListWrapper />);
test('[SelectionList] should render 1 section and a thousand items', async () => {
await measureRenders(<SelectionListWrapper />);
});

test('[SelectionList] should press a list item', () => {
test('[SelectionList] should press a list item', async () => {
// eslint-disable-next-line @typescript-eslint/require-await
const scenario = async (screen: RenderResult) => {
fireEvent.press(screen.getByText('Item 5'));
};

measureRenders(<SelectionListWrapper />, {scenario});
await measureRenders(<SelectionListWrapper />, {scenario});
});

test('[SelectionList] should render multiple selection and select 3 items', () => {
test('[SelectionList] should render multiple selection and select 3 items', async () => {
// eslint-disable-next-line @typescript-eslint/require-await
const scenario = async (screen: RenderResult) => {
fireEvent.press(screen.getByText('Item 1'));
fireEvent.press(screen.getByText('Item 2'));
fireEvent.press(screen.getByText('Item 3'));
};

measureRenders(<SelectionListWrapper canSelectMultiple />, {scenario});
await measureRenders(<SelectionListWrapper canSelectMultiple />, {scenario});
});

test('[SelectionList] should scroll and select a few items', () => {
test('[SelectionList] should scroll and select a few items', async () => {
const eventData = {
nativeEvent: {
contentOffset: {
Expand Down Expand Up @@ -179,5 +179,5 @@ test('[SelectionList] should scroll and select a few items', () => {
fireEvent.press(screen.getByText('Item 15'));
};

measureRenders(<SelectionListWrapper canSelectMultiple />, {scenario});
await measureRenders(<SelectionListWrapper canSelectMultiple />, {scenario});
});
Loading
Loading