From c21d824e5fc7ba83e22df00973d8d77c6732b4f9 Mon Sep 17 00:00:00 2001 From: abhishek Date: Mon, 9 Dec 2024 03:17:46 +0530 Subject: [PATCH 1/6] migrated UpcomingEvents tests from Jest to Vitest --- .../UpcomingEvents/UpcomingEvents.test.tsx | 20 +++++++++++-------- vitest.config.ts | 5 ++++- 2 files changed, 16 insertions(+), 9 deletions(-) diff --git a/src/screens/UserPortal/Volunteer/UpcomingEvents/UpcomingEvents.test.tsx b/src/screens/UserPortal/Volunteer/UpcomingEvents/UpcomingEvents.test.tsx index 43e0b15cdb..b36d7566e3 100644 --- a/src/screens/UserPortal/Volunteer/UpcomingEvents/UpcomingEvents.test.tsx +++ b/src/screens/UserPortal/Volunteer/UpcomingEvents/UpcomingEvents.test.tsx @@ -21,11 +21,12 @@ import { } from './UpcomingEvents.mocks'; import { toast } from 'react-toastify'; import useLocalStorage from 'utils/useLocalstorage'; +import { vi } from 'vitest'; -jest.mock('react-toastify', () => ({ +vi.mock('react-toastify', () => ({ toast: { - success: jest.fn(), - error: jest.fn(), + success: vi.fn(), + error: vi.fn(), }, })); @@ -81,10 +82,13 @@ const renderUpcomingEvents = (link: ApolloLink): RenderResult => { describe('Testing Upcoming Events Screen', () => { beforeAll(() => { - jest.mock('react-router-dom', () => ({ - ...jest.requireActual('react-router-dom'), - useParams: () => ({ orgId: 'orgId' }), - })); + vi.mock('react-router-dom', async () => { + const actual = await vi.importActual('react-router-dom'); + return { + ...actual, + useParams: () => ({ orgId: 'orgId' }), + }; + }); }); beforeEach(() => { @@ -92,7 +96,7 @@ describe('Testing Upcoming Events Screen', () => { }); afterAll(() => { - jest.clearAllMocks(); + vi.clearAllMocks(); }); it('should redirect to fallback URL if URL params are undefined', async () => { diff --git a/vitest.config.ts b/vitest.config.ts index ad85276111..c20a195a8b 100644 --- a/vitest.config.ts +++ b/vitest.config.ts @@ -12,7 +12,10 @@ export default defineConfig({ tsconfigPaths(), ], test: { - include: ['src/**/*.spec.{js,jsx,ts,tsx}'], + include: [ + 'src/**/*.spec.{js,jsx,ts,tsx}', + 'src/screens/UserPortal/Volunteer/UpcomingEvents/*.{spec,test}.{js,jsx,ts,tsx}', + ], globals: true, environment: 'jsdom', setupFiles: 'vitest.setup.ts', From 5c349d961685075d5e9c5dec6bf8ef1f4b223ee0 Mon Sep 17 00:00:00 2001 From: abhishek Date: Tue, 10 Dec 2024 00:48:39 +0530 Subject: [PATCH 2/6] Rename UpcomingEvents.test.tsx to UpcomingEvents.spec.tsx --- .../{UpcomingEvents.test.tsx => UpcomingEvents.spec.tsx} | 0 vitest.config.ts | 5 +---- 2 files changed, 1 insertion(+), 4 deletions(-) rename src/screens/UserPortal/Volunteer/UpcomingEvents/{UpcomingEvents.test.tsx => UpcomingEvents.spec.tsx} (100%) diff --git a/src/screens/UserPortal/Volunteer/UpcomingEvents/UpcomingEvents.test.tsx b/src/screens/UserPortal/Volunteer/UpcomingEvents/UpcomingEvents.spec.tsx similarity index 100% rename from src/screens/UserPortal/Volunteer/UpcomingEvents/UpcomingEvents.test.tsx rename to src/screens/UserPortal/Volunteer/UpcomingEvents/UpcomingEvents.spec.tsx diff --git a/vitest.config.ts b/vitest.config.ts index c20a195a8b..ad85276111 100644 --- a/vitest.config.ts +++ b/vitest.config.ts @@ -12,10 +12,7 @@ export default defineConfig({ tsconfigPaths(), ], test: { - include: [ - 'src/**/*.spec.{js,jsx,ts,tsx}', - 'src/screens/UserPortal/Volunteer/UpcomingEvents/*.{spec,test}.{js,jsx,ts,tsx}', - ], + include: ['src/**/*.spec.{js,jsx,ts,tsx}'], globals: true, environment: 'jsdom', setupFiles: 'vitest.setup.ts', From 76a8c247ec6884c2991fab9a3f6203905b0f39ca Mon Sep 17 00:00:00 2001 From: abhishek Date: Tue, 10 Dec 2024 19:30:03 +0530 Subject: [PATCH 3/6] add header comments for UpcomingEvents component tests --- .../Volunteer/UpcomingEvents/UpcomingEvents.spec.tsx | 8 ++++++++ 1 file changed, 8 insertions(+) diff --git a/src/screens/UserPortal/Volunteer/UpcomingEvents/UpcomingEvents.spec.tsx b/src/screens/UserPortal/Volunteer/UpcomingEvents/UpcomingEvents.spec.tsx index b36d7566e3..f636d8d8d4 100644 --- a/src/screens/UserPortal/Volunteer/UpcomingEvents/UpcomingEvents.spec.tsx +++ b/src/screens/UserPortal/Volunteer/UpcomingEvents/UpcomingEvents.spec.tsx @@ -23,6 +23,14 @@ import { toast } from 'react-toastify'; import useLocalStorage from 'utils/useLocalstorage'; import { vi } from 'vitest'; +/** + * Unit tests for the UpcomingEvents component. + * + * This file contains tests to verify the functionality and behavior of the UpcomingEvents component + * under various scenarios, including successful data fetching, error handling, and user interactions. + * Mocked dependencies are used to ensure isolated testing of the component. + */ + vi.mock('react-toastify', () => ({ toast: { success: vi.fn(), From ec5e74621d4d85d12f80c3cd9274862205ba0ebb Mon Sep 17 00:00:00 2001 From: abhishek Date: Wed, 11 Dec 2024 19:38:59 +0530 Subject: [PATCH 4/6] migrated Events tests from jest to vitest --- .../{Events.test.tsx => Events.spec.tsx} | 80 +++++++++++-------- 1 file changed, 48 insertions(+), 32 deletions(-) rename src/screens/UserPortal/Events/{Events.test.tsx => Events.spec.tsx} (87%) diff --git a/src/screens/UserPortal/Events/Events.test.tsx b/src/screens/UserPortal/Events/Events.spec.tsx similarity index 87% rename from src/screens/UserPortal/Events/Events.test.tsx rename to src/screens/UserPortal/Events/Events.spec.tsx index 8c0b7c6912..70ac029adc 100644 --- a/src/screens/UserPortal/Events/Events.test.tsx +++ b/src/screens/UserPortal/Events/Events.spec.tsx @@ -19,35 +19,51 @@ import { AdapterDayjs } from '@mui/x-date-pickers/AdapterDayjs'; import { ThemeProvider } from 'react-bootstrap'; import { createTheme } from '@mui/material'; import useLocalStorage from 'utils/useLocalstorage'; +import { vi } from 'vitest'; -const { setItem, getItem } = useLocalStorage(); +/** + * Unit tests for the Events component. + * + * This file contains tests to verify the functionality and behavior of the Events component + * under various scenarios, including successful event creation, date/time picker handling, + * calendar view toggling, and error handling. Mocked dependencies are used to ensure isolated testing. + */ -jest.mock('react-toastify', () => ({ +const { setItem } = useLocalStorage(); + +vi.mock('react-toastify', () => ({ toast: { - error: jest.fn(), - info: jest.fn(), - success: jest.fn(), + error: vi.fn(), + info: vi.fn(), + success: vi.fn(), }, })); -jest.mock('@mui/x-date-pickers/DatePicker', () => { +vi.mock('@mui/x-date-pickers/DatePicker', async () => { + const desktopDatePickerModule = await vi.importActual( + '@mui/x-date-pickers/DesktopDatePicker', + ); return { - DatePicker: jest.requireActual('@mui/x-date-pickers/DesktopDatePicker') - .DesktopDatePicker, + DatePicker: desktopDatePickerModule.DesktopDatePicker, }; }); -jest.mock('@mui/x-date-pickers/TimePicker', () => { +vi.mock('@mui/x-date-pickers/TimePicker', async () => { + const timePickerModule = await vi.importActual( + '@mui/x-date-pickers/DesktopTimePicker', + ); return { - TimePicker: jest.requireActual('@mui/x-date-pickers/DesktopTimePicker') - .DesktopTimePicker, + TimePicker: timePickerModule.DesktopTimePicker, }; }); -jest.mock('react-router-dom', () => ({ - ...jest.requireActual('react-router-dom'), - useParams: () => ({ orgId: '' }), -})); +vi.mock('react-router-dom', async () => { + const actual = await vi.importActual('react-router-dom'); + return { + ...actual, + useParams: () => ({ orgId: '' }), + }; +}); const theme = createTheme({ palette: { @@ -252,19 +268,19 @@ async function wait(ms = 100): Promise { describe('Testing Events Screen [User Portal]', () => { Object.defineProperty(window, 'matchMedia', { writable: true, - value: jest.fn().mockImplementation((query) => ({ + value: vi.fn().mockImplementation((query) => ({ matches: false, media: query, onchange: null, - addListener: jest.fn(), // Deprecated - removeListener: jest.fn(), // Deprecated - addEventListener: jest.fn(), - removeEventListener: jest.fn(), - dispatchEvent: jest.fn(), + addListener: vi.fn(), // Deprecated + removeListener: vi.fn(), // Deprecated + addEventListener: vi.fn(), + removeEventListener: vi.fn(), + dispatchEvent: vi.fn(), })), }); - test('Screen should be rendered properly', async () => { + it('Screen should be rendered properly', async () => { render( @@ -283,7 +299,7 @@ describe('Testing Events Screen [User Portal]', () => { await wait(); }); - test('Create event works as expected when event is not an all day event.', async () => { + it('Create event works as expected when event is not an all day event.', async () => { render( @@ -341,7 +357,7 @@ describe('Testing Events Screen [User Portal]', () => { ); }); - test('Create event works as expected when event is an all day event.', async () => { + it('Create event works as expected when event is an all day event.', async () => { render( @@ -384,7 +400,7 @@ describe('Testing Events Screen [User Portal]', () => { ); }); - test('Switch to calendar view works as expected.', async () => { + it('Switch to calendar view works as expected.', async () => { render( @@ -413,7 +429,7 @@ describe('Testing Events Screen [User Portal]', () => { expect(screen.getByText('Sun')).toBeInTheDocument(); }); - test('Testing DatePicker and TimePicker', async () => { + it('Testing DatePicker and TimePicker', async () => { render( @@ -431,11 +447,11 @@ describe('Testing Events Screen [User Portal]', () => { ); await wait(); - - const startDate = '03/23/2024'; - const endDate = '04/23/2024'; - const startTime = '02:00 PM'; - const endTime = '06:00 PM'; + // MM/DD/YYYY + const startDate = new Date().toLocaleDateString(); + const endDate = new Date().toLocaleDateString(); + const startTime = '08:00 AM'; + const endTime = '10:00 AM'; userEvent.click(screen.getByTestId('createEventModalBtn')); @@ -475,7 +491,7 @@ describe('Testing Events Screen [User Portal]', () => { expect(startTimePicker).toHaveValue(startTime); }); - test('EndDate null', async () => { + it('EndDate null', async () => { render( From 50b0f8bab933ac267ae6a02ee656f62f9e10a8a7 Mon Sep 17 00:00:00 2001 From: abhishek Date: Sun, 15 Dec 2024 17:39:45 +0530 Subject: [PATCH 5/6] Using hardcoded dates instead of dynamic dates to ensure consistent behavior --- src/screens/UserPortal/Events/Events.spec.tsx | 30 ++++++++++++------- 1 file changed, 19 insertions(+), 11 deletions(-) diff --git a/src/screens/UserPortal/Events/Events.spec.tsx b/src/screens/UserPortal/Events/Events.spec.tsx index 70ac029adc..dc0c938e92 100644 --- a/src/screens/UserPortal/Events/Events.spec.tsx +++ b/src/screens/UserPortal/Events/Events.spec.tsx @@ -1,5 +1,5 @@ import React, { act } from 'react'; -import { fireEvent, render, screen } from '@testing-library/react'; +import { fireEvent, render, screen, waitFor } from '@testing-library/react'; import { MockedProvider } from '@apollo/react-testing'; import { I18nextProvider } from 'react-i18next'; @@ -446,31 +446,39 @@ describe('Testing Events Screen [User Portal]', () => { , ); - await wait(); + userEvent.click(screen.getByTestId('createEventModalBtn')); // MM/DD/YYYY - const startDate = new Date().toLocaleDateString(); - const endDate = new Date().toLocaleDateString(); + const startDate = '12/15/2024'; + const endDate = '12/15/2024'; const startTime = '08:00 AM'; const endTime = '10:00 AM'; - userEvent.click(screen.getByTestId('createEventModalBtn')); + await waitFor(() => { + expect(screen.getByLabelText('Start Date')).toBeInTheDocument(); + expect(screen.getByLabelText('End Date')).toBeInTheDocument(); + }); expect(endDate).not.toBeNull(); const endDateDatePicker = screen.getByLabelText('End Date'); expect(startDate).not.toBeNull(); const startDateDatePicker = screen.getByLabelText('Start Date'); + const startDateDayjs = dayjs(startDate); + const endDateDayjs = dayjs(endDate); + fireEvent.change(startDateDatePicker, { - target: { value: startDate }, + target: { value: startDateDayjs.format('MM/DD/YYYY') }, }); fireEvent.change(endDateDatePicker, { - target: { value: endDate }, + target: { value: endDateDayjs.format('MM/DD/YYYY') }, }); - await wait(); - - expect(endDateDatePicker).toHaveValue(endDate); - expect(startDateDatePicker).toHaveValue(startDate); + await waitFor(() => { + expect(startDateDatePicker).toHaveValue( + startDateDayjs.format('MM/DD/YYYY'), + ); + expect(endDateDatePicker).toHaveValue(endDateDayjs.format('MM/DD/YYYY')); + }); userEvent.click(screen.getByTestId('allDayEventCheck')); From c246c41957a026cc0232d4de385cccc7b76c8ab7 Mon Sep 17 00:00:00 2001 From: abhishek Date: Tue, 17 Dec 2024 13:23:43 +0530 Subject: [PATCH 6/6] Fix: Make dates dynamic for Vitest compatibility with DatePicker --- src/screens/UserPortal/Events/Events.spec.tsx | 4 ++-- 1 file changed, 2 insertions(+), 2 deletions(-) diff --git a/src/screens/UserPortal/Events/Events.spec.tsx b/src/screens/UserPortal/Events/Events.spec.tsx index dc0c938e92..646f5052f0 100644 --- a/src/screens/UserPortal/Events/Events.spec.tsx +++ b/src/screens/UserPortal/Events/Events.spec.tsx @@ -448,8 +448,8 @@ describe('Testing Events Screen [User Portal]', () => { userEvent.click(screen.getByTestId('createEventModalBtn')); // MM/DD/YYYY - const startDate = '12/15/2024'; - const endDate = '12/15/2024'; + const startDate = new Date(); + const endDate = new Date(); const startTime = '08:00 AM'; const endTime = '10:00 AM';