diff --git a/packages/blade/src/components/BottomSheet/__tests__/BottomSheet.native.test.tsx b/packages/blade/src/components/BottomSheet/__tests__/BottomSheet.native.test.tsx
index c101769806b..699cc815082 100644
--- a/packages/blade/src/components/BottomSheet/__tests__/BottomSheet.native.test.tsx
+++ b/packages/blade/src/components/BottomSheet/__tests__/BottomSheet.native.test.tsx
@@ -6,6 +6,7 @@ import { Counter } from '../../Counter';
import renderWithTheme from '~utils/testing/renderWithTheme.native';
import { Button } from '~components/Button';
import { Badge } from '~components/Badge';
+jest.useFakeTimers();
describe('', () => {
test('should render Header/Footer/Body properly', () => {
diff --git a/packages/blade/src/components/BottomSheet/__tests__/BottomSheet.ssr.test.tsx b/packages/blade/src/components/BottomSheet/__tests__/BottomSheet.ssr.test.tsx
index b9ab146bbcd..ec80a23573e 100644
--- a/packages/blade/src/components/BottomSheet/__tests__/BottomSheet.ssr.test.tsx
+++ b/packages/blade/src/components/BottomSheet/__tests__/BottomSheet.ssr.test.tsx
@@ -6,6 +6,7 @@ import { Text } from '~components/Typography';
import { Badge } from '~components/Badge';
import { Counter } from '~components/Counter';
import { Button } from '~components/Button';
+jest.useFakeTimers();
describe('', () => {
it('should render a BottomSheet ssr', () => {
diff --git a/packages/blade/src/components/BottomSheet/__tests__/BottomSheet.web.test.tsx b/packages/blade/src/components/BottomSheet/__tests__/BottomSheet.web.test.tsx
index dc197c3322a..0cc901bfde9 100644
--- a/packages/blade/src/components/BottomSheet/__tests__/BottomSheet.web.test.tsx
+++ b/packages/blade/src/components/BottomSheet/__tests__/BottomSheet.web.test.tsx
@@ -18,9 +18,6 @@ jest.mock('~utils/useId', () => ({
useId: () => 'dropdown-456',
}));
-export const sleep = (delay = 10): Promise =>
- new Promise((resolve) => setTimeout(resolve, delay));
-
const SingleSelectContent = (): React.ReactElement => {
return (
@@ -159,11 +156,9 @@ describe('', () => {
expect(queryByText('BottomSheet body')).not.toBeInTheDocument();
await user.click(getByRole('button', { name: /open/i }));
- await sleep(250);
- expect(queryByText('BottomSheet body')).toBeInTheDocument();
+ await waitFor(() => expect(queryByText('BottomSheet body')).toBeVisible());
await user.click(queryByTestId('bottomsheet-backdrop')!);
- await sleep(250);
- await waitFor(() => expect(queryByText('BottomSheet body')).not.toBeInTheDocument());
+ await waitFor(() => expect(queryByText('BottomSheet body')).not.toBeVisible());
mockConsoleError.mockRestore();
});
@@ -263,28 +258,27 @@ describe('', () => {
expect(queryByTestId('bottomsheet-body')).not.toBeVisible();
expect(getByRole('combobox', { name: 'Select Action' })).toBeInTheDocument();
await user.click(getByRole('combobox', { name: 'Select Action' }));
- await sleep(250);
- expect(queryByTestId('bottomsheet-body')).toBeVisible();
+
+ await waitFor(() => expect(queryByTestId('bottomsheet-body')).toBeVisible());
await user.click(queryByTestId('bottomsheet-backdrop')!);
- await sleep(250);
- expect(queryByTestId('bottomsheet-body')).not.toBeVisible();
+ await waitFor(() => expect(queryByTestId('bottomsheet-body')).not.toBeVisible());
// close by selecting an element & assert the select's value
await user.click(getByRole('combobox', { name: 'Select Action' }));
- await sleep(250);
- expect(queryByTestId('bottomsheet-body')).toBeVisible();
+ await waitFor(() => expect(queryByTestId('bottomsheet-body')).toBeVisible());
await user.click(getByRole('option', { name: 'Settings' }));
- await sleep(250);
- expect(getByRole('combobox', { name: 'Select Action' })).toHaveTextContent('Settings');
+ await waitFor(() =>
+ expect(getByRole('combobox', { name: 'Select Action' })).toHaveTextContent('Settings'),
+ );
expect(queryByTestId('bottomsheet-body')).not.toBeVisible();
// check that cancelling should not update select's value
await user.click(getByRole('combobox', { name: 'Select Action' }));
- await sleep(250);
- expect(queryByTestId('bottomsheet-body')).toBeVisible();
+ await waitFor(() => expect(queryByTestId('bottomsheet-body')).toBeVisible());
await user.click(getByRole('button', { name: /Close/i })!);
- await sleep(250);
- expect(getByRole('combobox', { name: 'Select Action' })).toHaveTextContent('Settings');
+ await waitFor(() =>
+ expect(getByRole('combobox', { name: 'Select Action' })).toHaveTextContent('Settings'),
+ );
expect(queryByTestId('bottomsheet-body')).not.toBeVisible();
mockConsoleError.mockRestore();
});
@@ -316,8 +310,7 @@ describe('', () => {
expect(queryByTestId('bottomsheet-body')).not.toBeVisible();
expect(selectInput).toBeInTheDocument();
await user.click(selectInput);
- await sleep(250);
- expect(queryByTestId('bottomsheet-body')).toBeVisible();
+ await waitFor(() => expect(queryByTestId('bottomsheet-body')).toBeVisible());
// assert no items selected
expect(selectInput).toHaveTextContent('Select Option');
@@ -339,8 +332,7 @@ describe('', () => {
// open again and ensure the previously selected elements are there
await user.click(selectInput);
- await sleep(250);
- expect(queryByTestId('bottomsheet-body')).toBeVisible();
+ await waitFor(() => expect(queryByTestId('bottomsheet-body')).toBeVisible());
expect(queryAllByLabelText('Close Apple tag')[0]).toBeInTheDocument();
expect(queryAllByLabelText('Close Orange tag')[0]).toBeInTheDocument();
@@ -415,27 +407,22 @@ describe('', () => {
expect(queryByTestId('bottomsheet-body')).not.toBeVisible();
expect(getByRole('button', { name: 'Status: approve' })).toBeInTheDocument();
await user.click(getByRole('button', { name: 'Status: approve' }));
- await sleep(250);
- expect(queryByTestId('bottomsheet-body')).toBeVisible();
+ await waitFor(() => expect(queryByTestId('bottomsheet-body')).toBeVisible());
await user.click(queryByTestId('bottomsheet-backdrop')!);
- await sleep(250);
- expect(queryByTestId('bottomsheet-body')).not.toBeVisible();
+ await waitFor(() => expect(queryByTestId('bottomsheet-body')).not.toBeVisible());
// close by selecting an element & assert the select's value
await user.click(getByRole('button', { name: 'Status: approve' }));
- await sleep(250);
- expect(queryByTestId('bottomsheet-body')).toBeVisible();
+ await waitFor(() => expect(queryByTestId('bottomsheet-body')).toBeVisible());
await user.click(getByRole('menuitem', { name: 'In Progress' }));
- await sleep(250);
- expect(queryByTestId('bottomsheet-body')).not.toBeVisible();
+ await waitFor(() => expect(queryByTestId('bottomsheet-body')).not.toBeVisible());
// check that cancelling should not update select's value
await user.click(getByRole('button', { name: 'Status: in-progress' }));
- await sleep(250);
- expect(queryByTestId('bottomsheet-body')).toBeVisible();
+ await waitFor(() => expect(queryByTestId('bottomsheet-body')).toBeVisible());
await user.click(getByRole('button', { name: /Close/i })!);
- await sleep(250);
- expect(queryByTestId('bottomsheet-body')).not.toBeVisible();
+
+ await waitFor(() => expect(queryByTestId('bottomsheet-body')).not.toBeVisible());
mockConsoleError.mockRestore();
});