diff --git a/frontend/src/components/comments/tests/hashtagPaste.test.js b/frontend/src/components/comments/tests/hashtagPaste.test.js index ab241ee74c..503a5750dc 100644 --- a/frontend/src/components/comments/tests/hashtagPaste.test.js +++ b/frontend/src/components/comments/tests/hashtagPaste.test.js @@ -1,12 +1,14 @@ import React from 'react'; -import { render, screen, fireEvent } from '@testing-library/react'; +import { render, screen } from '@testing-library/react'; import '@testing-library/jest-dom'; import { ReduxIntlProviders } from '../../../utils/testWithIntl'; import HashtagPaste from '../hashtagPaste'; +import userEvent from '@testing-library/user-event'; -test('HashtagPaste with an empty text string', () => { +test('HashtagPaste with an empty text string', async () => { const setFn = jest.fn(); + const user = userEvent.setup(); render( @@ -15,12 +17,13 @@ test('HashtagPaste with an empty text string', () => { expect(screen.getByText('#managers').className).toBe('bb pointer pt2 f6'); expect(screen.getByText('#managers').style.borderBottomStyle).toBe('dashed'); expect(screen.getByText('#managers').title).toBeTruthy(); - fireEvent.click(screen.getByText('#managers')); + await user.click(screen.getByText('#managers')); expect(setFn).toHaveBeenCalledWith('#managers '); }); -test('HashtagPaste with a text string', () => { +test('HashtagPaste with a text string', async () => { const setFn = jest.fn(); + const user = userEvent.setup(); render( @@ -28,6 +31,6 @@ test('HashtagPaste with a text string', () => { ); expect(screen.getByText('#managers').className).toBe('bb pointer pt2 f6'); expect(screen.getByText('#managers').style.borderBottomStyle).toBe('dashed'); - fireEvent.click(screen.getByText('#managers')); + await user.click(screen.getByText('#managers')); expect(setFn).toHaveBeenCalledWith('My comment #managers'); }); diff --git a/frontend/src/components/contributions/tests/myTasksOrderDropdown.test.js b/frontend/src/components/contributions/tests/myTasksOrderDropdown.test.js index c30c033c5c..f3b3556f23 100644 --- a/frontend/src/components/contributions/tests/myTasksOrderDropdown.test.js +++ b/frontend/src/components/contributions/tests/myTasksOrderDropdown.test.js @@ -1,6 +1,5 @@ import '@testing-library/jest-dom'; import { screen } from '@testing-library/react'; -import userEvent from '@testing-library/user-event'; import MyTasksOrderDropdown from '../myTasksOrderDropdown'; import { IntlProviders, renderWithRouter } from '../../../utils/testWithIntl'; @@ -8,7 +7,7 @@ import { IntlProviders, renderWithRouter } from '../../../utils/testWithIntl'; describe('MyTasksOrderDropdown', () => { const setQueryMock = jest.fn(); const setup = async () => { - renderWithRouter( + const { user } = renderWithRouter( { const dropdownBtn = screen.getByRole('button', { name: /sort by/i, }); - await userEvent.click(dropdownBtn); + await user.click(dropdownBtn); + return { user }; }; it('displays dropdown options after button is clicked', async () => { @@ -37,8 +37,8 @@ describe('MyTasksOrderDropdown', () => { }); it('should set query when an option is selected', async () => { - await setup(); - await userEvent.click(screen.getByText(/recently edited/i)); + const { user } = await setup(); + await user.click(screen.getByText(/recently edited/i)); expect(setQueryMock).toHaveBeenCalled(); }); diff --git a/frontend/src/components/contributions/tests/taskCard.test.js b/frontend/src/components/contributions/tests/taskCard.test.js index c18193298a..3b97298d93 100644 --- a/frontend/src/components/contributions/tests/taskCard.test.js +++ b/frontend/src/components/contributions/tests/taskCard.test.js @@ -1,14 +1,13 @@ import React from 'react'; -import { screen, fireEvent } from '@testing-library/react'; -import userEvent from '@testing-library/user-event'; +import { screen } from '@testing-library/react'; import '@testing-library/jest-dom'; import { ReduxIntlProviders, renderWithRouter } from '../../../utils/testWithIntl'; import { TaskCard } from '../taskCard'; describe('TaskCard', () => { - it('on MAPPED state with comments', () => { - const { container } = renderWithRouter( + it('on MAPPED state with comments', async () => { + const { user, container } = renderWithRouter( { expect(container.querySelectorAll('svg').length).toBe(2); expect(screen.queryByText('Resume task')).not.toBeInTheDocument(); // hovering on the card should not change anything - userEvent.hover(screen.getByText('Ready for validation')); + await user.hover(screen.getByText('Ready for validation')); expect(screen.queryByText('Resume task')).not.toBeInTheDocument(); }); - it('on VALIDATED state without comments', () => { - const { container } = renderWithRouter( + it('on VALIDATED state without comments', async () => { + const { user, container } = renderWithRouter( { expect(screen.queryByText('0')).not.toBeInTheDocument(); expect(container.querySelectorAll('svg').length).toBe(1); // hovering on the card should not change anything - userEvent.hover(screen.getByText('Finished')); + await user.hover(screen.getByText('Finished')); expect(screen.queryByText('Resume task')).not.toBeInTheDocument(); }); - it('on BADIMAGERY state', () => { - renderWithRouter( + it('on BADIMAGERY state', async () => { + const { user } = renderWithRouter( { expect(screen.getByText('Unavailable')).toBeInTheDocument(); expect(screen.queryByText('Resume task')).not.toBeInTheDocument(); // hovering on the card should not change anything - userEvent.hover(screen.getByText('Unavailable')); + await user.hover(screen.getByText('Unavailable')); expect(screen.queryByText('Resume task')).not.toBeInTheDocument(); }); - it('on LOCKED_FOR_VALIDATION state', () => { - const { container } = renderWithRouter( + it('on LOCKED_FOR_VALIDATION state', async () => { + const { user, container } = renderWithRouter( { expect(screen.getByText('Locked for validation by user_1')).toBeInTheDocument(); expect(screen.queryByText('Resume task')).not.toBeInTheDocument(); // hovering on the card should show the resume task button - fireEvent.mouseOver(screen.getByText('Locked for validation by user_1')); + await user.hover(screen.getByText('Locked for validation by user_1')); expect(screen.getByText('Resume task')).toBeInTheDocument(); expect(container.querySelectorAll('a')[1].href).toContain('/projects/4321/tasks?search=987'); }); - it('on INVALIDATED state', () => { - renderWithRouter( + it('on INVALIDATED state', async () => { + const { user } = renderWithRouter( { expect(screen.getByText('More mapping needed')).toBeInTheDocument(); expect(screen.queryByText('Resume task')).not.toBeInTheDocument(); // hovering on the card should show the resume task button - fireEvent.mouseOver(screen.getByText('More mapping needed')); + await user.hover(screen.getByText('More mapping needed')); expect(screen.getByText('Resume task')).toBeInTheDocument(); }); - it('on READY state', () => { - const { container } = renderWithRouter( + it('on READY state', async () => { + const { user, container } = renderWithRouter( { expect(screen.getByText('Available for mapping')).toBeInTheDocument(); expect(screen.queryByText('Resume task')).not.toBeInTheDocument(); // hover on the card - fireEvent.mouseOver(screen.getByText('Available for mapping')); + await user.hover(screen.getByText('Available for mapping')); expect(screen.getByText('Resume task')).toBeInTheDocument(); expect(screen.getByText('Resume task').className).toBe( 'dn dib-l link pv2 ph3 mh3 mv1 bg-red white f7 fr', ); expect(container.querySelectorAll('a')[1].href).toContain('/projects/9983/tasks?search=543'); // unhover - fireEvent.mouseOut(screen.getByText('Available for mapping')); + await user.unhover(screen.getByText('Available for mapping')); expect(screen.queryByText('Resume task')).not.toBeInTheDocument(); }); }); diff --git a/frontend/src/components/contributions/tests/taskResults.test.js b/frontend/src/components/contributions/tests/taskResults.test.js index 88395e4e16..973944dd31 100644 --- a/frontend/src/components/contributions/tests/taskResults.test.js +++ b/frontend/src/components/contributions/tests/taskResults.test.js @@ -1,6 +1,5 @@ import '@testing-library/jest-dom'; import { screen } from '@testing-library/react'; -import userEvent from '@testing-library/user-event'; import { IntlProviders, renderWithRouter } from '../../../utils/testWithIntl'; import { userTasks } from '../../../network/tests/mockData/tasksStats'; @@ -19,7 +18,7 @@ describe('Task Results Component', () => { it('should prompt user to retry on failure to fetch tasks', async () => { const retryFnMock = jest.fn(); - renderWithRouter( + const { user } = renderWithRouter( , @@ -29,7 +28,7 @@ describe('Task Results Component', () => { name: messages.retry.defaultMessage, }); expect(retryBtn).toBeInTheDocument(); - await userEvent.click(retryBtn); + await user.click(retryBtn); expect(retryFnMock).toHaveBeenCalled(); }); diff --git a/frontend/src/components/deleteModal/tests/index.test.js b/frontend/src/components/deleteModal/tests/index.test.js index 440608db14..b1398fb945 100644 --- a/frontend/src/components/deleteModal/tests/index.test.js +++ b/frontend/src/components/deleteModal/tests/index.test.js @@ -1,5 +1,5 @@ import React from 'react'; -import { screen, fireEvent, waitFor, within } from '@testing-library/react'; +import { screen, waitFor, within } from '@testing-library/react'; import '@testing-library/jest-dom'; import { @@ -12,7 +12,7 @@ import { DeleteModal } from '../index'; describe('Delete Interest', () => { const setup = () => { - const { history } = renderWithRouter( + const { user, history } = renderWithRouter( , @@ -22,24 +22,25 @@ describe('Delete Interest', () => { }); return { + user, deleteButton, history, }; }; - it('should ask for confirmation when user tries to delete an interest', () => { - const { deleteButton } = setup(); - fireEvent.click(deleteButton); + it('should ask for confirmation when user tries to delete an interest', async () => { + const { user, deleteButton } = setup(); + await user.click(deleteButton); expect(screen.getByText('Are you sure you want to delete this category?')).toBeInTheDocument(); }); - it('should close the confirmation popup when cancel is clicked', () => { - const { deleteButton } = setup(); - fireEvent.click(deleteButton); + it('should close the confirmation popup when cancel is clicked', async () => { + const { user, deleteButton } = setup(); + await user.click(deleteButton); const cancelButton = screen.getByRole('button', { name: /cancel/i, }); - fireEvent.click(cancelButton); + await user.click(cancelButton); expect( screen.queryByRole('heading', { name: 'Are you sure you want to delete this category?', @@ -48,7 +49,7 @@ describe('Delete Interest', () => { }); it('should direct to passed type list page on successful deletion of an interest', async () => { - const { router } = createComponentWithMemoryRouter( + const { user, router } = createComponentWithMemoryRouter( , @@ -58,12 +59,12 @@ describe('Delete Interest', () => { name: 'Delete', }); - fireEvent.click(deleteButton); + await user.click(deleteButton); const dialog = screen.getByRole('dialog'); const deleteConfirmationButton = within(dialog).getByRole('button', { name: /delete/i, }); - fireEvent.click(deleteConfirmationButton); + await user.click(deleteConfirmationButton); expect( await screen.findByRole('heading', { name: /campaign deleted successfully./i }), ).toBeInTheDocument(); @@ -71,7 +72,7 @@ describe('Delete Interest', () => { }); it('should direct to categories list page on successful deletion of an interest', async () => { - const { router } = createComponentWithMemoryRouter( + const { user, router } = createComponentWithMemoryRouter( , @@ -81,12 +82,12 @@ describe('Delete Interest', () => { name: 'Delete', }); - fireEvent.click(deleteButton); + await user.click(deleteButton); const dialog = screen.getByRole('dialog'); const deleteConfirmationButton = within(dialog).getByRole('button', { name: /delete/i, }); - fireEvent.click(deleteConfirmationButton); + await user.click(deleteConfirmationButton); expect( await screen.findByRole('heading', { name: /interest deleted successfully./i }), ).toBeInTheDocument(); diff --git a/frontend/src/components/header/tests/authButtons.test.js b/frontend/src/components/header/tests/authButtons.test.js index 437d8afff2..4fbfc62cb8 100644 --- a/frontend/src/components/header/tests/authButtons.test.js +++ b/frontend/src/components/header/tests/authButtons.test.js @@ -1,12 +1,14 @@ import React from 'react'; -import { render, screen, fireEvent } from '@testing-library/react'; +import { render, screen } from '@testing-library/react'; import '@testing-library/jest-dom'; import { ReduxIntlProviders } from '../../../utils/testWithIntl'; import { AuthButtons } from '../index'; +import userEvent from '@testing-library/user-event'; describe('AuthButtons', () => { - it('without alternativeSignUpText', () => { + it('without alternativeSignUpText', async () => { + const user = userEvent.setup(); render( { expect(screen.getByText('Sign up').className).toContain('bg-blue-dark white ml1 v-mid'); expect(screen.queryByText('Create an account')).not.toBeInTheDocument(); expect(screen.queryByText('Name')).not.toBeInTheDocument(); - fireEvent.click(screen.getByText('Sign up')); + await user.click(screen.getByText('Sign up')); expect(screen.getByText('Name')).toBeInTheDocument(); expect(screen.getByText('Email')).toBeInTheDocument(); expect(screen.getByText('Next')).toBeInTheDocument(); }); - it('with alternativeSignUpText', () => { + it('with alternativeSignUpText', async () => { + const user = userEvent.setup(); render( { expect(screen.getByText('Create an account').className).toContain('bg-orange black ml1 v-mid'); expect(screen.queryByText('Sign up')).not.toBeInTheDocument(); expect(screen.queryByText('Name')).not.toBeInTheDocument(); - fireEvent.click(screen.getByText('Create an account')); + await user.click(screen.getByText('Create an account')); expect(screen.getByText('Name')).toBeInTheDocument(); expect(screen.getByText('Email')).toBeInTheDocument(); expect(screen.getByText('Next')).toBeInTheDocument(); diff --git a/frontend/src/components/header/tests/index.test.js b/frontend/src/components/header/tests/index.test.js index bd399203ab..52e87ca3f3 100644 --- a/frontend/src/components/header/tests/index.test.js +++ b/frontend/src/components/header/tests/index.test.js @@ -1,5 +1,4 @@ import '@testing-library/jest-dom'; -import userEvent from '@testing-library/user-event'; import { screen, fireEvent, act, within, waitFor, render } from '@testing-library/react'; import '../../../utils/mockMatchMedia'; @@ -11,11 +10,13 @@ import { store } from '../../../store'; describe('Header', () => { const setup = () => { - renderWithRouter( - -
- , - ); + return { + ...renderWithRouter( + +
+ , + ), + }; }; it('should render component details', () => { @@ -78,8 +79,8 @@ describe('Header', () => { }); it('should display menu when burger menu icon is clicked', async () => { - setup(); - await userEvent.click( + const { user } = setup(); + await user.click( screen.getByRole('button', { name: /menu/i, }), @@ -169,8 +170,8 @@ describe('Dropdown menu of logged in user', () => { userDetails: { username: 'somebody' }, }); }); - setup(); - await userEvent.click(screen.getByText('somebody')); + const { user } = setup(); + await user.click(screen.getByText('somebody')); }); it('should log the user out', async () => { @@ -180,10 +181,10 @@ describe('Dropdown menu of logged in user', () => { userDetails: { username: 'somebody' }, }); }); - setup(); - await userEvent.click(screen.getByText('somebody')); + const { user } = setup(); + await user.click(screen.getByText('somebody')); // screen.getByRole('') - await userEvent.click(screen.getByText(/Logout/i)); + await user.click(screen.getByText(/Logout/i)); await waitFor(() => expect( screen.getByRole('button', { @@ -298,7 +299,7 @@ describe('PopupItems Component', () => { }); it('should log the user out', async () => { - const { rerender } = renderWithRouter( + const { user, rerender } = renderWithRouter( { const logoutBtn = screen.getByRole('button', { name: /logout/i, }); - const user = userEvent.setup(); await user.click(logoutBtn); rerender( diff --git a/frontend/src/components/header/tests/notificationBell.test.js b/frontend/src/components/header/tests/notificationBell.test.js index 088604c934..54e861b2ad 100644 --- a/frontend/src/components/header/tests/notificationBell.test.js +++ b/frontend/src/components/header/tests/notificationBell.test.js @@ -1,6 +1,5 @@ import '@testing-library/jest-dom'; import { act, screen, waitFor, within } from '@testing-library/react'; -import userEvent from '@testing-library/user-event'; import '../../../utils/mockMatchMedia'; import { store } from '../../../store'; @@ -31,7 +30,7 @@ describe('Notification Bell', () => { }); it('should clear unread notification count when bell icon is clicked', async () => { - const { container } = renderWithRouter( + const { user, container } = renderWithRouter( , @@ -41,7 +40,7 @@ describe('Notification Bell', () => { await waitFor(() => { expect(container.getElementsByClassName('redicon')[0]).toBeInTheDocument(); }); - await userEvent.click(within(screen.getAllByRole('link')[0]).getByLabelText(/notifications/i)); + await user.click(within(screen.getAllByRole('link')[0]).getByLabelText(/notifications/i)); await waitFor(() => { expect(container.querySelector('redicon')).not.toBeInTheDocument(); }); diff --git a/frontend/src/components/header/tests/signUp.test.js b/frontend/src/components/header/tests/signUp.test.js index b315fdb8fb..cdf74ec33a 100644 --- a/frontend/src/components/header/tests/signUp.test.js +++ b/frontend/src/components/header/tests/signUp.test.js @@ -10,12 +10,13 @@ import { ORG_PRIVACY_POLICY_URL } from '../../../config'; describe('Sign Up Form', () => { it('should close the sign up popup when close icon is clicked', async () => { const closeModalMock = jest.fn(); + const user = userEvent.setup(); render( , ); - await userEvent.click(screen.getByLabelText(/close popup/i)); + await user.click(screen.getByLabelText(/close popup/i)); expect(closeModalMock).toHaveBeenCalled(); }); @@ -62,12 +63,12 @@ describe('Sign Up Form', () => { }); it('should proceed to step two when expected inputs are fulfilled', async () => { + const user = userEvent.setup(); render( , ); - const user = userEvent.setup(); await user.type( screen.getByPlaceholderText(messages.namePlaceHolder.defaultMessage), 'My Name', @@ -107,12 +108,12 @@ describe('Sign Up Form', () => { describe('Proceed OSM form', () => { const setup = async () => { + const user = userEvent.setup(); render( , ); - const user = userEvent.setup(); await user.type( screen.getByPlaceholderText(messages.namePlaceHolder.defaultMessage), 'My Name', @@ -127,6 +128,7 @@ describe('Proceed OSM form', () => { }), ); expect(await screen.findByText('Do you have an OpenStreetMap account?')).toBeInTheDocument(); + return { user }; }; it('should render component details', async () => { @@ -148,8 +150,8 @@ describe('Proceed OSM form', () => { it('should open OSM login window', async () => { global.open = jest.fn(); - await setup(); - await userEvent.click( + const { user } = await setup(); + await user.click( screen.getByRole('button', { name: messages.submitProceedOSM.defaultMessage, }), @@ -160,6 +162,7 @@ describe('Proceed OSM form', () => { it('should execute login prop when user already has an account', async () => { const setStepMock = jest.fn(); const loginMock = jest.fn(); + const user = userEvent.setup(); render( { /> , ); - await userEvent.click(screen.getByText(messages.proceedOSMLogin.defaultMessage)); + await user.click(screen.getByText(messages.proceedOSMLogin.defaultMessage)); expect(loginMock).toHaveBeenCalled(); }); }); @@ -202,12 +205,13 @@ describe('LoginModal component', () => { }); it('should execute the login prop', async () => { + const user = userEvent.setup(); render( , ); - await userEvent.click( + await user.click( screen.getByRole('button', { name: /log in/i, }), diff --git a/frontend/src/components/header/tests/updateDialog.test.js b/frontend/src/components/header/tests/updateDialog.test.js index 041ff22868..15b96e7e42 100644 --- a/frontend/src/components/header/tests/updateDialog.test.js +++ b/frontend/src/components/header/tests/updateDialog.test.js @@ -1,6 +1,5 @@ import '@testing-library/jest-dom'; import { screen, fireEvent } from '@testing-library/react'; -import userEvent from '@testing-library/user-event'; import messages from '../messages'; import { UpdateDialog } from '../updateDialog'; @@ -57,7 +56,7 @@ describe('Update Dialog', () => { }); it('should update the service worker', async () => { - renderWithRouter( + const { user } = renderWithRouter( , @@ -75,7 +74,7 @@ describe('Update Dialog', () => { addEventListener: jest.fn(), }, }); - await userEvent.click(screen.getByRole('button', { name: /refresh/i })); + await user.click(screen.getByRole('button', { name: /refresh/i })); expect(postMessageMock).toHaveBeenCalled(); }); }); diff --git a/frontend/src/components/header/tests/updateEmail.test.js b/frontend/src/components/header/tests/updateEmail.test.js index 8795a44f22..cc7a9f5aed 100644 --- a/frontend/src/components/header/tests/updateEmail.test.js +++ b/frontend/src/components/header/tests/updateEmail.test.js @@ -10,11 +10,14 @@ import { ORG_PRIVACY_POLICY_URL } from '../../../config'; describe('Update Email Dialog', () => { const closeModalMock = jest.fn(); const setup = () => { - render( - - - , - ); + return { + user: userEvent.setup(), + ...render( + + + , + ), + }; }; it('should render component details', () => { setup(); @@ -50,8 +53,8 @@ describe('Update Email Dialog', () => { }); it('should update user email', async () => { - setup(); - await userEvent.click( + const { user } = setup(); + await user.click( screen.getByRole('button', { name: /update/i, }), @@ -62,12 +65,9 @@ describe('Update Email Dialog', () => { }); it('should update email text', async () => { - setup(); + const { user } = setup(); - await userEvent.type( - screen.getByPlaceholderText(messages.emailPlaceholder.defaultMessage), - 'meow', - ); + await user.type(screen.getByPlaceholderText(messages.emailPlaceholder.defaultMessage), 'meow'); expect(screen.getByPlaceholderText(messages.emailPlaceholder.defaultMessage)).toHaveValue( 'meow', ); diff --git a/frontend/src/components/interests/tests/index.test.js b/frontend/src/components/interests/tests/index.test.js index a4ac80e353..e46854477c 100644 --- a/frontend/src/components/interests/tests/index.test.js +++ b/frontend/src/components/interests/tests/index.test.js @@ -1,5 +1,5 @@ import '@testing-library/jest-dom'; -import { screen, waitFor, fireEvent } from '@testing-library/react'; +import { screen, waitFor } from '@testing-library/react'; import { IntlProviders, renderWithRouter } from '../../../utils/testWithIntl'; import { InterestsManagement } from '../index'; @@ -62,7 +62,7 @@ describe('InterestsManagement component', () => { }); it('filters interests list by the search query', async () => { - const { container } = renderWithRouter( + const { user, container } = renderWithRouter( , @@ -73,11 +73,8 @@ describe('InterestsManagement component', () => { expect(screen.getByText(/Interest 1/i)); }); expect(container.querySelectorAll('svg').length).toBe(5); - fireEvent.change(textField, { - target: { - value: 2, - }, - }); + await user.clear(textField); + await user.type(textField, '2'); expect(screen.getByText(/Interest 2/i)).toBeInTheDocument(); expect(screen.queryByText(/Interest 1/i)).not.toBeInTheDocument(); }); diff --git a/frontend/src/components/licenses/tests/licenses.test.js b/frontend/src/components/licenses/tests/licenses.test.js index 5c366557c5..105469335b 100644 --- a/frontend/src/components/licenses/tests/licenses.test.js +++ b/frontend/src/components/licenses/tests/licenses.test.js @@ -1,9 +1,10 @@ import React from 'react'; -import { render, screen, fireEvent } from '@testing-library/react'; +import { render, screen } from '@testing-library/react'; import '@testing-library/jest-dom'; import { IntlProviders, renderWithRouter } from '../../../utils/testWithIntl'; import { LicenseCard, LicensesManagement, LicenseForm } from '../index'; +import userEvent from '@testing-library/user-event'; const license = { licenseId: 1, @@ -68,8 +69,9 @@ describe('Licenses Management', () => { }); describe('LicenseForm', () => { - it('renders a form containing different editable license fields for a given license', () => { + it('renders a form containing different editable license fields for a given license', async () => { const updateLicense = jest.fn(); + const user = userEvent.setup(); render( @@ -96,7 +98,8 @@ describe('LicenseForm', () => { expect(inputs[2].value).toBe('HOT is allowing access to this imagery for creating data in OSM'); // change license name - fireEvent.change(inputs[0], { target: { value: 'license A' } }); + await user.clear(inputs[0]); + await user.type(inputs[0], 'license A'); const saveBtn = screen.getByText('Save'); const cancelBtn = screen.getByText('Cancel'); @@ -104,7 +107,7 @@ describe('LicenseForm', () => { expect(cancelBtn).toBeInTheDocument(); // save license name - fireEvent.click(saveBtn); + await user.click(saveBtn); expect(inputs[0].value).toBe('license A'); expect(updateLicense).toHaveBeenCalledWith({ ...license, name: 'license A' }); }); @@ -125,7 +128,7 @@ describe('LicenseForm', () => { }); it('filters interests list by the search query', async () => { - renderWithRouter( + const { user } = renderWithRouter( , @@ -133,18 +136,12 @@ describe('LicenseForm', () => { const textField = screen.getByRole('textbox'); expect(textField).toBeInTheDocument(); - fireEvent.change(textField, { - target: { - value: 'HOT', - }, - }); + await user.clear(textField); + await user.type(textField, 'HOT'); expect(screen.getByText(/HOT Licence/i)).toBeInTheDocument(); expect(screen.queryByText(/NextView 1/i)).not.toBeInTheDocument(); - fireEvent.change(textField, { - target: { - value: 'not HOT', - }, - }); + await user.clear(textField); + await user.type(textField, 'not HOT'); expect(screen.queryByText('There are no licenses yet.')).toBeInTheDocument(); }); }); diff --git a/frontend/src/components/notifications/tests/actionButtons.test.js b/frontend/src/components/notifications/tests/actionButtons.test.js index 4c4cdc6b00..5fb0eaf47a 100644 --- a/frontend/src/components/notifications/tests/actionButtons.test.js +++ b/frontend/src/components/notifications/tests/actionButtons.test.js @@ -31,6 +31,7 @@ describe('Action Buttons', () => { }); it('should decrement unread count in redux store if all notifications are not selected upon marking notifications as read', async () => { + const user = userEvent.setup(); render( { /> , ); - await userEvent.click( + await user.click( screen.getByRole('button', { name: /mark as read/i, }), @@ -55,6 +56,7 @@ describe('Action Buttons', () => { }); it('should fetch unread count if all notifications are selected upon marking notifications as read', async () => { + const user = userEvent.setup(); render( { /> , ); - await userEvent.click( + await user.click( screen.getByRole('button', { name: /mark as read/i, }), @@ -78,6 +80,7 @@ describe('Action Buttons', () => { }); it('should decrement unread count in redux store if all notifications are not selected upon deleting notifications', async () => { + const user = userEvent.setup(); render( { /> , ); - await userEvent.click( + await user.click( screen.getByRole('button', { name: /delete/i, }), @@ -103,6 +106,7 @@ describe('Action Buttons', () => { }); it('should fetch unread count if all notifications are selected upon deleting notifications', async () => { + const user = userEvent.setup(); render( { /> , ); - await userEvent.click( + await user.click( screen.getByRole('button', { name: /delete/i, }), @@ -128,6 +132,7 @@ describe('Action Buttons', () => { // Error are consoled in all cases of POST error it('should catch error when marking multiple selected notifications as read', async () => { setupFaultyHandlers(); + const user = userEvent.setup(); render( { /> , ); - await userEvent.click( + await user.click( screen.getByRole('button', { name: /mark as read/i, }), @@ -151,6 +156,7 @@ describe('Action Buttons', () => { it('should catch error when marking all notifications in a category as read', async () => { setupFaultyHandlers(); + const user = userEvent.setup(); render( { /> , ); - await userEvent.click( + await user.click( screen.getByRole('button', { name: /mark as read/i, }), @@ -174,6 +180,7 @@ describe('Action Buttons', () => { it('should catch error when deleting multiple selected notifications', async () => { act(() => {}); setupFaultyHandlers(); + const user = userEvent.setup(); render( { /> , ); - await userEvent.click( + await user.click( screen.getByRole('button', { name: /delete/i, }), @@ -197,6 +204,7 @@ describe('Action Buttons', () => { it('should catch error when deleting all notifications in a category', async () => { setupFaultyHandlers(); + const user = userEvent.setup(); render( { /> , ); - await userEvent.click( + await user.click( screen.getByRole('button', { name: /delete/i, }), diff --git a/frontend/src/components/notifications/tests/notificationCard.test.js b/frontend/src/components/notifications/tests/notificationCard.test.js index c77203e239..4ab28b8639 100644 --- a/frontend/src/components/notifications/tests/notificationCard.test.js +++ b/frontend/src/components/notifications/tests/notificationCard.test.js @@ -1,6 +1,5 @@ import '@testing-library/jest-dom'; import { screen, waitFor, render } from '@testing-library/react'; -import userEvent from '@testing-library/user-event'; import { MessageAvatar, NotificationCard, NotificationCardMini } from '../notificationCard'; import { ReduxIntlProviders, renderWithRouter } from '../../../utils/testWithIntl'; @@ -22,7 +21,7 @@ describe('Message Avatar', () => { describe('Notification Card', () => { const fetchNotificationsMock = jest.fn(); it('should mark the notification as read', async () => { - renderWithRouter( + const { user } = renderWithRouter( { , ); - await userEvent.click( + await user.click( screen.getByRole('button', { name: /Mark notification as read/i, }), @@ -42,7 +41,7 @@ describe('Notification Card', () => { it('should delete the notification', async () => { const setSelectedMock = jest.fn(); - renderWithRouter( + const { user } = renderWithRouter( { , ); - await userEvent.click(screen.getAllByRole('button')[1]); + await user.click(screen.getAllByRole('button')[1]); await waitFor(() => { expect(fetchNotificationsMock).toHaveBeenCalledTimes(1); }); @@ -62,7 +61,7 @@ describe('Notification Card', () => { it('should catch error on deletion error', async () => { setupFaultyHandlers(); const setSelectedMock = jest.fn(); - renderWithRouter( + const { user } = renderWithRouter( { , ); - await userEvent.click(screen.getAllByRole('button')[1]); + await user.click(screen.getAllByRole('button')[1]); // Error is then consoled expect(fetchNotificationsMock).not.toHaveBeenCalled(); }); @@ -81,7 +80,7 @@ describe('Notification Card', () => { it('should open any links in the notification message', async () => { global.open = jest.fn(); const setSelectedMock = jest.fn(); - renderWithRouter( + const { user } = renderWithRouter( { /> , ); - await userEvent.click( + await user.click( screen.getByRole('link', { name: 'Sample Team', }), @@ -103,7 +102,7 @@ describe('Notification Card', () => { global.open = jest.fn(); const setSelectedMock = jest.fn(); - renderWithRouter( + const { user } = renderWithRouter( { /> , ); - await userEvent.click(screen.getByText(/requested to join/i)); + await user.click(screen.getByText(/requested to join/i)); // Awaiting portion of the notification message inside the dialog await waitFor(() => expect( @@ -126,18 +125,18 @@ describe('Notification Card', () => { describe('Notification Card Mini', () => { it('should refetch notifications on closing the dialog', async () => { const fetchNotificationsMock = jest.fn(); - renderWithRouter( + const { user } = renderWithRouter( , ); - await userEvent.click(screen.getByRole('article')); + await user.click(screen.getByRole('article')); await waitFor(() => expect( screen.getByText(/Access the team management page to accept or reject that request./i), ).toBeInTheDocument(), ); - await userEvent.click( + await user.click( screen.getByRole('button', { name: /close/i, }), diff --git a/frontend/src/components/notifications/tests/notificationResults.test.js b/frontend/src/components/notifications/tests/notificationResults.test.js index e4a95142d4..98180e1c2c 100644 --- a/frontend/src/components/notifications/tests/notificationResults.test.js +++ b/frontend/src/components/notifications/tests/notificationResults.test.js @@ -1,6 +1,5 @@ import '@testing-library/jest-dom'; import { screen } from '@testing-library/react'; -import userEvent from '@testing-library/user-event'; import { ReduxIntlProviders, createComponentWithMemoryRouter } from '../../../utils/testWithIntl'; import { NotificationResults, NotificationResultsMini } from '../notificationResults'; @@ -10,7 +9,7 @@ import messages from '../messages'; describe('Mini Notification Results', () => { it('should display the refresh button', async () => { const retryFnMock = jest.fn(); - createComponentWithMemoryRouter( + const { user } = createComponentWithMemoryRouter( , @@ -18,7 +17,7 @@ describe('Mini Notification Results', () => { const refreshBtn = screen.getByRole('button', { name: /refresh/i, }); - await userEvent.click(refreshBtn); + await user.click(refreshBtn); expect(retryFnMock).toHaveBeenCalledTimes(1); }); @@ -44,7 +43,7 @@ describe('Notifications Results', () => { it('should fetch for notifications on clicking the try again button', async () => { const retryFnMock = jest.fn(); - createComponentWithMemoryRouter( + const { user } = createComponentWithMemoryRouter( { const retryBtn = screen.getByRole('button', { name: /try again/i, }); - await userEvent.click(retryBtn); + await user.click(retryBtn); expect(retryFnMock).toHaveBeenCalledTimes(1); }); diff --git a/frontend/src/components/notifications/tests/selectAllNotifications.test.js b/frontend/src/components/notifications/tests/selectAllNotifications.test.js index 9f25522adc..83d22bd3e1 100644 --- a/frontend/src/components/notifications/tests/selectAllNotifications.test.js +++ b/frontend/src/components/notifications/tests/selectAllNotifications.test.js @@ -8,12 +8,13 @@ import { IntlProviders } from '../../../utils/testWithIntl'; describe('Action Buttons (Mark as read and Deletion)', () => { it('should select all notifications under a category', async () => { const setIsAllSelectedMock = jest.fn(); + const user = userEvent.setup(); render( , ); - await userEvent.click( + await user.click( screen.getByRole('button', { name: /select all notifications/i, }), @@ -23,12 +24,13 @@ describe('Action Buttons (Mark as read and Deletion)', () => { it('should empty selection upon clearing them', async () => { const setSelectedMock = jest.fn(); + const user = userEvent.setup(); render( , ); - await userEvent.click( + await user.click( screen.getByRole('button', { name: /clear selection/i, }), diff --git a/frontend/src/components/projectCard/tests/dueDateBox.test.js b/frontend/src/components/projectCard/tests/dueDateBox.test.js index 5acb59b4fc..2b325eb042 100644 --- a/frontend/src/components/projectCard/tests/dueDateBox.test.js +++ b/frontend/src/components/projectCard/tests/dueDateBox.test.js @@ -22,13 +22,14 @@ describe('test DueDate', () => { it('with tooltip message', async () => { // five days of milliseconds plus a few seconds for the test const fiveDaysOut = 5 * 86400 * 1000 + 10000 + Date.now(); + const user = userEvent.setup(); const { container } = render( , ); expect(screen.queryByText('Tooltip works')).not.toBeInTheDocument(); - await userEvent.hover(screen.getByText('5 days left')); + await user.hover(screen.getByText('5 days left')); await waitFor(() => expect(screen.getByText('Tooltip works')).toBeInTheDocument()); expect(screen.getByText('Tooltip works')).toBeInTheDocument(); expect(container.querySelectorAll('span')[0].className).toContain('bg-tan blue-grey'); diff --git a/frontend/src/components/projectCreate/tests/projectsAOILayerCheckBox.test.js b/frontend/src/components/projectCreate/tests/projectsAOILayerCheckBox.test.js index ced5a6f8b8..2c1fc34ae3 100644 --- a/frontend/src/components/projectCreate/tests/projectsAOILayerCheckBox.test.js +++ b/frontend/src/components/projectCreate/tests/projectsAOILayerCheckBox.test.js @@ -1,4 +1,4 @@ -import { render, screen, fireEvent } from '@testing-library/react'; +import { render, screen } from '@testing-library/react'; import '@testing-library/jest-dom'; import userEvent from '@testing-library/user-event'; @@ -7,7 +7,8 @@ import { IntlProviders } from '../../../utils/testWithIntl'; describe('ProjectsAOILayerCheckBox', () => { const testFn = jest.fn(); - it('with disabled property', () => { + it('with disabled property', async () => { + const user = userEvent.setup(); render( @@ -16,16 +17,17 @@ describe('ProjectsAOILayerCheckBox', () => { expect(screen.getByText('Show existing projects AoIs')).toBeInTheDocument(); expect(screen.getByRole('checkbox').className).toContain('b--grey-light'); expect(screen.getByRole('checkbox').className).not.toContain('b--red'); - userEvent.hover(screen.getByText('Show existing projects AoIs')); + await user.hover(screen.getByText('Show existing projects AoIs')); expect( screen.getByText( "Zoom in to be able to activate the visualization of other projects' areas of interest.", ), ).toBeInTheDocument(); - userEvent.click(screen.getByRole('checkbox')); + await user.click(screen.getByRole('checkbox')); expect(testFn).not.toHaveBeenCalled(); }); - it('with disabled=false property', () => { + it('with disabled=false property', async () => { + const user = userEvent.setup(); render( @@ -34,11 +36,11 @@ describe('ProjectsAOILayerCheckBox', () => { expect(screen.getByText('Show existing projects AoIs')).toBeInTheDocument(); expect(screen.getByRole('checkbox').className).not.toContain('b--grey-light'); expect(screen.getByRole('checkbox').className).toContain('b--red'); - userEvent.hover(screen.getByText('Show existing projects AoIs')); + await user.hover(screen.getByText('Show existing projects AoIs')); expect( screen.getByText("Enable the visualization of the existing projects' areas of interest."), ).toBeInTheDocument(); - fireEvent.click(screen.getByRole('checkbox')); + await user.click(screen.getByRole('checkbox')); expect(testFn).toHaveBeenCalled(); }); }); diff --git a/frontend/src/components/projectDetail/tests/favorites.test.js b/frontend/src/components/projectDetail/tests/favorites.test.js index 2f5a6d59d5..9d6eec8e0e 100644 --- a/frontend/src/components/projectDetail/tests/favorites.test.js +++ b/frontend/src/components/projectDetail/tests/favorites.test.js @@ -1,6 +1,5 @@ import '@testing-library/jest-dom'; import { act, screen, waitFor } from '@testing-library/react'; -import userEvent from '@testing-library/user-event'; import { store } from '../../../store'; import { @@ -34,12 +33,12 @@ describe('AddToFavorites button', () => { act(() => { store.dispatch({ type: 'SET_TOKEN', token: null }); }); - const { router } = createComponentWithMemoryRouter( + const { user, router } = createComponentWithMemoryRouter( , ); - await userEvent.click(screen.getByRole('button')); + await user.click(screen.getByRole('button')); expect(router.state.location.pathname).toBe('/login'); }); @@ -47,13 +46,13 @@ describe('AddToFavorites button', () => { act(() => { store.dispatch({ type: 'SET_TOKEN', token: 'validToken' }); }); - createComponentWithMemoryRouter( + const { user } = createComponentWithMemoryRouter( , ); expect(screen.getByText(messages.addToFavorites.defaultMessage)).toBeInTheDocument(); - await userEvent.click(screen.getByRole('button')); + await user.click(screen.getByRole('button')); await waitFor(() => expect(screen.queryByText(messages.addToFavorites.defaultMessage)).not.toBeInTheDocument(), ); diff --git a/frontend/src/components/projectDetail/tests/privateProjectError.test.js b/frontend/src/components/projectDetail/tests/privateProjectError.test.js index c8bcc29680..25983c3493 100644 --- a/frontend/src/components/projectDetail/tests/privateProjectError.test.js +++ b/frontend/src/components/projectDetail/tests/privateProjectError.test.js @@ -1,6 +1,5 @@ import '@testing-library/jest-dom'; import { screen } from '@testing-library/react'; -import userEvent from '@testing-library/user-event'; import PrivateProjectError from '../privateProjectError'; import { @@ -31,13 +30,13 @@ describe('PrivateProjectError component', () => { }); it('should navigate to explore projects page', async () => { - const { router } = createComponentWithMemoryRouter( + const { user, router } = createComponentWithMemoryRouter( , ); - await userEvent.click( + await user.click( screen.getByRole('button', { name: /explore other projects/i, }), diff --git a/frontend/src/components/projectDetail/tests/questionsAndComments.test.js b/frontend/src/components/projectDetail/tests/questionsAndComments.test.js index c088e189bb..3c5e9608c2 100644 --- a/frontend/src/components/projectDetail/tests/questionsAndComments.test.js +++ b/frontend/src/components/projectDetail/tests/questionsAndComments.test.js @@ -1,6 +1,6 @@ import '@testing-library/jest-dom'; import userEvent from '@testing-library/user-event'; -import { render, screen, act, fireEvent, waitFor } from '@testing-library/react'; +import { render, screen, act, waitFor } from '@testing-library/react'; import { store } from '../../../store'; @@ -19,7 +19,8 @@ describe('test if QuestionsAndComments component', () => { expect(screen.getByText('Log in to be able to post comments.')).toBeInTheDocument(); }); - it('renders tabs for writing and previewing comments', () => { + it('renders tabs for writing and previewing comments', async () => { + const user = userEvent.setup(); render( @@ -30,7 +31,7 @@ describe('test if QuestionsAndComments component', () => { expect(screen.getByRole('button', { name: /write/i })).toBeInTheDocument(); expect(previewBtn).toBeInTheDocument(); expect(screen.getByRole('textbox')).toBeInTheDocument(); - fireEvent.click(previewBtn); + await user.click(previewBtn); expect(screen.queryByRole('textbox', { hidden: true })).toBeInTheDocument(); expect(screen.getByText(/nothing to preview/i)).toBeInTheDocument(); }); @@ -39,12 +40,11 @@ describe('test if QuestionsAndComments component', () => { act(() => { store.dispatch({ type: 'SET_TOKEN', token: '123456', role: 'ADMIN' }); }); - renderWithRouter( + const { user } = renderWithRouter( , ); - const user = userEvent.setup(); await waitFor(() => expect(screen.getByText('hello world')).toBeInTheDocument()); const textarea = screen.getByRole('textbox'); const postBtn = screen.getByRole('button', { name: /post/i }); @@ -60,7 +60,7 @@ describe('test if QuestionsAndComments component', () => { type: 'SET_USER_DETAILS', userDetails: { role: 'ADMIN' }, }); - renderWithRouter( + const { user } = renderWithRouter( { , ); - const user = userEvent.setup(); await waitFor(() => expect(screen.getByText('hello world')).toBeInTheDocument()); await user.click(screen.getAllByRole('button')[0]); await waitFor(() => expect(retryFnMock).toHaveBeenCalledTimes(1)); diff --git a/frontend/src/components/projectDetail/tests/shareButton.test.js b/frontend/src/components/projectDetail/tests/shareButton.test.js index 6d98366500..4c42d44b86 100644 --- a/frontend/src/components/projectDetail/tests/shareButton.test.js +++ b/frontend/src/components/projectDetail/tests/shareButton.test.js @@ -31,15 +31,15 @@ describe('test if shareButton', () => { it('render open corresponding window popup', async () => { global.open = jest.fn(); + const user = userEvent.setup(); render( , ); - await userEvent.click(screen.getByText(/tweet/i)); - await userEvent.click(screen.getByText(/post on facebook/i)); - await userEvent.click(screen.getByText(/share on linkedin/i)); - + await user.click(screen.getByText(/tweet/i)); + await user.click(screen.getByText(/post on facebook/i)); + await user.click(screen.getByText(/share on linkedin/i)); expect(global.open).toHaveBeenCalledTimes(3); }); }); diff --git a/frontend/src/components/projectEdit/tests/localeOption.test.js b/frontend/src/components/projectEdit/tests/localeOption.test.js index 61c8efa9e3..175d779de5 100644 --- a/frontend/src/components/projectEdit/tests/localeOption.test.js +++ b/frontend/src/components/projectEdit/tests/localeOption.test.js @@ -1,12 +1,14 @@ import React from 'react'; -import { render, screen, fireEvent } from '@testing-library/react'; +import { render, screen } from '@testing-library/react'; import '@testing-library/jest-dom'; import { LocaleOption } from '../localeOption'; +import userEvent from '@testing-library/user-event'; describe('LocaleOption', () => { const mockFn = jest.fn(); - it('with isActive = true', () => { + it('with isActive = true', async () => { + const user = userEvent.setup(); render( { ); expect(screen.getByText('es').className).toContain('bg-blue-grey fw6 white'); expect(screen.getByText('es').title).toBe('Español'); - fireEvent.click(screen.getByText('es')); + await user.click(screen.getByText('es')); expect(mockFn).toHaveBeenCalledWith('es'); }); it('with isActive = false and hasValue = true', () => { diff --git a/frontend/src/components/projects/tests/filterSelectFields.test.js b/frontend/src/components/projects/tests/filterSelectFields.test.js index 9610d0631a..89c3238c11 100644 --- a/frontend/src/components/projects/tests/filterSelectFields.test.js +++ b/frontend/src/components/projects/tests/filterSelectFields.test.js @@ -1,6 +1,6 @@ import '@testing-library/jest-dom'; import userEvent from '@testing-library/user-event'; -import { fireEvent, render, screen } from '@testing-library/react'; +import { render, screen } from '@testing-library/react'; import { startOfWeek, startOfYear, format } from 'date-fns'; import { createComponentWithReduxAndIntl, IntlProviders } from '../../../utils/testWithIntl'; @@ -36,6 +36,7 @@ describe('tests for selecting date range filters for not custom date ranges', () describe('DateRangeFilterSelect', () => { it('should set query when an option is selected', async () => { + const user = userEvent.setup(); render( { /> , ); - await userEvent.click(screen.getByRole('combobox')); - await userEvent.click(screen.getByText(/this week/i)); + await user.click(screen.getByRole('combobox')); + await user.click(screen.getByText(/this week/i)); expect(screen.getByText('This week')).toBeInTheDocument(); }); @@ -82,6 +83,7 @@ describe('DateRangeFilterSelect', () => { test('DateFilterPicker', async () => { const setQueryForChildMock = jest.fn(); + const user = userEvent.setup(); render( { /> , ); - fireEvent.change(screen.getByRole('textbox'), { - target: { - value: '2022-02-22', - }, - }); + const textbox = screen.getByRole('textbox'); + await user.clear(textbox); + await user.type(textbox, '2022-02-22'); expect(setQueryForChildMock).toHaveBeenCalled(); }); diff --git a/frontend/src/components/projects/tests/mappingTypeFilterPicker.test.js b/frontend/src/components/projects/tests/mappingTypeFilterPicker.test.js index 3aa6aa9668..fabfa384d4 100644 --- a/frontend/src/components/projects/tests/mappingTypeFilterPicker.test.js +++ b/frontend/src/components/projects/tests/mappingTypeFilterPicker.test.js @@ -4,7 +4,6 @@ import { screen } from '@testing-library/react'; import { ReactRouter6Adapter } from 'use-query-params/adapters/react-router-6'; import { QueryParamProvider } from 'use-query-params'; -import userEvent from '@testing-library/user-event'; import { createComponentWithIntl, @@ -29,14 +28,14 @@ it('mapping type options show the road icon', () => { it('should set query for the clicked icon', async () => { const setMappingTypesQueryMock = jest.fn(); - renderWithRouter( + const { user } = renderWithRouter( , ); - await userEvent.click( + await user.click( screen.getByRole('checkbox', { name: /roads/i, }), @@ -62,7 +61,7 @@ it('should highlight active selected map icon', async () => { it('should concatinate values with the present query', async () => { const setMappingTypesQueryMock = jest.fn(); - renderWithRouter( + const { user } = renderWithRouter( { , ); - await userEvent.click( + await user.click( screen.getByRole('checkbox', { name: /waterways/i, }), @@ -86,7 +85,7 @@ it('should concatinate values with the present query', async () => { it('should deselect from the query value', async () => { const setMappingTypesQueryMock = jest.fn(); - renderWithRouter( + const { user } = renderWithRouter( { , ); - await userEvent.click( + await user.click( screen.getByRole('checkbox', { name: /roads/i, }), diff --git a/frontend/src/components/projects/tests/moreFiltersForm.test.js b/frontend/src/components/projects/tests/moreFiltersForm.test.js index d90623c168..8f1c7ad6ec 100644 --- a/frontend/src/components/projects/tests/moreFiltersForm.test.js +++ b/frontend/src/components/projects/tests/moreFiltersForm.test.js @@ -1,5 +1,4 @@ import '@testing-library/jest-dom'; -import userEvent from '@testing-library/user-event'; import { parse } from 'query-string'; import { act, render, screen, waitFor } from '@testing-library/react'; import { ReactRouter6Adapter } from 'use-query-params/adapters/react-router-6'; @@ -20,14 +19,14 @@ describe('MoreFiltersForm', () => { act(() => { store.dispatch({ type: 'SET_TOKEN', token: null }); }); - const { container } = renderWithRouter( + const { user, container } = renderWithRouter( , ); - await userEvent.click(container.querySelector('#organisation > div > div')); + await user.click(container.querySelector('#organisation > div > div')); await screen.findByText('American Red Cross'); expect(screen.queryByLabelText('filter by user interests')).not.toBeInTheDocument(); }); @@ -36,7 +35,7 @@ describe('MoreFiltersForm', () => { act(() => { store.dispatch({ type: 'SET_TOKEN', token: 'validToken' }); }); - const { router } = createComponentWithMemoryRouter( + const { user, router } = createComponentWithMemoryRouter( @@ -46,7 +45,7 @@ describe('MoreFiltersForm', () => { const switchControl = screen.getAllByRole('checkbox').slice(-1)[0]; expect(switchControl).toBeInTheDocument(); - await userEvent.click(switchControl); + await user.click(switchControl); await waitFor(() => expect( decodeQueryParams( diff --git a/frontend/src/components/projects/tests/myProjectNav.test.js b/frontend/src/components/projects/tests/myProjectNav.test.js index 96189fd47a..07feef96fe 100644 --- a/frontend/src/components/projects/tests/myProjectNav.test.js +++ b/frontend/src/components/projects/tests/myProjectNav.test.js @@ -86,7 +86,7 @@ describe('Manage Projects Top Navigation Bar', () => { }); it('should navigate to new project creation page on button click', async () => { - const { router } = createComponentWithMemoryRouter( + const { user, router } = createComponentWithMemoryRouter( @@ -94,7 +94,6 @@ describe('Manage Projects Top Navigation Bar', () => { , ); - const user = userEvent.setup(); await user.click( screen.queryByRole('button', { name: /new/i, @@ -122,13 +121,13 @@ describe('Filter Button Component', () => { it('should set query when clicked', async () => { const setQueryMock = jest.fn(); + const user = userEvent.setup(); render( Click me! , ); - const user = userEvent.setup(); await user.click(screen.getByRole('button', { name: /click me!/i })); expect(setQueryMock).toHaveBeenCalled(); }); diff --git a/frontend/src/components/projects/tests/orderBy.test.js b/frontend/src/components/projects/tests/orderBy.test.js index 61b15a18f4..b1148ea204 100644 --- a/frontend/src/components/projects/tests/orderBy.test.js +++ b/frontend/src/components/projects/tests/orderBy.test.js @@ -1,13 +1,12 @@ import '@testing-library/jest-dom'; import { screen } from '@testing-library/react'; -import userEvent from '@testing-library/user-event'; import { IntlProviders, renderWithRouter } from '../../../utils/testWithIntl'; import { OrderBySelector } from '../orderBy'; test('should select option on click', async () => { const setQueryMock = jest.fn(); - renderWithRouter( + const { user } = renderWithRouter( { /> , ); - await userEvent.click( + await user.click( screen.getByRole('button', { name: /sort by/i, }), ); - await userEvent.click(screen.getByText(/urgent projects/i)); + await user.click(screen.getByText(/urgent projects/i)); expect(setQueryMock).toHaveBeenCalledWith( expect.objectContaining({ orderBy: 'priority', diff --git a/frontend/src/components/projects/tests/projectCardPaginator.test.js b/frontend/src/components/projects/tests/projectCardPaginator.test.js index 71fe9ee109..116a9d0b78 100644 --- a/frontend/src/components/projects/tests/projectCardPaginator.test.js +++ b/frontend/src/components/projects/tests/projectCardPaginator.test.js @@ -26,6 +26,7 @@ describe('ProjectCardPaginator Component', () => { }); it('should set query on the button click', async () => { + const user = userEvent.setup(); render( { }} />, ); - await userEvent.click( + await user.click( screen.getByRole('button', { name: '2', }), diff --git a/frontend/src/components/projects/tests/projectSearchBox.test.js b/frontend/src/components/projects/tests/projectSearchBox.test.js index 07187866a8..ed2360b107 100644 --- a/frontend/src/components/projects/tests/projectSearchBox.test.js +++ b/frontend/src/components/projects/tests/projectSearchBox.test.js @@ -8,24 +8,26 @@ import { ProjectSearchBox } from '../projectSearchBox'; describe('ProjectSearchBox', () => { it('should set the query as the state', async () => { const setQueryMock = jest.fn(); + const user = userEvent.setup(); render( , ); const textfield = screen.getByRole('textbox'); - await userEvent.type(textfield, 'something'); + await user.type(textfield, 'something'); expect(setQueryMock).toHaveBeenCalled(); }); it('should clear the query when the close icon is clicked', async () => { const setQueryMock = jest.fn(); + const user = userEvent.setup(); render( , ); - await userEvent.click(screen.getByRole('button')); + await user.click(screen.getByRole('button')); expect(setQueryMock).toHaveBeenCalledWith( expect.objectContaining({ text: undefined, @@ -37,6 +39,7 @@ describe('ProjectSearchBox', () => { it('should focus the textbox when search icon is clicked', async () => { const setQueryMock = jest.fn(); + const user = userEvent.setup(); render( @@ -44,7 +47,7 @@ describe('ProjectSearchBox', () => { ); const textfield = screen.getByRole('textbox'); expect(textfield).not.toHaveFocus(); - await userEvent.click(screen.getByLabelText('Search')); + await user.click(screen.getByLabelText('Search')); expect(textfield).toHaveFocus(); }); }); diff --git a/frontend/src/components/projects/tests/projectSearchResults.test.js b/frontend/src/components/projects/tests/projectSearchResults.test.js index 6f826b2290..e7c75745c3 100644 --- a/frontend/src/components/projects/tests/projectSearchResults.test.js +++ b/frontend/src/components/projects/tests/projectSearchResults.test.js @@ -1,5 +1,4 @@ import '@testing-library/jest-dom'; -import userEvent from '@testing-library/user-event'; import { screen, act } from '@testing-library/react'; import { ReduxIntlProviders, IntlProviders, renderWithRouter } from '../../../utils/testWithIntl'; @@ -57,7 +56,7 @@ describe('Project Search Results', () => { it('should display error and provide actionable to retry', async () => { const retryFn = jest.fn(); - renderWithRouter( + const { user } = renderWithRouter( , @@ -66,7 +65,6 @@ describe('Project Search Results', () => { expect(screen.getByText('Error loading the Projects for Explore Projects')).toBeInTheDocument(); const retryBtn = screen.getByRole('button', { name: /retry/i }); expect(retryBtn).toBeInTheDocument(); - const user = userEvent.setup(); await user.click(retryBtn); expect(retryFn).toHaveBeenCalled(); }); diff --git a/frontend/src/components/projects/tests/projectsActionFilter.test.js b/frontend/src/components/projects/tests/projectsActionFilter.test.js index b7a2992108..7b7a1b298e 100644 --- a/frontend/src/components/projects/tests/projectsActionFilter.test.js +++ b/frontend/src/components/projects/tests/projectsActionFilter.test.js @@ -1,5 +1,5 @@ import React from 'react'; -import { screen, fireEvent, act } from '@testing-library/react'; +import { screen, act } from '@testing-library/react'; import '@testing-library/jest-dom'; import { store } from '../../../store'; @@ -8,8 +8,8 @@ import { ProjectsActionFilter } from '../projectsActionFilter'; describe('ProjectsActionFilter', () => { const myMock = jest.fn(); - it('test initialization and state changes', () => { - renderWithRouter( + it('test initialization and state changes', async () => { + const { user } = renderWithRouter( , @@ -19,36 +19,36 @@ describe('ProjectsActionFilter', () => { expect(screen.queryByText('Projects to validate')).not.toBeInTheDocument(); expect(screen.queryByText('Archived')).not.toBeInTheDocument(); // open dropdown - fireEvent.click(screen.queryByText('Any project')); + await user.click(screen.queryByText('Any project')); expect(screen.queryByText('Projects to map')).toBeInTheDocument(); expect(screen.queryByText('Projects to validate')).toBeInTheDocument(); expect(screen.queryByText('Archived')).toBeInTheDocument(); // select Projects to validate - fireEvent.click(screen.queryByText('Projects to validate')); + await user.click(screen.queryByText('Projects to validate')); expect(store.getState()['preferences']['action']).toBe('validate'); // select Any projects - fireEvent.click(screen.queryByText('Projects to validate')); - fireEvent.click(screen.queryByText('Any project')); + await user.click(screen.queryByText('Projects to validate')); + await user.click(screen.queryByText('Any project')); expect(store.getState()['preferences']['action']).toBe('any'); // select Projects to map - fireEvent.click(screen.queryByText('Any project')); - fireEvent.click(screen.queryByText('Projects to map')); + await user.click(screen.queryByText('Any project')); + await user.click(screen.queryByText('Projects to map')); expect(store.getState()['preferences']['action']).toBe('map'); // select Projects to archived, action set to any for this special case - fireEvent.click(screen.queryByText('Projects to map')); - fireEvent.click(screen.queryByText(/archived/i)); + await user.click(screen.queryByText('Projects to map')); + await user.click(screen.queryByText(/archived/i)); expect(store.getState()['preferences']['action']).toBe('any'); }); - it('initialize it with validate action set', () => { - renderWithRouter( + it('initialize it with validate action set', async () => { + const { user } = renderWithRouter( , ); expect(screen.queryByText('Projects to validate')).toBeInTheDocument(); - fireEvent.click(screen.queryByText('Projects to validate')); - fireEvent.click(screen.queryByText('Any project')); + await user.click(screen.queryByText('Projects to validate')); + await user.click(screen.queryByText('Any project')); expect(store.getState()['preferences']['action']).toBe('any'); expect(myMock).toHaveBeenCalledTimes(2); }); diff --git a/frontend/src/components/taskSelection/tests/action.test.js b/frontend/src/components/taskSelection/tests/action.test.js index 70d6386eec..e637c82475 100644 --- a/frontend/src/components/taskSelection/tests/action.test.js +++ b/frontend/src/components/taskSelection/tests/action.test.js @@ -1,6 +1,5 @@ import '@testing-library/jest-dom'; import { screen, waitFor, within } from '@testing-library/react'; -import userEvent from '@testing-library/user-event'; import { getProjectSummary } from '../../../network/tests/mockData/projects'; import { userMultipleLockedTasksDetails } from '../../../network/tests/mockData/userStats'; @@ -11,24 +10,25 @@ import { TaskMapAction } from '../action'; import messages from '../messages'; const setup = () => { - renderWithRouter( - - - , - ); + return { + ...renderWithRouter( + + + , + ), + }; }; describe('Task Map Action', () => { it('should display JOSM error', async () => { setupFaultyHandlers(); - setup(); - const user = userEvent.setup(); + const { user } = setup(); await user.click( screen.getByRole('button', { name: /iD Editor/i, @@ -42,7 +42,7 @@ describe('Task Map Action', () => { }), ).toBeInTheDocument(), ); - await userEvent.click( + await user.click( screen.getByRole('button', { name: /close/i, }), @@ -55,8 +55,7 @@ describe('Task Map Action', () => { }); it('should expand accordition to view task details', async () => { - setup(); - const user = userEvent.setup(); + const { user } = setup(); await user.click( screen.getByRole('button', { name: /history/i, diff --git a/frontend/src/components/taskSelection/tests/actionSidebars.test.js b/frontend/src/components/taskSelection/tests/actionSidebars.test.js index 137b1a8c52..01a71b54b6 100644 --- a/frontend/src/components/taskSelection/tests/actionSidebars.test.js +++ b/frontend/src/components/taskSelection/tests/actionSidebars.test.js @@ -20,18 +20,18 @@ import { store } from '../../../store'; describe('Appeareance of unsaved map changes to be dealt with while mapping', () => { test('when splitting a task', async () => { - renderWithRouter( + const { user } = renderWithRouter( , ); - await userEvent.click(screen.getByRole('button', { name: /split task/i })); + await user.click(screen.getByRole('button', { name: /split task/i })); expect( screen.getByRole('heading', { name: messages.unsavedChanges.defaultMessage, }), ).toBeInTheDocument(); - await userEvent.click( + await user.click( within(screen.getByRole('dialog')).getByRole('button', { name: /close/i, }), @@ -53,12 +53,12 @@ describe('Appeareance of unsaved map changes to be dealt with while mapping', () }); test('when selecting another task', async () => { - renderWithRouter( + const { user } = renderWithRouter( , ); - await userEvent.click( + await user.click( screen.getByRole('button', { name: /select another task/i, }), @@ -74,13 +74,13 @@ describe('Appeareance of unsaved map changes to be dealt with while mapping', () describe('Miscellaneous modals and prompts', () => { test('should display/hide split task error', async () => { setupFaultyHandlers(); - renderWithRouter( + const { user } = renderWithRouter( , ); - await userEvent.click( + await user.click( screen.getByRole('button', { name: /split task/i, }), @@ -88,7 +88,7 @@ describe('Miscellaneous modals and prompts', () => { await waitFor(() => expect(screen.getByText('It was not possible to split the task')).toBeInTheDocument(), ); - await userEvent.click( + await user.click( within(screen.getByRole('dialog')).getByRole('button', { name: /close/i, }), @@ -98,14 +98,14 @@ describe('Miscellaneous modals and prompts', () => { test('should prompt the user to read comments', async () => { const historyTabSwitchMock = jest.fn(); - renderWithRouter( + const { user } = renderWithRouter( , ); expect(screen.getByText(messages.readTaskComments.defaultMessage)).toBeInTheDocument(); - await userEvent.click( + await user.click( screen.getByRole('button', { name: messages.readTaskComments.defaultMessage, }), @@ -114,27 +114,27 @@ describe('Miscellaneous modals and prompts', () => { }); test('should display/hide help text', async () => { - renderWithRouter( + const { user } = renderWithRouter( , ); - await userEvent.click(screen.getByLabelText('toggle help')); + await user.click(screen.getByLabelText('toggle help')); expect(screen.getByText(messages.instructionsSelect.defaultMessage)).toBeInTheDocument(); - await userEvent.click(screen.getByLabelText('hide instructions')); + await user.click(screen.getByLabelText('hide instructions')); expect(screen.queryByText(messages.instructionsSelect.defaultMessage)).not.toBeInTheDocument(); }); test('should display/hide task specific instructions', async () => { const instruction = 'this is a sample instruction'; - renderWithRouter( + const { user } = renderWithRouter( , ); expect(screen.getByText(instruction)).toBeInTheDocument(); - await userEvent.click( + await user.click( screen.getByRole('button', { name: messages.taskExtraInfo.defaultMessage, }), @@ -144,7 +144,7 @@ describe('Miscellaneous modals and prompts', () => { test('should display/hide task specific instructions', async () => { const instruction = 'this is a sample instruction'; - renderWithRouter( + const { user } = renderWithRouter( { ); expect(screen.queryByText(instruction)).not.toBeInTheDocument(); - await userEvent.click( + await user.click( screen.getByRole('button', { name: messages.taskExtraInfo.defaultMessage, }), @@ -166,18 +166,18 @@ describe('Miscellaneous modals and prompts', () => { describe('Appeareance of unsaved map changes to be dealt with while validating', () => { test('when stopping validation session', async () => { - renderWithRouter( + const { user } = renderWithRouter( , ); - await userEvent.click(screen.getByRole('button', { name: /stop validation/i })); + await user.click(screen.getByRole('button', { name: /stop validation/i })); expect( screen.getByRole('heading', { name: messages.unsavedChanges.defaultMessage, }), ).toBeInTheDocument(); - await userEvent.click( + await user.click( within(screen.getByRole('dialog')).getByRole('button', { name: /close/i, }), @@ -201,7 +201,7 @@ describe('Appeareance of unsaved map changes to be dealt with while validating', describe('Completion Tab for Validation', () => { it('should update status and comments for multiple tasks', async () => { - const { router } = createComponentWithMemoryRouter( + const { user, router } = createComponentWithMemoryRouter( { /> , ); - const user = userEvent.setup(); await user.click( screen.getAllByRole('radio', { name: /yes/i, @@ -246,7 +245,7 @@ describe('Completion Tab for Validation', () => { }); it('should display radio to mark all tasks', async () => { - const { router } = createComponentWithMemoryRouter( + const { user, router } = createComponentWithMemoryRouter( { , ); - await userEvent.click( + await user.click( screen.getByRole('button', { name: /submit task/i, }), @@ -277,6 +276,7 @@ describe('Completion Tab for Validation', () => { describe('Toggling display of the sidebar', () => { it('should call the sidebar toggle function for ID editor', async () => { const restartMock = jest.fn(); + const user = userEvent.setup(); const context = { ui: jest.fn().mockReturnValue({ restart: restartMock, @@ -291,7 +291,7 @@ describe('Toggling display of the sidebar', () => { , ); - await userEvent.click( + await user.click( screen.getByRole('button', { name: /hide sidebar/i, }), @@ -302,6 +302,7 @@ describe('Toggling display of the sidebar', () => { it('should call the sidebar toggle function for RAPID editor', async () => { const restartMock = jest.fn(); + const user = userEvent.setup(); const context = { ui: jest.fn().mockReturnValue({ restart: restartMock, @@ -316,7 +317,7 @@ describe('Toggling display of the sidebar', () => { , ); - await userEvent.click( + await user.click( screen.getByRole('button', { name: /hide sidebar/i, }), diff --git a/frontend/src/components/taskSelection/tests/actionsTabsNav.test.js b/frontend/src/components/taskSelection/tests/actionsTabsNav.test.js index 862f275061..52823d3fc3 100644 --- a/frontend/src/components/taskSelection/tests/actionsTabsNav.test.js +++ b/frontend/src/components/taskSelection/tests/actionsTabsNav.test.js @@ -1,15 +1,17 @@ import React from 'react'; import '@testing-library/jest-dom'; -import { fireEvent, render, screen } from '@testing-library/react'; +import { render, screen } from '@testing-library/react'; import { ReduxIntlProviders } from '../../../utils/testWithIntl'; import { ActionTabsNav } from '../actionTabsNav'; +import userEvent from '@testing-library/user-event'; describe('ActionTabsNav', () => { const setActiveSection = jest.fn(); const historyTabSwitch = jest.fn(); it('for mapping does not show the Resouces tab', async () => { + const user = userEvent.setup(); render( { 'bg-red white br-100 f6 ml1 flex items-center justify-center', ); expect(screen.queryByText('Resources')).not.toBeInTheDocument(); - fireEvent.click(screen.getByText('Instructions')); + await user.click(screen.getByText('Instructions')); expect(setActiveSection).toHaveBeenLastCalledWith('instructions'); }); @@ -72,6 +74,7 @@ describe('ActionTabsNav', () => { }); it('for validation show the Resouces tab', async () => { + const user = userEvent.setup(); render( { expect(screen.getByText('Resources').className).toContain( 'dib mr4-l mr3 pb2 pointer bb b--red bw1', ); - fireEvent.click(screen.getByText('History')); + await user.click(screen.getByText('History')); expect(historyTabSwitch).toHaveBeenCalled(); - fireEvent.click(screen.getByText('Completion')); + await user.click(screen.getByText('Completion')); expect(setActiveSection).toHaveBeenLastCalledWith('completion'); - fireEvent.click(screen.getByText('Resources')); + await user.click(screen.getByText('Resources')); expect(setActiveSection).toHaveBeenLastCalledWith('resources'); }); }); diff --git a/frontend/src/components/taskSelection/tests/contributions.test.js b/frontend/src/components/taskSelection/tests/contributions.test.js index df54db5521..9d7fa82c8f 100644 --- a/frontend/src/components/taskSelection/tests/contributions.test.js +++ b/frontend/src/components/taskSelection/tests/contributions.test.js @@ -1,6 +1,6 @@ import React from 'react'; import '@testing-library/jest-dom'; -import { fireEvent, screen } from '@testing-library/react'; +import { screen } from '@testing-library/react'; import selectEvent from 'react-select-event'; import { ReduxIntlProviders, renderWithRouter } from '../../../utils/testWithIntl'; @@ -12,7 +12,7 @@ describe('Contributions', () => { const selectTask = jest.fn(); it('render users, links and ', async () => { - const { container } = renderWithRouter( + const { user, container } = renderWithRouter( { expect(screen.getByText('Changesets')).toBeInTheDocument(); expect(screen.getAllByRole('link')[1].href).toBe('https://osmcha.org/?aoi=abc1234'); // clicking on the number of tasks trigger selectTask - fireEvent.click(screen.getAllByText('5')[0]); + await user.click(screen.getAllByText('5')[0]); expect(selectTask).toHaveBeenLastCalledWith([1, 3, 5, 7], 'ALL', 'test'); - fireEvent.click(screen.getAllByText('5')[1]); + await user.click(screen.getAllByText('5')[1]); expect(selectTask).toHaveBeenLastCalledWith([5, 36, 99, 115, 142], 'MAPPED', 'test_1'); // filter ADVANCED users await selectEvent.select(container.querySelectorAll('input')[0], 'Advanced'); @@ -66,8 +66,8 @@ describe('Contributions', () => { expect(screen.queryByText('user_5')).not.toBeInTheDocument(); expect(screen.queryByText('test_1')).not.toBeInTheDocument(); }); - it('clean user selection if we click on the selected tasks of the user', () => { - const { container } = renderWithRouter( + it('clean user selection if we click on the selected tasks of the user', async () => { + const { user, container } = renderWithRouter( { , ); expect(container.querySelector('div.b--blue-dark')).toBeInTheDocument(); - fireEvent.click(screen.getAllByText('5')[1]); + await user.click(screen.getAllByText('5')[1]); expect(selectTask).toHaveBeenLastCalledWith([]); }); }); diff --git a/frontend/src/components/taskSelection/tests/extendSession.test.js b/frontend/src/components/taskSelection/tests/extendSession.test.js index e3f4ebcc97..76891182b9 100644 --- a/frontend/src/components/taskSelection/tests/extendSession.test.js +++ b/frontend/src/components/taskSelection/tests/extendSession.test.js @@ -10,12 +10,13 @@ import messages from '../messages'; describe('Session About To Expire Dialog', () => { it('should display error when session could not be extended', async () => { setupFaultyHandlers(); + const user = userEvent.setup(); render( , ); - await userEvent.click( + await user.click( screen.getByRole('button', { name: /extend session/i, }), @@ -27,6 +28,7 @@ describe('Session About To Expire Dialog', () => { it('should close the modal', async () => { const setShowSessionExpiryDialogMock = jest.fn(); + const user = userEvent.setup(); const { container } = render( { /> , ); - await userEvent.click( + await user.click( screen.getByRole('button', { name: /close/i, }), @@ -49,12 +51,13 @@ describe('Session About To Expire Dialog', () => { describe('Session Expired Dialog', () => { it('should display error when task cannot be relocked', async () => { setupFaultyHandlers(); + const user = userEvent.setup(); render( , ); - await userEvent.click( + await user.click( screen.getByRole('button', { name: /relock tasks/i, }), @@ -66,6 +69,7 @@ describe('Session Expired Dialog', () => { it('should close the modal', async () => { const setShowSessionExpiredDialogMock = jest.fn(); + const user = userEvent.setup(); const { container } = render( { /> , ); - await userEvent.click( + await user.click( screen.getByRole('button', { name: /close/i, }), diff --git a/frontend/src/components/taskSelection/tests/footer.test.js b/frontend/src/components/taskSelection/tests/footer.test.js index 5ccd9063e1..49fc05a965 100644 --- a/frontend/src/components/taskSelection/tests/footer.test.js +++ b/frontend/src/components/taskSelection/tests/footer.test.js @@ -2,7 +2,6 @@ import '@testing-library/jest-dom'; import React from 'react'; import { FormattedMessage } from 'react-intl'; import { act, screen, waitFor } from '@testing-library/react'; -import userEvent from '@testing-library/user-event'; import { MemoryRouter } from 'react-router-dom'; import { Imagery } from '../imagery'; @@ -151,7 +150,7 @@ describe('Footer Lock Tasks', () => { it('should display task cannot be locked for mapping message', async () => { await clearReduxStore(); setupFaultyHandlers(); - createComponentWithMemoryRouter( + const { user } = createComponentWithMemoryRouter( { /> , ); - await userEvent.click( + await user.click( screen.getByRole('button', { name: /map a task/i, }), @@ -174,7 +173,7 @@ describe('Footer Lock Tasks', () => { it('should display no mapped tasks selected message', async () => { await clearReduxStore(); setupFaultyHandlers(); - createComponentWithMemoryRouter( + const { user } = createComponentWithMemoryRouter( { /> , ); - await userEvent.click( + await user.click( screen.getByRole('button', { name: /validate a task/i, }), @@ -200,7 +199,7 @@ describe('Footer Lock Tasks', () => { it('should display task cannot be locked for validation message', async () => { await clearReduxStore(); setupFaultyHandlers(); - createComponentWithMemoryRouter( + const { user } = createComponentWithMemoryRouter( { /> , ); - await userEvent.click( + await user.click( screen.getByRole('button', { name: /validate a task/i, }), @@ -223,7 +222,7 @@ describe('Footer Lock Tasks', () => { it('should display JOSM error', async () => { setupFaultyHandlers(); - createComponentWithMemoryRouter( + const { user } = createComponentWithMemoryRouter( { /> , ); - await userEvent.click( + await user.click( screen.getByRole('button', { name: /map a task/i, }), @@ -245,7 +244,7 @@ describe('Footer Lock Tasks', () => { }), ).toBeInTheDocument(), ); - await userEvent.click( + await user.click( screen.getByRole('button', { name: /close/i, }), @@ -258,12 +257,12 @@ describe('Footer Lock Tasks', () => { }); it('should navigate to explore page for a complete project', async () => { - const { router } = createComponentWithMemoryRouter( + const { user, router } = createComponentWithMemoryRouter( , ); - await userEvent.click( + await user.click( screen.getByRole('button', { name: /select another project/i, }), @@ -272,7 +271,7 @@ describe('Footer Lock Tasks', () => { }); it('should navigate to task action page on mapping a task', async () => { - const { router } = createComponentWithMemoryRouter( + const { user, router } = createComponentWithMemoryRouter( { /> , ); - await userEvent.click( + await user.click( screen.getByRole('button', { name: /map a task/i, }), @@ -296,7 +295,7 @@ describe('Footer Lock Tasks', () => { it('should navigate to task action page on validating a task', async () => { await clearReduxStore(); - const { router } = createComponentWithMemoryRouter( + const { user, router } = createComponentWithMemoryRouter( { /> , ); - await userEvent.click( + await user.click( screen.getByRole('button', { name: /validate a task/i, }), @@ -320,7 +319,7 @@ describe('Footer Lock Tasks', () => { it('should resume mapping', async () => { await clearReduxStore(); - const { router } = createComponentWithMemoryRouter( + const { user, router } = createComponentWithMemoryRouter( { /> , ); - await userEvent.click( + await user.click( screen.getByRole('button', { name: /resume mapping/i, }), @@ -344,7 +343,7 @@ describe('Footer Lock Tasks', () => { it('should resume validation', async () => { await clearReduxStore(); - const { router } = createComponentWithMemoryRouter( + const { user, router } = createComponentWithMemoryRouter( { /> , ); - await userEvent.click( + await user.click( screen.getByRole('button', { name: /resume validation/i, }), @@ -368,7 +367,7 @@ describe('Footer Lock Tasks', () => { it('should fallback editor when user default is not in the list for validation', async () => { await clearReduxStore(); - const { router } = createComponentWithMemoryRouter( + const { user, router } = createComponentWithMemoryRouter( { /> , ); - await userEvent.click( + await user.click( screen.getByRole('button', { name: /resume validation/i, }), @@ -392,7 +391,7 @@ describe('Footer Lock Tasks', () => { it('should fallback editor when user default is not in the list for mapping', async () => { await clearReduxStore(); - const { router } = createComponentWithMemoryRouter( + const { user, router } = createComponentWithMemoryRouter( { /> , ); - await userEvent.click( + await user.click( screen.getByRole('button', { name: /resume mapping/i, }), diff --git a/frontend/src/components/taskSelection/tests/imagery.test.js b/frontend/src/components/taskSelection/tests/imagery.test.js index b94a5a6946..d8eb1611ae 100644 --- a/frontend/src/components/taskSelection/tests/imagery.test.js +++ b/frontend/src/components/taskSelection/tests/imagery.test.js @@ -1,5 +1,5 @@ import React from 'react'; -import { render, screen } from '@testing-library/react'; +import { render, screen, waitFor } from '@testing-library/react'; import userEvent from '@testing-library/user-event'; import '@testing-library/jest-dom'; @@ -179,20 +179,13 @@ describe('Imagery', () => { }); it('should copy value to the clipboard', async () => { - const originalClipboard = { ...global.navigator.clipboard }; - const mockClipboard = { - writeText: jest.fn().mockImplementation(() => Promise.resolve()), - }; - global.navigator.clipboard = mockClipboard; + const user = userEvent.setup({ writeToClipboard: true }); render( , ); - await userEvent.click(screen.getByRole('img')); - expect(navigator.clipboard.writeText).toHaveBeenCalledTimes(1); - expect(navigator.clipboard.writeText).toHaveBeenCalledWith('wms'); - jest.resetAllMocks(); - global.navigator.clipboard = originalClipboard; + await user.click(screen.getByRole('img')); + await waitFor(async () => expect(await navigator.clipboard.readText()).toBe('wms')); }); }); diff --git a/frontend/src/components/taskSelection/tests/index.test.js b/frontend/src/components/taskSelection/tests/index.test.js index 020c39f913..2d0f4477d7 100644 --- a/frontend/src/components/taskSelection/tests/index.test.js +++ b/frontend/src/components/taskSelection/tests/index.test.js @@ -2,7 +2,6 @@ import '@testing-library/jest-dom'; import { screen, act, waitFor } from '@testing-library/react'; import { ReactRouter6Adapter } from 'use-query-params/adapters/react-router-6'; import { QueryParamProvider } from 'use-query-params'; -import userEvent from '@testing-library/user-event'; import { TaskSelection } from '..'; import { getProjectSummary } from '../../../network/tests/mockData/projects'; @@ -20,7 +19,7 @@ describe('Contributions', () => { }); }); - renderWithRouter( + const { user } = renderWithRouter( @@ -31,12 +30,12 @@ describe('Contributions', () => { await waitFor(() => expect(screen.getByText(/Project Specific Mapping Notes/i)).toBeInTheDocument(), ); - await userEvent.click( + await user.click( screen.getByRole('button', { name: /contributions/i, }), ); - await userEvent.click( + await user.click( await screen.findByRole('button', { name: 'Select tasks mapped by user_3', }), @@ -49,7 +48,7 @@ describe('Contributions', () => { }); it('should select tasks validated by the selected user', async () => { - renderWithRouter( + const { user } = renderWithRouter( @@ -60,12 +59,12 @@ describe('Contributions', () => { await waitFor(() => expect(screen.getByText(/Project Specific Mapping Notes/i)).toBeInTheDocument(), ); - await userEvent.click( + await user.click( await screen.findByRole('button', { name: /contributions/i, }), ); - await userEvent.click( + await user.click( await screen.findByRole('button', { name: 'Select tasks validated by user_3', }), @@ -78,7 +77,7 @@ describe('Contributions', () => { }); it('should sort tasks by their task number', async () => { - renderWithRouter( + const { user } = renderWithRouter( @@ -89,18 +88,18 @@ describe('Contributions', () => { await waitFor(() => expect(screen.getByText(/Project Specific Mapping Notes/i)).toBeInTheDocument(), ); - await userEvent.click( + await user.click( await screen.findByRole('button', { name: /tasks/i, }), ); - await userEvent.click( + await user.click( screen.getByRole('button', { name: /Most recently updated/i, }), ); - await userEvent.click(await screen.findByText(/sort by task number/i)); + await user.click(await screen.findByText(/sort by task number/i)); const firstTask = screen.getByRole('button', { name: /Task #1 Patrik_B/i, }); @@ -111,7 +110,7 @@ describe('Contributions', () => { }); it('should clear text when close icon is clicked', async () => { - renderWithRouter( + const { user } = renderWithRouter( @@ -122,15 +121,15 @@ describe('Contributions', () => { await waitFor(() => expect(screen.getByText(/Project Specific Mapping Notes/i)).toBeInTheDocument(), ); - await userEvent.click( + await user.click( await screen.findByRole('button', { name: /tasks/i, }), ); const userQueryText = screen.getByRole('textbox'); - await userEvent.type(userQueryText, 'hello'); + await user.type(userQueryText, 'hello'); expect(userQueryText).toHaveValue('hello'); - await userEvent.click( + await user.click( screen.getByRole('button', { name: /clear/i, }), diff --git a/frontend/src/components/taskSelection/tests/legend.test.js b/frontend/src/components/taskSelection/tests/legend.test.js index ae2dd69637..61c5831c64 100644 --- a/frontend/src/components/taskSelection/tests/legend.test.js +++ b/frontend/src/components/taskSelection/tests/legend.test.js @@ -1,11 +1,13 @@ import React from 'react'; -import { render, fireEvent, screen } from '@testing-library/react'; +import { render, screen } from '@testing-library/react'; import '@testing-library/jest-dom'; import { ReduxIntlProviders } from '../../../utils/testWithIntl'; import { TasksMapLegend } from '../legend'; +import userEvent from '@testing-library/user-event'; -test('Legend collapse / expand when clicking', () => { +test('Legend collapse / expand when clicking', async () => { + const user = userEvent.setup(); render( @@ -20,8 +22,8 @@ test('Legend collapse / expand when clicking', () => { expect(screen.getByText('More mapping needed')).toBeInTheDocument(); expect(screen.getByText('Finished')).toBeInTheDocument(); expect(screen.getByText('Locked')).toBeInTheDocument(); - fireEvent.click(screen.getByText('Legend')); + await user.click(screen.getByText('Legend')); expect(screen.queryByText('Available for mapping')).not.toBeInTheDocument(); - fireEvent.click(screen.getByText('Legend')); + await user.click(screen.getByText('Legend')); expect(screen.getByText('Available for mapping')).toBeInTheDocument(); }); diff --git a/frontend/src/components/taskSelection/tests/lockedTasks.test.js b/frontend/src/components/taskSelection/tests/lockedTasks.test.js index 7211091c81..b623a9bdcc 100644 --- a/frontend/src/components/taskSelection/tests/lockedTasks.test.js +++ b/frontend/src/components/taskSelection/tests/lockedTasks.test.js @@ -138,13 +138,14 @@ describe('test LockedTaskModalContent', () => { describe('License Modal', () => { it('should accept the license', async () => { const lockTasksMock = jest.fn(); + const user = userEvent.setup(); render( , ); await screen.findByText('Sample License'); - await userEvent.click( + await user.click( screen.getByRole('button', { name: /accept/i, }), @@ -154,13 +155,14 @@ describe('License Modal', () => { it('should decline request to accept the license', async () => { const closeMock = jest.fn(); + const user = userEvent.setup(); render( , ); await screen.findByText('Sample License'); - await userEvent.click( + await user.click( screen.getByRole('button', { name: /cancel/i, }), @@ -175,7 +177,7 @@ test('SameProjectLock should display relevant message when user has multiple tas tasks: [1811, 1222], status: 'LOCKED_FOR_VALIDATION', }; - const { router } = createComponentWithMemoryRouter( + const { user, router } = createComponentWithMemoryRouter( , @@ -183,7 +185,7 @@ test('SameProjectLock should display relevant message when user has multiple tas expect( screen.getByText(messages.currentProjectLockTextPlural.defaultMessage), ).toBeInTheDocument(); - await userEvent.click( + await user.click( screen.getByRole('button', { name: 'Validate those tasks', }), diff --git a/frontend/src/components/taskSelection/tests/multipleTaskHistories.test.js b/frontend/src/components/taskSelection/tests/multipleTaskHistories.test.js index 17869dab38..9f7d23034d 100644 --- a/frontend/src/components/taskSelection/tests/multipleTaskHistories.test.js +++ b/frontend/src/components/taskSelection/tests/multipleTaskHistories.test.js @@ -1,9 +1,10 @@ import React from 'react'; import '@testing-library/jest-dom'; -import { render, screen, fireEvent } from '@testing-library/react'; +import { render, screen } from '@testing-library/react'; import { MultipleTaskHistoriesAccordion } from '../multipleTaskHistories'; import { ReduxIntlProviders } from '../../../utils/testWithIntl'; +import userEvent from '@testing-library/user-event'; describe('MultipleTaskHistories Accordion', () => { it('does not render accordion with task history items if there are no tasks', () => { @@ -18,7 +19,7 @@ describe('MultipleTaskHistories Accordion', () => { expect(screen.queryByText(/Activities/i)).not.toBeInTheDocument(); }); - it('renders accordion correctly with task history items for 2 tasks', () => { + it('renders accordion correctly with task history items for 2 tasks', async () => { const tasks = [ { taskId: 1, @@ -51,6 +52,7 @@ describe('MultipleTaskHistories Accordion', () => { ], }, ]; + const user = userEvent.setup(); render( @@ -61,9 +63,9 @@ describe('MultipleTaskHistories Accordion', () => { expect(screen.getByText(/Task 2/i)).toBeInTheDocument(); const taskAccordionItems = screen.getAllByRole('button'); - taskAccordionItems.forEach((taskBtn) => { - fireEvent.click(taskBtn); - }); + for (const taskBtn of taskAccordionItems) { + await user.click(taskBtn); + } expect(screen.getAllByText(/Comments/i)).toHaveLength(2); expect(screen.getAllByText(/Activities/i)).toHaveLength(2); diff --git a/frontend/src/components/taskSelection/tests/permissionErrorModal.test.js b/frontend/src/components/taskSelection/tests/permissionErrorModal.test.js index f8d7154da2..006322f6e0 100644 --- a/frontend/src/components/taskSelection/tests/permissionErrorModal.test.js +++ b/frontend/src/components/taskSelection/tests/permissionErrorModal.test.js @@ -3,7 +3,6 @@ import React from 'react'; import { FormattedMessage } from 'react-intl'; import { MemoryRouter } from 'react-router-dom'; import { screen } from '@testing-library/react'; -import userEvent from '@testing-library/user-event'; import { createComponentWithIntl, @@ -143,12 +142,12 @@ describe('UserPermissionErrorContent', () => { }, ], }; - const { router } = createComponentWithMemoryRouter( + const { user, router } = createComponentWithMemoryRouter( , ); - await userEvent.click( + await user.click( screen.getByRole('button', { name: /select another project/i, }), diff --git a/frontend/src/components/taskSelection/tests/resourcesTab.test.js b/frontend/src/components/taskSelection/tests/resourcesTab.test.js index 3f88c1556b..aee4be1b88 100644 --- a/frontend/src/components/taskSelection/tests/resourcesTab.test.js +++ b/frontend/src/components/taskSelection/tests/resourcesTab.test.js @@ -1,10 +1,11 @@ import React from 'react'; import '@testing-library/jest-dom'; -import { fireEvent, render, screen, waitFor } from '@testing-library/react'; +import { render, screen, waitFor } from '@testing-library/react'; import { ReduxIntlProviders } from '../../../utils/testWithIntl'; import { tasks } from '../../../network/tests/mockData/taskGrid'; import { ResourcesTab } from '../resourcesTab'; +import userEvent from '@testing-library/user-event'; describe('ResourcesTab', () => { const projectData = { @@ -13,6 +14,7 @@ describe('ResourcesTab', () => { changesetComment: '#hot-osm-project-123 #buildings', }; it('with multiple tasks locked', async () => { + const user = userEvent.setup(); const { container } = render( @@ -31,13 +33,13 @@ describe('ResourcesTab', () => { expect(container.querySelectorAll('a')[3].href).toContain('/projects/1/tasks/?as_file=true'); const selectInput = container.querySelector('input'); - fireEvent.focus(selectInput); - fireEvent.keyDown(selectInput, { key: 'ArrowDown' }); + await selectInput.focus(); + await user.type(selectInput, '{ArrowDown}'); await waitFor(() => { expect(screen.getByText(1)); }); expect(screen.getByText(2)); - fireEvent.click(screen.getByText(1)); + await user.click(screen.getByText(1)); await expect(screen.queryByText('Select task')).not.toBeInTheDocument(); expect(screen.getByText("See task's changesets").disabled).toBeFalsy(); }); diff --git a/frontend/src/components/taskSelection/tests/tabSelector.test.js b/frontend/src/components/taskSelection/tests/tabSelector.test.js index 7a21f01348..62cf75fb83 100644 --- a/frontend/src/components/taskSelection/tests/tabSelector.test.js +++ b/frontend/src/components/taskSelection/tests/tabSelector.test.js @@ -1,13 +1,15 @@ import React from 'react'; import '@testing-library/jest-dom'; -import { fireEvent, render, screen } from '@testing-library/react'; +import { render, screen } from '@testing-library/react'; import { ReduxIntlProviders } from '../../../utils/testWithIntl'; import { TabSelector } from '../tabSelector'; +import userEvent from '@testing-library/user-event'; describe('TabSelector component', () => { const setActiveSection = jest.fn(); - it('with the tasks tab active', () => { + it('with the tasks tab active', async () => { + const user = userEvent.setup(); const { container } = render( @@ -19,10 +21,11 @@ describe('TabSelector component', () => { expect(screen.getByText('Tasks').className).toBe('mr4 pb2 fw5 pointer dib bb bw1'); expect(screen.getByText('Instructions').className).not.toContain('bb bw1 b--blue-dark'); expect(screen.getByText('contributions').className).not.toContain('bb bw1 b--blue-dark'); - fireEvent.click(screen.getByText('Instructions')); + await user.click(screen.getByText('Instructions')); expect(setActiveSection).toHaveBeenCalledWith('instructions'); }); - it('with the instructions tab active', () => { + it('with the instructions tab active', async () => { + const user = userEvent.setup(); render( @@ -31,10 +34,11 @@ describe('TabSelector component', () => { expect(screen.getByText('Tasks').className).not.toContain('bb bw1 b--blue-dark'); expect(screen.getByText('Instructions').className).toContain('mr4 pb2 fw5 pointer dib bb bw1'); expect(screen.getByText('contributions').className).not.toContain('bb bw1 b--blue-dark'); - fireEvent.click(screen.getByText('contributions')); + await user.click(screen.getByText('contributions')); expect(setActiveSection).toHaveBeenLastCalledWith('contributions'); }); - it('with the contributions tab active', () => { + it('with the contributions tab active', async () => { + const user = userEvent.setup(); render( @@ -43,7 +47,7 @@ describe('TabSelector component', () => { expect(screen.getByText('Tasks').className).not.toContain('bb bw1 b--blue-dark'); expect(screen.getByText('Instructions').className).not.toContain('bb bw1 b--blue-dark'); expect(screen.getByText('contributions').className).toContain('mr4 pb2 fw5 pointer dib bb bw1'); - fireEvent.click(screen.getByText('Tasks')); + await user.click(screen.getByText('Tasks')); expect(setActiveSection).toHaveBeenLastCalledWith('tasks'); }); }); diff --git a/frontend/src/components/taskSelection/tests/taskActivity.test.js b/frontend/src/components/taskSelection/tests/taskActivity.test.js index 509785eb07..7f38831956 100644 --- a/frontend/src/components/taskSelection/tests/taskActivity.test.js +++ b/frontend/src/components/taskSelection/tests/taskActivity.test.js @@ -1,5 +1,5 @@ import React from 'react'; -import { fireEvent, screen } from '@testing-library/react'; +import { screen } from '@testing-library/react'; import '@testing-library/jest-dom'; import { ReduxIntlProviders, renderWithRouter } from '../../../utils/testWithIntl'; @@ -42,8 +42,8 @@ describe('TaskHistory', () => { lastUpdated: Date.now() - 1e3 * 60 * 60, numberOfComments: null, }; - it('renders the task history comments and activities for a given project', () => { - renderWithRouter( + it('renders the task history comments and activities for a given project', async () => { + const { user } = renderWithRouter( , @@ -65,7 +65,7 @@ describe('TaskHistory', () => { ).not.toBeInTheDocument(); expect(screen.queryByText('locked for validation 2 hours ago')).not.toBeInTheDocument(); - fireEvent.click(historyRadioButtons[1]); // check activities radio option + await user.click(historyRadioButtons[1]); // check activities radio option expect(historyRadioButtons[0]).not.toBeChecked(); expect(historyRadioButtons[2]).not.toBeChecked(); expect(screen.getByText('marked as more mapping needed 1 minute ago')).toBeInTheDocument(); @@ -73,7 +73,7 @@ describe('TaskHistory', () => { expect(screen.queryByText('commented 1 hour ago')).not.toBeInTheDocument(); expect(screen.queryByText('missing buildings')).not.toBeInTheDocument(); - fireEvent.click(historyRadioButtons[2]); // check All radio option + await user.click(historyRadioButtons[2]); // check All radio option expect(historyRadioButtons[0]).not.toBeChecked(); expect(historyRadioButtons[1]).not.toBeChecked(); expect(screen.getByText('marked as more mapping needed 1 minute ago')).toBeInTheDocument(); @@ -82,13 +82,13 @@ describe('TaskHistory', () => { expect(screen.getByText('missing buildings')).toBeInTheDocument(); }); - it('does not render any task history when not provided', () => { + it('does not render any task history when not provided', async () => { let history = { taskId: 15, projectId: 2, taskStatus: 'INVALIDATED', }; - renderWithRouter( + const { user } = renderWithRouter( , @@ -104,11 +104,11 @@ describe('TaskHistory', () => { expect(historyRadioButtons[1]).not.toBeChecked(); expect(historyRadioButtons[2]).not.toBeChecked(); - fireEvent.click(historyRadioButtons[1]); // check activities radio option + await user.click(historyRadioButtons[1]); // check activities radio option expect(historyRadioButtons[0]).not.toBeChecked(); expect(historyRadioButtons[2]).not.toBeChecked(); - fireEvent.click(historyRadioButtons[2]); // check All radio option + await user.click(historyRadioButtons[2]); // check All radio option expect(historyRadioButtons[0]).not.toBeChecked(); expect(historyRadioButtons[1]).not.toBeChecked(); }); diff --git a/frontend/src/components/taskSelection/tests/taskList.test.js b/frontend/src/components/taskSelection/tests/taskList.test.js index aec6478663..823754cd80 100644 --- a/frontend/src/components/taskSelection/tests/taskList.test.js +++ b/frontend/src/components/taskSelection/tests/taskList.test.js @@ -1,6 +1,5 @@ import '@testing-library/jest-dom'; -import { act, screen, within } from '@testing-library/react'; -import userEvent from '@testing-library/user-event'; +import { act, screen, waitFor, within } from '@testing-library/react'; import { getProjectSummary } from '../../../network/tests/mockData/projects'; import { store } from '../../../store'; @@ -24,12 +23,12 @@ describe('Task Item', () => { it('should set the clicked task', async () => { const selectTaskMock = jest.fn(); - renderWithRouter( + const { user } = renderWithRouter( , ); - await userEvent.click( + await user.click( screen.getByRole('button', { name: /Task #8 helnershingthap/i, }), @@ -39,22 +38,17 @@ describe('Task Item', () => { it('should set the zoom task ID of the task to be zoomed', async () => { const setZoomedTaskIdMock = jest.fn(); - renderWithRouter( + const { user } = renderWithRouter( , ); - await userEvent.click(screen.getAllByRole('button')[1]); + await user.click(screen.getAllByRole('button')[1]); expect(setZoomedTaskIdMock).toHaveBeenCalledWith(8); }); it('should copy task URL to the clipboard', async () => { - const originalClipboard = { ...global.navigator.clipboard }; - const mockClipboard = { - writeText: jest.fn().mockImplementation(() => Promise.resolve()), - }; - global.navigator.clipboard = mockClipboard; - createComponentWithMemoryRouter( + const { user } = createComponentWithMemoryRouter( , @@ -62,20 +56,19 @@ describe('Task Item', () => { route: '/projects/6/tasks', }, ); - await userEvent.click(screen.getAllByRole('button')[2]); - expect(navigator.clipboard.writeText).toHaveBeenCalledTimes(1); - expect(navigator.clipboard.writeText).toHaveBeenCalledWith( - `${window.location.origin}/projects/6/tasks?search=8`, + await user.click(screen.getAllByRole('button')[2]); + await waitFor(async () => + expect(await navigator.clipboard.readText()).toBe( + `${window.location.origin}/projects/6/tasks?search=8`, + ), ); - jest.resetAllMocks(); - global.navigator.clipboard = originalClipboard; }); it('should display task detail modal', async () => { act(() => { store.dispatch({ type: 'SET_TOKEN', token: 'validToken' }); }); - renderWithRouter( + const { user } = renderWithRouter( { /> , ); - await userEvent.click(screen.getByTitle(/See task history/i)); + await user.click(screen.getByTitle(/See task history/i)); expect( within(screen.getByRole('dialog')).getByRole('radio', { name: /activities/i }), ).toBeInTheDocument(); @@ -95,24 +88,24 @@ describe('Task Item', () => { describe('Task Filter', () => { it('should not show mapped option if user cannot validate', async () => { - renderWithRouter( + const { user } = renderWithRouter( , ); - await userEvent.click(screen.getByRole('button')); + await user.click(screen.getByRole('button')); expect(screen.queryByText(/mapped/i)).not.toBeInTheDocument(); }); it('should show mapped option if user can validate', async () => { const setStatusFn = jest.fn(); - renderWithRouter( + const { user } = renderWithRouter( , ); - await userEvent.click(screen.getByRole('button')); - await userEvent.click(screen.getByText(/ready for validation/i)); + await user.click(screen.getByRole('button')); + await user.click(screen.getByText(/ready for validation/i)); expect(setStatusFn).toHaveBeenCalledWith('MAPPED'); }); }); diff --git a/frontend/src/components/teamsAndOrgs/tests/campaigns.test.js b/frontend/src/components/teamsAndOrgs/tests/campaigns.test.js index 5bb2a13892..6b69cbcd14 100644 --- a/frontend/src/components/teamsAndOrgs/tests/campaigns.test.js +++ b/frontend/src/components/teamsAndOrgs/tests/campaigns.test.js @@ -1,4 +1,4 @@ -import { screen, waitFor, fireEvent } from '@testing-library/react'; +import { screen, waitFor } from '@testing-library/react'; import '@testing-library/jest-dom'; import { IntlProviders, renderWithRouter } from '../../../utils/testWithIntl'; import { CampaignsManagement } from '../campaigns'; @@ -65,8 +65,8 @@ describe('CampaignsManagement component', () => { expect(container.querySelectorAll('svg').length).toBe(5); }); - it('filters campaigns list by the search query', () => { - renderWithRouter( + it('filters campaigns list by the search query', async () => { + const { user } = renderWithRouter( { , ); const textField = screen.getByRole('textbox'); - fireEvent.change(textField, { - target: { - value: '2', - }, - }); + await user.clear(textField); + await user.type(textField, '2'); expect(screen.getByRole('heading', { name: 'Campaign 2' })).toHaveTextContent('Campaign 2'); - fireEvent.change(textField, { - target: { - value: 'not 2', - }, - }); + await user.clear(textField); + await user.type(textField, 'not 2'); expect(screen.queryByRole('heading', { name: 'Campaign 2' })).not.toBeInTheDocument(); expect(screen.queryByText('There are no campaigns yet.')).toBeInTheDocument(); }); diff --git a/frontend/src/components/teamsAndOrgs/tests/members.test.js b/frontend/src/components/teamsAndOrgs/tests/members.test.js index 51b9e77a71..3db914800f 100644 --- a/frontend/src/components/teamsAndOrgs/tests/members.test.js +++ b/frontend/src/components/teamsAndOrgs/tests/members.test.js @@ -1,6 +1,5 @@ import '@testing-library/jest-dom'; import React from 'react'; -import userEvent from '@testing-library/user-event'; import { Provider } from 'react-redux'; import { screen } from '@testing-library/react'; @@ -123,12 +122,11 @@ describe('Members Component', () => { }); it('should display actionable buttons when edit button is clicked', async () => { - renderWithRouter( + const { user } = renderWithRouter( , ); - const user = userEvent.setup(); await user.click(screen.getByRole('button', { name: messages.edit.defaultMessage })); expect(screen.getByRole('combobox')).toBeInTheDocument(); expect( @@ -142,12 +140,11 @@ describe('Members Component', () => { it('should not display cross icon with only one member present', async () => { const mockRemoveMembers = jest.fn(); - const { container } = renderWithRouter( + const { user, container } = renderWithRouter( , ); - const user = userEvent.setup(); await user.click(screen.getByRole('button', { name: messages.edit.defaultMessage })); // Matching with that one SVG being displayed from the react-select expect(container.querySelectorAll('svg').length).toBe(1); diff --git a/frontend/src/components/teamsAndOrgs/tests/organisations.test.js b/frontend/src/components/teamsAndOrgs/tests/organisations.test.js index 701d097351..0979de5ee6 100644 --- a/frontend/src/components/teamsAndOrgs/tests/organisations.test.js +++ b/frontend/src/components/teamsAndOrgs/tests/organisations.test.js @@ -1,5 +1,5 @@ import '@testing-library/jest-dom'; -import { screen, fireEvent } from '@testing-library/react'; +import { screen } from '@testing-library/react'; import { FormattedMessage } from 'react-intl'; import { Provider } from 'react-redux'; @@ -171,7 +171,7 @@ describe('OrgsManagement with', () => { }); it('filters organisations list by the search query', async () => { - renderWithRouter( + const { user } = renderWithRouter( { , ); const textField = screen.getByRole('textbox'); - fireEvent.change(textField, { - target: { - value: 'Singapore', - }, - }); + await user.clear(textField); + await user.type(textField, 'Singapore'); expect(screen.getByRole('heading', { name: 'Singapore Red Cross' })).toHaveTextContent( 'Singapore Red Cross', ); - fireEvent.change(textField, { - target: { - value: 'not Singapore', - }, - }); + await user.clear(textField); + await user.type(textField, 'not Singapore'); expect(screen.queryByRole('heading', { name: 'Singapore Red Cross' })).not.toBeInTheDocument(); expect(screen.queryByText('No organizations were found.')).toBeInTheDocument(); }); diff --git a/frontend/src/components/teamsAndOrgs/tests/projects.test.js b/frontend/src/components/teamsAndOrgs/tests/projects.test.js index 162f05fe4b..43f566b497 100644 --- a/frontend/src/components/teamsAndOrgs/tests/projects.test.js +++ b/frontend/src/components/teamsAndOrgs/tests/projects.test.js @@ -1,5 +1,4 @@ import '@testing-library/jest-dom'; -import userEvent from '@testing-library/user-event'; import { screen, waitFor } from '@testing-library/react'; import { Projects } from '../projects'; @@ -34,12 +33,11 @@ describe('Projects component', () => { }); it('should navigate to project creation page on new button click', async () => { - const { router } = createComponentWithMemoryRouter( + const { user, router } = createComponentWithMemoryRouter( , ); - const user = userEvent.setup(); await user.click(screen.getByRole('button', { name: /new/i })); await waitFor(() => expect(router.state.location.pathname).toBe('/manage/projects/new/')); }); @@ -54,12 +52,11 @@ describe('Projects component', () => { }); it('should navigate to manage projects page when view all is clicked ', async () => { - const { router } = createComponentWithMemoryRouter( + const { user, router } = createComponentWithMemoryRouter( , ); - const user = userEvent.setup(); await user.click( screen.getByRole('link', { name: /view all/i, diff --git a/frontend/src/components/teamsAndOrgs/tests/tasksStats.test.js b/frontend/src/components/teamsAndOrgs/tests/tasksStats.test.js index 3c88461af6..7bc261bfa3 100644 --- a/frontend/src/components/teamsAndOrgs/tests/tasksStats.test.js +++ b/frontend/src/components/teamsAndOrgs/tests/tasksStats.test.js @@ -1,10 +1,11 @@ import React from 'react'; -import { render, screen, fireEvent } from '@testing-library/react'; +import { render, screen } from '@testing-library/react'; import '@testing-library/jest-dom'; import { ReduxIntlProviders } from '../../../utils/testWithIntl'; import { tasksStats } from '../../../network/tests/mockData/tasksStats'; import { TasksStats } from '../tasksStats'; +import userEvent from '@testing-library/user-event'; jest.mock('react-chartjs-2', () => ({ Bar: () => null, @@ -112,6 +113,7 @@ describe('TasksStats', () => { }); it('render "Try again" button case the error is not on the dates', async () => { + const user = userEvent.setup(); render( { ).toBeInTheDocument(); expect(screen.getByText('An error occurred while loading stats.')).toBeInTheDocument(); expect(screen.getByText('Try again')).toBeInTheDocument(); - fireEvent.click(screen.getByText('Try again')); + await user.click(screen.getByText('Try again')); expect(retryFn).toHaveBeenCalled(); }); }); diff --git a/frontend/src/components/teamsAndOrgs/tests/teams.test.js b/frontend/src/components/teamsAndOrgs/tests/teams.test.js index d118d497e0..88015c7897 100644 --- a/frontend/src/components/teamsAndOrgs/tests/teams.test.js +++ b/frontend/src/components/teamsAndOrgs/tests/teams.test.js @@ -1,6 +1,5 @@ import '@testing-library/jest-dom'; import TestRenderer from 'react-test-renderer'; -import userEvent from '@testing-library/user-event'; import { render, screen, waitFor, act } from '@testing-library/react'; import { FormattedMessage } from 'react-intl'; import { MemoryRouter } from 'react-router-dom'; @@ -295,12 +294,11 @@ describe('Teams component', () => { }); it('should navigate to project creation page on new button click', async () => { - const { router } = createComponentWithMemoryRouter( + const { user, router } = createComponentWithMemoryRouter( , ); - const user = userEvent.setup(); await user.click(screen.getByRole('button', { name: /new/i })); await waitFor(() => expect(router.state.location.pathname).toBe('/manage/teams/new/')); }); @@ -315,12 +313,11 @@ describe('Teams component', () => { }); it('should navigate to manage projects page when view all is clicked ', async () => { - const { router } = createComponentWithMemoryRouter( + const { user, router } = createComponentWithMemoryRouter( , ); - const user = userEvent.setup(); await user.click( screen.getByRole('link', { name: /view all/i, @@ -385,7 +382,7 @@ describe('Team Card', () => { describe('TeamSideBar component', () => { it('should search for users by search query', async () => { - renderWithRouter( + const { user } = renderWithRouter( , @@ -397,7 +394,7 @@ describe('TeamSideBar component', () => { name: team.members[0].username, }), ).toBeInTheDocument(); - await userEvent.type(inputField, 'not_sample_user'); + await user.type(inputField, 'not_sample_user'); expect( screen.queryByRole('link', { name: team.members[0].username, diff --git a/frontend/src/components/tests/button.test.js b/frontend/src/components/tests/button.test.js index 2e1c7e9f70..0f5aa886a9 100644 --- a/frontend/src/components/tests/button.test.js +++ b/frontend/src/components/tests/button.test.js @@ -1,13 +1,15 @@ -import { render, screen, fireEvent } from '@testing-library/react'; +import { render, screen } from '@testing-library/react'; import '@testing-library/jest-dom'; import { Button, CustomButton, EditButton } from '../button'; import { BanIcon } from '../svgIcons'; import { renderWithRouter } from '../../utils/testWithIntl'; +import userEvent from '@testing-library/user-event'; describe('Button', () => { - it('children and onClick props', () => { + it('children and onClick props', async () => { let testVar; + const user = userEvent.setup(); const { container } = render(