reverted to using userevent

glific · Nov 6, 2024 · 6774a65 · 6774a65
1 parent f9431c8
commit 6774a65
Show file tree

Hide file tree

Showing 7 changed files with 61 additions and 50 deletions.
diff --git 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('<ConfirmOTP />', () => {
     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('<ConfirmOTP />', () => {
     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('<ConfirmOTP />', () => {
 
     await waitFor(() => {
       const resendButton = screen.getByTestId('resendOtp');
-      fireEvent.click(resendButton);
+      user.click(resendButton);
     });
     // click on resend button
 
@@ -119,7 +120,7 @@ describe('<ConfirmOTP />', () => {
     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
@@ -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('<ResetPasswordPhone />', () => {
 
     // 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('<ResetPasswordPhone />', () => {
       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
@@ -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
@@ -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 = (
   <MockedProvider mocks={mocks} addTypename={false}>
@@ -48,7 +49,7 @@ describe('<MyAccount />', () => {
     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('<MyAccount />', () => {
     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,15 +100,15 @@ describe('<MyAccount />', () => {
     await waitFor(() => {
       // click on generate OTP
       const generateOTPButton = screen.getByText('Generate OTP');
-      fireEvent.click(generateOTPButton);
+      user.click(generateOTPButton);
     });
 
     // close the alert
     await waitFor(() => {
       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,19 +121,18 @@ describe('<MyAccount />', () => {
     await waitFor(() => {
       // click on generate OTP
       const generateOTPButton = screen.getByText('Generate OTP');
-      fireEvent.click(generateOTPButton);
+      user.click(generateOTPButton);
     });
 
     await waitFor(() => {
       // click on cancel button
       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('<MyAccount />', () => {
     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('<MyAccount />', () => {
       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('<MyAccount />', () => {
   });
 
   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('<MyAccount />', () => {
     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('<MyAccount />', () => {
       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
@@ -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
@@ -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 = (
   </MockedProvider>
 );
 
+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);
   });
 });