From bfb4245207151a08749e474c5255a11087472086 Mon Sep 17 00:00:00 2001 From: DevyanshuNegi Date: Wed, 11 Dec 2024 17:30:26 +0530 Subject: [PATCH 1/3] refactored src/screens/UserPortal/Volunteer/Groups/Groups.spec.tsx from jest to vitest --- .../Groups/{Groups.test.tsx => Groups.spec.tsx} | 15 ++++++++++----- 1 file changed, 10 insertions(+), 5 deletions(-) rename src/screens/UserPortal/Volunteer/Groups/{Groups.test.tsx => Groups.spec.tsx} (95%) diff --git a/src/screens/UserPortal/Volunteer/Groups/Groups.test.tsx b/src/screens/UserPortal/Volunteer/Groups/Groups.spec.tsx similarity index 95% rename from src/screens/UserPortal/Volunteer/Groups/Groups.test.tsx rename to src/screens/UserPortal/Volunteer/Groups/Groups.spec.tsx index bc0a4993b9..28e2806e5d 100644 --- a/src/screens/UserPortal/Volunteer/Groups/Groups.test.tsx +++ b/src/screens/UserPortal/Volunteer/Groups/Groups.spec.tsx @@ -15,6 +15,8 @@ import Groups from './Groups'; import type { ApolloLink } from '@apollo/client'; import { MOCKS, EMPTY_MOCKS, ERROR_MOCKS } from './Groups.mocks'; import useLocalStorage from 'utils/useLocalstorage'; +import { vi } from 'vitest'; +import '@testing-library/jest-dom'; const { setItem } = useLocalStorage(); @@ -63,10 +65,13 @@ const renderGroups = (link: ApolloLink): RenderResult => { describe('Testing Groups 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, + userParams: () => ({ orgId: 'orgId' }), + }; + }); }); beforeEach(() => { @@ -74,7 +79,7 @@ describe('Testing Groups Screen', () => { }); afterAll(() => { - jest.clearAllMocks(); + vi.clearAllMocks(); }); it('should redirect to fallback URL if URL params are undefined', async () => { From 05e21529e348a15f64b86862d4948bbf6b2e5692 Mon Sep 17 00:00:00 2001 From: Devyanshu Negi <100033611+DevyanshuNegi@users.noreply.github.com> Date: Wed, 11 Dec 2024 20:45:58 +0530 Subject: [PATCH 2/3] Update src/screens/UserPortal/Volunteer/Groups/Groups.spec.tsx Co-authored-by: coderabbitai[bot] <136622811+coderabbitai[bot]@users.noreply.github.com> --- src/screens/UserPortal/Volunteer/Groups/Groups.spec.tsx | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/src/screens/UserPortal/Volunteer/Groups/Groups.spec.tsx b/src/screens/UserPortal/Volunteer/Groups/Groups.spec.tsx index 28e2806e5d..3ec91789f4 100644 --- a/src/screens/UserPortal/Volunteer/Groups/Groups.spec.tsx +++ b/src/screens/UserPortal/Volunteer/Groups/Groups.spec.tsx @@ -69,7 +69,7 @@ describe('Testing Groups Screen', () => { const actual = await vi.importActual('react-router-dom'); return { ...actual, - userParams: () => ({ orgId: 'orgId' }), + useParams: () => ({ orgId: 'orgId' }), }; }); }); From 2b6326bc9d4c77462f2e42a25bbe4e41724f1a3b Mon Sep 17 00:00:00 2001 From: DevyanshuNegi Date: Wed, 18 Dec 2024 17:27:07 +0530 Subject: [PATCH 3/3] fixed eslint problem --- .../Volunteer/Groups/Groups.spec.tsx | 43 +++++++++++++++++++ 1 file changed, 43 insertions(+) diff --git a/src/screens/UserPortal/Volunteer/Groups/Groups.spec.tsx b/src/screens/UserPortal/Volunteer/Groups/Groups.spec.tsx index 28e2806e5d..c18b0ff59c 100644 --- a/src/screens/UserPortal/Volunteer/Groups/Groups.spec.tsx +++ b/src/screens/UserPortal/Volunteer/Groups/Groups.spec.tsx @@ -33,6 +33,13 @@ const t = { ...JSON.parse(JSON.stringify(i18n.getDataByLanguage('en')?.errors ?? {})), }; +/** + * Introduces a delay for the specified duration. + * This is primarily used to simulate debounce behavior in tests. + * @param ms - The duration to delay in milliseconds. Defaults to 300ms. + * @returns A Promise that resolves after the specified duration. + */ + const debounceWait = async (ms = 300): Promise => { await act(() => { return new Promise((resolve) => { @@ -41,6 +48,11 @@ const debounceWait = async (ms = 300): Promise => { }); }; +/** + * Renders the Groups component using a specific Apollo link. + * @param link - The ApolloLink instance to use for mocking GraphQL requests. + * @returns The rendered component wrapped in test utilities. + */ const renderGroups = (link: ApolloLink): RenderResult => { return render( @@ -63,6 +75,9 @@ const renderGroups = (link: ApolloLink): RenderResult => { ); }; +/** + * Describes the testing suite for the Groups screen. + */ describe('Testing Groups Screen', () => { beforeAll(() => { vi.mock('react-router-dom', async () => { @@ -82,6 +97,10 @@ describe('Testing Groups Screen', () => { vi.clearAllMocks(); }); + /** + * Tests redirection to the fallback URL when required URL parameters are missing. + * Ensures the "paramsError" element is displayed. + */ it('should redirect to fallback URL if URL params are undefined', async () => { setItem('userId', null); render( @@ -107,12 +126,18 @@ describe('Testing Groups Screen', () => { }); }); + /** + * Checks if the Groups screen renders correctly with the expected elements. + */ it('should render Groups screen', async () => { renderGroups(link1); const searchInput = await screen.findByTestId('searchBy'); expect(searchInput).toBeInTheDocument(); }); + /** + * Verifies the sorting functionality of the Groups screen. + */ it('Check Sorting Functionality', async () => { renderGroups(link1); const searchInput = await screen.findByTestId('searchBy'); @@ -142,6 +167,9 @@ describe('Testing Groups Screen', () => { expect(groupName[0]).toHaveTextContent('Group 2'); }); + /** + * Verifies the search by group functionality of the Groups screen. + */ it('Search by Groups', async () => { renderGroups(link1); const searchInput = await screen.findByTestId('searchBy'); @@ -162,6 +190,9 @@ describe('Testing Groups Screen', () => { expect(groupName[0]).toHaveTextContent('Group 1'); }); + /** + * Verifies the search by leader functionality of the Groups screen. + */ it('Search by Leader', async () => { renderGroups(link1); const searchInput = await screen.findByTestId('searchBy'); @@ -183,6 +214,9 @@ describe('Testing Groups Screen', () => { expect(groupName[0]).toHaveTextContent('Group 1'); }); + /** + * Verifies the behavior when there are no groups to display. + */ it('should render screen with No Groups', async () => { renderGroups(link3); @@ -192,6 +226,9 @@ describe('Testing Groups Screen', () => { }); }); + /** + * Verifies the error handling when there is an issue fetching groups data. + */ it('Error while fetching groups data', async () => { renderGroups(link2); @@ -200,6 +237,9 @@ describe('Testing Groups Screen', () => { }); }); + /** + * Verifies the functionality of opening and closing the ViewModal. + */ it('Open and close ViewModal', async () => { renderGroups(link1); @@ -210,6 +250,9 @@ describe('Testing Groups Screen', () => { userEvent.click(await screen.findByTestId('volunteerViewModalCloseBtn')); }); + /** + * Verifies the functionality of opening and closing the GroupModal. + */ it('Open and close GroupModal', async () => { renderGroups(link1);