From 6774a65df2dc1646a4498fa8c09213460edb03a1 Mon Sep 17 00:00:00 2001 From: Akansha Sakhre Date: Wed, 6 Nov 2024 11:17:04 +0530 Subject: [PATCH] reverted to using userevent --- .../Auth/ConfirmOTP/ConfirmOTP.test.tsx | 17 +++++------ .../ResetPassword/ResetPasswordPhone.test.tsx | 6 ++-- src/containers/Collection/Collection.test.tsx | 14 ++++++---- src/containers/MyAccount/MyAccount.test.tsx | 27 +++++++++--------- .../Organization/Organisation.test.tsx | 10 ++++--- .../OrganisationFLows.test.tsx | 9 ++++-- .../SettingList/Providers/Providers.test.tsx | 28 ++++++++++--------- 7 files changed, 61 insertions(+), 50 deletions(-) diff --git a/src/containers/Auth/ConfirmOTP/ConfirmOTP.test.tsx b/src/containers/Auth/ConfirmOTP/ConfirmOTP.test.tsx index 2a406960f..e978091ec 100644 --- a/src/containers/Auth/ConfirmOTP/ConfirmOTP.test.tsx +++ b/src/containers/Auth/ConfirmOTP/ConfirmOTP.test.tsx @@ -1,5 +1,5 @@ -import { fireEvent, render, screen, waitFor } from '@testing-library/react'; -import UserEvent from '@testing-library/user-event'; +import { render, screen, waitFor } from '@testing-library/react'; +import userEvent from '@testing-library/user-event'; import { MemoryRouter } from 'react-router-dom'; import { vi } from 'vitest'; import axios from 'axios'; @@ -10,6 +10,7 @@ import { ConfirmOTP } from './ConfirmOTP'; vi.mock('axios'); const mockedAxios = axios as any; +const user = userEvent.setup(); const mockedState = { state: { @@ -63,11 +64,11 @@ describe('', () => { await waitFor(() => { // enter the otp const input = screen.getByRole('textbox'); - UserEvent.type(input, '12345'); + user.type(input, '12345'); // click on continue const continueButton = screen.getByText('Continue'); - fireEvent.click(continueButton); + user.click(continueButton); }); await waitFor(() => {}); @@ -82,11 +83,11 @@ describe('', () => { await waitFor(() => { // enter the otp const input = screen.getByRole('textbox'); - UserEvent.type(input, '12345'); + user.type(input, '12345'); // click on continue const continueButton = screen.getByText('Continue'); - fireEvent.click(continueButton); + user.click(continueButton); }); await waitFor(() => {}); @@ -102,7 +103,7 @@ describe('', () => { await waitFor(() => { const resendButton = screen.getByTestId('resendOtp'); - fireEvent.click(resendButton); + user.click(resendButton); }); // click on resend button @@ -119,7 +120,7 @@ describe('', () => { await waitFor(() => { // click on resend button const resendButton = screen.getByTestId('resendOtp'); - fireEvent.click(resendButton); + user.click(resendButton); }); await waitFor(() => {}); diff --git a/src/containers/Auth/ResetPassword/ResetPasswordPhone.test.tsx b/src/containers/Auth/ResetPassword/ResetPasswordPhone.test.tsx index 049db7472..e4c5c4822 100644 --- a/src/containers/Auth/ResetPassword/ResetPasswordPhone.test.tsx +++ b/src/containers/Auth/ResetPassword/ResetPasswordPhone.test.tsx @@ -1,4 +1,5 @@ import { render, screen, fireEvent, waitFor } from '@testing-library/react'; +import userEvent from '@testing-library/user-event'; import { MemoryRouter, Route, Routes } from 'react-router'; import axios from 'axios'; import { vi } from 'vitest'; @@ -7,6 +8,7 @@ import { ResetPasswordPhone } from './ResetPasswordPhone'; vi.mock('axios'); const mockedAxios = axios as any; +const user = userEvent.setup(); export const postRequestMock = () => { const responseData = { data: { data: {} } }; @@ -55,7 +57,7 @@ describe('', () => { // click on GENERATE button const continueButton = screen.getByText('Generate OTP to confirm'); - fireEvent.click(continueButton); + user.click(continueButton); await waitFor(() => { expect(screen.getByTestId('AuthContainer')).toHaveTextContent( @@ -86,7 +88,7 @@ describe('', () => { expect(screen.getByText('Generate OTP to confirm')).toBeInTheDocument(); }); const continueButton = screen.getByText('Generate OTP to confirm'); - await fireEvent.click(continueButton); + await user.click(continueButton); await waitFor(() => { expect(screen.getByText('Confirm OTP')).toBeInTheDocument(); diff --git a/src/containers/Collection/Collection.test.tsx b/src/containers/Collection/Collection.test.tsx index 3a7627a7b..6c9675b15 100644 --- a/src/containers/Collection/Collection.test.tsx +++ b/src/containers/Collection/Collection.test.tsx @@ -16,6 +16,7 @@ import * as FormLayout from 'containers/Form/FormLayout'; import { getRoleNamesMock } from 'containers/StaffManagement/StaffManagement.test.helper'; import { BrowserRouter, MemoryRouter, Routes, Route } from 'react-router-dom'; import { getSearchCollectionQuery } from 'mocks/Search'; +import userEvent from '@testing-library/user-event'; const mocks = [ getRoleNamesMock, @@ -52,6 +53,7 @@ vi.mock('common/notification', async (importOriginal) => { }; }); +const user = userEvent.setup(); const mockedUsedNavigate = vi.fn(); vi.mock('react-router-dom', async () => ({ ...(await vi.importActual('react-router-dom')), @@ -87,11 +89,11 @@ describe('collection', () => { // remove first user const removeUser = getAllByTestId('deleteIcon'); - fireEvent.click(removeUser[0]); + user.click(removeUser[0]); // click on SAVE const saveButton = getByTestId('submitActionButton'); await waitFor(() => { - fireEvent.click(saveButton); + user.click(saveButton); }); }); @@ -117,7 +119,7 @@ describe('collection', () => { fireEvent.change(collectionInputs[0], { target: { value: 'Sample Collection Title' } }); fireEvent.change(collectionInputs[1], { target: { value: 'Sample Collection Description' } }); - fireEvent.click(getByText('Save')); + user.click(getByText('Save')); }); test('should be able to check for existing collections', async () => { @@ -132,9 +134,9 @@ describe('collection', () => { const collectionInputs = getAllByRole('textbox'); fireEvent.change(collectionInputs[0], { target: { value: 'Staff group' } }); - fireEvent.click(collectionInputs[1]); + user.click(collectionInputs[1]); - fireEvent.click(getByText('Save')); + user.click(getByText('Save')); await waitFor(() => { expect(screen.getByText('Title already exists.')).toBeInTheDocument(); @@ -166,7 +168,7 @@ describe('collection', () => { expect(getByTestId('collection')).toBeInTheDocument(); }); - fireEvent.click(getByTestId('collection')); + user.click(getByTestId('collection')); await waitFor(() => { expect(mockCallback).toBeCalled(); diff --git a/src/containers/MyAccount/MyAccount.test.tsx b/src/containers/MyAccount/MyAccount.test.tsx index 8ba936ef8..8d30e7fe5 100644 --- a/src/containers/MyAccount/MyAccount.test.tsx +++ b/src/containers/MyAccount/MyAccount.test.tsx @@ -1,5 +1,5 @@ import { fireEvent, render, screen, waitFor, within } from '@testing-library/react'; -import UserEvent from '@testing-library/user-event'; +import userEvent from '@testing-library/user-event'; import { MockedProvider } from '@apollo/client/testing'; import axios from 'axios'; import { MemoryRouter } from 'react-router'; @@ -19,6 +19,7 @@ const mocks = [ vi.mock('axios'); const mockedAxios = axios as any; +const user = userEvent.setup(); const wrapper = ( @@ -48,7 +49,7 @@ describe('', () => { await waitFor(() => { // click on generate OTP const generateOTPButton = screen.getByText('Generate OTP'); - fireEvent.click(generateOTPButton); + user.click(generateOTPButton); }); // set the mock @@ -60,14 +61,14 @@ describe('', () => { await waitFor(() => { // click on resend button const resendButton = screen.getByTestId('resendOtp'); - fireEvent.click(resendButton); + user.click(resendButton); }); // trigger validation errors await waitFor(() => { // click on save button const saveButton = screen.getByText('Save'); - fireEvent.click(saveButton); + user.click(saveButton); }); // check for validation errors @@ -99,7 +100,7 @@ describe('', () => { await waitFor(() => { // click on generate OTP const generateOTPButton = screen.getByText('Generate OTP'); - fireEvent.click(generateOTPButton); + user.click(generateOTPButton); }); // close the alert @@ -107,7 +108,7 @@ describe('', () => { expect(screen.getByTestId('crossIcon')).toBeInTheDocument(); }); const closeAlert = screen.getByTestId('crossIcon'); - await fireEvent.click(closeAlert); + await user.click(closeAlert); }); test('generate OTP success flow with cancel', async () => { @@ -120,7 +121,7 @@ describe('', () => { await waitFor(() => { // click on generate OTP const generateOTPButton = screen.getByText('Generate OTP'); - fireEvent.click(generateOTPButton); + user.click(generateOTPButton); }); await waitFor(() => { @@ -128,11 +129,10 @@ describe('', () => { expect(screen.getByText('Cancel')).toBeInTheDocument(); }); const cancelButton = screen.getByText('Cancel'); - fireEvent.click(cancelButton); + user.click(cancelButton); }); test('generate OTP error with incorrect OTP', async () => { - const user = UserEvent.setup(); const { container } = render(wrapper); // let's mock successful sending of OTP @@ -142,7 +142,7 @@ describe('', () => { await waitFor(() => { // click on generate OTP const generateOTPButton = screen.getByText('Generate OTP'); - fireEvent.click(generateOTPButton); + user.click(generateOTPButton); }); // enter otp @@ -160,7 +160,7 @@ describe('', () => { expect(screen.getByText('Save')).toBeInTheDocument(); }); const saveButton = screen.getByText('Save'); - await fireEvent.click(saveButton); + await user.click(saveButton); // assert for incorrect OTP // await waitFor(() => { @@ -169,7 +169,6 @@ describe('', () => { }); test('generate OTP error with too many attempts', async () => { - const user = UserEvent.setup(); const { container } = render(wrapper); // let's mock successful sending of OTP @@ -179,7 +178,7 @@ describe('', () => { await waitFor(() => { // click on generate OTP const generateOTPButton = screen.getByText('Generate OTP'); - fireEvent.click(generateOTPButton); + user.click(generateOTPButton); }); // enter otp @@ -197,6 +196,6 @@ describe('', () => { expect(screen.getByText('Save')).toBeInTheDocument(); }); const saveButton = screen.getByText('Save'); - await fireEvent.click(saveButton); + await user.click(saveButton); }); }); diff --git a/src/containers/SettingList/Organization/Organisation.test.tsx b/src/containers/SettingList/Organization/Organisation.test.tsx index af5ab0be8..10159b4ce 100644 --- a/src/containers/SettingList/Organization/Organisation.test.tsx +++ b/src/containers/SettingList/Organization/Organisation.test.tsx @@ -1,10 +1,12 @@ -import { render, screen, fireEvent, waitFor } from '@testing-library/react'; +import { render, screen, waitFor } from '@testing-library/react'; import { MockedProvider } from '@apollo/client/testing'; import { BrowserRouter as Router, MemoryRouter } from 'react-router-dom'; import { ORGANIZATION_MOCKS } from '../SettingList.test.helper'; import { Organization } from './Organization'; +import userEvent from '@testing-library/user-event'; +const user = userEvent.setup(); const mocks = ORGANIZATION_MOCKS; const wrapper = ( @@ -52,7 +54,7 @@ test('it renders component and clicks cancel', async () => { const Button = screen.getByText('Cancel'); expect(Button).toBeInTheDocument(); // click on Cancel - fireEvent.click(Button); + user.click(Button); }); }); @@ -80,7 +82,7 @@ test('it renders component in edit mode', async () => { const lowBalanceThreshold = numberInputElements[0] as HTMLInputElement; const criticalBalanceThreshold = numberInputElements[1] as HTMLInputElement; - fireEvent.click(phoneNumber); + user.click(phoneNumber); expect(orgName?.value).toBe('Glific'); expect(signaturePhrase?.value).toBe('Please change me, NOW!'); expect(phoneNumber?.value).toBe('917834811114'); @@ -90,6 +92,6 @@ test('it renders component in edit mode', async () => { await waitFor(() => { const submit = getByTestId('submitActionButton'); - fireEvent.click(submit); + user.click(submit); }); }); diff --git a/src/containers/SettingList/OrganizationFlows/OrganisationFLows.test.tsx b/src/containers/SettingList/OrganizationFlows/OrganisationFLows.test.tsx index 7e5e6d026..f6fc03336 100644 --- a/src/containers/SettingList/OrganizationFlows/OrganisationFLows.test.tsx +++ b/src/containers/SettingList/OrganizationFlows/OrganisationFLows.test.tsx @@ -4,6 +4,7 @@ import { BrowserRouter as Router } from 'react-router-dom'; import { ORGANIZATION_MOCKS } from '../SettingList.test.helper'; import { OrganizationFlows } from './OrganizationFlows'; +import userEvent from '@testing-library/user-event'; const mocks = ORGANIZATION_MOCKS; @@ -15,6 +16,8 @@ const wrapper = ( ); +const user = userEvent.setup(); + test('it renders component properly', async () => { const { getByText } = render(wrapper); // loading is show initially @@ -29,7 +32,7 @@ test('it renders component and clicks cancel', async () => { const Button = screen.getByText('Cancel'); expect(Button).toBeInTheDocument(); // click on Cancel - fireEvent.click(Button); + user.click(Button); }); }); @@ -53,12 +56,12 @@ test('it renders component in edit mode', async () => { const selectedOption = screen.getByText('Monday'); expect(selectedOption).toBeInTheDocument(); - fireEvent.click(selectedOption); + user.click(selectedOption); }); }); await waitFor(() => { const submit = getByTestId('submitActionButton'); - fireEvent.click(submit); + user.click(submit); }); }); diff --git a/src/containers/SettingList/Providers/Providers.test.tsx b/src/containers/SettingList/Providers/Providers.test.tsx index 1b7300f1c..a213b6111 100644 --- a/src/containers/SettingList/Providers/Providers.test.tsx +++ b/src/containers/SettingList/Providers/Providers.test.tsx @@ -12,8 +12,10 @@ import { getSavedCredentials, updateMaytapiCredentials, } from 'mocks/Organization'; +import userEvent from '@testing-library/user-event'; const mocks = LIST_ITEM_MOCKS; +const user = userEvent.setup(); const wrapper = ( @@ -46,10 +48,10 @@ describe('', () => { expect(getByText('Loading...')).toBeInTheDocument(); await waitFor(() => { const checkbox = screen.getByRole('checkbox'); - fireEvent.click(checkbox); + user.click(checkbox); // click on SAVE const saveButton = screen.getByText('Save'); - fireEvent.click(saveButton); + user.click(saveButton); }); }); }); @@ -62,7 +64,7 @@ describe('', () => { await waitFor(() => { // click on Cancel const cancelButton = screen.getByText('Cancel'); - fireEvent.click(cancelButton); + user.click(cancelButton); }); }); }); @@ -96,18 +98,18 @@ describe('maytapi', () => { const inputs = screen.getAllByRole('textbox'); - fireEvent.click(screen.getByText('Active?')); + user.click(screen.getByText('Active?')); fireEvent.change(inputs[0], { target: { value: 'token' } }); fireEvent.change(inputs[1], { target: { value: 'product_id' } }); - fireEvent.click(screen.getByText('Save')); + user.click(screen.getByText('Save')); await waitFor(() => { expect(screen.getByTestId('dialogBox')).toBeInTheDocument(); }); - fireEvent.click(screen.getByTestId('ok-button')); + user.click(screen.getByTestId('ok-button')); await waitFor(() => { expect(notificationspy).toHaveBeenCalled(); @@ -128,18 +130,18 @@ describe('maytapi', () => { const inputs = screen.getAllByRole('textbox'); - fireEvent.click(screen.getByText('Active?')); + user.click(screen.getByText('Active?')); fireEvent.change(inputs[0], { target: { value: 'token' } }); fireEvent.change(inputs[1], { target: { value: 'product_id' } }); - fireEvent.click(screen.getByText('Save')); + user.click(screen.getByText('Save')); await waitFor(() => { expect(screen.getByTestId('dialogBox')).toBeInTheDocument(); }); - fireEvent.click(screen.getByTestId('ok-button')); + user.click(screen.getByTestId('ok-button')); await waitFor(() => { expect(errorMessageSpy).toHaveBeenCalled(); @@ -185,7 +187,7 @@ describe('update credentials', () => { fireEvent.change(inputs[0], { target: { value: 'token2' } }); fireEvent.change(inputs[1], { target: { value: 'product_id2' } }); - fireEvent.click(screen.getByTestId('submitActionButton')); + user.click(screen.getByTestId('submitActionButton')); await waitFor(() => { expect(screen.getByTestId('dialogBox')).toBeInTheDocument(); @@ -199,7 +201,7 @@ describe('update credentials', () => { expect(screen.getByTestId('dialogBox')).toBeInTheDocument(); }); - fireEvent.click(screen.getByTestId('ok-button')); + user.click(screen.getByTestId('ok-button')); await waitFor(() => { expect(screen.getByText('Token')).toBeInTheDocument(); @@ -228,13 +230,13 @@ describe('update credentials', () => { fireEvent.change(inputs[0], { target: { value: 'token2' } }); fireEvent.change(inputs[1], { target: { value: 'product_id2' } }); - fireEvent.click(screen.getByText('Save')); + user.click(screen.getByText('Save')); await waitFor(() => { expect(screen.getByTestId('dialogBox')).toBeInTheDocument(); }); - fireEvent.click(screen.getByTestId('ok-button')); + user.click(screen.getByTestId('ok-button')); await waitFor(() => { expect(errorMessageSpy).toHaveBeenCalled();