Merge remote-tracking branch 'upstream/develop-postgres' into issue-2936

src/components/AgendaCategory/AgendaCategoryContainer.test.tsx → src/components/AgendaCategory/AgendaCategoryContainer.spec.tsx

@@ -8,9 +8,7 @@ import {
   fireEvent,
 } from '@testing-library/react';
 import userEvent from '@testing-library/user-event';
-import 'jest-localstorage-mock';
 import { MockedProvider } from '@apollo/client/testing';
-import 'jest-location-mock';
 import { I18nextProvider } from 'react-i18next';
 import { Provider } from 'react-redux';
 import { BrowserRouter } from 'react-router-dom';
@@ -25,14 +23,15 @@ import { StaticMockLink } from 'utils/StaticMockLink';
 import AgendaCategoryContainer from './AgendaCategoryContainer';
 import { props, props2 } from './AgendaCategoryContainerProps';
 import { MOCKS, MOCKS_ERROR_MUTATIONS } from './AgendaCategoryContainerMocks';
+import { vi, describe, test, expect } from 'vitest';
 
 const link = new StaticMockLink(MOCKS, true);
 const link2 = new StaticMockLink(MOCKS_ERROR_MUTATIONS, true);
 
-jest.mock('react-toastify', () => ({
+vi.mock('react-toastify', () => ({
   toast: {
-    success: jest.fn(),
-    error: jest.fn(),
+    success: vi.fn(),
+    error: vi.fn(),
   },
 }));
 

src/components/AgendaCategory/AgendaCategoryContainerProps.ts

@@ -1,4 +1,5 @@
 type AgendaCategoryConnectionType = 'Organization';
+import { vi } from 'vitest';
 
 export const props = {
   agendaCategoryConnection: 'Organization' as AgendaCategoryConnectionType,
@@ -24,11 +25,11 @@ export const props = {
       },
     },
   ],
-  agendaCategoryRefetch: jest.fn(),
+  agendaCategoryRefetch: vi.fn(),
 };
 
 export const props2 = {
   agendaCategoryConnection: 'Organization' as AgendaCategoryConnectionType,
   agendaCategoryData: [],
-  agendaCategoryRefetch: jest.fn(),
+  agendaCategoryRefetch: vi.fn(),
 };

src/components/EventCalendar/EventCalendar.test.tsx → src/components/EventCalendar/EventCalendar.spec.tsx

@@ -13,6 +13,7 @@ import i18nForTest from 'utils/i18nForTest';
 import { StaticMockLink } from 'utils/StaticMockLink';
 import { weekdays, months } from './constants';
 import { BrowserRouter as Router } from 'react-router-dom';
+import { vi } from 'vitest';
 
 const eventData = [
   {
@@ -122,7 +123,7 @@ describe('Calendar', () => {
   });
 
   afterEach(() => {
-    jest.clearAllMocks();
+    vi.clearAllMocks();
   });
 
   it('should render the current month and year', () => {

src/components/EventCalendar/EventHeader.test.tsx → src/components/EventCalendar/EventHeader.spec.tsx

@@ -4,11 +4,20 @@ import EventHeader from './EventHeader';
 import { ViewType } from '../../screens/OrganizationEvents/OrganizationEvents';
 import { I18nextProvider } from 'react-i18next';
 import i18nForTest from 'utils/i18nForTest';
+import { vi } from 'vitest';
 
 describe('EventHeader Component', () => {
   const viewType = ViewType.MONTH;
-  const handleChangeView = jest.fn();
-  const showInviteModal = jest.fn();
+
+  /**
+   * Mock function to handle view type changes.
+   */
+  const handleChangeView = vi.fn();
+
+  /**
+   * Mock function to handle the display of the invite modal.
+   */
+  const showInviteModal = vi.fn();
 
   it('renders correctly', () => {
     const { getByTestId } = render(

src/components/MemberDetail/EventsAttendedCardItem.test.tsx → src/components/MemberDetail/EventsAttendedCardItem.spec.tsx

@@ -2,6 +2,7 @@ import React from 'react';
 import { render, screen } from '@testing-library/react';
 import { BrowserRouter } from 'react-router-dom';
 import EventAttendedCard from './EventsAttendedCardItem';
+import { vi } from 'vitest';
 
 interface InterfaceEventAttendedCardProps {
   type: 'Event';
@@ -33,7 +34,7 @@ describe('EventAttendedCard', () => {
   };
 
   beforeEach(() => {
-    jest.clearAllMocks();
+    vi.clearAllMocks();
   });
 
   it('renders event details correctly', () => {

src/components/MemberDetail/EventsAttendedMemberModal.test.tsx → src/components/MemberDetail/EventsAttendedMemberModal.spec.tsx

@@ -3,15 +3,24 @@ import { render, screen, fireEvent } from '@testing-library/react';
 import { MockedProvider } from '@apollo/client/testing';
 import { BrowserRouter } from 'react-router-dom';
 import EventsAttendedMemberModal from './EventsAttendedMemberModal';
+import { vi } from 'vitest';
 
-jest.mock('react-i18next', () => ({
+/**
+ * Mock the `react-i18next` module to provide translation functionality.
+ */
+
+vi.mock('react-i18next', () => ({
   useTranslation: () => ({
     t: (key: string) => key,
     i18n: { changeLanguage: () => Promise.resolve() },
   }),
 }));
 
-jest.mock('./customTableCell', () => ({
+/**
+ * Mock the `CustomTableCell` component for testing.
+ */
+
+vi.mock('./customTableCell', () => ({
   CustomTableCell: ({ eventId }: { eventId: string }) => (
     <tr data-testid="event-row">
       <td>{`Event ${eventId}`}</td>
@@ -33,12 +42,12 @@ const mockEvents = Array.from({ length: 6 }, (_, index) => ({
 describe('EventsAttendedMemberModal', () => {
   const defaultProps = {
     eventsAttended: mockEvents,
-    setShow: jest.fn(),
+    setShow: vi.fn(),
     show: true,
   };
 
   beforeEach(() => {
-    jest.clearAllMocks();
+    vi.clearAllMocks();
   });
 
   test('renders modal with correct title when show is true', () => {
@@ -95,7 +104,7 @@ describe('EventsAttendedMemberModal', () => {
   });
 
   test('closes modal when close button is clicked', () => {
-    const mockSetShow = jest.fn();
+    const mockSetShow = vi.fn();
     render(
       <MockedProvider>
         <BrowserRouter>

src/components/OrgContriCards/OrgContriCards.test.tsx → src/components/OrgContriCards/OrgContriCards.spec.tsx

@@ -7,7 +7,7 @@ import { I18nextProvider } from 'react-i18next';
 import OrgContriCards from './OrgContriCards';
 import i18nForTest from 'utils/i18nForTest';
 import { BACKEND_URL } from 'Constant/constant';
-
+import { describe, expect } from 'vitest';
 const client: ApolloClient<NormalizedCacheObject> = new ApolloClient({
   cache: new InMemoryCache(),
   uri: BACKEND_URL,

src/screens/MemberDetail/MemberDetail.tsx

@@ -3,7 +3,7 @@ import { useMutation, useQuery } from '@apollo/client';
 import Button from 'react-bootstrap/Button';
 import { useTranslation } from 'react-i18next';
 import { useLocation, useNavigate, useParams } from 'react-router-dom';
-import styles from './MemberDetail.module.css';
+import styles from '../../style/app.module.css';
 import { languages } from 'utils/languages';
 import { UPDATE_USER_MUTATION } from 'GraphQl/Mutations/mutations';
 import { USER_DETAILS } from 'GraphQl/Queries/Queries';
@@ -433,7 +433,7 @@ const MemberDetail: React.FC<MemberDetailProps> = ({ id }): JSX.Element => {
                     {t('birthDate')}
                   </label>
                   <DatePicker
-                    className={`${styles.datebox} w-100`}
+                    className={`${styles.dateboxMemberDetail} w-100`}
                     value={dayjs(formState.birthDate)}
                     onChange={handleDateChange}
                     data-testid="birthDate"

src/screens/OrganizationFundCampaign/CampaignModal.tsx

@@ -5,7 +5,7 @@ import type { ChangeEvent } from 'react';
 import React, { useEffect, useState } from 'react';
 import { Button, Form, Modal } from 'react-bootstrap';
 import { currencyOptions, currencySymbols } from 'utils/currency';
-import styles from './OrganizationFundCampaign.module.css';
+import styles from '../../style/app.module.css';
 import { useTranslation } from 'react-i18next';
 import { useMutation } from '@apollo/client';
 import {
@@ -301,7 +301,7 @@ const CampaignModal: React.FC<InterfaceCampaignModal> = ({
             {/* Button to create the campaign */}
             <Button
               type="submit"
-              className={styles.greenregbtn}
+              className={styles.greenregbtnOrganizationFundCampaign}
               data-testid="submitCampaignBtn"
             >
               {t(mode === 'edit' ? 'updateCampaign' : 'createCampaign')}

src/screens/OrganizationFundCampaign/OrganizationFundCampagins.tsx

@@ -14,7 +14,7 @@ import dayjs from 'dayjs';
 import Loader from 'components/Loader/Loader';
 import CampaignModal from './CampaignModal';
 import { FUND_CAMPAIGN } from 'GraphQl/Queries/fundQueries';
-import styles from './OrganizationFundCampaign.module.css';
+import styles from '../../style/app.module.css';
 import { currencySymbols } from 'utils/currency';
 import type {
   InterfaceCampaignInfo,
@@ -339,14 +339,14 @@ const orgFundCampaign = (): JSX.Element => {
         <Typography color="text.primary">{t('title')}</Typography>
       </Breadcrumbs>
 
-      <div className={styles.btnsContainer}>
-        <div className={styles.input}>
+      <div className={styles.btnsContainerOrganizationFundCampaign}>
+        <div className={styles.inputOrganizationFundCampaign}>
           <Form.Control
             type="name"
             placeholder={tCommon('searchByName')}
             autoComplete="off"
             required
-            className={styles.inputField}
+            className={styles.inputFieldOrganizationFundCampaign}
             value={searchTerm}
             onChange={(e) => setSearchTerm(e.target.value)}
             data-testid="searchFullName"
@@ -358,13 +358,13 @@ const orgFundCampaign = (): JSX.Element => {
             <Search />
           </Button>
         </div>
-        <div className={styles.btnsBlock}>
+        <div className={styles.btnsBbtnsBlockOrganizationFundCampaignlock}>
           <div className="d-flex justify-space-between">
             <Dropdown>
               <Dropdown.Toggle
                 variant="success"
                 id="dropdown-basic"
-                className={styles.dropdown}
+                className={styles.dropdownOrganizationFundCampaign}
                 data-testid="filter"
               >
                 <Sort className={'me-1'} />
@@ -426,7 +426,9 @@ const orgFundCampaign = (): JSX.Element => {
           ),
         }}
         sx={dataGridStyle}
-        getRowClassName={() => `${styles.rowBackground}`}
+        getRowClassName={() =>
+          `${styles.rowBackgroundOrganizationFundCampaign}`
+        }
         autoHeight
         rowHeight={65}
         rows={campaigns.map((campaign, index) => ({