Improve Code Coverage in src/screens/UserPortal/Volunteer/VolunteerMa…

…nagement.tsx #3044 (#3125) * name changed * code coverage success * prettier fix
PalisadoesFoundation · Jan 3, 2025 · 32f51ea · 32f51ea
1 parent 5ceb6ff
commit 32f51ea
Show file tree

Hide file tree

Showing 2 changed files with 31 additions and 9 deletions.
diff --git a/...al/Volunteer/VolunteerManagement.test.tsx → ...al/Volunteer/VolunteerManagement.spec.tsx b/...al/Volunteer/VolunteerManagement.test.tsx → ...al/Volunteer/VolunteerManagement.spec.tsx
@@ -13,6 +13,7 @@ import userEvent from '@testing-library/user-event';
 import { MOCKS } from './UpcomingEvents/UpcomingEvents.mocks';
 import { StaticMockLink } from 'utils/StaticMockLink';
 import useLocalStorage from 'utils/useLocalstorage';
+import { vi } from 'vitest';
 const { setItem } = useLocalStorage();
 
 const link1 = new StaticMockLink(MOCKS);
@@ -43,21 +44,25 @@ const renderVolunteerManagement = (): RenderResult => {
 
 describe('Volunteer Management', () => {
   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'); // Import the actual implementation
+      return {
+        ...actual,
+        useParams: () => ({ orgId: 'orgId' }),
+      };
+    });
   });
 
   beforeEach(() => {
     setItem('userId', 'userId');
   });
 
   afterAll(() => {
-    jest.clearAllMocks();
+    vi.clearAllMocks();
   });
 
   it('should redirect to fallback URL if URL params are undefined', async () => {
+    setItem('userId', null);
     render(
       <MockedProvider addTypename={false}>
         <MemoryRouter initialEntries={['/user/volunteer/']}>
@@ -126,4 +131,24 @@ describe('Volunteer Management', () => {
     const groupsTab = screen.getByTestId('groupsTab');
     expect(groupsTab).toBeInTheDocument();
   });
+  test('Component should highlight the selected tab', async () => {
+    renderVolunteerManagement();
+
+    const upcomingEventsBtn = screen.getByTestId('upcomingEventsBtn');
+    const invitationsBtn = screen.getByTestId('invitationsBtn');
+    // Click the invitations tab
+    userEvent.click(invitationsBtn);
+    await waitFor(() => {
+      expect(invitationsBtn).toHaveClass('btn-success');
+      expect(upcomingEventsBtn).not.toHaveClass('btn-success');
+    });
+  });
+  test('should update the component state on tab switch', async () => {
+    renderVolunteerManagement();
+
+    const actionsBtn = screen.getByTestId('actionsBtn');
+    userEvent.click(actionsBtn);
+    const actionsTab = screen.getByTestId('actionsTab');
+    expect(actionsTab).toBeInTheDocument();
+  });
 });
diff --git a/src/screens/UserPortal/Volunteer/VolunteerManagement.tsx b/src/screens/UserPortal/Volunteer/VolunteerManagement.tsx
@@ -151,10 +151,7 @@ const VolunteerManagement = (): JSX.Element => {
               {volunteerDashboardTabs.map(({ value, icon }, index) => (
                 <Dropdown.Item
                   key={index}
-                  onClick={
-                    /* istanbul ignore next */
-                    () => setTab(value)
-                  }
+                  onClick={() => setTab(value)}
                   className={`d-flex gap-2 ${tab === value && 'text-secondary'}`}
                 >
                   {icon} {t(value)}