Refactor: Migrated src/components/EventManagement/* from Jest to Vite…

…st (#2915)

src/components/EventManagement/Dashboard/EventDashboard.test.tsx → src/components/EventManagement/Dashboard/EventDashboard.spec.tsx

@@ -13,6 +13,7 @@ import type { ApolloLink, DefaultOptions } from '@apollo/client';
 
 import { MOCKS_WITHOUT_TIME, MOCKS_WITH_TIME } from './EventDashboard.mocks';
 import { StaticMockLink } from 'utils/StaticMockLink';
+import { vi, expect, it, describe } from 'vitest';
 
 const mockWithTime = new StaticMockLink(MOCKS_WITH_TIME, true);
 const mockWithoutTime = new StaticMockLink(MOCKS_WITHOUT_TIME, true);
@@ -38,9 +39,8 @@ async function wait(ms = 500): Promise<void> {
 }
 
 const mockID = 'event123';
-jest.mock('react-router-dom', () => ({
-  ...jest.requireActual('react-router-dom'),
-  useParams: () => ({ eventId: mockID }),
+vi.mock('react-router-dom', async () => ({
+  ...(await vi.importActual('react-router-dom')),
 }));
 
 const renderEventDashboard = (mockLink: ApolloLink): RenderResult => {
@@ -63,7 +63,7 @@ const renderEventDashboard = (mockLink: ApolloLink): RenderResult => {
 };
 
 describe('Testing Event Dashboard Screen', () => {
-  test('The page should display event details correctly and also show the time if provided', async () => {
+  it('The page should display event details correctly and also show the time if provided', async () => {
     const { getByTestId } = renderEventDashboard(mockWithTime);
 
     await wait();
@@ -84,15 +84,15 @@ describe('Testing Event Dashboard Screen', () => {
     fireEvent.click(closeButton);
   });
 
-  test('The page should display event details correctly and should not show the time if it is null', async () => {
+  it('The page should display event details correctly and should not show the time if it is null', async () => {
     const { getByTestId } = renderEventDashboard(mockWithoutTime);
     await wait();
 
     expect(getByTestId('event-title')).toBeInTheDocument();
     expect(getByTestId('event-time')).toBeInTheDocument();
   });
 
-  test('Should show loader while data is being fetched', async () => {
+  it('Should show loader while data is being fetched', async () => {
     const { getByTestId, queryByTestId } = renderEventDashboard(mockWithTime);
     expect(getByTestId('spinner')).toBeInTheDocument();
     // Wait for loading to complete

src/components/EventManagement/EventAgendaItems/EventAgendaItems.test.tsx → src/components/EventManagement/EventAgendaItems/EventAgendaItems.spec.tsx

@@ -7,43 +7,39 @@ import {
   waitForElementToBeRemoved,
 } from '@testing-library/react';
 import userEvent from '@testing-library/user-event';
-import 'jest-localstorage-mock';
 import { MockedProvider } from '@apollo/client/testing';
-import 'jest-location-mock';
 import { I18nextProvider } from 'react-i18next';
 import { Provider } from 'react-redux';
 import { BrowserRouter } from 'react-router-dom';
 import i18n from 'utils/i18nForTest';
 // import { toast } from 'react-toastify';
 import { LocalizationProvider } from '@mui/x-date-pickers';
 import { AdapterDayjs } from '@mui/x-date-pickers/AdapterDayjs';
-
 import { store } from 'state/store';
 import { StaticMockLink } from 'utils/StaticMockLink';
-
 import EventAgendaItems from './EventAgendaItems';
+import { vi, describe, expect, it, beforeEach } from 'vitest';
 
 import {
   MOCKS,
   MOCKS_ERROR_QUERY,
   // MOCKS_ERROR_MUTATION,
 } from './EventAgendaItemsMocks';
 
-jest.mock('react-toastify', () => ({
+vi.mock('react-toastify', () => ({
   toast: {
-    success: jest.fn(),
-    error: jest.fn(),
+    success: vi.fn(),
+    error: vi.fn(),
   },
 }));
 
-jest.mock('react-router-dom', () => ({
-  ...jest.requireActual('react-router-dom'),
-  useParams: () => ({ eventId: '123' }),
+vi.mock('react-router-dom', async () => ({
+  ...(await vi.importActual('react-router-dom')),
 }));
 
 //temporarily fixes react-beautiful-dnd droppable method's depreciation error
 //needs to be fixed in React 19
-jest.spyOn(console, 'error').mockImplementation((message) => {
+vi.spyOn(console, 'error').mockImplementation((message) => {
   if (message.includes('Support for defaultProps will be removed')) {
     return;
   }
@@ -78,8 +74,18 @@ describe('Testing Agenda Items Components', () => {
     attachments: [],
     urls: [],
   };
-  test('Component loads correctly', async () => {
-    window.location.assign('/event/111/123');
+
+  beforeEach(() => {
+    Object.defineProperty(window, 'location', {
+      configurable: true,
+      value: {
+        reload: vi.fn(),
+        href: 'https://localhost:4321/event/111/123',
+      },
+    });
+  });
+
+  it('Component loads correctly', async () => {
     const { getByText } = render(
       <MockedProvider addTypename={false} link={link}>
         <Provider store={store}>
@@ -99,8 +105,7 @@ describe('Testing Agenda Items Components', () => {
     });
   });
 
-  test('render error component on unsuccessful agenda item query', async () => {
-    window.location.assign('/event/111/123');
+  it('render error component on unsuccessful agenda item query', async () => {
     const { queryByText } = render(
       <MockedProvider addTypename={false} link={link2}>
         <Provider store={store}>
@@ -122,8 +127,7 @@ describe('Testing Agenda Items Components', () => {
     });
   });
 
-  test('opens and closes the create agenda item modal', async () => {
-    window.location.assign('/event/111/123');
+  it('opens and closes the create agenda item modal', async () => {
     render(
       <MockedProvider addTypename={false} link={link}>
         <Provider store={store}>
@@ -156,8 +160,7 @@ describe('Testing Agenda Items Components', () => {
       screen.queryByTestId('createAgendaItemModalCloseBtn'),
     );
   });
-  test('creates new agenda item', async () => {
-    window.location.assign('/event/111/123');
+  it('creates new agenda item', async () => {
     render(
       <MockedProvider addTypename={false} link={link}>
         <Provider store={store}>

src/components/EventManagement/EventAttendance/AttendedEventList.test.tsx → src/components/EventManagement/EventAttendance/AttendedEventList.spec.tsx

@@ -7,6 +7,7 @@ import { BrowserRouter } from 'react-router-dom';
 import { I18nextProvider } from 'react-i18next';
 import i18nForTest from 'utils/i18nForTest';
 import { formatDate } from 'utils/dateFormatter';
+import { describe, expect, it } from 'vitest';
 
 const mockEvent = {
   _id: 'event123',
@@ -51,7 +52,7 @@ describe('Testing AttendedEventList', () => {
     eventId: 'event123',
   };
 
-  test('Component renders and displays event details correctly', async () => {
+  it('Component renders and displays event details correctly', async () => {
     const { queryByText, queryByTitle } = render(
       <MockedProvider mocks={mocks} addTypename={false}>
         <BrowserRouter>
@@ -71,7 +72,7 @@ describe('Testing AttendedEventList', () => {
     });
   });
 
-  test('Component handles error state gracefully', async () => {
+  it('Component handles error state gracefully', async () => {
     const errorMock = [
       {
         request: {
@@ -99,7 +100,7 @@ describe('Testing AttendedEventList', () => {
     });
   });
 
-  test('Component renders link with correct URL', async () => {
+  it('Component renders link with correct URL', async () => {
     const { container } = render(
       <MockedProvider mocks={mocks} addTypename={false}>
         <BrowserRouter>

src/components/EventManagement/EventAttendance/EventAttendance.test.tsx → src/components/EventManagement/EventAttendance/EventAttendance.spec.tsx

@@ -17,6 +17,7 @@ import userEvent from '@testing-library/user-event';
 import { StaticMockLink } from 'utils/StaticMockLink';
 import i18n from 'utils/i18nForTest';
 import { MOCKS } from './Attendance.mocks';
+import { vi, describe, beforeEach, afterEach, expect, it } from 'vitest';
 
 const link = new StaticMockLink(MOCKS, true);
 
@@ -25,7 +26,7 @@ async function wait(): Promise<void> {
     return Promise.resolve();
   });
 }
-jest.mock('react-chartjs-2', () => ({
+vi.mock('react-chartjs-2', () => ({
   Line: () => null,
   Bar: () => null,
   Pie: () => null,
@@ -47,18 +48,17 @@ const renderEventAttendance = (): RenderResult => {
 
 describe('Event Attendance Component', () => {
   beforeEach(() => {
-    jest.mock('react-router-dom', () => ({
-      ...jest.requireActual('react-router-dom'),
-      useParams: () => ({ eventId: 'event123', orgId: 'org123' }),
+    vi.mock('react-router-dom', async () => ({
+      ...(await vi.importActual('react-router-dom')),
     }));
   });
 
   afterEach(() => {
-    jest.clearAllMocks();
+    vi.clearAllMocks();
     cleanup();
   });
 
-  test('Component loads correctly with table headers', async () => {
+  it('Component loads correctly with table headers', async () => {
     renderEventAttendance();
 
     await wait();
@@ -70,7 +70,7 @@ describe('Event Attendance Component', () => {
     });
   });
 
-  test('Renders attendee data correctly', async () => {
+  it('Renders attendee data correctly', async () => {
     renderEventAttendance();
 
     await wait();
@@ -83,7 +83,7 @@ describe('Event Attendance Component', () => {
     });
   });
 
-  test('Search filters attendees by name correctly', async () => {
+  it('Search filters attendees by name correctly', async () => {
     renderEventAttendance();
 
     await wait();
@@ -97,7 +97,7 @@ describe('Event Attendance Component', () => {
     });
   });
 
-  test('Sort functionality changes attendee order', async () => {
+  it('Sort functionality changes attendee order', async () => {
     renderEventAttendance();
 
     await wait();
@@ -112,7 +112,7 @@ describe('Event Attendance Component', () => {
     });
   });
 
-  test('Date filter shows correct number of attendees', async () => {
+  it('Date filter shows correct number of attendees', async () => {
     renderEventAttendance();
 
     await wait();
@@ -124,7 +124,7 @@ describe('Event Attendance Component', () => {
       expect(screen.getByText('Attendees not Found')).toBeInTheDocument();
     });
   });
-  test('Statistics modal opens and closes correctly', async () => {
+  it('Statistics modal opens and closes correctly', async () => {
     renderEventAttendance();
     await wait();
 

src/components/EventManagement/EventAttendance/EventStatistics.test.tsx → src/components/EventManagement/EventAttendance/EventStatistics.spec.tsx

@@ -5,21 +5,26 @@ import { MockedProvider } from '@apollo/client/testing';
 import { EVENT_DETAILS, RECURRING_EVENTS } from 'GraphQl/Queries/Queries';
 import userEvent from '@testing-library/user-event';
 import { exportToCSV } from 'utils/chartToPdf';
+import { vi, describe, expect, it } from 'vitest';
+import type { Mock } from 'vitest';
 
 // Mock chart.js to avoid canvas errors
-jest.mock('react-chartjs-2', () => ({
+vi.mock('react-chartjs-2', async () => ({
+  ...(await vi.importActual('react-chartjs-2')),
   Line: () => null,
   Bar: () => null,
 }));
 // Mock react-router-dom
-jest.mock('react-router-dom', () => ({
+vi.mock('react-router-dom', async () => ({
+  ...(await vi.importActual('react-router-dom')),
   useParams: () => ({
     orgId: 'org123',
     eventId: 'event123',
   }),
 }));
-jest.mock('utils/chartToPdf', () => ({
-  exportToCSV: jest.fn(),
+vi.mock('utils/chartToPdf', async () => ({
+  ...(await vi.importActual('utils/chartToPdf')),
+  exportToCSV: vi.fn(),
 }));
 const mocks = [
   {
@@ -139,7 +144,7 @@ const mockStatistics = {
 };
 
 describe('AttendanceStatisticsModal', () => {
-  test('renders modal with correct initial state', async () => {
+  it('renders modal with correct initial state', async () => {
     render(
       <MockedProvider mocks={mocks}>
         <AttendanceStatisticsModal
@@ -159,7 +164,7 @@ describe('AttendanceStatisticsModal', () => {
     });
   });
 
-  test('switches between gender and age demographics', async () => {
+  it('switches between gender and age demographics', async () => {
     render(
       <MockedProvider mocks={mocks}>
         <AttendanceStatisticsModal
@@ -186,9 +191,9 @@ describe('AttendanceStatisticsModal', () => {
     });
   });
 
-  test('handles data demographics export functionality', async () => {
-    const mockExportToCSV = jest.fn();
-    (exportToCSV as jest.Mock).mockImplementation(mockExportToCSV);
+  it('handles data demographics export functionality', async () => {
+    const mockExportToCSV = vi.fn();
+    (exportToCSV as Mock).mockImplementation(mockExportToCSV);
 
     render(
       <MockedProvider mocks={mocks}>
@@ -220,9 +225,9 @@ describe('AttendanceStatisticsModal', () => {
 
     expect(mockExportToCSV).toHaveBeenCalled();
   });
-  test('handles data trends export functionality', async () => {
-    const mockExportToCSV = jest.fn();
-    (exportToCSV as jest.Mock).mockImplementation(mockExportToCSV);
+  it('handles data trends export functionality', async () => {
+    const mockExportToCSV = vi.fn();
+    (exportToCSV as Mock).mockImplementation(mockExportToCSV);
 
     render(
       <MockedProvider mocks={mocks}>
@@ -255,7 +260,7 @@ describe('AttendanceStatisticsModal', () => {
     expect(mockExportToCSV).toHaveBeenCalled();
   });
 
-  test('displays recurring event data correctly', async () => {
+  it('displays recurring event data correctly', async () => {
     render(
       <MockedProvider mocks={mocks}>
         <AttendanceStatisticsModal
@@ -272,7 +277,7 @@ describe('AttendanceStatisticsModal', () => {
       expect(screen.getByTestId('today-button')).toBeInTheDocument();
     });
   });
-  test('handles pagination and today button correctly', async () => {
+  it('handles pagination and today button correctly', async () => {
     render(
       <MockedProvider mocks={mocks}>
         <AttendanceStatisticsModal
@@ -313,7 +318,7 @@ describe('AttendanceStatisticsModal', () => {
     expect(screen.getByTestId('today-button')).toBeInTheDocument();
   });
 
-  test('handles pagination in recurring events view', async () => {
+  it('handles pagination in recurring events view', async () => {
     render(
       <MockedProvider mocks={mocks}>
         <AttendanceStatisticsModal
@@ -335,8 +340,8 @@ describe('AttendanceStatisticsModal', () => {
     });
   });
 
-  test('closes modal correctly', async () => {
-    const handleClose = jest.fn();
+  it('closes modal correctly', async () => {
+    const handleClose = vi.fn();
     render(
       <MockedProvider mocks={mocks}>
         <AttendanceStatisticsModal