From 6344642741943e847ce26eb70b2e63db64cd4320 Mon Sep 17 00:00:00 2001 From: DevyanshuNegi Date: Fri, 20 Dec 2024 01:59:57 +0530 Subject: [PATCH 1/4] refactored code from jest to vitest --- .../Volunteer/Groups/Groups.test.tsx | 58 +++++++++++++++++-- 1 file changed, 53 insertions(+), 5 deletions(-) diff --git a/src/screens/UserPortal/Volunteer/Groups/Groups.test.tsx b/src/screens/UserPortal/Volunteer/Groups/Groups.test.tsx index bc0a4993b9..22a69a9bb8 100644 --- a/src/screens/UserPortal/Volunteer/Groups/Groups.test.tsx +++ b/src/screens/UserPortal/Volunteer/Groups/Groups.test.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(); @@ -31,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) => { @@ -39,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( @@ -61,12 +75,18 @@ const renderGroups = (link: ApolloLink): RenderResult => { ); }; +/** + * Describes the testing suite for the Groups screen. + */ 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, + useParams: () => ({ orgId: 'orgId' }), + }; + }); }); beforeEach(() => { @@ -74,9 +94,13 @@ describe('Testing Groups Screen', () => { }); afterAll(() => { - jest.clearAllMocks(); + 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( @@ -102,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'); @@ -137,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'); @@ -157,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'); @@ -178,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); @@ -187,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); @@ -195,6 +237,9 @@ describe('Testing Groups Screen', () => { }); }); + /** + * Verifies the functionality of opening and closing the ViewModal. + */ it('Open and close ViewModal', async () => { renderGroups(link1); @@ -205,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); From 7e8f99d7018c1f08ddbac58ea39d3b2f40278f56 Mon Sep 17 00:00:00 2001 From: DevyanshuNegi Date: Sun, 22 Dec 2024 16:47:58 +0530 Subject: [PATCH 2/4] refactored from jest to vitest --- .../Volunteer/Groups/{Groups.test.tsx => Groups.spec.tsx} | 0 1 file changed, 0 insertions(+), 0 deletions(-) rename src/screens/UserPortal/Volunteer/Groups/{Groups.test.tsx => Groups.spec.tsx} (100%) diff --git a/src/screens/UserPortal/Volunteer/Groups/Groups.test.tsx b/src/screens/UserPortal/Volunteer/Groups/Groups.spec.tsx similarity index 100% rename from src/screens/UserPortal/Volunteer/Groups/Groups.test.tsx rename to src/screens/UserPortal/Volunteer/Groups/Groups.spec.tsx From babb55211032c69432c5ae3ce883032c37ff6541 Mon Sep 17 00:00:00 2001 From: DevyanshuNegi Date: Tue, 24 Dec 2024 19:26:22 +0530 Subject: [PATCH 3/4] changes suggested by code rabbit --- .../{Groups.test.tsx => Groups.spec.tsx} | 18 +++++++++++++++--- 1 file changed, 15 insertions(+), 3 deletions(-) rename src/screens/UserPortal/Volunteer/Groups/{Groups.test.tsx => Groups.spec.tsx} (94%) diff --git a/src/screens/UserPortal/Volunteer/Groups/Groups.test.tsx b/src/screens/UserPortal/Volunteer/Groups/Groups.spec.tsx similarity index 94% rename from src/screens/UserPortal/Volunteer/Groups/Groups.test.tsx rename to src/screens/UserPortal/Volunteer/Groups/Groups.spec.tsx index 22a69a9bb8..8f82f1d9af 100644 --- a/src/screens/UserPortal/Volunteer/Groups/Groups.test.tsx +++ b/src/screens/UserPortal/Volunteer/Groups/Groups.spec.tsx @@ -3,7 +3,13 @@ import { MockedProvider } from '@apollo/react-testing'; import { LocalizationProvider } from '@mui/x-date-pickers'; import { AdapterDayjs } from '@mui/x-date-pickers/AdapterDayjs'; import type { RenderResult } from '@testing-library/react'; -import { fireEvent, render, screen, waitFor } from '@testing-library/react'; +import { + cleanup, + 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'; @@ -93,8 +99,9 @@ describe('Testing Groups Screen', () => { setItem('userId', 'userId'); }); - afterAll(() => { - vi.clearAllMocks(); + afterEach(() => { + vi.resetAllMocks(); + cleanup(); // from @testing-library/react }); /** @@ -133,6 +140,11 @@ describe('Testing Groups Screen', () => { renderGroups(link1); const searchInput = await screen.findByTestId('searchBy'); expect(searchInput).toBeInTheDocument(); + // Verify other critical UI elements + expect(await screen.findByTestId('sort')).toBeInTheDocument(); + expect(await screen.findByTestId('searchByToggle')).toBeInTheDocument(); + const groupElements = await screen.findAllByTestId('groupName'); + expect(groupElements.length).toBeGreaterThan(0); }); /** From e7c7a125dd61d7ebc9bc80fa1b327e56dbb289af Mon Sep 17 00:00:00 2001 From: DevyanshuNegi Date: Wed, 25 Dec 2024 01:25:58 +0530 Subject: [PATCH 4/4] changes suggested by @palisadoes --- src/screens/UserPortal/Volunteer/Groups/Groups.spec.tsx | 1 - 1 file changed, 1 deletion(-) diff --git a/src/screens/UserPortal/Volunteer/Groups/Groups.spec.tsx b/src/screens/UserPortal/Volunteer/Groups/Groups.spec.tsx index 8f82f1d9af..b9bf6c29c0 100644 --- a/src/screens/UserPortal/Volunteer/Groups/Groups.spec.tsx +++ b/src/screens/UserPortal/Volunteer/Groups/Groups.spec.tsx @@ -22,7 +22,6 @@ 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();