From b26bc6c4c86edb54a6df8e9cc073da356885f24a Mon Sep 17 00:00:00 2001 From: NishantSinghhhhh Date: Sat, 21 Dec 2024 02:02:09 +0530 Subject: [PATCH 1/4] Added vitest for VolunteerContainer Signed-off-by: NishantSinghhhhh --- ...r.test.tsx => VolunteerContainer.spec.tsx} | 78 ++++++++++--------- 1 file changed, 41 insertions(+), 37 deletions(-) rename src/screens/EventVolunteers/{VolunteerContainer.test.tsx => VolunteerContainer.spec.tsx} (63%) diff --git a/src/screens/EventVolunteers/VolunteerContainer.test.tsx b/src/screens/EventVolunteers/VolunteerContainer.spec.tsx similarity index 63% rename from src/screens/EventVolunteers/VolunteerContainer.test.tsx rename to src/screens/EventVolunteers/VolunteerContainer.spec.tsx index 928d04195c..165f3801d2 100644 --- a/src/screens/EventVolunteers/VolunteerContainer.test.tsx +++ b/src/screens/EventVolunteers/VolunteerContainer.spec.tsx @@ -12,19 +12,40 @@ import userEvent from '@testing-library/user-event'; import { MOCKS } from './Volunteers/Volunteers.mocks'; import { StaticMockLink } from 'utils/StaticMockLink'; import { LocalizationProvider } from '@mui/x-date-pickers'; +import { describe, it, beforeEach, expect, vi } from 'vitest'; + +/** + * Unit tests for the `VolunteerContainer` component. + * + * The tests ensure the `VolunteerContainer` component renders correctly with various routes and URL parameters. + * Mocked dependencies are used to isolate the component and verify its behavior. + * + */ const link1 = new StaticMockLink(MOCKS); -const renderVolunteerContainer = (): RenderResult => { +const mockedUseParams = vi.fn(); + +vi.mock('react-router-dom', async () => { + const actual = await vi.importActual('react-router-dom'); + return { + ...actual, + useParams: () => mockedUseParams(), + }; +}); + +const renderVolunteerContainer = ( + initialPath = '/org/orgId/event/eventId', +): RenderResult => { return render( - + } /> { }; describe('Testing Volunteer Container', () => { - beforeAll(() => { - jest.mock('react-router-dom', () => ({ - ...jest.requireActual('react-router-dom'), - useParams: () => ({ orgId: 'orgId', eventId: 'eventId' }), - })); - }); - - afterAll(() => { - jest.clearAllMocks(); + beforeEach(() => { + vi.clearAllMocks(); }); it('should redirect to fallback URL if URL params are undefined', async () => { - render( - - - - - - } /> - } - /> - - - - - , - ); + mockedUseParams.mockReturnValue({}); + + renderVolunteerContainer('/'); await waitFor(() => { expect(screen.getByTestId('paramsError')).toBeInTheDocument(); }); }); - test('Testing Volunteer Container Screen -> Toggle screens', async () => { + it('Testing Volunteer Container Screen -> Toggle screens', async () => { + mockedUseParams.mockReturnValue({ orgId: 'orgId', eventId: 'eventId' }); + renderVolunteerContainer(); const groupRadio = await screen.findByTestId('groupsRadio'); - expect(groupRadio).toBeInTheDocument(); - userEvent.click(groupRadio); - const requestsRadio = await screen.findByTestId('requestsRadio'); - expect(requestsRadio).toBeInTheDocument(); - userEvent.click(requestsRadio); - const individualRadio = await screen.findByTestId('individualRadio'); + + expect(groupRadio).toBeInTheDocument(); + expect(requestsRadio).toBeInTheDocument(); expect(individualRadio).toBeInTheDocument(); - userEvent.click(individualRadio); + + await waitFor(async () => { + await userEvent.click(groupRadio); + await userEvent.click(requestsRadio); + await userEvent.click(individualRadio); + }); }); }); From efea67ca1334e45e59229a25ad37b2706d00c48b Mon Sep 17 00:00:00 2001 From: NishantSinghhhhh Date: Thu, 26 Dec 2024 20:15:25 +0530 Subject: [PATCH 2/4] minor fixes Signed-off-by: NishantSinghhhhh --- src/screens/EventVolunteers/VolunteerContainer.spec.tsx | 1 + 1 file changed, 1 insertion(+) diff --git a/src/screens/EventVolunteers/VolunteerContainer.spec.tsx b/src/screens/EventVolunteers/VolunteerContainer.spec.tsx index 165f3801d2..8d224cb859 100644 --- a/src/screens/EventVolunteers/VolunteerContainer.spec.tsx +++ b/src/screens/EventVolunteers/VolunteerContainer.spec.tsx @@ -19,6 +19,7 @@ import { describe, it, beforeEach, expect, vi } from 'vitest'; * * The tests ensure the `VolunteerContainer` component renders correctly with various routes and URL parameters. * Mocked dependencies are used to isolate the component and verify its behavior. + * all tests are covered * */ From f9a183ac1562576cdbbe6363bd65dcba20751234 Mon Sep 17 00:00:00 2001 From: NishantSinghhhhh Date: Thu, 26 Dec 2024 22:20:18 +0530 Subject: [PATCH 3/4] fixes Signed-off-by: NishantSinghhhhh --- src/screens/EventVolunteers/VolunteerContainer.spec.tsx | 5 ++--- src/screens/EventVolunteers/VolunteerContainer.tsx | 2 +- 2 files changed, 3 insertions(+), 4 deletions(-) diff --git a/src/screens/EventVolunteers/VolunteerContainer.spec.tsx b/src/screens/EventVolunteers/VolunteerContainer.spec.tsx index 8d224cb859..f8cc6c3159 100644 --- a/src/screens/EventVolunteers/VolunteerContainer.spec.tsx +++ b/src/screens/EventVolunteers/VolunteerContainer.spec.tsx @@ -20,7 +20,6 @@ import { describe, it, beforeEach, expect, vi } from 'vitest'; * The tests ensure the `VolunteerContainer` component renders correctly with various routes and URL parameters. * Mocked dependencies are used to isolate the component and verify its behavior. * all tests are covered - * */ const link1 = new StaticMockLink(MOCKS); @@ -36,7 +35,7 @@ vi.mock('react-router-dom', async () => { }); const renderVolunteerContainer = ( - initialPath = '/org/orgId/event/eventId', + initialPath = '/event/orgId/eventId', ): RenderResult => { return render( @@ -46,7 +45,7 @@ const renderVolunteerContainer = ( } />
- + {t( `${dataType === 'group' ? 'volunteerGroups' : dataType === 'individual' ? 'volunteers' : 'requests'}`, )} From 07606be9e2ebdcedfebcc0f661187665f6a45741 Mon Sep 17 00:00:00 2001 From: NishantSinghhhhh Date: Fri, 27 Dec 2024 00:11:52 +0530 Subject: [PATCH 4/4] added changes Signed-off-by: NishantSinghhhhh --- .../VolunteerContainer.spec.tsx | 32 +++++++++++++++---- 1 file changed, 26 insertions(+), 6 deletions(-) diff --git a/src/screens/EventVolunteers/VolunteerContainer.spec.tsx b/src/screens/EventVolunteers/VolunteerContainer.spec.tsx index f8cc6c3159..292dcd9b34 100644 --- a/src/screens/EventVolunteers/VolunteerContainer.spec.tsx +++ b/src/screens/EventVolunteers/VolunteerContainer.spec.tsx @@ -19,7 +19,7 @@ import { describe, it, beforeEach, expect, vi } from 'vitest'; * * The tests ensure the `VolunteerContainer` component renders correctly with various routes and URL parameters. * Mocked dependencies are used to isolate the component and verify its behavior. - * all tests are covered + * All tests are covered. */ const link1 = new StaticMockLink(MOCKS); @@ -34,12 +34,10 @@ vi.mock('react-router-dom', async () => { }; }); -const renderVolunteerContainer = ( - initialPath = '/event/orgId/eventId', -): RenderResult => { +const renderVolunteerContainer = (): RenderResult => { return render( - + @@ -69,7 +67,7 @@ describe('Testing Volunteer Container', () => { it('should redirect to fallback URL if URL params are undefined', async () => { mockedUseParams.mockReturnValue({}); - renderVolunteerContainer('/'); + renderVolunteerContainer(); await waitFor(() => { expect(screen.getByTestId('paramsError')).toBeInTheDocument(); @@ -77,6 +75,24 @@ describe('Testing Volunteer Container', () => { }); it('Testing Volunteer Container Screen -> Toggle screens', async () => { + render( + + + + + + } /> +
} + /> + + + + + , + ); + mockedUseParams.mockReturnValue({ orgId: 'orgId', eventId: 'eventId' }); renderVolunteerContainer(); @@ -94,5 +110,9 @@ describe('Testing Volunteer Container', () => { await userEvent.click(requestsRadio); await userEvent.click(individualRadio); }); + + await waitFor(() => { + expect(screen.getByTestId('paramsError')).toBeInTheDocument(); + }); }); });