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(); });