diff --git a/src/Collapsible/Collapsible.test.jsx b/src/Collapsible/Collapsible.test.jsx index f4fbd3634a..ee0161f426 100644 --- a/src/Collapsible/Collapsible.test.jsx +++ b/src/Collapsible/Collapsible.test.jsx @@ -1,5 +1,5 @@ import React from 'react'; -import { render, screen } from '@testing-library/react'; +import { render, screen, waitFor } from '@testing-library/react'; import renderer from 'react-test-renderer'; import userEvent from '@testing-library/user-event'; @@ -75,17 +75,23 @@ describe('', () => { {collapsibleContent}, ); }); - it('opens on .open()', () => { + it('opens on .open()', async () => { expect(screen.queryByText(EXAMPLE_CONTENT)).not.toBeInTheDocument(); ref.current.open(); - expect(screen.getByText(EXAMPLE_CONTENT)).toBeInTheDocument(); + await waitFor(() => { + expect(screen.getByText(EXAMPLE_CONTENT)).toBeInTheDocument(); + }); }); - it('closes on .close()', () => { + it('closes on .close()', async() => { ref.current.open(); - expect(screen.getByText(EXAMPLE_CONTENT)).toBeInTheDocument(); + await waitFor(() => { + expect(screen.getByText(EXAMPLE_CONTENT)).toBeInTheDocument(); + }); ref.current.close(); - expect(screen.queryByText(EXAMPLE_CONTENT)).not.toBeInTheDocument(); + await waitFor(() => { + expect(screen.queryByText(EXAMPLE_CONTENT)).not.toBeInTheDocument(); + }); }); it('correct behavior with unmountOnExit', () => { @@ -127,7 +133,9 @@ describe('', () => { it('closes on trigger click', async () => { collapsible.open(); - expect(screen.getByText(EXAMPLE_CONTENT)).toBeInTheDocument(); + await waitFor(() => { + expect(screen.getByText(EXAMPLE_CONTENT)).toBeInTheDocument(); + }); await userEvent.click(screen.getAllByRole('button')[0]); // Close expect(screen.queryByText(EXAMPLE_CONTENT)).not.toBeInTheDocument(); }); diff --git a/src/ColorPicker/ColorPicker.test.jsx b/src/ColorPicker/ColorPicker.test.jsx index 7f156f51ea..f5247fe845 100644 --- a/src/ColorPicker/ColorPicker.test.jsx +++ b/src/ColorPicker/ColorPicker.test.jsx @@ -1,7 +1,7 @@ import React from 'react'; import renderer from 'react-test-renderer'; import userEvent from '@testing-library/user-event'; -import { render, screen, act } from '@testing-library/react'; +import { render, screen } from '@testing-library/react'; import ColorPicker from '.'; @@ -29,33 +29,26 @@ describe('picker works as expected', () => { const color = 'wassap'; const setColor = jest.fn(); it('validates hex color', async () => { + const user = userEvent.setup(); render(); - await act(async () => { - await userEvent.click(screen.getByRole('button')); - }); + await user.click(screen.getByRole('button')); expect(screen.queryByTestId('hex-input').value).toEqual('#wassap'); expect(screen.queryByText('Colors must be in hexadecimal format.')).toBeInTheDocument(); - await act(async () => { - await userEvent.clear(screen.getByTestId('hex-input')); - await userEvent.paste(screen.getByTestId('hex-input'), '32116c'); - }); + await user.clear(screen.getByTestId('hex-input')); // clear() will keep focus on the element, so we can paste + await user.paste('32116c'); expect(screen.queryByTestId('hex-input').value).toEqual('#32116c'); expect(screen.queryByText('Colors must be in hexadecimal format.')).not.toBeInTheDocument(); - await act(async () => { - await userEvent.clear(screen.getByTestId('hex-input')); - await userEvent.paste(screen.getByTestId('hex-input'), 'yuk'); - }); + await user.clear(screen.getByTestId('hex-input')); + await user.paste('yuk'); expect(screen.queryByTestId('hex-input').value).toEqual('#yuk'); expect(screen.queryByText('Colors must be in hexadecimal format.')).toBeInTheDocument(); - await act(async () => { - await userEvent.clear(screen.getByTestId('hex-input')); - await userEvent.paste(screen.getByTestId('hex-input'), '#fad'); - }); + await user.clear(screen.getByTestId('hex-input')); + await user.paste('#fad'); expect(screen.queryByTestId('hex-input').value).toEqual('#fad'); expect(screen.queryByText('Colors must be in hexadecimal format.')).not.toBeInTheDocument(); diff --git a/src/DataTable/tests/BulkActions.test.jsx b/src/DataTable/tests/BulkActions.test.jsx index bb207b22b8..744f1005c6 100644 --- a/src/DataTable/tests/BulkActions.test.jsx +++ b/src/DataTable/tests/BulkActions.test.jsx @@ -10,7 +10,6 @@ import { } from '../CollapsibleButtonGroup'; import { useWindowSize, Button } from '../..'; import DataTableContext from '../DataTableContext'; -import { waitForComponentToPaint } from './utils'; jest.mock('../../hooks/useWindowSize'); useWindowSize.mockReturnValue({ width: 800 }); @@ -199,8 +198,7 @@ describe('', () => { }); it('displays the user\'s second button as an outline button', () => { - const { container } = render(); - waitForComponentToPaint(container); + render(); const buttons = screen.getAllByTestId('action'); expect(buttons[0].textContent).toBe(SECOND_ACTION); }); diff --git a/src/DataTable/tests/utils.js b/src/DataTable/tests/utils.js deleted file mode 100644 index a3f3c47aba..0000000000 --- a/src/DataTable/tests/utils.js +++ /dev/null @@ -1,9 +0,0 @@ -import { act } from 'react-dom/test-utils'; - -// eslint-disable-next-line import/prefer-default-export -export const waitForComponentToPaint = async (wrapper) => { - await act(async () => { - await new Promise(resolve => { setTimeout(resolve); }); - wrapper.update(); - }); -}; diff --git a/src/Dropzone/tests/__snapshots__/Dropzone.test.jsx.snap b/src/Dropzone/tests/__snapshots__/Dropzone.test.jsx.snap index 765473643d..d549afd68c 100644 --- a/src/Dropzone/tests/__snapshots__/Dropzone.test.jsx.snap +++ b/src/Dropzone/tests/__snapshots__/Dropzone.test.jsx.snap @@ -21,7 +21,16 @@ exports[` successfully renders 1`] = ` onClick={[Function]} style={ { - "display": "none", + "border": 0, + "clip": "rect(0, 0, 0, 0)", + "clipPath": "inset(50%)", + "height": "1px", + "margin": "0 -1px -1px 0", + "overflow": "hidden", + "padding": 0, + "position": "absolute", + "whiteSpace": "nowrap", + "width": "1px", } } tabIndex={-1} diff --git a/src/Form/tests/FormAutosuggest.test.jsx b/src/Form/tests/FormAutosuggest.test.jsx index ead36d88cb..80b40f0041 100644 --- a/src/Form/tests/FormAutosuggest.test.jsx +++ b/src/Form/tests/FormAutosuggest.test.jsx @@ -89,59 +89,64 @@ describe('render behavior', () => { expect(screen.getByDisplayValue('Test Value')).toBeInTheDocument(); }); - it('renders component with options', () => { + it('renders component with options', async () => { + const user = userEvent.setup(); const { getByTestId, queryAllByTestId } = render(); const input = getByTestId('autosuggest-textbox-input'); - userEvent.click(input); + await user.click(input); const list = queryAllByTestId('autosuggest-optionitem'); expect(list.length).toBe(3); }); - it('renders with value required error msg', () => { + it('renders with value required error msg', async () => { + const user = userEvent.setup(); const { getByText, getByTestId } = render(); const input = getByTestId('autosuggest-textbox-input'); // if you click into the input and click outside, you should see the error message - userEvent.click(input); - userEvent.click(document.body); + await user.click(input); + await user.click(document.body); const formControlFeedback = getByText('Example value required error message'); expect(formControlFeedback).toBeInTheDocument(); }); - it('renders with selection required error msg', () => { + it('renders with selection required error msg', async () => { + const user = userEvent.setup(); const { getByText, getByTestId } = render(); const input = getByTestId('autosuggest-textbox-input'); // if you click into the input and click outside, you should see the error message - userEvent.click(input); - userEvent.type(input, '1'); - userEvent.click(document.body); + await user.click(input); + await user.type(input, '1'); + await user.click(document.body); const formControlFeedback = getByText('Example selection required error message'); expect(formControlFeedback).toBeInTheDocument(); }); - it('renders with custom error msg', () => { + it('renders with custom error msg', async () => { + const user = userEvent.setup(); const { getByText, getByTestId } = render(); const input = getByTestId('autosuggest-textbox-input'); // if you click into the input and click outside, you should see the error message - userEvent.click(input); - userEvent.click(document.body); + await user.click(input); + await user.click(document.body); const formControlFeedback = getByText('Example custom error message'); expect(formControlFeedback).toBeInTheDocument(); }); - it('renders component with options that all have IDs', () => { + it('renders component with options that all have IDs', async () => { + const user = userEvent.setup(); const { getByTestId, getAllByTestId } = render(); const input = getByTestId('autosuggest-textbox-input'); - userEvent.click(input); + await user.click(input); const optionItemIds = getAllByTestId('autosuggest-optionitem').map(item => item.id); expect(optionItemIds).not.toContain(null); @@ -154,12 +159,13 @@ describe('render behavior', () => { expect(getByTestId('autosuggest-screen-reader-options-count').getAttribute('aria-live')).toEqual('assertive'); }); - it('displays correct amount of options found to screen readers', () => { + it('displays correct amount of options found to screen readers', async () => { + const user = userEvent.setup(); const { getByText, getByTestId } = render(); const input = getByTestId('autosuggest-textbox-input'); expect(getByText('0 options found')).toBeInTheDocument(); - userEvent.click(input); + await user.click(input); expect(getByText('3 options found')).toBeInTheDocument(); }); @@ -172,167 +178,180 @@ describe('render behavior', () => { }); describe('controlled behavior', () => { - it('sets input value based on clicked option', () => { + it('sets input value based on clicked option', async () => { + const user = userEvent.setup(); const { getByText, getByTestId } = render(); const input = getByTestId('autosuggest-textbox-input'); - userEvent.click(input); + await user.click(input); const menuItem = getByText('Option 1'); - userEvent.click(menuItem); + await user.click(menuItem); expect(input.value).toEqual('Option 1'); }); - it('calls onChange based on clicked option', () => { + it('calls onChange based on clicked option', async () => { + const user = userEvent.setup(); const onChange = jest.fn(); const { getByText, getByTestId } = render(); const input = getByTestId('autosuggest-textbox-input'); - userEvent.click(input); + await user.click(input); const menuItem = getByText('Option 1'); - userEvent.click(menuItem); + await user.click(menuItem); expect(onChange).toHaveBeenCalledWith({ selectionId: 'option-1-id', selectionValue: 'Option 1', userProvidedText: 'Option 1' }); expect(onChange).toHaveBeenCalledTimes(1); }); - it('calls onChange when the textbox is cleared', () => { + it('calls onChange when the textbox is cleared', async () => { + const user = userEvent.setup(); const onChange = jest.fn(); const { getByTestId } = render(); const input = getByTestId('autosuggest-textbox-input'); - userEvent.type(input, '1'); - userEvent.type(input, '{backspace}'); + await user.type(input, '1'); + await user.type(input, '{backspace}'); expect(onChange).toHaveBeenCalledWith({ selectionId: '', selectionValue: '', userProvidedText: '' }); }); - it('calls the function passed to onClick when an option with it is selected', () => { + it('calls the function passed to onClick when an option with it is selected', async () => { + const user = userEvent.setup(); const onClick = jest.fn(); const { getByText, getByTestId } = render(); const input = getByTestId('autosuggest-textbox-input'); - userEvent.click(input); + await user.click(input); const menuItem = getByText('Option 2'); - userEvent.click(menuItem); + await user.click(menuItem); expect(onClick).toHaveBeenCalledTimes(1); }); - it('does not call onClick when an option without it is selected', () => { + it('does not call onClick when an option without it is selected', async () => { + const user = userEvent.setup(); const onClick = jest.fn(); const { getByText, getByTestId } = render(); const input = getByTestId('autosuggest-textbox-input'); - userEvent.click(input); + await user.click(input); const menuItem = getByText('Option 1'); - userEvent.click(menuItem); + await user.click(menuItem); expect(onClick).toHaveBeenCalledTimes(0); }); - it('should set the correct activedescendant', () => { + it('should set the correct activedescendant', async () => { + const user = userEvent.setup(); const { getByTestId, getAllByTestId } = render(); const input = getByTestId('autosuggest-textbox-input'); - userEvent.click(input); + await user.click(input); const expectedOptionId = getAllByTestId('autosuggest-optionitem')[0].id; - userEvent.keyboard('{arrowdown}'); + await user.keyboard('{arrowdown}'); expect(input.getAttribute('aria-activedescendant')).toEqual(expectedOptionId); }); - it('filters dropdown based on typed field value with one match', () => { + it('filters dropdown based on typed field value with one match', async () => { + const user = userEvent.setup(); const { getByTestId, queryAllByTestId } = render(); const input = getByTestId('autosuggest-textbox-input'); - userEvent.click(input); - userEvent.type(input, 'Option 1'); + await user.click(input); + await user.type(input, 'Option 1'); const list = queryAllByTestId('autosuggest-optionitem'); expect(list.length).toBe(1); }); - it('toggles options list', () => { + it('toggles options list', async () => { + const user = userEvent.setup(); const { getByTestId, queryAllByTestId } = render(); const dropdownBtn = getByTestId('autosuggest-iconbutton'); - userEvent.click(dropdownBtn); + await user.click(dropdownBtn); const list = queryAllByTestId('autosuggest-optionitem'); expect(list.length).toBe(3); - userEvent.click(dropdownBtn); + await user.click(dropdownBtn); const updatedList = queryAllByTestId('autosuggest-optionitem'); expect(updatedList.length).toBe(0); - userEvent.click(dropdownBtn); + await user.click(dropdownBtn); const reopenedList = queryAllByTestId('autosuggest-optionitem'); expect(reopenedList.length).toBe(3); }); - it('filters dropdown based on typed field value with multiple matches', () => { + it('filters dropdown based on typed field value with multiple matches', async () => { + const user = userEvent.setup(); const { getByTestId, queryAllByTestId } = render(); const input = getByTestId('autosuggest-textbox-input'); - userEvent.click(input); - userEvent.type(input, '1'); + await user.click(input); + await user.type(input, '1'); const list = queryAllByTestId('autosuggest-optionitem'); expect(list.length).toBe(2); }); - it('closes options list on click outside', () => { + it('closes options list on click outside', async () => { + const user = userEvent.setup(); const { getByTestId, queryAllByTestId } = render(); const input = getByTestId('autosuggest-textbox-input'); - userEvent.click(input); + await user.click(input); const list = queryAllByTestId('autosuggest-optionitem'); expect(list.length).toBe(3); - userEvent.click(document.body); + await user.click(document.body); const updatedList = queryAllByTestId('autosuggest-optionitem'); expect(updatedList.length).toBe(0); }); - it('updates screen reader option count based on typed field value with multiple matches', () => { + it('updates screen reader option count based on typed field value with multiple matches', async () => { + const user = userEvent.setup(); const { getByText, getByTestId } = render(); const input = getByTestId('autosuggest-textbox-input'); expect(getByText('0 options found')).toBeInTheDocument(); - userEvent.click(input); + await user.click(input); expect(getByText('3 options found')).toBeInTheDocument(); - userEvent.click(input); - userEvent.type(input, '1'); + await user.click(input); + await user.type(input, '1'); expect(getByText('2 options found')).toBeInTheDocument(); }); - it('closes options list when tabbed out and the input is no longer active', () => { + it('closes options list when tabbed out and the input is no longer active', async () => { + const user = userEvent.setup(); const { getByTestId, queryAllByTestId } = render(); const input = getByTestId('autosuggest-textbox-input'); - userEvent.click(input); + await user.click(input); expect(document.activeElement).toBe(getByTestId('autosuggest-textbox-input')); const list = queryAllByTestId('autosuggest-optionitem'); expect(list.length).toBe(3); - userEvent.tab(); + await user.tab(); expect(document.activeElement).not.toBe(getByTestId('autosuggest-textbox-input')); const updatedList = queryAllByTestId('autosuggest-optionitem'); expect(updatedList.length).toBe(0); }); - it('check focus on input after esc', () => { + it('check focus on input after esc', async () => { + const user = userEvent.setup(); const { getByTestId } = render(); const input = getByTestId('autosuggest-textbox-input'); const dropdownBtn = getByTestId('autosuggest-iconbutton'); - userEvent.click(dropdownBtn); + await user.click(dropdownBtn); - userEvent.keyboard('{esc}'); + await user.keyboard('{Escape}'); expect(input.matches(':focus')).toBe(true); }); diff --git a/src/Menu/Menu.test.jsx b/src/Menu/Menu.test.jsx index c2cdad5f98..2f930c2d39 100644 --- a/src/Menu/Menu.test.jsx +++ b/src/Menu/Menu.test.jsx @@ -71,48 +71,53 @@ describe('Keyboard Interactions', () => { expect(defaultItem).toHaveFocus(); }); - it('should focus the next item after ArrowDown keyDown', () => { + it('should focus the next item after ArrowDown keyDown', async () => { + const user = userEvent.setup(); const defaultItem = screen.getByText('Default'); const cantTouchThisItem = screen.getByText(MENU_ITEM_TEXT).parentElement; - userEvent.type(defaultItem, '{arrowdown}'); + await user.type(defaultItem, '{arrowdown}'); expect(cantTouchThisItem).toHaveFocus(); }); - it('should focus the next item after Tab keyDown', () => { + it('should focus the next item after Tab keyDown', async () => { + const user = userEvent.setup(); const defaultItem = screen.getByText('Default').parentElement; const cantTouchThisItem = screen.getByText(MENU_ITEM_TEXT).parentElement; defaultItem.focus(); - userEvent.tab(); + await user.tab(); expect(cantTouchThisItem).toHaveFocus(); }); - it('should loop focus to the first item after Tab keyDown on last item', () => { + it('should loop focus to the first item after Tab keyDown on last item', async () => { + const user = userEvent.setup(); const defaultItem = screen.getByText('Default').parentElement; const iconBeforeItem = screen.getByText('Icon Before'); iconBeforeItem.focus(); - userEvent.tab(); + await user.tab(); expect(defaultItem).toHaveFocus(); }); - it('should loop focus to the last item after ArrowUp keyDown on first item', () => { + it('should loop focus to the last item after ArrowUp keyDown on first item', async () => { + const user = userEvent.setup(); const defaultItem = screen.getByText('Default').parentElement; const iconBeforeItem = screen.getByText('Icon Before').parentElement; defaultItem.focus(); - userEvent.type(defaultItem, '{arrowup}'); + await user.type(defaultItem, '{arrowup}'); expect(iconBeforeItem).toHaveFocus(); }); - it('should focus the previous item after Shift + Tab keyDown', () => { + it('should focus the previous item after Shift + Tab keyDown', async () => { + const user = userEvent.setup(); const button1 = screen.getAllByRole('button')[0]; const button2 = screen.getAllByRole('button')[1]; button2.focus(); - userEvent.tab({ shift: true }); + await user.tab({ shift: true }); expect(button1).toHaveFocus(); }); diff --git a/src/Pagination/Pagination.test.jsx b/src/Pagination/Pagination.test.jsx index cfaf6019fc..49c99eb43a 100644 --- a/src/Pagination/Pagination.test.jsx +++ b/src/Pagination/Pagination.test.jsx @@ -3,7 +3,6 @@ import { Context as ResponsiveContext } from 'react-responsive'; import renderer from 'react-test-renderer'; import { render, - act, screen, } from '@testing-library/react'; import userEvent from '@testing-library/user-event'; @@ -66,48 +65,53 @@ describe('', () => { }); describe('handles controlled and uncontrolled behaviour properly', () => { - it('does not internally change page on page click if currentPage is provided', () => { + it('does not internally change page on page click if currentPage is provided', async () => { + const user = userEvent.setup(); render(); expect(screen.getByLabelText(PAGINATION_BUTTON_LABEL_CURRENT_PAGE, { exact: false })).toHaveTextContent('1'); - userEvent.click(screen.getByText(PAGINATION_BUTTON_LABEL_NEXT)); + await user.click(screen.getByText(PAGINATION_BUTTON_LABEL_NEXT)); expect(screen.getByLabelText(PAGINATION_BUTTON_LABEL_CURRENT_PAGE, { exact: false })).toHaveTextContent('1'); - userEvent.click(screen.getByRole('button', { name: `${PAGINATION_BUTTON_LABEL_PAGE} 3` })); + await user.click(screen.getByRole('button', { name: `${PAGINATION_BUTTON_LABEL_PAGE} 3` })); expect(screen.getByLabelText(PAGINATION_BUTTON_LABEL_CURRENT_PAGE, { exact: false })).toHaveTextContent('1'); }); - it('controls page selection internally if currentPage is not provided', () => { + it('controls page selection internally if currentPage is not provided', async () => { + const user = userEvent.setup(); render(); expect(screen.getByLabelText(PAGINATION_BUTTON_LABEL_CURRENT_PAGE, { exact: false })).toHaveTextContent('1'); - userEvent.click(screen.getByText(PAGINATION_BUTTON_LABEL_NEXT)); + await user.click(screen.getByText(PAGINATION_BUTTON_LABEL_NEXT)); expect(screen.getByLabelText(PAGINATION_BUTTON_LABEL_CURRENT_PAGE, { exact: false })).toHaveTextContent('2'); - userEvent.click(screen.getByRole('button', { name: `${PAGINATION_BUTTON_LABEL_PAGE} 3` })); + await user.click(screen.getByRole('button', { name: `${PAGINATION_BUTTON_LABEL_PAGE} 3` })); expect(screen.getByLabelText(PAGINATION_BUTTON_LABEL_CURRENT_PAGE, { exact: false })).toHaveTextContent('3'); - userEvent.click(screen.getByText(PAGINATION_BUTTON_LABEL_PREV)); + await user.click(screen.getByText(PAGINATION_BUTTON_LABEL_PREV)); expect(screen.getByLabelText(PAGINATION_BUTTON_LABEL_CURRENT_PAGE, { exact: false })).toHaveTextContent('2'); }); - it('does not chang page if you click "next" button while on last page', () => { + it('does not chang page if you click "next" button while on last page', async () => { + const user = userEvent.setup(); render(); expect(screen.getByLabelText(PAGINATION_BUTTON_LABEL_CURRENT_PAGE, { exact: false })).toHaveTextContent('5'); - userEvent.click(screen.getByText(PAGINATION_BUTTON_LABEL_NEXT)); + await user.click(screen.getByText(PAGINATION_BUTTON_LABEL_NEXT)); expect(screen.getByLabelText(PAGINATION_BUTTON_LABEL_CURRENT_PAGE, { exact: false })).toHaveTextContent('5'); }); - it('does not chang page if you click "previous" button while on first page', () => { + it('does not chang page if you click "previous" button while on first page', async () => { + const user = userEvent.setup(); render(); expect(screen.getByLabelText(PAGINATION_BUTTON_LABEL_CURRENT_PAGE, { exact: false })).toHaveTextContent('1'); - userEvent.click(screen.getByText(PAGINATION_BUTTON_LABEL_PREV)); + await user.click(screen.getByText(PAGINATION_BUTTON_LABEL_PREV)); expect(screen.getByLabelText(PAGINATION_BUTTON_LABEL_CURRENT_PAGE, { exact: false })).toHaveTextContent('1'); }); }); describe('handles focus properly', () => { - it('should change focus to next button if previous page is first page', () => { + it('should change focus to next button if previous page is first page', async () => { + const user = userEvent.setup(); const props = { ...baseProps, currentPage: 2, @@ -117,11 +121,12 @@ describe('', () => { }, }; render(); - userEvent.click(screen.getByText(PAGINATION_BUTTON_LABEL_PREV)); + await user.click(screen.getByText(PAGINATION_BUTTON_LABEL_PREV)); expect(screen.getByText(PAGINATION_BUTTON_LABEL_NEXT)).toHaveFocus(); }); - it('should change focus to previous button if next page is last page', () => { + it('should change focus to previous button if next page is last page', async () => { + const user = userEvent.setup(); const props = { ...baseProps, currentPage: baseProps.pageCount - 1, @@ -131,7 +136,7 @@ describe('', () => { }, }; render(); - userEvent.click(screen.getByText(props.buttonLabel.next)); + await user.click(screen.getByText(props.buttonLabel.next)); expect(screen.getByText(props.buttonLabel.previous)).toHaveFocus(); }); }); @@ -191,7 +196,8 @@ describe('', () => { }); describe('should fire callbacks properly', () => { - it('should not fire onPageSelect when selecting current page', () => { + it('should not fire onPageSelect when selecting current page', async () => { + const user = userEvent.setup(); const spy = jest.fn(); const props = { ...baseProps, @@ -203,11 +209,12 @@ describe('', () => { )); - userEvent.click(screen.getByLabelText(PAGINATION_BUTTON_LABEL_CURRENT_PAGE, { exact: false })); + await user.click(screen.getByLabelText(PAGINATION_BUTTON_LABEL_CURRENT_PAGE, { exact: false })); expect(spy).toHaveBeenCalledTimes(0); }); - it('should fire onPageSelect callback when selecting new page', () => { + it('should fire onPageSelect callback when selecting new page', async () => { + const user = userEvent.setup(); const spy = jest.fn(); const props = { ...baseProps, @@ -219,17 +226,18 @@ describe('', () => { )); - userEvent.click(screen.getByLabelText(`${PAGINATION_BUTTON_LABEL_PAGE} 2`)); + await user.click(screen.getByLabelText(`${PAGINATION_BUTTON_LABEL_PAGE} 2`)); expect(spy).toHaveBeenCalledTimes(1); - userEvent.click(screen.getByLabelText(`${PAGINATION_BUTTON_LABEL_PAGE} 3`)); + await user.click(screen.getByLabelText(`${PAGINATION_BUTTON_LABEL_PAGE} 3`)); expect(spy).toHaveBeenCalledTimes(2); }); }); }); describe('fires previous and next button click handlers', () => { - it('previous button onClick', () => { + it('previous button onClick', async () => { + const user = userEvent.setup(); const spy = jest.fn(); const props = { ...baseProps, @@ -238,11 +246,12 @@ describe('', () => { }; render(); const expectedPrevButtonAriaLabel = `${PAGINATION_BUTTON_LABEL_PREV}, ${PAGINATION_BUTTON_LABEL_PAGE} 2`; - userEvent.click(screen.getByRole('button', { name: expectedPrevButtonAriaLabel })); + await user.click(screen.getByRole('button', { name: expectedPrevButtonAriaLabel })); expect(spy).toHaveBeenCalledTimes(1); }); - it('next button onClick', () => { + it('next button onClick', async () => { + const user = userEvent.setup(); const spy = jest.fn(); const props = { ...baseProps, @@ -250,7 +259,7 @@ describe('', () => { }; render(); const expectedNextButtonAriaLabel = `${PAGINATION_BUTTON_LABEL_NEXT}, ${PAGINATION_BUTTON_LABEL_PAGE} 2`; - userEvent.click(screen.getByRole('button', { name: expectedNextButtonAriaLabel })); + await user.click(screen.getByRole('button', { name: expectedNextButtonAriaLabel })); expect(spy).toHaveBeenCalledTimes(1); }); }); @@ -318,13 +327,12 @@ describe('', () => { }); it('for the reduced variant shows dropdown button with the page count as label', async () => { + const user = userEvent.setup(); render(); const dropdownLabel = `${baseProps.currentPage} de ${baseProps.pageCount}`; - await act(async () => { - userEvent.click(screen.getByRole('button', { name: dropdownLabel })); - }); + await user.click(screen.getByRole('button', { name: dropdownLabel })); expect(screen.queryAllByRole('button', { name: /^\d+$/ }).length).toEqual(baseProps.pageCount); }); diff --git a/src/ProductTour/ProductTour.test.jsx b/src/ProductTour/ProductTour.test.jsx index d6b514848f..0073190d34 100644 --- a/src/ProductTour/ProductTour.test.jsx +++ b/src/ProductTour/ProductTour.test.jsx @@ -1,5 +1,5 @@ import React from 'react'; -import { render, screen, act } from '@testing-library/react'; +import { render, screen, act, waitFor } from '@testing-library/react'; import userEvent from '@testing-library/user-event'; import { IntlProvider } from 'react-intl'; @@ -144,6 +144,7 @@ describe('', () => { }); it('onClick of end button disables tour', async () => { + const user = userEvent.setup(); const { rerender } = render(); // Verify a Checkpoint has rendered @@ -151,29 +152,21 @@ describe('', () => { // Advance the Tour to the last Checkpoint const advanceButton1 = screen.getByRole('button', { name: 'Next' }); - await act(async () => { - await userEvent.click(advanceButton1); - }); + await user.click(advanceButton1); const advanceButton2 = screen.getByRole('button', { name: 'Next' }); - await act(async () => { - await userEvent.click(advanceButton2); - }); + await user.click(advanceButton2); rerender(); const advanceButton3 = screen.getByRole('button', { name: 'Override advance' }); - await act(async () => { - await userEvent.click(advanceButton3); - }); + await user.click(advanceButton3); rerender(); // Click the end button const endButton = screen.getByRole('button', { name: 'End' }); - await act(async () => { - await userEvent.click(endButton); - }); + await user.click(endButton); // Verify no Checkpoints have rendered expect(screen.queryByRole('dialog')).not.toBeInTheDocument(); @@ -188,9 +181,7 @@ describe('', () => { expect(screen.getByRole('dialog', { name: 'Checkpoint 1' })).toBeInTheDocument(); // Click Escape key - await act(async () => { - await userEvent.keyboard('{escape}'); - }); + await userEvent.keyboard('{Escape}'); // Verify no Checkpoints have been rendered expect(screen.queryByRole('dialog')).not.toBeInTheDocument(); @@ -271,31 +262,27 @@ describe('', () => { expect(screen.queryByRole('dialog')).not.toBeInTheDocument(); }); it('calls customHandleOnEnd onClick of end button', async () => { + const user = userEvent.setup(); const { rerender } = render(); const advanceButton = screen.getByRole('button', { name: 'Override advance' }); - await act(async () => { - await userEvent.click(advanceButton); - }); + await user.click(advanceButton); rerender(); expect(screen.getByText('Checkpoint 4')).toBeInTheDocument(); const endButton = screen.getByRole('button', { name: 'Override end' }); - await act(async () => { - await userEvent.click(endButton); - }); + await user.click(endButton); expect(handleEnd).toBeCalledTimes(1); expect(customOnEnd).toHaveBeenCalledTimes(1); expect(screen.queryByText('Checkpoint 4')).not.toBeInTheDocument(); }); it('calls onEscape on escape button key press', async () => { + const user = userEvent.setup(); render(); expect(screen.getByText('Checkpoint 3')).toBeInTheDocument(); const container = screen.getByRole('dialog'); container.focus(); - await act(async () => { - await userEvent.keyboard('{escape}'); - }); + await user.keyboard('{Escape}'); expect(handleEscape).toHaveBeenCalledTimes(1); expect(screen.queryByText('Checkpoint 3')).not.toBeInTheDocument(); }); diff --git a/src/ProductTour/index.jsx b/src/ProductTour/index.jsx index 5b4754f395..75f1e6b150 100644 --- a/src/ProductTour/index.jsx +++ b/src/ProductTour/index.jsx @@ -46,7 +46,7 @@ const ProductTour = React.forwardRef(({ tours }, ref) => { useEffect(() => { const handleEsc = (event) => { - if (event.keyCode === 27) { + if (event.key === 'Escape') { setIsTourEnabled(false); if (onEscape) { onEscape(); diff --git a/src/SelectableBox/tests/SelectableBox.test.jsx b/src/SelectableBox/tests/SelectableBox.test.jsx index 57e059f071..f0ee6c2824 100644 --- a/src/SelectableBox/tests/SelectableBox.test.jsx +++ b/src/SelectableBox/tests/SelectableBox.test.jsx @@ -123,12 +123,13 @@ describe('', () => { rerender(); expect(radio.className).toContain('pgn__selectable_box-active'); }); - it('ref is passed to onClick function', () => { + it('ref is passed to onClick function', async () => { + const user = userEvent.setup(); let inputRef; const onClick = (ref) => { inputRef = ref; }; render(); const radio = screen.getByRole('button'); - userEvent.click(radio); + await user.click(radio); expect(inputRef).not.toBeFalsy(); }); });