From 1e960e8868c6da34bbbf029114a2ccdb036c2376 Mon Sep 17 00:00:00 2001 From: shiva Date: Sat, 21 Dec 2024 09:28:37 +0530 Subject: [PATCH 1/2] refactor:vitest to EventVolunteers/Volunteers --- ...test.tsx => VolunteerCreateModal.spec.tsx} | 17 +++++++++---- ...test.tsx => VolunteerDeleteModal.spec.tsx} | 17 +++++++++---- ...l.test.tsx => VolunteerViewModal.spec.tsx} | 5 ++-- ...olunteers.test.tsx => Volunteers.spec.tsx} | 24 ++++++++++++------- 4 files changed, 43 insertions(+), 20 deletions(-) rename src/screens/EventVolunteers/Volunteers/{VolunteerCreateModal.test.tsx => VolunteerCreateModal.spec.tsx} (91%) rename src/screens/EventVolunteers/Volunteers/{VolunteerDeleteModal.test.tsx => VolunteerDeleteModal.spec.tsx} (91%) rename src/screens/EventVolunteers/Volunteers/{VolunteerViewModal.test.tsx => VolunteerViewModal.spec.tsx} (97%) rename src/screens/EventVolunteers/Volunteers/{Volunteers.test.tsx => Volunteers.spec.tsx} (94%) diff --git a/src/screens/EventVolunteers/Volunteers/VolunteerCreateModal.test.tsx b/src/screens/EventVolunteers/Volunteers/VolunteerCreateModal.spec.tsx similarity index 91% rename from src/screens/EventVolunteers/Volunteers/VolunteerCreateModal.test.tsx rename to src/screens/EventVolunteers/Volunteers/VolunteerCreateModal.spec.tsx index cac8fe94f0..77fe028655 100644 --- a/src/screens/EventVolunteers/Volunteers/VolunteerCreateModal.test.tsx +++ b/src/screens/EventVolunteers/Volunteers/VolunteerCreateModal.spec.tsx @@ -22,11 +22,18 @@ import { toast } from 'react-toastify'; import type { InterfaceVolunteerCreateModal } from './VolunteerCreateModal'; import VolunteerCreateModal from './VolunteerCreateModal'; import userEvent from '@testing-library/user-event'; +import { vi } from 'vitest'; -jest.mock('react-toastify', () => ({ +/** + * Mock implementation of the `react-toastify` module. + * Mocks the `toast` object with `success` and `error` methods to allow testing + * without triggering actual toast notifications. + */ + +vi.mock('react-toastify', () => ({ toast: { - success: jest.fn(), - error: jest.fn(), + success: vi.fn(), + error: vi.fn(), }, })); @@ -45,10 +52,10 @@ const t = { const itemProps: InterfaceVolunteerCreateModal[] = [ { isOpen: true, - hide: jest.fn(), + hide: vi.fn(), eventId: 'eventId', orgId: 'orgId', - refetchVolunteers: jest.fn(), + refetchVolunteers: vi.fn(), }, ]; diff --git a/src/screens/EventVolunteers/Volunteers/VolunteerDeleteModal.test.tsx b/src/screens/EventVolunteers/Volunteers/VolunteerDeleteModal.spec.tsx similarity index 91% rename from src/screens/EventVolunteers/Volunteers/VolunteerDeleteModal.test.tsx rename to src/screens/EventVolunteers/Volunteers/VolunteerDeleteModal.spec.tsx index dd9d6d5985..575670a887 100644 --- a/src/screens/EventVolunteers/Volunteers/VolunteerDeleteModal.test.tsx +++ b/src/screens/EventVolunteers/Volunteers/VolunteerDeleteModal.spec.tsx @@ -15,11 +15,18 @@ import { toast } from 'react-toastify'; import type { InterfaceDeleteVolunteerModal } from './VolunteerDeleteModal'; import VolunteerDeleteModal from './VolunteerDeleteModal'; import userEvent from '@testing-library/user-event'; +import { vi } from 'vitest'; -jest.mock('react-toastify', () => ({ +/** + * Mock implementation of the `react-toastify` module. + * Mocks the `toast` object with `success` and `error` methods to allow testing + * without triggering actual toast notifications. + */ + +vi.mock('react-toastify', () => ({ toast: { - success: jest.fn(), - error: jest.fn(), + success: vi.fn(), + error: vi.fn(), }, })); @@ -38,8 +45,8 @@ const t = { const itemProps: InterfaceDeleteVolunteerModal[] = [ { isOpen: true, - hide: jest.fn(), - refetchVolunteers: jest.fn(), + hide: vi.fn(), + refetchVolunteers: vi.fn(), volunteer: { _id: 'volunteerId1', hasAccepted: true, diff --git a/src/screens/EventVolunteers/Volunteers/VolunteerViewModal.test.tsx b/src/screens/EventVolunteers/Volunteers/VolunteerViewModal.spec.tsx similarity index 97% rename from src/screens/EventVolunteers/Volunteers/VolunteerViewModal.test.tsx rename to src/screens/EventVolunteers/Volunteers/VolunteerViewModal.spec.tsx index 155dba8464..e99fb47d20 100644 --- a/src/screens/EventVolunteers/Volunteers/VolunteerViewModal.test.tsx +++ b/src/screens/EventVolunteers/Volunteers/VolunteerViewModal.spec.tsx @@ -10,6 +10,7 @@ import { store } from 'state/store'; import i18n from 'utils/i18nForTest'; import type { InterfaceVolunteerViewModal } from './VolunteerViewModal'; import VolunteerViewModal from './VolunteerViewModal'; +import { vi } from 'vitest'; const t = { ...JSON.parse( @@ -24,7 +25,7 @@ const t = { const itemProps: InterfaceVolunteerViewModal[] = [ { isOpen: true, - hide: jest.fn(), + hide: vi.fn(), volunteer: { _id: 'volunteerId1', hasAccepted: true, @@ -51,7 +52,7 @@ const itemProps: InterfaceVolunteerViewModal[] = [ }, { isOpen: true, - hide: jest.fn(), + hide: vi.fn(), volunteer: { _id: 'volunteerId2', hasAccepted: false, diff --git a/src/screens/EventVolunteers/Volunteers/Volunteers.test.tsx b/src/screens/EventVolunteers/Volunteers/Volunteers.spec.tsx similarity index 94% rename from src/screens/EventVolunteers/Volunteers/Volunteers.test.tsx rename to src/screens/EventVolunteers/Volunteers/Volunteers.spec.tsx index 2af25b0b84..a668dc36ae 100644 --- a/src/screens/EventVolunteers/Volunteers/Volunteers.test.tsx +++ b/src/screens/EventVolunteers/Volunteers/Volunteers.spec.tsx @@ -7,6 +7,7 @@ import { fireEvent, render, screen, waitFor } from '@testing-library/react'; import userEvent from '@testing-library/user-event'; import { I18nextProvider } from 'react-i18next'; import { Provider } from 'react-redux'; +import type { Params } from 'react-router-dom'; import { MemoryRouter, Route, Routes } from 'react-router-dom'; import { store } from 'state/store'; import { StaticMockLink } from 'utils/StaticMockLink'; @@ -14,6 +15,7 @@ import i18n from 'utils/i18nForTest'; import Volunteers from './Volunteers'; import type { ApolloLink } from '@apollo/client'; import { MOCKS, MOCKS_EMPTY, MOCKS_ERROR } from './Volunteers.mocks'; +import { vi } from 'vitest'; const link1 = new StaticMockLink(MOCKS); const link2 = new StaticMockLink(MOCKS_ERROR); @@ -58,16 +60,24 @@ const renderVolunteers = (link: ApolloLink): RenderResult => { ); }; +/** Mock useParams to provide consistent test data */ + describe('Testing Volunteers Screen', () => { beforeAll(() => { - jest.mock('react-router-dom', () => ({ - ...jest.requireActual('react-router-dom'), - useParams: () => ({ orgId: 'orgId', eventId: 'eventId' }), - })); + vi.mock('react-router-dom', async () => { + const actualDom = await vi.importActual('react-router-dom'); + return { + ...actualDom, + useParams: (): Readonly> => ({ + orgId: 'orgId', + eventId: 'eventId', + }), + }; + }); }); afterAll(() => { - jest.clearAllMocks(); + vi.clearAllMocks(); }); it('should redirect to fallback URL if URL params are undefined', async () => { @@ -89,9 +99,7 @@ describe('Testing Volunteers Screen', () => { , ); - await waitFor(() => { - expect(screen.getByTestId('paramsError')).toBeInTheDocument(); - }); + expect(window.location.pathname).toBe('/'); }); it('should render Volunteers screen', async () => { From b807ac5e48a6091090cb7acd5c6311267cc47648 Mon Sep 17 00:00:00 2001 From: shiva Date: Sat, 21 Dec 2024 10:19:50 +0530 Subject: [PATCH 2/2] fix:coderabbit sugg --- .../Volunteers/Volunteers.spec.tsx | 58 ++++++++++++++++--- 1 file changed, 51 insertions(+), 7 deletions(-) diff --git a/src/screens/EventVolunteers/Volunteers/Volunteers.spec.tsx b/src/screens/EventVolunteers/Volunteers/Volunteers.spec.tsx index a668dc36ae..be08ec61fb 100644 --- a/src/screens/EventVolunteers/Volunteers/Volunteers.spec.tsx +++ b/src/screens/EventVolunteers/Volunteers/Volunteers.spec.tsx @@ -7,8 +7,7 @@ import { fireEvent, render, screen, waitFor } from '@testing-library/react'; import userEvent from '@testing-library/user-event'; import { I18nextProvider } from 'react-i18next'; import { Provider } from 'react-redux'; -import type { Params } from 'react-router-dom'; -import { MemoryRouter, Route, Routes } from 'react-router-dom'; +import { MemoryRouter, Route, Routes, useParams } from 'react-router-dom'; import { store } from 'state/store'; import { StaticMockLink } from 'utils/StaticMockLink'; import i18n from 'utils/i18nForTest'; @@ -68,10 +67,7 @@ describe('Testing Volunteers Screen', () => { const actualDom = await vi.importActual('react-router-dom'); return { ...actualDom, - useParams: (): Readonly> => ({ - orgId: 'orgId', - eventId: 'eventId', - }), + useParams: vi.fn(), }; }); }); @@ -81,6 +77,7 @@ describe('Testing Volunteers Screen', () => { }); it('should redirect to fallback URL if URL params are undefined', async () => { + vi.mocked(useParams).mockReturnValue({ orgId: '', eventId: '' }); render( @@ -99,16 +96,27 @@ describe('Testing Volunteers Screen', () => { , ); - expect(window.location.pathname).toBe('/'); + await waitFor(() => { + expect(screen.getByTestId('paramsError')).toBeInTheDocument(); + }); }); it('should render Volunteers screen', async () => { + vi.mocked(useParams).mockReturnValue({ + orgId: 'orgId', + eventId: 'eventId', + }); + renderVolunteers(link1); const searchInput = await screen.findByTestId('searchBy'); expect(searchInput).toBeInTheDocument(); }); it('Check Sorting Functionality', async () => { + vi.mocked(useParams).mockReturnValue({ + orgId: 'orgId', + eventId: 'eventId', + }); renderVolunteers(link1); const searchInput = await screen.findByTestId('searchBy'); expect(searchInput).toBeInTheDocument(); @@ -142,6 +150,10 @@ describe('Testing Volunteers Screen', () => { }); it('Filter Volunteers by status (All)', async () => { + vi.mocked(useParams).mockReturnValue({ + orgId: 'orgId', + eventId: 'eventId', + }); renderVolunteers(link1); const filterBtn = await screen.findByTestId('filter'); @@ -159,6 +171,10 @@ describe('Testing Volunteers Screen', () => { }); it('Filter Volunteers by status (Pending)', async () => { + vi.mocked(useParams).mockReturnValue({ + orgId: 'orgId', + eventId: 'eventId', + }); renderVolunteers(link1); const filterBtn = await screen.findByTestId('filter'); @@ -176,6 +192,10 @@ describe('Testing Volunteers Screen', () => { }); it('Filter Volunteers by status (Accepted)', async () => { + vi.mocked(useParams).mockReturnValue({ + orgId: 'orgId', + eventId: 'eventId', + }); renderVolunteers(link1); const filterBtn = await screen.findByTestId('filter'); @@ -193,6 +213,10 @@ describe('Testing Volunteers Screen', () => { }); it('Search', async () => { + vi.mocked(useParams).mockReturnValue({ + orgId: 'orgId', + eventId: 'eventId', + }); renderVolunteers(link1); const searchInput = await screen.findByTestId('searchBy'); expect(searchInput).toBeInTheDocument(); @@ -205,6 +229,10 @@ describe('Testing Volunteers Screen', () => { }); it('should render screen with No Volunteers', async () => { + vi.mocked(useParams).mockReturnValue({ + orgId: 'orgId', + eventId: 'eventId', + }); renderVolunteers(link3); await waitFor(() => { @@ -214,6 +242,10 @@ describe('Testing Volunteers Screen', () => { }); it('Error while fetching volunteers data', async () => { + vi.mocked(useParams).mockReturnValue({ + orgId: 'orgId', + eventId: 'eventId', + }); renderVolunteers(link2); await waitFor(() => { @@ -222,6 +254,10 @@ describe('Testing Volunteers Screen', () => { }); it('Open and close Volunteer Modal (View)', async () => { + vi.mocked(useParams).mockReturnValue({ + orgId: 'orgId', + eventId: 'eventId', + }); renderVolunteers(link1); const viewItemBtn = await screen.findAllByTestId('viewItemBtn'); @@ -232,6 +268,10 @@ describe('Testing Volunteers Screen', () => { }); it('Open and Close Volunteer Modal (Delete)', async () => { + vi.mocked(useParams).mockReturnValue({ + orgId: 'orgId', + eventId: 'eventId', + }); renderVolunteers(link1); const deleteItemBtn = await screen.findAllByTestId('deleteItemBtn'); @@ -242,6 +282,10 @@ describe('Testing Volunteers Screen', () => { }); it('Open and close Volunteer Modal (Create)', async () => { + vi.mocked(useParams).mockReturnValue({ + orgId: 'orgId', + eventId: 'eventId', + }); renderVolunteers(link1); const addVolunteerBtn = await screen.findByTestId('addVolunteerBtn');