diff --git a/packages/a11y/src/Gesture/withCalendarGesture.test.tsx b/packages/a11y/src/Gesture/withCalendarGesture.test.tsx index 0598d790c85..a336dd30611 100644 --- a/packages/a11y/src/Gesture/withCalendarGesture.test.tsx +++ b/packages/a11y/src/Gesture/withCalendarGesture.test.tsx @@ -110,7 +110,7 @@ describe('withCalendarGesture', () => { // .simulate('keydown', { keyCode: keycode.codes.left }); // // then - // await userEvent.keyboard('[ArrowLeft]'); + // await user.keyboard('[ArrowLeft]'); expect(screen.getByTestId('10')).toHaveFocus(); // expect(document.activeElement.innerHTML).toBe('11'); diff --git a/packages/components/src/AppGuidedTour/AppGuidedTour.test.js b/packages/components/src/AppGuidedTour/AppGuidedTour.test.js index 99a06ae463a..ebb1d5cba5b 100644 --- a/packages/components/src/AppGuidedTour/AppGuidedTour.test.js +++ b/packages/components/src/AppGuidedTour/AppGuidedTour.test.js @@ -45,13 +45,15 @@ describe('AppGuidedTour', () => { render(); expect(screen.getByLabelText('Import demo content')).not.toBeChecked(); }); - it('should reset state on close', () => { + it('should reset state on close', async () => { + const user = userEvent.setup(); + const onRequestCloseMock = jest.fn(); localStorage.setItem(DEFAULT_LOCAL_STORAGE_KEY, 'true'); render(); const nextBtn = document.querySelector('button[data-tour-elem="right-arrow"]'); - userEvent.click(nextBtn); - userEvent.click(screen.getByText('Let me try')); + await user.click(nextBtn); + await user.click(screen.getByText('Let me try')); expect(onRequestCloseMock).toHaveBeenCalled(); }); @@ -66,12 +68,14 @@ describe('AppGuidedTour', () => { render(); expect(onRequestOpenMock).not.toHaveBeenCalled(); }); - it('Should set a local storage flag when closed', () => { + it('Should set a local storage flag when closed', async () => { + const user = userEvent.setup(); + const onCloseMock = jest.fn(); render(); const nextBtn = document.querySelector('button[data-tour-elem="right-arrow"]'); - userEvent.click(nextBtn); - userEvent.click(screen.getByText('Let me try')); + await user.click(nextBtn); + await user.click(screen.getByText('Let me try')); expect(localStorage.getItem(DEFAULT_LOCAL_STORAGE_KEY)).toBe('true'); }); it('Should not show demo content form if no step is provided', async () => { diff --git a/packages/components/src/ConfirmDialog/ConfirmDialog.test.js b/packages/components/src/ConfirmDialog/ConfirmDialog.test.js index 734764e460c..966c8989878 100644 --- a/packages/components/src/ConfirmDialog/ConfirmDialog.test.js +++ b/packages/components/src/ConfirmDialog/ConfirmDialog.test.js @@ -104,7 +104,9 @@ describe('ConfirmDialog', () => { expect(screen.getByLabelText('This is loading')).toHaveAttribute('aria-valuenow', '25'); }); - it('should render with additional actions', () => { + it('should render with additional actions', async () => { + const user = userEvent.setup(); + // given const properties = { header: 'Hello world', @@ -126,7 +128,7 @@ describe('ConfirmDialog', () => { // then expect(screen.getByText('Hello world')).toBeVisible(); expect(screen.getByText('Keep on Github')).toBeVisible(); - userEvent.click(screen.getByText('Keep on Github')); + await user.click(screen.getByText('Keep on Github')); expect(properties.secondaryActions[0].onClick).toHaveBeenCalled(); }); }); diff --git a/packages/components/src/Datalist/Datalist.component.js b/packages/components/src/Datalist/Datalist.component.js index 5a1872cf056..c1e0210d7b1 100644 --- a/packages/components/src/Datalist/Datalist.component.js +++ b/packages/components/src/Datalist/Datalist.component.js @@ -3,7 +3,6 @@ import { useState, useEffect } from 'react'; import PropTypes from 'prop-types'; import classNames from 'classnames'; import omit from 'lodash/omit'; -import keycode from 'keycode'; import get from 'lodash/get'; import Typeahead from '../Typeahead'; import theme from './Datalist.module.scss'; @@ -24,7 +23,7 @@ const DISPLAY = { }; function isValuePresentInSuggestions(titleMap, filterValue, multiSection) { - return !!multiSection + return multiSection ? titleMap.find(group => group.suggestions.find(item => filterValue.toLowerCase() === item.name.toLowerCase()), ) @@ -364,13 +363,14 @@ function Datalist(props) { newHighlightedItemIndex, newHighlightedSectionIndex, } = params; - switch (event.which) { - case keycode.codes.esc: + switch (event.key) { + case 'Esc': + case 'Escape': event.preventDefault(); resetFilter(); hideSuggestions(); break; - case keycode.codes.enter: + case 'Enter': if (!suggestions) { break; } @@ -386,8 +386,10 @@ function Datalist(props) { persistValue(event); } break; - case keycode.codes.down: - case keycode.codes.up: + case 'Down': + case 'ArrowDown': + case 'Up': + case 'ArrowUp': event.preventDefault(); if (!suggestions) { // display all suggestions when they are not displayed diff --git a/packages/components/src/Datalist/Datalist.component.test.js b/packages/components/src/Datalist/Datalist.component.test.js index 1c49e75049d..5b6e7c60928 100644 --- a/packages/components/src/Datalist/Datalist.component.test.js +++ b/packages/components/src/Datalist/Datalist.component.test.js @@ -1,4 +1,4 @@ -import { render, screen, fireEvent, waitFor } from '@testing-library/react'; +import { fireEvent, render, screen, waitFor } from '@testing-library/react'; import userEvent from '@testing-library/user-event'; import Datalist from './Datalist.component'; @@ -39,12 +39,14 @@ describe('Datalist component', () => { expect(screen.getByRole('textbox')).toBeInTheDocument(); }); - it('should show all suggestions on focus (even with a value)', () => { + it('should show all suggestions on focus (even with a value)', async () => { + const user = userEvent.setup(); + // given render(); // when - fireEvent.click(screen.getByRole('textbox')); + await user.click(screen.getByRole('textbox')); // then // container.getElementsByClassName(''); @@ -54,12 +56,14 @@ describe('Datalist component', () => { expect(screen.getByTitle('My mdr')).toBeInTheDocument(); }); - it('should show all suggestions on down press (even with a value)', () => { + it('should show all suggestions on down press (even with a value)', async () => { + const user = userEvent.setup(); + // given render(); // when - userEvent.type(screen.getByRole('textbox'), '{down}'); + await user.type(screen.getByRole('textbox'), '{Down}'); // then // container.getElementsByClassName(''); @@ -69,12 +73,14 @@ describe('Datalist component', () => { expect(screen.getByTitle('My mdr')).toBeInTheDocument(); }); - it('should show all suggestions on up press (even with a value)', () => { + it('should show all suggestions on up press (even with a value)', async () => { + const user = userEvent.setup(); + // given render(); // when - userEvent.type(screen.getByRole('textbox'), '{up}'); + await user.type(screen.getByRole('textbox'), '{Up}'); // then // container.getElementsByClassName(''); @@ -84,12 +90,15 @@ describe('Datalist component', () => { expect(screen.getByTitle('My mdr')).toBeInTheDocument(); }); - it('should show suggestions that match filter', () => { + it('should show suggestions that match filter', async () => { + const user = userEvent.setup(); + // given render(); // when - userEvent.type(screen.getByRole('textbox'), 'foo'); + const textbox = screen.getByRole('textbox'); + await user.type(textbox, 'foo'); // then // container.getElementsByClassName(''); @@ -99,13 +108,16 @@ describe('Datalist component', () => { expect(screen.queryByTitle('My mdr')).not.toBeInTheDocument(); }); - it('should show suggestions in group that match filter', () => { + it('should show suggestions in group that match filter', async () => { + const user = userEvent.setup(); + // given const multiSectionProps = { ...props, titleMap: multiSectionMap }; render(); // when - userEvent.type(screen.getByRole('textbox'), 'foo'); + const textbox = screen.getByRole('textbox'); + await user.type(textbox, 'foo'); // then expect(screen.getByTitle('My foo')).toBeInTheDocument(); @@ -114,7 +126,9 @@ describe('Datalist component', () => { expect(screen.queryByTitle('My lol')).not.toBeInTheDocument(); }); - it('should call callback on focus event', () => { + it('should call callback on focus event', async () => { + const user = userEvent.setup(); + // given const onFocus = jest.fn(); render(); @@ -122,13 +136,15 @@ describe('Datalist component', () => { expect(onFocus).not.toHaveBeenCalled(); // when - userEvent.click(input); + await user.click(input); // then expect(onFocus).toHaveBeenCalled(); }); - it('should call callback on input live change', () => { + it('should call callback on input live change', async () => { + const user = userEvent.setup(); + // given const onLiveChange = jest.fn(); render( @@ -137,13 +153,13 @@ describe('Datalist component', () => { const input = screen.getByRole('textbox'); // when - userEvent.type(input, 'lo'); + await user.type(input, 'lo'); // then expect(onLiveChange).toHaveBeenCalledWith(expect.anything(), 'lo'); }); - it('should call callback on blur', () => { + it('should call callback on blur', async () => { // given const onBlur = jest.fn(); render(); @@ -153,83 +169,87 @@ describe('Datalist component', () => { fireEvent.blur(input); // then - expect(onBlur).toHaveBeenCalled(); + await waitFor(() => expect(onBlur).toHaveBeenCalled()); }); - it('should close suggestions on blur', () => { + it('should close suggestions on blur', async () => { + const user = userEvent.setup(); + // given - jest.useFakeTimers(); render(); const input = screen.getByRole('textbox'); - fireEvent.click(input); + await user.click(input); expect(screen.getByRole('listbox')).toBeInTheDocument(); // when fireEvent.blur(input); - jest.runAllTimers(); // focus manager // then - expect(screen.queryByRole('listbox')).not.toBeInTheDocument(); - jest.useRealTimers(); + await waitFor(() => expect(screen.queryByRole('listbox')).not.toBeInTheDocument()); }); - it('should close suggestions on enter', () => { + it('should close suggestions on enter', async () => { + const user = userEvent.setup(); + // given render(); const input = screen.getByRole('textbox'); expect(screen.queryByRole('listbox')).not.toBeInTheDocument(); - userEvent.click(input); + await user.click(input); expect(screen.getByRole('listbox')).toBeInTheDocument(); // when - userEvent.type(input, '{enter}'); + await user.type(input, '{Enter}'); // then expect(screen.queryByRole('listbox')).not.toBeInTheDocument(); }); - it('should close suggestions on esc', () => { + it('should close suggestions on esc', async () => { + const user = userEvent.setup(); + // given render(); const input = screen.getByRole('textbox'); - fireEvent.click(input); + await user.click(input); expect(screen.getByRole('listbox')).toBeInTheDocument(); // when - userEvent.type(input, '{esc}'); + await user.type(input, '{Esc}'); // then expect(screen.queryByRole('listbox')).not.toBeInTheDocument(); }); - it('should clear input', () => { + it('should clear input', async () => { + const user = userEvent.setup(); + // given - jest.useFakeTimers(); const onChange = jest.fn(); render(); // when const input = screen.getByRole('textbox'); - userEvent.clear(input); + await user.clear(input); fireEvent.blur(input); - jest.runAllTimers(); // focus manager // then - expect(onChange).toHaveBeenCalledWith(expect.anything(), { value: '' }); - jest.useRealTimers(); + await waitFor(() => expect(onChange).toHaveBeenCalledWith(expect.anything(), { value: '' })); }); - it('should reset previous value on ESC keydown', () => { + it('should reset previous value on ESC keydown', async () => { + const user = userEvent.setup(); + // given const onChange = jest.fn(); render(); // when const input = screen.getByRole('textbox'); - userEvent.type(input, 'whatever{esc}'); + await user.type(input, 'whatever{Esc}'); // then expect(onChange).not.toHaveBeenCalled(); @@ -270,7 +290,9 @@ describe('Datalist component', () => { expect(screen.getByRole('textbox')).toHaveValue('My foo updated'); }); - it('should keep filter when titleMap is updated', () => { + it('should keep filter when titleMap is updated', async () => { + const user = userEvent.setup(); + // given const testProps = { id: 'my-datalist', @@ -281,14 +303,16 @@ describe('Datalist component', () => { const { rerender } = render(); // when - userEvent.type(screen.getByRole('textbox'), 'a'); + await user.type(screen.getByRole('textbox'), 'a'); rerender(); // then expect(screen.getByRole('textbox')).toHaveValue('a'); }); - it('should keep filter when titleMap is updated and value is empty', () => { + it('should keep filter when titleMap is updated and value is empty', async () => { + const user = userEvent.setup(); + // given const testProps = { id: 'my-datalist', @@ -299,7 +323,7 @@ describe('Datalist component', () => { const { rerender } = render(); // when - userEvent.type(screen.getByRole('textbox'), 'a'); + await user.type(screen.getByRole('textbox'), 'a'); rerender(); // then @@ -340,13 +364,15 @@ describe('Datalist component', () => { expect(screen.getByRole('textbox')).toHaveValue(newTitleMap[0].name); }); - it('should set highlight on current value suggestion', () => { + it('should set highlight on current value suggestion', async () => { + const user = userEvent.setup(); + // given render(); const input = screen.getByRole('textbox'); // when - userEvent.click(input); + await user.click(input); // then expect(screen.getByTitle('My foo')).toHaveClass('theme-selected'); @@ -355,42 +381,46 @@ describe('Datalist component', () => { }); describe('non restricted mode (default)', () => { - it('should persist known value on blur', () => { + it('should persist known value on blur', async () => { + const user = userEvent.setup(); + // given - jest.useFakeTimers(); const onChange = jest.fn(); render(); expect(onChange).not.toHaveBeenCalled(); // when const input = screen.getByRole('textbox'); - userEvent.type(input, 'foo'); + await user.type(input, 'foo'); fireEvent.blur(input); - jest.runAllTimers(); // focus manager // then - expect(onChange).toHaveBeenCalledWith(expect.anything(), { value: 'foo' }); - jest.useRealTimers(); + await waitFor(() => + expect(onChange).toHaveBeenCalledWith(expect.anything(), { value: 'foo' }), + ); }); - it('should persist unknown value on blur', () => { + it('should persist unknown value on blur', async () => { + const user = userEvent.setup(); + // given - jest.useFakeTimers(); const onChange = jest.fn(); render(); // when const input = screen.getByRole('textbox'); - userEvent.type(input, 'not a known value'); + await user.type(input, 'not a known value'); fireEvent.blur(input); - jest.runAllTimers(); // focus manager // then - expect(onChange).toHaveBeenCalledWith(expect.anything(), { value: 'not a known value' }); - jest.useRealTimers(); + await waitFor(() => + expect(onChange).toHaveBeenCalledWith(expect.anything(), { value: 'not a known value' }), + ); }); - it('should persist known value on enter', () => { + it('should persist known value on enter', async () => { + const user = userEvent.setup(); + // given const onChange = jest.fn(); render(); @@ -398,20 +428,22 @@ describe('Datalist component', () => { // when const input = screen.getByRole('textbox'); - userEvent.type(input, 'foo{enter}'); + await user.type(input, 'foo{enter}'); // then expect(onChange).toHaveBeenCalledWith(expect.anything(), { value: 'foo' }); }); - it('should persist unknown value on enter', () => { + it('should persist unknown value on enter', async () => { + const user = userEvent.setup(); + // given const onChange = jest.fn(); render(); // when const input = screen.getByRole('textbox'); - userEvent.type(input, 'not a known value{enter}'); + await user.type(input, 'not a known value{enter}'); // then expect(onChange).toHaveBeenCalledWith(expect.anything(), { value: 'not a known value' }); @@ -419,64 +451,69 @@ describe('Datalist component', () => { }); describe('allowAddNewElements mode', () => { - it('should persist new value on blur', () => { + it('should persist new value on blur', async () => { + const user = userEvent.setup(); + // given - jest.useFakeTimers(); const onChange = jest.fn(); render(); expect(onChange).not.toHaveBeenCalled(); const input = screen.getByRole('textbox'); // when - userEvent.type(input, 'not there'); + await user.type(input, 'not there'); expect(screen.getByTitle('not there (new)')).toBeInTheDocument(); fireEvent.blur(input); - jest.runAllTimers(); // focus manager - // // then - expect(onChange).toHaveBeenCalledWith(expect.anything(), { value: 'not there' }); - jest.useRealTimers(); + // then + await waitFor(() => + expect(onChange).toHaveBeenCalledWith(expect.anything(), { value: 'not there' }), + ); }); }); describe('restricted mode', () => { - it('should persist known value on blur', () => { + it('should persist known value on blur', async () => { + const user = userEvent.setup(); + // given - jest.useFakeTimers(); const onChange = jest.fn(); render(); expect(onChange).not.toHaveBeenCalled(); const input = screen.getByRole('textbox'); // when - userEvent.type(input, 'foo'); + await user.type(input, 'foo'); fireEvent.blur(input); - jest.runAllTimers(); // focus manager // then - expect(onChange).toHaveBeenCalledWith(expect.anything(), { value: 'foo' }); - jest.useRealTimers(); + await waitFor(() => + expect(onChange).toHaveBeenCalledWith(expect.anything(), { value: 'foo' }), + ); }); - it('should reset unknown value on blur', () => { + it('should reset unknown value on blur', async () => { + const user = userEvent.setup(); + // given - jest.useFakeTimers(); const onChange = jest.fn(); render(); // when const input = screen.getByRole('textbox'); - userEvent.type(input, 'not a known value'); + await user.type(input, 'not a known value'); fireEvent.blur(input); - jest.runAllTimers(); // focus manager // then - expect(onChange).not.toHaveBeenCalled(); - expect(input).toHaveValue('My foo'); - jest.useRealTimers(); + await Promise.all([ + waitFor(() => expect(onChange).not.toHaveBeenCalled()), + waitFor(() => expect(input).toHaveValue('My foo')), + ]); }); - it('should persist known value on enter', () => { + it('should persist known value on enter', async () => { + const user = userEvent.setup(); + // given const onChange = jest.fn(); render(); @@ -484,27 +521,35 @@ describe('Datalist component', () => { // when const input = screen.getByRole('textbox'); - userEvent.type(input, 'foo{enter}'); + await user.type(input, 'foo{Enter}'); // then - expect(onChange).toHaveBeenCalledWith(expect.anything(), { value: 'foo' }); + await waitFor(() => + expect(onChange).toHaveBeenCalledWith(expect.anything(), { value: 'foo' }), + ); }); - it('should reset unknown value on enter', () => { + it('should reset unknown value on enter', async () => { + const user = userEvent.setup(); + // given const onChange = jest.fn(); render(); // when const input = screen.getByRole('textbox'); - userEvent.type(input, 'not a known value{enter}'); + await user.type(input, 'not a known value{Enter}'); // then - expect(onChange).not.toHaveBeenCalled(); - expect(input).toHaveValue('My foo'); + await Promise.all([ + waitFor(() => expect(onChange).not.toHaveBeenCalled()), + waitFor(() => expect(input).toHaveValue('My foo')), + ]); }); - it('should persist empty value on enter', () => { + it('should persist empty value on enter', async () => { + const user = userEvent.setup(); + // given const onChange = jest.fn(); render(); @@ -512,29 +557,29 @@ describe('Datalist component', () => { // when const input = screen.getByRole('textbox'); - userEvent.clear(input); - userEvent.type(input, '{enter}'); + await user.clear(input); + await user.type(input, '{Enter}'); // then - expect(onChange).toHaveBeenCalledWith(expect.anything(), { value: '' }); + await waitFor(() => expect(onChange).toHaveBeenCalledWith(expect.anything(), { value: '' })); }); - it('should persist empty value on blur', () => { + it('should persist empty value on blur', async () => { + const user = userEvent.setup(); + // given - jest.useFakeTimers(); const onChange = jest.fn(); render(); expect(onChange).not.toHaveBeenCalled(); // when const input = screen.getByRole('textbox'); - userEvent.clear(input); + await user.clear(input); + fireEvent.blur(input); - jest.runAllTimers(); // focus manager // then - expect(onChange).toHaveBeenCalledWith(expect.anything(), { value: '' }); - jest.useRealTimers(); + await waitFor(() => expect(onChange).toHaveBeenCalledWith(expect.anything(), { value: '' })); }); }); }); diff --git a/packages/components/src/DateTimePickers/InputDateTimeRangePicker/InputDateTimeRangePicker.component.js b/packages/components/src/DateTimePickers/InputDateTimeRangePicker/InputDateTimeRangePicker.component.js index 0eaa380a01d..6593779cb2e 100644 --- a/packages/components/src/DateTimePickers/InputDateTimeRangePicker/InputDateTimeRangePicker.component.js +++ b/packages/components/src/DateTimePickers/InputDateTimeRangePicker/InputDateTimeRangePicker.component.js @@ -52,7 +52,7 @@ function InputDateTimeRangePicker(props) { const rangeContainer = containerRef.current; if ( rangeContainer && - rangeContainer.scrollWidth > rangeContainer.offsetParent.offsetWidth + rangeContainer.scrollWidth > rangeContainer.offsetParent?.offsetWidth ) { setVertical(true); } diff --git a/packages/components/src/DateTimePickers/InputDateTimeRangePicker/InputDateTimeRangePicker.component.test.js b/packages/components/src/DateTimePickers/InputDateTimeRangePicker/InputDateTimeRangePicker.component.test.js index 1a4ea5f3c48..191a7a349bc 100644 --- a/packages/components/src/DateTimePickers/InputDateTimeRangePicker/InputDateTimeRangePicker.component.test.js +++ b/packages/components/src/DateTimePickers/InputDateTimeRangePicker/InputDateTimeRangePicker.component.test.js @@ -23,9 +23,11 @@ describe('InputDateTimeRangePicker', () => { }); it('should works with default time', async () => { + const user = userEvent.setup(); + // when const onChange = jest.fn(); - const { container } = render( + render( { // then // start time - await userEvent.click(within(start).getByTestId('date-picker')); - await userEvent.click(within(start).getAllByText('10')[0]); + await user.click(within(start).getByTestId('date-picker')); + await user.click(within(start).getAllByText('10')[0]); // note first call seems to trigger a JS error... - await userEvent.click(within(start).getByTestId('time-picker')); - await userEvent.click(within(start).getByText('08:00')); + await user.click(within(start).getByTestId('time-picker')); + await user.click(within(start).getByText('08:00')); const payload = onChange.mock.calls[1][1]; expect(payload.errors.length).toBe(0); @@ -60,10 +62,10 @@ describe('InputDateTimeRangePicker', () => { ); // // end time - await userEvent.click(within(end).getByTestId('date-picker')); - await userEvent.click(within(end).getByText('13')); - await userEvent.click(within(end).getByTestId('time-picker')); - await userEvent.click(within(end).getByText('10:00')); + await user.click(within(end).getByTestId('date-picker')); + await user.click(within(end).getByText('13')); + await user.click(within(end).getByTestId('time-picker')); + await user.click(within(end).getByText('10:00')); const payloadEnd = onChange.mock.calls[3][1]; expect(payloadEnd.errors.length).toBe(0); diff --git a/packages/components/src/DateTimePickers/InputTimePicker/InputTimePicker.component.test.js b/packages/components/src/DateTimePickers/InputTimePicker/InputTimePicker.component.test.js index 3ff834ef0f3..d28b77245a3 100644 --- a/packages/components/src/DateTimePickers/InputTimePicker/InputTimePicker.component.test.js +++ b/packages/components/src/DateTimePickers/InputTimePicker/InputTimePicker.component.test.js @@ -8,35 +8,41 @@ jest.unmock('@talend/design-system'); describe('InputTimePicker', () => { describe('focus/blur', () => { it('should open picker on focus', async () => { + const user = userEvent.setup(); + // given render(); expect(screen.queryAllByRole('listitem').length).toBe(0); // when - await userEvent.click(screen.getByRole('textbox')); + await user.click(screen.getByRole('textbox')); const items = screen.queryAllByRole('listitem'); expect(items.length).toBe(24); - await userEvent.click(items[0]); + await user.click(items[0]); expect(screen.getByRole('textbox')).toHaveValue(items[0].textContent); }); it('should not open picker on focus when disabled', async () => { + const user = userEvent.setup(); + // given render(); // when - await userEvent.click(screen.getByRole('textbox')); + await user.click(screen.getByRole('textbox')); // then const items = screen.queryAllByRole('listitem'); expect(items.length).toBe(0); }); it('should close picker on blur', async () => { + const user = userEvent.setup(); + // given render(); - await userEvent.click(screen.getByRole('textbox')); + await user.click(screen.getByRole('textbox')); // when - await userEvent.keyboard('{Escape}'); + await user.keyboard('{Escape}'); // then const items = screen.queryAllByRole('listitem'); @@ -45,15 +51,17 @@ describe('InputTimePicker', () => { }); describe('on change', () => { it('should trigger props.onChange', async () => { + const user = userEvent.setup(); + // given const onChange = jest.fn(); render(); expect(onChange).not.toHaveBeenCalled(); // when - await userEvent.click(screen.getByRole('textbox')); - await userEvent.keyboard('15:45'); - await userEvent.click(screen.getByText('HH:mm')); + await user.click(screen.getByRole('textbox')); + await user.keyboard('15:45'); + await user.click(screen.getByText('HH:mm')); // then expect(onChange).toHaveBeenCalledWith(expect.anything(), { @@ -66,24 +74,28 @@ describe('InputTimePicker', () => { }); it('should close overlay', async () => { + const user = userEvent.setup(); + // given render(); - await userEvent.click(screen.getByRole('textbox')); + await user.click(screen.getByRole('textbox')); // when - await userEvent.click(screen.queryAllByRole('listitem')[0]); + await user.click(screen.queryAllByRole('listitem')[0]); // then expect(screen.queryAllByRole('listitem').length).toBe(0); }); it('should NOT close from input change', async () => { + const user = userEvent.setup(); + // given render(); - await userEvent.click(screen.getByRole('textbox')); + await user.click(screen.getByRole('textbox')); // when - await userEvent.keyboard('15'); + await user.keyboard('15'); // then expect(screen.queryAllByRole('listitem').length).toBe(24); @@ -91,38 +103,44 @@ describe('InputTimePicker', () => { }); describe('keydown', () => { it('should close the picker and focus on input with ESC', async () => { + const user = userEvent.setup(); + // given render(); - await userEvent.click(screen.getByRole('textbox')); + await user.click(screen.getByRole('textbox')); // when - await userEvent.keyboard('{Escape}'); + await user.keyboard('{Escape}'); // then expect(screen.queryAllByRole('listitem').length).toBe(0); }); it('should open picker if it is closed with DOWN on input', async () => { + const user = userEvent.setup(); + // given render(); - await userEvent.click(screen.getByRole('textbox')); - await userEvent.keyboard('{Escape}'); + await user.click(screen.getByRole('textbox')); + await user.keyboard('{Escape}'); expect(screen.queryAllByRole('listitem').length).toBe(0); // when - await userEvent.keyboard('{ArrowDown}'); + await user.keyboard('{ArrowDown}'); // then expect(screen.queryAllByRole('listitem').length).toBe(24); }); it('should focus on time option if it is open with input DOWN', async () => { + const user = userEvent.setup(); + // given render(, { attachTo: document.body }); - await userEvent.click(screen.getByRole('textbox')); + await user.click(screen.getByRole('textbox')); // when - await userEvent.keyboard('{ArrowDown}'); + await user.keyboard('{ArrowDown}'); // then expect(screen.getAllByRole('listitem')[0]).toHaveFocus(); diff --git a/packages/components/src/DateTimePickers/LegacyDateTimePickers/pickers/YearPicker/YearPicker.test.js b/packages/components/src/DateTimePickers/LegacyDateTimePickers/pickers/YearPicker/YearPicker.test.js index c5dd31a3135..a27498707a7 100644 --- a/packages/components/src/DateTimePickers/LegacyDateTimePickers/pickers/YearPicker/YearPicker.test.js +++ b/packages/components/src/DateTimePickers/LegacyDateTimePickers/pickers/YearPicker/YearPicker.test.js @@ -36,7 +36,9 @@ describe('YearPicker', () => { expect(buttons[3]).toHaveTextContent('2025'); }); - it('should callback with the year picked', () => { + it('should callback with the year picked', async () => { + const user = userEvent.setup(); + // given const firstSelectableYear = 2011; const selectedYear = 2014; @@ -45,30 +47,34 @@ describe('YearPicker', () => { expect(onSelect).not.toHaveBeenCalled(); // when - userEvent.click(screen.getByText('2011')); + await user.click(screen.getByText('2011')); expect(onSelect).toHaveBeenCalledWith(expect.anything(), firstSelectableYear); }); - it('should scroll up by 1 year', () => { + it('should scroll up by 1 year', async () => { + const user = userEvent.setup(); + // given render(); expect(screen.getAllByRole('button')[0]).toHaveTextContent('2009'); // when - userEvent.click(screen.getByLabelText('Go to previous year')); + await user.click(screen.getByLabelText('Go to previous year')); // then expect(screen.getAllByRole('button')[0]).toHaveTextContent('2008'); }); - it('should scroll down by 1 year', () => { + it('should scroll down by 1 year', async () => { + const user = userEvent.setup(); + // given render(); expect(screen.getAllByRole('button')[6]).toHaveTextContent('2015'); // when - userEvent.click(screen.getByLabelText('Go to next year')); + await user.click(screen.getByLabelText('Go to next year')); // then expect(screen.getAllByRole('button')[6]).toHaveTextContent('2016'); diff --git a/packages/components/src/DateTimePickers/LegacyDateTimePickers/views/DateTimeView/DateTimeView.test.js b/packages/components/src/DateTimePickers/LegacyDateTimePickers/views/DateTimeView/DateTimeView.test.js index e758fcec7db..795b66dbcec 100644 --- a/packages/components/src/DateTimePickers/LegacyDateTimePickers/views/DateTimeView/DateTimeView.test.js +++ b/packages/components/src/DateTimePickers/LegacyDateTimePickers/views/DateTimeView/DateTimeView.test.js @@ -1,7 +1,6 @@ /* eslint-disable react/display-name */ import { render, screen } from '@testing-library/react'; import userEvent from '@testing-library/user-event'; -import { ButtonIcon } from '@talend/design-system'; import DateTimeView from './DateTimeView.component'; @@ -13,18 +12,6 @@ jest.mock('../../pickers/TimePicker', () => props => (
)); -function getActions(wrapper) { - return wrapper.find('ViewLayout').shallow().find(ButtonIcon); -} - -function clickOnPreviousMonth(wrapper) { - getActions(wrapper).first().simulate('click'); -} - -function clickOnNextMonth(wrapper) { - getActions(wrapper).last().simulate('click'); -} - describe('DateTimeView', () => { it('should render', () => { // when @@ -71,7 +58,8 @@ describe('DateTimeView', () => { expect(screen.queryByTestId('TimePicker')).not.toBeInTheDocument(); }); - it('should trigger props.onTitleClick when title is clicked', () => { + it('should trigger props.onTitleClick when title is clicked', async () => { + const user = userEvent.setup(); // given const onTitleClick = jest.fn(); render( @@ -89,7 +77,7 @@ describe('DateTimeView', () => { expect(onTitleClick).not.toHaveBeenCalled(); // when - userEvent.click(screen.getByText('June 2006')); + await user.click(screen.getByText('June 2006')); // then expect(onTitleClick).toHaveBeenCalled(); @@ -155,7 +143,9 @@ describe('DateTimeView', () => { button: 'next', expectedMonthYear: { monthIndex: 0, year: 2007 }, }, - ])('$name', ({ calendar, button, expectedMonthYear }) => { + ])('$name', async ({ calendar, button, expectedMonthYear }) => { + const user = userEvent.setup(); + // given const onSelectMonthYear = jest.fn(); render( @@ -171,9 +161,9 @@ describe('DateTimeView', () => { // when if (button === 'previous') { - userEvent.click(screen.getByLabelText('Go to previous month')); + await user.click(screen.getByLabelText('Go to previous month')); } else if (button === 'next') { - userEvent.click(screen.getByLabelText('Go to next month')); + await user.click(screen.getByLabelText('Go to next month')); } // then diff --git a/packages/components/src/DateTimePickers/hooks/useInputPickerHandlers.js b/packages/components/src/DateTimePickers/hooks/useInputPickerHandlers.js index 69618c157f0..543b1005870 100644 --- a/packages/components/src/DateTimePickers/hooks/useInputPickerHandlers.js +++ b/packages/components/src/DateTimePickers/hooks/useInputPickerHandlers.js @@ -1,5 +1,4 @@ import { useState } from 'react'; -import keycode from 'keycode'; export default function useInputPickerHandlers({ disabled = false, @@ -46,12 +45,14 @@ export default function useInputPickerHandlers({ } } function onKeyDown(event, inputRef) { - switch (event.keyCode) { - case keycode.codes.esc: + switch (event.key) { + case 'Esc': + case 'Escape': inputRef.focus(); closePicker(); break; - case keycode.codes.down: + case 'Down': + case 'ArrowDown': if (event.target !== inputRef) { return; } diff --git a/packages/components/src/DateTimePickers/pickers/CalendarPicker/CalendarPicker.test.js b/packages/components/src/DateTimePickers/pickers/CalendarPicker/CalendarPicker.test.js index dbf7e7da3f0..d524ddb7b3b 100644 --- a/packages/components/src/DateTimePickers/pickers/CalendarPicker/CalendarPicker.test.js +++ b/packages/components/src/DateTimePickers/pickers/CalendarPicker/CalendarPicker.test.js @@ -84,22 +84,26 @@ describe('CalendarPicker', () => { expect(screen.getByLabelText('Date picker')).toHaveAttribute('tabIndex', '-1'); }); - it('should allow focus when active element is in picker', () => { + it('should allow focus when active element is in picker', async () => { + const user = userEvent.setup(); + // given render( {}} />); - userEvent.click(screen.getByLabelText('Date picker')); // focus by click + await user.click(screen.getByLabelText('Date picker')); // focus by click // then expect(screen.getByLabelText('Date picker')).toHaveAttribute('tabIndex', '0'); }); - it('should disable focus when active element is out of picker', () => { + it('should disable focus when active element is out of picker', async () => { + const user = userEvent.setup(); + // given render( {}} />); - userEvent.click(screen.getByLabelText('Date picker')); // focus by click + await user.click(screen.getByLabelText('Date picker')); // focus by click // when - userEvent.click(document.body); // focus out of picker + await user.click(document.body); // focus out of picker // then expect(screen.getByLabelText('Date picker')).toHaveAttribute('tabIndex', '-1'); @@ -107,37 +111,43 @@ describe('CalendarPicker', () => { }); describe('view switching', () => { - it('should switch state to MonthYearView when header title of DateView is clicked', () => { + it('should switch state to MonthYearView when header title of DateView is clicked', async () => { + const user = userEvent.setup(); + // given render( {}} />); // when - userEvent.click(screen.getByText('onTitleClick')); + await user.click(screen.getByText('onTitleClick')); // then expect(screen.getByTestId('MonthYearView')).toBeInTheDocument(); expect(screen.queryByTestId('DateView')).not.toBeInTheDocument(); }); - it('should switch state to DateView when header back action of MonthYearView is clicked', () => { + it('should switch state to DateView when header back action of MonthYearView is clicked', async () => { + const user = userEvent.setup(); + // given render( {}} />); - userEvent.click(screen.getByText('onTitleClick')); + await user.click(screen.getByText('onTitleClick')); // when - userEvent.click(screen.getByText('onBackClick')); + await user.click(screen.getByText('onBackClick')); // then expect(screen.getByTestId('DateView')).toBeInTheDocument(); expect(screen.queryByTestId('MonthYearView')).not.toBeInTheDocument(); }); - it('should switch to new month/year value from day picker', () => { + it('should switch to new month/year value from day picker', async () => { + const user = userEvent.setup(); + // given render( {}} />); // when - userEvent.click(screen.getByText('onSelectMonthYear')); + await user.click(screen.getByText('onSelectMonthYear')); // then` const props = JSON.parse(screen.getByTestId('DateView').getAttribute('data-props')); @@ -145,28 +155,32 @@ describe('CalendarPicker', () => { expect(props.calendar.year).toBe(2019); }); - it('should switch to new month from monthYear picker', () => { + it('should switch to new month from monthYear picker', async () => { + const user = userEvent.setup(); + // given const selectedDate = new Date(2018, 10, 12); render( {}} selectedDate={selectedDate} />); - userEvent.click(screen.getByText('onTitleClick')); + await user.click(screen.getByText('onTitleClick')); // when - userEvent.click(screen.getByText('onSelectMonth')); + await user.click(screen.getByText('onSelectMonth')); // then const props = JSON.parse(screen.getByTestId('MonthYearView').getAttribute('data-props')); expect(props.selectedMonthIndex).toBe(5); }); - it('should switch to new year from monthYear picker', () => { + it('should switch to new year from monthYear picker', async () => { + const user = userEvent.setup(); + // given const selectedDate = new Date(2018, 10, 12); render( {}} selectedDate={selectedDate} />); - userEvent.click(screen.getByText('onTitleClick')); + await user.click(screen.getByText('onTitleClick')); // when - userEvent.click(screen.getByText('onSelectYear')); + await user.click(screen.getByText('onSelectYear')); // then const props = JSON.parse(screen.getByTestId('MonthYearView').getAttribute('data-props')); @@ -189,7 +203,9 @@ describe('CalendarPicker', () => { expect(props.selectedDate).toBe(d2.toISOString()); }); - it('should update state and submit on date picked', () => { + it('should update state and submit on date picked', async () => { + const user = userEvent.setup(); + // given const initialDate = new Date(2015, 10, 18); const date = new Date(2018, 2, 5); @@ -198,7 +214,7 @@ describe('CalendarPicker', () => { render(); // when - userEvent.click(screen.getByText('onSelectDate')); + await user.click(screen.getByText('onSelectDate')); // then expect(onSubmit).toHaveBeenCalledWith(expect.anything({ type: 'click' }), { date }); @@ -206,13 +222,15 @@ describe('CalendarPicker', () => { }); describe('today function', () => { - it('should switch state to DateTimeView when Today is clicked', () => { + it('should switch state to DateTimeView when Today is clicked', async () => { + const user = userEvent.setup(); + // given render( {}} />); - userEvent.click(screen.getByText('onTitleClick')); + await user.click(screen.getByText('onTitleClick')); // when - userEvent.click(screen.getByText('Today')); + await user.click(screen.getByText('Today')); // then expect(screen.getByTestId('DateView')).toBeInTheDocument(); diff --git a/packages/components/src/DateTimePickers/pickers/DatePicker/DatePicker.test.js b/packages/components/src/DateTimePickers/pickers/DatePicker/DatePicker.test.js index bc702399146..70243a3792f 100644 --- a/packages/components/src/DateTimePickers/pickers/DatePicker/DatePicker.test.js +++ b/packages/components/src/DateTimePickers/pickers/DatePicker/DatePicker.test.js @@ -171,7 +171,9 @@ describe('DatePicker', () => { expect(startDateTableCell).toHaveClass('theme-date-range'); }); - it('should select date', () => { + it('should select date', async () => { + const user = userEvent.setup(); + // given const calendar = { year: YEAR, monthIndex: MONTH_INDEX }; const onSelect = jest.fn(); @@ -186,7 +188,7 @@ describe('DatePicker', () => { expect(onSelect).not.toHaveBeenCalled(); // when - userEvent.click(screen.getAllByText('1')[0]); + await user.click(screen.getAllByText('1')[0]); // then expect(onSelect).toHaveBeenCalledWith(expect.anything(), new Date(YEAR, MONTH_INDEX, 1)); @@ -234,7 +236,9 @@ describe('DatePicker', () => { expect(screen.getAllByRole('button')).toHaveLength(6 * 7); }); - it('should go to next month if select a date of next month', () => { + it('should go to next month if select a date of next month', async () => { + const user = userEvent.setup(); + const year = 2019; const monthIndex = 11; const calendar = { year, monthIndex }; @@ -246,7 +250,7 @@ describe('DatePicker', () => { goToNextMonth: jest.fn(), }; render(); - userEvent.click(screen.getAllByText('4')[1]); + await user.click(screen.getAllByText('4')[1]); const selectedDate = new Date(year + 1, 0, 4); expect(props.onSelect).toHaveBeenCalledWith(expect.anything(), selectedDate); expect(props.goToNextMonth).toHaveBeenCalled(); diff --git a/packages/components/src/DateTimePickers/views/DateView/DateView.test.js b/packages/components/src/DateTimePickers/views/DateView/DateView.test.js index bc34981c843..fe045c2c271 100644 --- a/packages/components/src/DateTimePickers/views/DateView/DateView.test.js +++ b/packages/components/src/DateTimePickers/views/DateView/DateView.test.js @@ -31,7 +31,9 @@ describe('DateView', () => { expect(container.firstChild).toMatchSnapshot(); }); - it('should trigger props.onTitleClick when title is clicked', () => { + it('should trigger props.onTitleClick when title is clicked', async () => { + const user = userEvent.setup(); + // given const onTitleClick = jest.fn(); render( @@ -49,7 +51,7 @@ describe('DateView', () => { expect(onTitleClick).not.toHaveBeenCalled(); // when - userEvent.click(screen.getByLabelText('Switch to month-and-year view')); + await user.click(screen.getByLabelText('Switch to month-and-year view')); // then expect(onTitleClick).toHaveBeenCalled(); @@ -118,7 +120,9 @@ describe('DateView', () => { button: 'next', expectedMonthYear: { monthIndex: 0, year: 2007 }, }, - ])('$name', ({ calendar, button, expectedMonthYear }) => { + ])('$name', async ({ calendar, button, expectedMonthYear }) => { + const user = userEvent.setup(); + // given const onSelectMonthYear = jest.fn(); render( @@ -134,9 +138,9 @@ describe('DateView', () => { // when if (button === 'previous') { - userEvent.click(screen.getByLabelText('Go to previous month')); + await user.click(screen.getByLabelText('Go to previous month')); } else if (button === 'next') { - userEvent.click(screen.getByLabelText('Go to next month')); + await user.click(screen.getByLabelText('Go to next month')); } // then diff --git a/packages/components/src/Enumeration/Items/Item/ItemEdit.component.js b/packages/components/src/Enumeration/Items/Item/ItemEdit.component.js index 0ca8627d00f..0dc1eb2a607 100644 --- a/packages/components/src/Enumeration/Items/Item/ItemEdit.component.js +++ b/packages/components/src/Enumeration/Items/Item/ItemEdit.component.js @@ -1,7 +1,6 @@ import PropTypes from 'prop-types'; import { Component } from 'react'; import classNames from 'classnames'; -import keycode from 'keycode'; import { withTranslation } from 'react-i18next'; import Action from '../../../Actions/Action'; @@ -44,11 +43,12 @@ class ItemEdit extends Component { } onKeyDown(event) { - switch (event.keyCode) { - case keycode('escape'): + switch (event.key) { + case 'Esc': + case 'Escape': this.cancel(event); break; - case keycode('enter'): + case 'Enter': this.submit(event); break; default: @@ -144,6 +144,7 @@ class ItemEdit extends Component { type="text" onKeyDown={this.onKeyDown} onChange={this.itemChange} + // eslint-disable-next-line jsx-a11y/no-autofocus autoFocus />
diff --git a/packages/components/src/Enumeration/Items/Item/ItemEdit.test.js b/packages/components/src/Enumeration/Items/Item/ItemEdit.test.js index 6494ab45db0..4ee10eb63aa 100644 --- a/packages/components/src/Enumeration/Items/Item/ItemEdit.test.js +++ b/packages/components/src/Enumeration/Items/Item/ItemEdit.test.js @@ -31,7 +31,9 @@ describe('Item', () => { beforeEach(() => { jest.resetAllMocks(); }); - it('should display value with two buttons and trigger callback on button title click', () => { + it('should display value with two buttons and trigger callback on button title click', async () => { + const user = userEvent.setup(); + // given const props = { item, @@ -44,13 +46,15 @@ describe('Item', () => { render(); // when - userEvent.click(screen.getByLabelText('Cancel')); + await user.click(screen.getByLabelText('Cancel')); // then expect(props.item.itemProps.actions[1].onClick).toHaveBeenCalled(); }); - it('should trigger callback on input title ENTER', () => { + it('should trigger callback on input title ENTER', async () => { + const user = userEvent.setup(); + // given const props = { item, @@ -83,10 +87,10 @@ describe('Item', () => { // when const input = screen.getAllByRole('gridcell')[0]; - userEvent.click(input); + await user.click(input); input.value = ''; - userEvent.type(input, 'my new title'); - userEvent.keyboard('{Enter}'); + await user.type(input, 'my new title'); + await user.keyboard('{Enter}'); // then expect(props.item.itemProps.onSubmitItem).toHaveBeenCalled(); @@ -94,7 +98,9 @@ describe('Item', () => { expect(callArgs[1]).toEqual({ value: 'my new title', model: props.item, index: 0 }); }); - it('should trigger callback on input title ESC', () => { + it('should trigger callback on input title ESC', async () => { + const user = userEvent.setup(); + // given const props = { item, @@ -124,8 +130,8 @@ describe('Item', () => { // when render(); - userEvent.click(screen.getAllByRole('gridcell')[0]); - userEvent.keyboard('{Escape}'); + await user.click(screen.getAllByRole('gridcell')[0]); + await user.keyboard('{Escape}'); // then expect(props.item.itemProps.onAbortItem).toHaveBeenCalled(); diff --git a/packages/components/src/HeaderBar/HeaderBar.test.js b/packages/components/src/HeaderBar/HeaderBar.test.js index 0ddb1d785ed..2bcb37159d1 100644 --- a/packages/components/src/HeaderBar/HeaderBar.test.js +++ b/packages/components/src/HeaderBar/HeaderBar.test.js @@ -9,7 +9,9 @@ describe('HeaderBar', () => { expect(container.firstChild).toMatchSnapshot(); }); - it('should render logo', () => { + it('should render logo', async () => { + const user = userEvent.setup(); + // GIVEN const logo = { id: 'logo', @@ -27,7 +29,7 @@ describe('HeaderBar', () => { expect(element).toHaveAttribute('aria-label', logo.label); // THEN trigger onClick - userEvent.click(element); + await user.click(element); expect(logo.onClick).toHaveBeenCalled(); }); @@ -77,7 +79,9 @@ describe('HeaderBar', () => { expect(element).toHaveTextContent('Intercom chat'); }); - it('should render search', () => { + it('should render search', async () => { + const user = userEvent.setup(); + // GIVEN const search = { id: 'search', @@ -97,11 +101,13 @@ describe('HeaderBar', () => { expect(element).toBeVisible(); // THEN trigger onClick - userEvent.click(element); + await user.click(element); expect(search.onToggle).toHaveBeenCalled(); }); - it('should render help', () => { + it('should render help', async () => { + const user = userEvent.setup(); + // GIVEN const help = { id: 'help', @@ -114,13 +120,15 @@ describe('HeaderBar', () => { const element = screen.getAllByRole('button')[1]; expect(element).toHaveAttribute('aria-label', 'Help'); // THEN trigger onClick - userEvent.click(element); + await user.click(element); expect(help.onClick).toHaveBeenCalled(); }); - it('should render user', () => { + it('should render user', async () => { + const user = userEvent.setup(); + // GIVEN - const user = { + const userIdentity = { id: 'user', items: [ { @@ -136,23 +144,25 @@ describe('HeaderBar', () => { onClick: jest.fn(), }; // WHEN - render(); + render(); // THEN check user button const userBtn = screen.getAllByRole('button').find(btn => btn.id === 'user'); - expect(userBtn).toHaveTextContent(user.name); + expect(userBtn).toHaveTextContent(userIdentity.name); expect(userBtn).toHaveAttribute('aria-expanded', 'false'); // THEN trigger user onClick - userEvent.click(userBtn); + await user.click(userBtn); expect(userBtn).toHaveAttribute('aria-expanded', 'true'); // THEN check user button const settingsLink = screen.getAllByRole('menuitem')[0]; - expect(settingsLink).toHaveTextContent(user.items[0].label); + expect(settingsLink).toHaveTextContent(userIdentity.items[0].label); // THEN check settings onClick - userEvent.click(settingsLink); - expect(user.items[0].onClick).toHaveBeenCalled(); + await user.click(settingsLink); + expect(userIdentity.items[0].onClick).toHaveBeenCalled(); }); - it('should render products', () => { + it('should render products', async () => { + const user = userEvent.setup(); + const products = { items: [ { @@ -186,18 +196,20 @@ describe('HeaderBar', () => { const brandBtn = screen.getAllByRole('button').find(btn => btn.id === 'brand'); expect(brandBtn).toHaveTextContent(brand.label); // THEN trigger brand onClick - userEvent.click(brandBtn); + await user.click(brandBtn); expect(brandBtn).toHaveAttribute('aria-expanded', 'true'); // THEN check user button const tdpLink = screen.getAllByRole('menuitem')[0]; expect(tdpLink).toHaveTextContent(products.items[0].label); // THEN check TDP onClick - userEvent.click(tdpLink); + await user.click(tdpLink); expect(products.items[0].onClick).toHaveBeenCalled(); }); - it('should render genericAction', () => { + it('should render genericAction', async () => { + const user = userEvent.setup(); + // GIVEN const genericAction = { id: 'generic-action', @@ -211,7 +223,7 @@ describe('HeaderBar', () => { const element = screen.getAllByRole('button')[1]; expect(element).toHaveAttribute('aria-label', genericAction.label); // THEN trigger onClick - userEvent.click(element); + await user.click(element); expect(genericAction.onClick).toHaveBeenCalled(); }); }); diff --git a/packages/components/src/List/ListComposition/ColumnChooser/ColumnChooser.component.test.js b/packages/components/src/List/ListComposition/ColumnChooser/ColumnChooser.component.test.js index b3e3692af23..c34c2a9e1bc 100644 --- a/packages/components/src/List/ListComposition/ColumnChooser/ColumnChooser.component.test.js +++ b/packages/components/src/List/ListComposition/ColumnChooser/ColumnChooser.component.test.js @@ -1,4 +1,4 @@ -import { screen, render } from '@testing-library/react'; +import { screen, render, act } from '@testing-library/react'; import userEvent from '@testing-library/user-event'; import ColumnChooser from './ColumnChooser.component'; import { ListContext } from '../context'; @@ -30,7 +30,7 @@ describe('ColumnChooser', () => { // then expect(screen.getByRole('button')).toBeVisible(); - screen.getByRole('button').focus(); // trigger the tooltip + act(() => screen.getByRole('button').focus()); // trigger the tooltip expect(screen.getByText('Open the column chooser')).toBeVisible(); }); diff --git a/packages/components/src/List/ListToVirtualizedList/ListToVirtualizedList.test.js b/packages/components/src/List/ListToVirtualizedList/ListToVirtualizedList.test.js index e3fbf85308d..0ed086f8e1c 100644 --- a/packages/components/src/List/ListToVirtualizedList/ListToVirtualizedList.test.js +++ b/packages/components/src/List/ListToVirtualizedList/ListToVirtualizedList.test.js @@ -157,6 +157,8 @@ describe('ListToVirtualizedList', () => { }); it('should find renderer based on column type', async () => { + const user = userEvent.setup(); + // given const renderer = function test() { return 'ok'; @@ -165,7 +167,7 @@ describe('ListToVirtualizedList', () => { render(); // when - await userEvent.click(screen.getByText('getProps')); + await user.click(screen.getByText('getProps')); const renderProps = VirtualizedList.getProps.mock.calls[0][0]; const CellActions = VirtualizedList.cellDictionary.actions; const CellBadge = VirtualizedList.cellDictionary.badge; @@ -180,6 +182,8 @@ describe('ListToVirtualizedList', () => { }); it('should support custom header renderer', async () => { + const user = userEvent.setup(); + // given const renderer = function test() { return 'ok'; @@ -188,7 +192,7 @@ describe('ListToVirtualizedList', () => { render(); // when - await userEvent.click(screen.getByText('getProps')); + await user.click(screen.getByText('getProps')); const renderProps = VirtualizedList.getProps.mock.calls[0][0]; // then @@ -198,13 +202,15 @@ describe('ListToVirtualizedList', () => { }); it('should support column hide feature', async () => { + const user = userEvent.setup(); + // given const hideProps = cloneDeep(props); hideProps.columns.find(column => column.label === 'Tag').hidden = true; render(); // when - await userEvent.click(screen.getByText('getProps')); + await user.click(screen.getByText('getProps')); const renderProps = VirtualizedList.getProps.mock.calls[0][0]; // then @@ -232,6 +238,8 @@ describe('ListToVirtualizedList', () => { }); it('should adapt sort onChange', async () => { + const user = userEvent.setup(); + // given const onChange = jest.fn(); render( @@ -239,7 +247,7 @@ describe('ListToVirtualizedList', () => { ); // when - userEvent.click(screen.getByText('getProps')); + await user.click(screen.getByText('getProps')); const virtualizedProps = VirtualizedList.getProps.mock.calls[0][0]; virtualizedProps.sort({ sortBy: 'name', sortDirection: VirtualizedList.SORT_BY.DESC }); @@ -247,13 +255,15 @@ describe('ListToVirtualizedList', () => { expect(onChange).toHaveBeenCalledWith(null, { field: 'name', isDescending: true }); }); - it('should adapt selection isSelected', () => { + it('should adapt selection isSelected', async () => { + const user = userEvent.setup(); + // given const isSelected = jest.fn(); render(); // when - userEvent.click(screen.getByText('getProps')); + await user.click(screen.getByText('getProps')); const virtualizedProps = VirtualizedList.getProps.mock.calls[0][0]; virtualizedProps.isSelected(props.items[0]); @@ -261,14 +271,16 @@ describe('ListToVirtualizedList', () => { expect(isSelected).toHaveBeenCalledWith(props.items[0]); }); - it('should adapt selection onToggle', () => { + it('should adapt selection onToggle', async () => { + const user = userEvent.setup(); + // given const onToggle = jest.fn(); const event = { target: {} }; render(); // when - userEvent.click(screen.getByText('getProps')); + await user.click(screen.getByText('getProps')); const virtualizedProps = VirtualizedList.getProps.mock.calls[0][0]; virtualizedProps.selectionToggle(event, props.items[0]); @@ -276,14 +288,16 @@ describe('ListToVirtualizedList', () => { expect(onToggle).toHaveBeenCalledWith(event, props.items[0]); }); - it('should adapt click onRowClick', () => { + it('should adapt click onRowClick', async () => { + const user = userEvent.setup(); + // given const onRowClick = jest.fn(); const event = { target: {} }; render(); // when - userEvent.click(screen.getByText('getProps')); + await user.click(screen.getByText('getProps')); const virtualizedProps = VirtualizedList.getProps.mock.calls[0][0]; virtualizedProps.onRowClick(event, props.items[0]); @@ -291,14 +305,16 @@ describe('ListToVirtualizedList', () => { expect(onRowClick).toHaveBeenCalledWith(event, props.items[0]); }); - it('should adapt click onRowDoubleClick', () => { + it('should adapt click onRowDoubleClick', async () => { + const user = userEvent.setup(); + // given props.titleProps.onClick = jest.fn(); const event = { target: {} }; render(); // when - userEvent.click(screen.getByText('getProps')); + await user.click(screen.getByText('getProps')); const virtualizedProps = VirtualizedList.getProps.mock.calls[0][0]; virtualizedProps.onRowDoubleClick(event, props.items[0]); @@ -306,13 +322,15 @@ describe('ListToVirtualizedList', () => { expect(props.titleProps.onClick).toHaveBeenCalledWith(event, props.items[0]); }); - it('should adapt selection isActive', () => { + it('should adapt selection isActive', async () => { + const user = userEvent.setup(); + // given const isActive = jest.fn(); render(); // when - userEvent.click(screen.getByText('getProps')); + await user.click(screen.getByText('getProps')); const virtualizedProps = VirtualizedList.getProps.mock.calls[0][0]; virtualizedProps.isActive(props.items[0]); diff --git a/packages/components/src/ObjectViewer/JSONLike/JSONLike.test.js b/packages/components/src/ObjectViewer/JSONLike/JSONLike.test.js index 7009114f4d5..aec3f7e8b12 100644 --- a/packages/components/src/ObjectViewer/JSONLike/JSONLike.test.js +++ b/packages/components/src/ObjectViewer/JSONLike/JSONLike.test.js @@ -291,7 +291,9 @@ describe('JSONLike', () => { expect(screen.getByTestId('injected')).toHaveTextContent('hello world'); }); - it("should toggle item but don't trigger form submit", () => { + it("should toggle item but don't trigger form submit", async () => { + const user = userEvent.setup(); + // GIVEN const mockOnToggle = jest.fn(); const mockOnSubmitClick = jest.fn(); @@ -315,7 +317,7 @@ describe('JSONLike', () => { expect(mockOnToggle).not.toHaveBeenCalled(); expect(mockOnSubmitClick).not.toHaveBeenCalled(); // WHEN - userEvent.click( + await user.click( screen.getByRole('link', { hidden: true, }), @@ -325,7 +327,9 @@ describe('JSONLike', () => { expect(mockOnSubmitClick).not.toHaveBeenCalled(); }); - it('should select item', () => { + it('should select item', async () => { + const user = userEvent.setup(); + // GIVEN const mockOnSelect = jest.fn(); // WHEN @@ -343,7 +347,7 @@ describe('JSONLike', () => { expect(mockOnSelect).not.toHaveBeenCalled(); // WHEN - userEvent.click(screen.getByRole('treeitem')); + await user.click(screen.getByRole('treeitem')); // THEN expect(mockOnSelect).toHaveBeenCalled(); }); diff --git a/packages/components/src/Typeahead/Typeahead.test.js b/packages/components/src/Typeahead/Typeahead.test.js index db4cb4a61cb..d793b9cbb34 100644 --- a/packages/components/src/Typeahead/Typeahead.test.js +++ b/packages/components/src/Typeahead/Typeahead.test.js @@ -145,7 +145,9 @@ describe('Typeahead', () => { expect(screen.getByRole('button')).toBeVisible(); }); - it('should call onToggle', () => { + it('should call onToggle', async () => { + const user = userEvent.setup(); + // given const props = { ...initialProps, @@ -155,7 +157,7 @@ describe('Typeahead', () => { // when render(); - userEvent.click(screen.getByRole('button')); + await user.click(screen.getByRole('button')); // then expect(props.onToggle).toHaveBeenCalled(); @@ -163,7 +165,9 @@ describe('Typeahead', () => { }); describe('input', () => { - it('should call onChange', () => { + it('should call onChange', async () => { + const user = userEvent.setup(); + // given const onChange = jest.fn(); const props = { @@ -173,13 +177,15 @@ describe('Typeahead', () => { // when render(); - userEvent.type(screen.getByRole('textbox'), 'toto'); + await user.type(screen.getByRole('textbox'), 'toto'); // then expect(onChange).toHaveBeenCalled(); }); - it('should call onBlur', () => { + it('should call onBlur', async () => { + const user = userEvent.setup(); + // given const onBlur = jest.fn(); const props = { @@ -189,8 +195,8 @@ describe('Typeahead', () => { // when render(); - userEvent.click(screen.getByRole('textbox')); - userEvent.tab(); + await user.click(screen.getByRole('textbox')); + await user.tab(); // then expect(onBlur).toHaveBeenCalled(); @@ -198,7 +204,9 @@ describe('Typeahead', () => { }); describe('item', () => { - it('should call onSelect', () => { + it('should call onSelect', async () => { + const user = userEvent.setup(); + // given const onSelect = jest.fn(); const props = { @@ -209,7 +217,7 @@ describe('Typeahead', () => { // when render(); - userEvent.click(screen.getAllByRole('option')[0]); + await user.click(screen.getAllByRole('option')[0]); // then expect(onSelect).toHaveBeenCalled();