Merge branch 'develop-postgres' into issue-#1873

.github/workflows/check-tsdoc.js

@@ -23,6 +23,7 @@ async function findTsxFiles(dir) {
       } else if (
         filePath.endsWith('.tsx') &&
         !filePath.endsWith('.test.tsx') &&
+        !filePath.endsWith('.spec.tsx') &&
         !filesToSkip.includes(path.relative(dir, filePath))
       ) {
         results.push(filePath);

.github/workflows/pull-request.yml

@@ -49,7 +49,7 @@ jobs:
 
       - name: Run formatting if check fails
         if: failure()
-        run: npm run format
+        run: npm run format:fix
 
       - name: Check for type errors
         if: steps.changed-files.outputs.only_changed != 'true'

src/screens/EventVolunteers/Requests/Requests.test.tsx → src/screens/EventVolunteers/Requests/Requests.spec.tsx

@@ -1,3 +1,10 @@
+/**
+ * Testing component for managing and displaying Volunteer Membership requests for an event.
+ *
+ * This component allows users to view, filter, sort, and create action items. It also allows users to accept or reject volunteer membership requests.
+ *
+ *
+ */
 import React, { act } from 'react';
 import { MockedProvider } from '@apollo/react-testing';
 import { LocalizationProvider } from '@mui/x-date-pickers';
@@ -20,11 +27,12 @@ import {
   UPDATE_ERROR_MOCKS,
 } from './Requests.mocks';
 import { toast } from 'react-toastify';
+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(),
   },
 }));
 
@@ -74,14 +82,14 @@ const renderRequests = (link: ApolloLink): RenderResult => {
 
 describe('Testing Requests Screen', () => {
   beforeAll(() => {
-    jest.mock('react-router-dom', () => ({
-      ...jest.requireActual('react-router-dom'),
+    vi.mock('react-router-dom', async () => ({
+      ...(await vi.importActual('react-router-dom')),
       useParams: () => ({ orgId: 'orgId', eventId: 'eventId' }),
     }));
   });
 
   afterAll(() => {
-    jest.clearAllMocks();
+    vi.clearAllMocks();
   });
 
   it('should redirect to fallback URL if URL params are undefined', async () => {
@@ -102,10 +110,7 @@ describe('Testing Requests Screen', () => {
         </MemoryRouter>
       </MockedProvider>,
     );
-
-    await waitFor(() => {
-      expect(screen.getByTestId('paramsError')).toBeInTheDocument();
-    });
+    expect(window.location.pathname).toBe('/');
   });
 
   it('should render Requests screen', async () => {

src/screens/OrgSettings/OrgSettings.test.tsx → src/screens/OrgSettings/OrgSettings.spec.tsx

@@ -1,36 +1,48 @@
+import type { ReactElement } from 'react';
 import React from 'react';
-import { MockedProvider } from '@apollo/react-testing';
-import type { RenderResult } from '@testing-library/react';
+import { describe, it, expect, vi } from 'vitest';
 import { render, screen, waitFor } from '@testing-library/react';
-import 'jest-location-mock';
-import { I18nextProvider } from 'react-i18next';
-import { Provider } from 'react-redux';
+import userEvent from '@testing-library/user-event';
 import { MemoryRouter, Route, Routes } from 'react-router-dom';
-
+import { Provider } from 'react-redux';
+import { I18nextProvider } from 'react-i18next';
+import { LocalizationProvider } from '@mui/x-date-pickers';
+import { AdapterDayjs } from '@mui/x-date-pickers/AdapterDayjs';
+import { MockedProvider } from '@apollo/react-testing';
 import { store } from 'state/store';
-import { StaticMockLink } from 'utils/StaticMockLink';
 import i18nForTest from 'utils/i18nForTest';
+import { StaticMockLink } from 'utils/StaticMockLink';
 import OrgSettings from './OrgSettings';
-import userEvent from '@testing-library/user-event';
-import type { ApolloLink } from '@apollo/client';
-import { LocalizationProvider } from '@mui/x-date-pickers';
-import { AdapterDayjs } from '@mui/x-date-pickers/AdapterDayjs';
 import { MOCKS } from './OrgSettings.mocks';
 
 const link1 = new StaticMockLink(MOCKS);
-
-const renderOrganisationSettings = (link: ApolloLink): RenderResult => {
+const mockRouterParams = (orgId: string | undefined): void => {
+  vi.doMock('react-router-dom', async () => {
+    const actual = await vi.importActual('react-router-dom');
+    return {
+      ...actual,
+      useParams: () => ({ orgId }),
+    };
+  });
+};
+const renderOrganisationSettings = (
+  link = link1,
+  orgId = 'orgId',
+): ReturnType<typeof render> => {
+  mockRouterParams(orgId);
   return render(
     <MockedProvider addTypename={false} link={link}>
-      <MemoryRouter initialEntries={['/orgsetting/orgId']}>
+      <MemoryRouter initialEntries={[`/orgsetting/${orgId}`]}>
         <Provider store={store}>
           <LocalizationProvider dateAdapter={AdapterDayjs}>
             <I18nextProvider i18n={i18nForTest}>
               <Routes>
                 <Route path="/orgsetting/:orgId" element={<OrgSettings />} />
                 <Route
                   path="/"
-                  element={<div data-testid="paramsError"></div>}
+                  element={
+                    <div data-testid="paramsError">Redirected to Home</div>
+                  }
                 />
               </Routes>
             </I18nextProvider>
@@ -42,42 +54,54 @@ const renderOrganisationSettings = (link: ApolloLink): RenderResult => {
 };
 
 describe('Organisation Settings Page', () => {
-  beforeAll(() => {
-    jest.mock('react-router-dom', () => ({
-      ...jest.requireActual('react-router-dom'),
-      useParams: () => ({ orgId: 'orgId' }),
-    }));
+  afterEach(() => {
+    vi.unmock('react-router-dom');
   });
 
-  afterAll(() => {
-    jest.clearAllMocks();
-  });
+  const SetupRedirectTest = async (): Promise<ReactElement> => {
+    const useParamsMock = vi.fn(() => ({ orgId: undefined }));
+    vi.doMock('react-router-dom', async () => {
+      const actual = await vi.importActual('react-router-dom');
+      return {
+        ...actual,
+        useParams: useParamsMock,
+      };
+    });
+    const orgSettingsModule = await import('./OrgSettings');
+    return <orgSettingsModule.default />;
+  };
 
   it('should redirect to fallback URL if URL params are undefined', async () => {
+    const OrgSettings = await SetupRedirectTest();
     render(
-      <MockedProvider addTypename={false} link={link1}>
+      <MockedProvider addTypename={false}>
         <MemoryRouter initialEntries={['/orgsetting/']}>
           <Provider store={store}>
             <I18nextProvider i18n={i18nForTest}>
               <Routes>
-                <Route path="/orgsetting/" element={<OrgSettings />} />
+                <Route path="/orgsetting/" element={OrgSettings} />
                 <Route
                   path="/"
-                  element={<div data-testid="paramsError"></div>}
+                  element={
+                    <div data-testid="paramsError">Redirected to Home</div>
+                  }
                 />
               </Routes>
             </I18nextProvider>
           </Provider>
         </MemoryRouter>
       </MockedProvider>,
     );
+
     await waitFor(() => {
-      expect(screen.getByTestId('paramsError')).toBeInTheDocument();
+      const paramsErrorElement = screen.getByTestId('paramsError');
+      expect(paramsErrorElement).toBeInTheDocument();
+      expect(paramsErrorElement.textContent).toBe('Redirected to Home');
     });
   });
 
-  test('should render the organisation settings page', async () => {
-    renderOrganisationSettings(link1);
+  it('should render the organisation settings page', async () => {
+    renderOrganisationSettings();
 
     await waitFor(() => {
       expect(screen.getByTestId('generalSettings')).toBeInTheDocument();
@@ -88,10 +112,11 @@ describe('Organisation Settings Page', () => {
         screen.getByTestId('agendaItemCategoriesSettings'),
       ).toBeInTheDocument();
     });
-    userEvent.click(screen.getByTestId('generalSettings'));
 
+    userEvent.click(screen.getByTestId('generalSettings'));
     await waitFor(() => {
       expect(screen.getByTestId('generalTab')).toBeInTheDocument();
+      expect(screen.getByTestId('generalTab')).toBeVisible();
     });
 
     userEvent.click(screen.getByTestId('actionItemCategoriesSettings'));
@@ -104,4 +129,19 @@ describe('Organisation Settings Page', () => {
       expect(screen.getByTestId('agendaItemCategoriesTab')).toBeInTheDocument();
     });
   });
+
+  it('should render dropdown for settings tabs', async () => {
+    renderOrganisationSettings();
+
+    await waitFor(() => {
+      expect(screen.getByTestId('settingsDropdownToggle')).toBeInTheDocument();
+    });
+
+    userEvent.click(screen.getByTestId('settingsDropdownToggle'));
+
+    const dropdownItems = screen.getAllByRole('button', {
+      name: /general|actionItemCategories|agendaItemCategories/i,
+    });
+    expect(dropdownItems).toHaveLength(3);
+  });
 });

src/screens/OrganizationDashboard/OrganizationDashboard.tsx

@@ -31,7 +31,7 @@ import type {
   InterfaceQueryOrganizationsListObject,
   InterfaceVolunteerRank,
 } from 'utils/interfaces';
-import styles from './OrganizationDashboard.module.css';
+import styles from 'style/app.module.css';
 import { VOLUNTEER_RANKING } from 'GraphQl/Queries/EventVolunteerQueries';
 
 /**
@@ -41,7 +41,7 @@ import { VOLUNTEER_RANKING } from 'GraphQl/Queries/EventVolunteerQueries';
  *
  * @returns The rendered component.
  */
-function organizationDashboard(): JSX.Element {
+function OrganizationDashboard(): JSX.Element {
   const { t } = useTranslation('translation', { keyPrefix: 'dashboard' });
   const { t: tCommon } = useTranslation('common');
   const { t: tErrors } = useTranslation('errors');
@@ -299,7 +299,7 @@ function organizationDashboard(): JSX.Element {
                     {t('viewAll')}
                   </Button>
                 </div>
-                <Card.Body className={styles.cardBody}>
+                <Card.Body className={styles.containerBody}>
                   {loadingEvent ? (
                     [...Array(4)].map((_, index) => {
                       return <CardItemLoading key={`eventLoading_${index}`} />;
@@ -341,7 +341,7 @@ function organizationDashboard(): JSX.Element {
                     {t('viewAll')}
                   </Button>
                 </div>
-                <Card.Body className={styles.cardBody}>
+                <Card.Body className={styles.containerBody}>
                   {loadingPost ? (
                     [...Array(4)].map((_, index) => {
                       return <CardItemLoading key={`postLoading_${index}`} />;
@@ -392,7 +392,7 @@ function organizationDashboard(): JSX.Element {
                 </Button>
               </div>
               <Card.Body
-                className={styles.cardBody}
+                className={styles.containerBody}
                 style={{ height: '150px' }}
               >
                 {loadingOrgData ? (
@@ -435,7 +435,10 @@ function organizationDashboard(): JSX.Element {
                   {t('viewAll')}
                 </Button>
               </div>
-              <Card.Body className={styles.cardBody} style={{ padding: '0px' }}>
+              <Card.Body
+                className={styles.containerBody}
+                style={{ padding: '0px' }}
+              >
                 {rankingsLoading ? (
                   [...Array(3)].map((_, index) => {
                     return <CardItemLoading key={`rankingLoading_${index}`} />;
@@ -483,4 +486,4 @@ function organizationDashboard(): JSX.Element {
   );
 }
 
-export default organizationDashboard;
+export default OrganizationDashboard;