Refactor : Vitest to EventVolunteers/VolunteerGroups Screen (#2696)

* refactor:vitest to EventVolunteers/VolunteerGroups screen * add:ts-doc * fix:codereabbit sugg --------- Co-authored-by: Peter Harrison <[email protected]>
PalisadoesFoundation · Dec 22, 2024 · 84c167c · 84c167c
1 parent e2a86ae
commit 84c167c
Show file tree

Hide file tree

Showing 4 changed files with 59 additions and 22 deletions.
diff --git a/...Groups/VolunteerGroupDeleteModal.test.tsx → ...Groups/VolunteerGroupDeleteModal.spec.tsx b/...Groups/VolunteerGroupDeleteModal.test.tsx → ...Groups/VolunteerGroupDeleteModal.spec.tsx
@@ -16,11 +16,18 @@ import { toast } from 'react-toastify';
 import type { InterfaceDeleteVolunteerGroupModal } from './VolunteerGroupDeleteModal';
 import VolunteerGroupDeleteModal from './VolunteerGroupDeleteModal';
 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(),
   },
 }));
 
@@ -39,8 +46,8 @@ const t = {
 const itemProps: InterfaceDeleteVolunteerGroupModal[] = [
   {
     isOpen: true,
-    hide: jest.fn(),
-    refetchGroups: jest.fn(),
+    hide: vi.fn(),
+    refetchGroups: vi.fn(),
     group: {
       _id: 'groupId',
       name: 'Group 1',

diff --git a/...unteerGroups/VolunteerGroupModal.test.tsx → ...unteerGroups/VolunteerGroupModal.spec.tsx b/...unteerGroups/VolunteerGroupModal.test.tsx → ...unteerGroups/VolunteerGroupModal.spec.tsx
@@ -22,11 +22,18 @@ import { toast } from 'react-toastify';
 import type { InterfaceVolunteerGroupModal } from './VolunteerGroupModal';
 import GroupModal from './VolunteerGroupModal';
 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,19 +52,19 @@ const t = {
 const itemProps: InterfaceVolunteerGroupModal[] = [
   {
     isOpen: true,
-    hide: jest.fn(),
+    hide: vi.fn(),
     eventId: 'eventId',
     orgId: 'orgId',
-    refetchGroups: jest.fn(),
+    refetchGroups: vi.fn(),
     mode: 'create',
     group: null,
   },
   {
     isOpen: true,
-    hide: jest.fn(),
+    hide: vi.fn(),
     eventId: 'eventId',
     orgId: 'orgId',
-    refetchGroups: jest.fn(),
+    refetchGroups: vi.fn(),
     mode: 'edit',
     group: {
       _id: 'groupId',
@@ -96,10 +103,10 @@ const itemProps: InterfaceVolunteerGroupModal[] = [
   },
   {
     isOpen: true,
-    hide: jest.fn(),
+    hide: vi.fn(),
     eventId: 'eventId',
     orgId: 'orgId',
-    refetchGroups: jest.fn(),
+    refetchGroups: vi.fn(),
     mode: 'edit',
     group: {
       _id: 'groupId',

diff --git a/...erGroups/VolunteerGroupViewModal.test.tsx → ...erGroups/VolunteerGroupViewModal.spec.tsx b/...erGroups/VolunteerGroupViewModal.test.tsx → ...erGroups/VolunteerGroupViewModal.spec.tsx
@@ -11,6 +11,7 @@ import { AdapterDayjs } from '@mui/x-date-pickers/AdapterDayjs';
 import i18n from 'utils/i18nForTest';
 import type { InterfaceVolunteerGroupViewModal } from './VolunteerGroupViewModal';
 import VolunteerGroupViewModal from './VolunteerGroupViewModal';
+import { vi } from 'vitest';
 
 const t = {
   ...JSON.parse(
@@ -25,7 +26,7 @@ const t = {
 const itemProps: InterfaceVolunteerGroupViewModal[] = [
   {
     isOpen: true,
-    hide: jest.fn(),
+    hide: vi.fn(),
     group: {
       _id: 'groupId',
       name: 'Group 1',
@@ -63,7 +64,7 @@ const itemProps: InterfaceVolunteerGroupViewModal[] = [
   },
   {
     isOpen: true,
-    hide: jest.fn(),
+    hide: vi.fn(),
     group: {
       _id: 'groupId',
       name: 'Group 1',

diff --git a/.../VolunteerGroups/VolunteerGroups.test.tsx → .../VolunteerGroups/VolunteerGroups.spec.tsx b/.../VolunteerGroups/VolunteerGroups.test.tsx → .../VolunteerGroups/VolunteerGroups.spec.tsx
@@ -7,13 +7,14 @@ 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 { 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';
 import VolunteerGroups from './VolunteerGroups';
 import type { ApolloLink } from '@apollo/client';
 import { MOCKS, MOCKS_EMPTY, MOCKS_ERROR } from './VolunteerGroups.mocks';
+import { vi } from 'vitest';
 
 const link1 = new StaticMockLink(MOCKS);
 const link2 = new StaticMockLink(MOCKS_ERROR);
@@ -61,19 +62,30 @@ const renderVolunteerGroups = (link: ApolloLink): RenderResult => {
   );
 };
 
+/** Mock useParams to provide consistent test data */
+
 describe('Testing VolunteerGroups 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: vi.fn(),
+      };
+    });
   });
 
   afterAll(() => {
-    jest.clearAllMocks();
+    vi.clearAllMocks();
   });
 
+  const mockRouteParams = (orgId = 'orgId', eventId = 'eventId'): void => {
+    vi.mocked(useParams).mockReturnValue({ orgId, eventId });
+  };
+
   it('should redirect to fallback URL if URL params are undefined', async () => {
+    /**  Mocking the useParams hook to return undefined parameters */
+    mockRouteParams('', '');
     render(
       <MockedProvider addTypename={false} link={link1}>
         <MemoryRouter initialEntries={['/event/']}>
@@ -98,12 +110,14 @@ describe('Testing VolunteerGroups Screen', () => {
   });
 
   it('should render Groups screen', async () => {
+    mockRouteParams();
     renderVolunteerGroups(link1);
     const searchInput = await screen.findByTestId('searchBy');
     expect(searchInput).toBeInTheDocument();
   });
 
   it('Check Sorting Functionality', async () => {
+    mockRouteParams();
     renderVolunteerGroups(link1);
     const searchInput = await screen.findByTestId('searchBy');
     expect(searchInput).toBeInTheDocument();
@@ -133,6 +147,7 @@ describe('Testing VolunteerGroups Screen', () => {
   });
 
   it('Search by Groups', async () => {
+    mockRouteParams();
     renderVolunteerGroups(link1);
     const searchInput = await screen.findByTestId('searchBy');
     expect(searchInput).toBeInTheDocument();
@@ -153,6 +168,7 @@ describe('Testing VolunteerGroups Screen', () => {
   });
 
   it('Search by Leader', async () => {
+    mockRouteParams();
     renderVolunteerGroups(link1);
     const searchInput = await screen.findByTestId('searchBy');
     expect(searchInput).toBeInTheDocument();
@@ -174,6 +190,7 @@ describe('Testing VolunteerGroups Screen', () => {
   });
 
   it('should render screen with No Groups', async () => {
+    mockRouteParams();
     renderVolunteerGroups(link3);
 
     await waitFor(() => {
@@ -183,6 +200,7 @@ describe('Testing VolunteerGroups Screen', () => {
   });
 
   it('Error while fetching groups data', async () => {
+    mockRouteParams();
     renderVolunteerGroups(link2);
 
     await waitFor(() => {
@@ -191,6 +209,7 @@ describe('Testing VolunteerGroups Screen', () => {
   });
 
   it('Open and close ViewModal', async () => {
+    mockRouteParams();
     renderVolunteerGroups(link1);
 
     const viewGroupBtn = await screen.findAllByTestId('viewGroupBtn');
@@ -201,6 +220,7 @@ describe('Testing VolunteerGroups Screen', () => {
   });
 
   it('Open and Close Delete Modal', async () => {
+    mockRouteParams();
     renderVolunteerGroups(link1);
 
     const deleteGroupBtn = await screen.findAllByTestId('deleteGroupBtn');
@@ -211,6 +231,7 @@ describe('Testing VolunteerGroups Screen', () => {
   });
 
   it('Open and close GroupModal (Edit)', async () => {
+    mockRouteParams();
     renderVolunteerGroups(link1);
 
     const editGroupBtn = await screen.findAllByTestId('editGroupBtn');
@@ -221,6 +242,7 @@ describe('Testing VolunteerGroups Screen', () => {
   });
 
   it('Open and close GroupModal (Create)', async () => {
+    mockRouteParams();
     renderVolunteerGroups(link1);
 
     const createGroupBtn = await screen.findByTestId('createGroupBtn');