Merge branch 'develop-postgres' into issue#2645

src/components/AddOn/core/AddOnEntry/AddOnEntry.tsx

@@ -104,19 +104,8 @@ function addOnEntry({
     <>
       <Card
         data-testid="AddOnEntry"
-        style={{ border: '1px solid #31BB6B', borderRadius: '10px' }}
+        style={{ border: 'var(--primary-border-solid)', borderRadius: '10px' }}
       >
-        {/* {uninstalledOrgs.includes(currentOrg) && (
-          <Form.Check
-            type="switch"
-            id="custom-switch"
-            label={t('enable')}
-            className={styles.entrytoggle}
-            onChange={(): void => {}}
-            disabled={switchInProgress}
-            checked={enabled}
-          />
-        )} */}
         <Card.Body>
           <Card.Title style={{ fontWeight: '800' }}>{title}</Card.Title>
           <Card.Subtitle className="mb-2 text-muted author">

src/components/EventManagement/EventAttendance/EventAttendance.tsx

@@ -312,12 +312,12 @@ function EventAttendance(): JSX.Element {
                       componentsProps={{
                         tooltip: {
                           sx: {
-                            backgroundColor: 'white',
+                            backgroundColor: 'var(--bs-white)',
                             fontSize: '2em',
                             maxHeight: '170px',
                             overflowY: 'scroll',
                             scrollbarColor: 'white',
-                            border: '1px solid green',
+                            border: 'var(--primary-border-solid)',
                             borderRadius: '6px',
                             boxShadow: '0 0 5px rgba(0,0,0,0.1)',
                           },

src/components/EventManagement/EventRegistrant/EventRegistrants.tsx

@@ -9,7 +9,7 @@ import {
 } from '@mui/material';
 import { Button, Table } from 'react-bootstrap';
 import { useTranslation } from 'react-i18next';
-import style from '../../../style/app.module.css';
+import styles from '../../../style/app.module.css';
 import { useLazyQuery } from '@apollo/client';
 import { EVENT_ATTENDEES, EVENT_REGISTRANTS } from 'GraphQl/Queries/Queries';
 import { useParams } from 'react-router-dom';
@@ -112,7 +112,7 @@ function EventRegistrants(): JSX.Element {
         )}
         <Button
           data-testid="filter-button"
-          className={`border-1 mx-4 ${style.createButton} `}
+          className={`border-1 mx-4 ${styles.createButton} `}
         >
           <img
             src="/images/svg/organization.svg"
@@ -123,39 +123,39 @@ function EventRegistrants(): JSX.Element {
           {t('allRegistrants')}
         </Button>
       </div>
-      <TableContainer component={Paper} className={`mt-3 ${style.tableHead}`}>
+      <TableContainer component={Paper} className={`mt-3 ${styles.tableHead}`}>
         <Table aria-label={t('eventRegistrantsTable')} role="grid">
           <TableHead>
-            <TableRow role="row" className={`${style.rowBackground}`}>
+            <TableRow role="row" className={`${styles.rowBackground}`}>
               <TableCell
                 data-testid="table-header-serial"
-                className={style.tableHeader}
+                className={styles.tableHeader}
                 role="columnheader"
                 aria-sort="none"
               >
                 {t('serialNumber')}
               </TableCell>
               <TableCell
                 data-testid="table-header-registrant"
-                className={style.tableHeader}
+                className={styles.tableHeader}
               >
                 {t('registrant')}
               </TableCell>
               <TableCell
                 data-testid="table-header-registered-at"
-                className={style.tableHeader}
+                className={styles.tableHeader}
               >
                 {t('registeredAt')}
               </TableCell>
               <TableCell
                 data-testid="table-header-created-at"
-                className={style.tableHeader}
+                className={styles.tableHeader}
               >
                 {t('createdAt')}
               </TableCell>
               <TableCell
                 data-testid="table-header-add-registrant"
-                className={style.tableHeader}
+                className={styles.tableHeader}
               >
                 {t('addRegistrant')}
               </TableCell>

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

@@ -1,20 +1,28 @@
-import React, { act } from 'react';
+import React from 'react';
+import { act } from 'react-dom/test-utils';
 import { render, screen } from '@testing-library/react';
-import 'jest-location-mock';
+import userEvent from '@testing-library/user-event';
+import { describe, test, expect, vi, beforeEach } from 'vitest';
 import { I18nextProvider } from 'react-i18next';
+import { BrowserRouter } from 'react-router-dom';
+import { MockedProvider } from '@apollo/client/testing';
 
 import i18nForTest from 'utils/i18nForTest';
 import type { InterfaceOrgListCardProps } from './OrgListCard';
 import OrgListCard from './OrgListCard';
-import userEvent from '@testing-library/user-event';
-import { BrowserRouter } from 'react-router-dom';
 import { IS_SAMPLE_ORGANIZATION_QUERY } from 'GraphQl/Queries/Queries';
 import { StaticMockLink } from 'utils/StaticMockLink';
-import { MockedProvider } from '@apollo/react-testing';
 import useLocalStorage from 'utils/useLocalstorage';
 
 const { setItem, removeItem } = useLocalStorage();
 
+// Mock window.location
+const mockAssign = vi.fn();
+Object.defineProperty(window, 'location', {
+  value: { assign: mockAssign },
+  writable: true,
+});
+
 const MOCKS = [
   {
     request: {
@@ -75,6 +83,10 @@ const props: InterfaceOrgListCardProps = {
 };
 
 describe('Testing the Super Dash List', () => {
+  beforeEach(() => {
+    vi.clearAllMocks();
+  });
+
   test('should render props and text elements test for the page component', async () => {
     removeItem('id');
     setItem('id', '123'); // Means the user is an admin
@@ -88,22 +100,24 @@ describe('Testing the Super Dash List', () => {
         </BrowserRouter>
       </MockedProvider>,
     );
+
     await wait();
-    expect(screen.getByAltText(/Dogs Care image/i)).toBeInTheDocument();
-    expect(screen.getByText(/Admins:/i)).toBeInTheDocument();
-    expect(screen.getByText(/Members:/i)).toBeInTheDocument();
-    expect(screen.getByText('Dogs Care')).toBeInTheDocument();
-    expect(screen.getByText(/Sample City/i)).toBeInTheDocument();
-    expect(screen.getByText(/123 Sample Street/i)).toBeInTheDocument();
-    expect(screen.getByTestId(/manageBtn/i)).toBeInTheDocument();
-    expect(screen.getByTestId(/flaskIcon/i)).toBeInTheDocument();
-    userEvent.click(screen.getByTestId(/manageBtn/i));
+
+    expect(screen.getByAltText(/Dogs Care image/i)).toBeDefined();
+    expect(screen.getByText(/Admins:/i)).toBeDefined();
+    expect(screen.getByText(/Members:/i)).toBeDefined();
+    expect(screen.getByText('Dogs Care')).toBeDefined();
+    expect(screen.getByText(/Sample City/i)).toBeDefined();
+    expect(screen.getByText(/123 Sample Street/i)).toBeDefined();
+    expect(screen.getByTestId(/manageBtn/i)).toBeDefined();
+    expect(screen.getByTestId(/flaskIcon/i)).toBeDefined();
+
+    await userEvent.click(screen.getByTestId(/manageBtn/i));
     removeItem('id');
   });
 
   test('Testing if the props data is not provided', () => {
     window.location.assign('/orgdash');
-
     render(
       <MockedProvider addTypename={false} link={link}>
         <BrowserRouter>
@@ -114,14 +128,15 @@ describe('Testing the Super Dash List', () => {
       </MockedProvider>,
     );
 
-    expect(window.location).toBeAt('/orgdash');
+    expect(mockAssign).toHaveBeenCalledWith('/orgdash');
   });
 
   test('Testing if component is rendered properly when image is null', () => {
     const imageNullProps = {
       ...props,
       ...{ data: { ...props.data, ...{ image: null } } },
     };
+
     render(
       <MockedProvider addTypename={false} link={link}>
         <BrowserRouter>
@@ -131,10 +146,11 @@ describe('Testing the Super Dash List', () => {
         </BrowserRouter>
       </MockedProvider>,
     );
-    expect(screen.getByTestId(/emptyContainerForImage/i)).toBeInTheDocument();
+
+    expect(screen.getByTestId(/emptyContainerForImage/i)).toBeDefined();
   });
 
-  test('Testing if user is redirected to orgDash screen', () => {
+  test('Testing if user is redirected to orgDash screen', async () => {
     render(
       <MockedProvider addTypename={false} link={link}>
         <BrowserRouter>
@@ -144,6 +160,7 @@ describe('Testing the Super Dash List', () => {
         </BrowserRouter>
       </MockedProvider>,
     );
-    userEvent.click(screen.getByTestId('manageBtn'));
+
+    await userEvent.click(screen.getByTestId('manageBtn'));
   });
 });

src/components/UserPortal/CreateDirectChat/CreateDirectChat.tsx

@@ -1,7 +1,6 @@
 import { Paper, TableBody } from '@mui/material';
 import React, { useState } from 'react';
 import { Button, Form, Modal } from 'react-bootstrap';
-import styles from './CreateDirectChat.module.css';
 import type { ApolloQueryResult } from '@apollo/client';
 import { useMutation, useQuery } from '@apollo/client';
 import useLocalStorage from 'utils/useLocalstorage';
@@ -18,6 +17,7 @@ import Loader from 'components/Loader/Loader';
 import { Search } from '@mui/icons-material';
 import { useParams } from 'react-router-dom';
 import { useTranslation } from 'react-i18next';
+import styles from '../../../style/app.module.css';
 
 interface InterfaceCreateDirectChatProps {
   toggleCreateDirectChatModal: () => void;
@@ -129,7 +129,7 @@ export default function createDirectChatModal({
             </>
           ) : (
             <>
-              <div className={styles.input}>
+              <div className={styles.inputContainer}>
                 <Form onSubmit={handleUserModalSearchChange}>
                   <Form.Control
                     type="name"
@@ -147,13 +147,16 @@ export default function createDirectChatModal({
                   <Button
                     type="submit"
                     data-testid="submitBtn"
-                    className={`position-absolute z-10 bottom-10 end-0  d-flex justify-content-center align-items-center `}
+                    className={styles.submitBtn}
                   >
                     <Search />
                   </Button>
                 </Form>
               </div>
-              <TableContainer className={styles.userData} component={Paper}>
+              <TableContainer
+                className={styles.tableContainer}
+                component={Paper}
+              >
                 <Table aria-label="customized table">
                   <TableHead>
                     <TableRow>

src/screens/EventVolunteers/VolunteerGroups/VolunteerGroupViewModal.tsx

@@ -185,7 +185,7 @@ const VolunteerGroupViewModal: React.FC<InterfaceVolunteerGroupViewModal> = ({
                 className="fw-lighter ms-2 mb-0"
                 style={{
                   fontSize: '0.8rem',
-                  color: 'grey',
+                  color: 'var(--search-button-border)',
                 }}
               >
                 Volunteers

src/screens/ManageTag/ManageTag.tsx

@@ -536,7 +536,7 @@ function ManageTag(): JSX.Element {
                   </div>
                   <hr
                     style={{
-                      borderColor: 'lightgray',
+                      borderColor: 'var(--grey-border-box-color)',
                       borderWidth: '2px',
                       width: '85%',
                     }}

src/screens/OrgList/OrgList.tsx

@@ -27,7 +27,6 @@ import type {
   InterfaceUserType,
 } from 'utils/interfaces';
 import useLocalStorage from 'utils/useLocalstorage';
-// import styles from '../../style/app.module.css';
 import styles from '../../style/app.module.css';
 import OrganizationModal from './OrganizationModal';
 

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

@@ -9,7 +9,6 @@ import {
 } from '@testing-library/react';
 import { Provider } from 'react-redux';
 import { BrowserRouter } from 'react-router-dom';
-import 'jest-location-mock';
 import { I18nextProvider } from 'react-i18next';
 
 import OrganizationEvents from './OrganizationEvents';
@@ -23,14 +22,31 @@ import { ThemeProvider } from 'react-bootstrap';
 import { LocalizationProvider } from '@mui/x-date-pickers';
 import { AdapterDayjs } from '@mui/x-date-pickers/AdapterDayjs';
 import { MOCKS } from './OrganizationEventsMocks';
-
+import { describe, test, expect, vi } from 'vitest';
 const theme = createTheme({
   palette: {
     primary: {
       main: '#31bb6b',
     },
   },
 });
+Object.defineProperty(window, 'location', {
+  value: {
+    href: 'http://localhost/',
+    assign: vi.fn((url) => {
+      const urlObj = new URL(url, 'http://localhost');
+      window.location.href = urlObj.href;
+      window.location.pathname = urlObj.pathname;
+      window.location.search = urlObj.search;
+      window.location.hash = urlObj.hash;
+    }),
+    reload: vi.fn(),
+    pathname: '/',
+    search: '',
+    hash: '',
+    origin: 'http://localhost',
+  },
+});
 
 const link = new StaticMockLink(MOCKS, true);
 const link2 = new StaticMockLink([], true);
@@ -42,7 +58,6 @@ async function wait(ms = 100): Promise<void> {
     });
   });
 }
-
 const translations = {
   ...JSON.parse(
     JSON.stringify(
@@ -53,19 +68,20 @@ const translations = {
   ...JSON.parse(JSON.stringify(i18n.getDataByLanguage('en')?.errors ?? {})),
 };
 
-jest.mock('@mui/x-date-pickers/DateTimePicker', () => {
+vi.mock('@mui/x-date-pickers/DateTimePicker', async () => {
+  const actual = await vi.importActual(
+    '@mui/x-date-pickers/DesktopDateTimePicker',
+  );
   return {
-    DateTimePicker: jest.requireActual(
-      '@mui/x-date-pickers/DesktopDateTimePicker',
-    ).DesktopDateTimePicker,
+    DateTimePicker: actual.DesktopDateTimePicker,
   };
 });
 
-jest.mock('react-toastify', () => ({
+vi.mock('react-toastify', () => ({
   toast: {
-    success: jest.fn(),
-    warning: jest.fn(),
-    error: jest.fn(),
+    success: vi.fn(),
+    warning: vi.fn(),
+    error: vi.fn(),
   },
 }));
 
@@ -80,7 +96,7 @@ describe('Organisation Events Page', () => {
     endTime: '05:00 PM',
   };
 
-  global.alert = jest.fn();
+  global.alert = vi.fn();
 
   test('It is necessary to query the correct mock data.', async () => {
     const dataQuery1 = MOCKS[0]?.result?.data?.eventsByOrganizationConnection;
@@ -148,7 +164,7 @@ describe('Organisation Events Page', () => {
     expect(container.textContent).not.toBe('Loading data...');
     await wait();
     expect(container.textContent).toMatch('Month');
-    expect(window.location).toBeAt('/orglist');
+    expect(window.location.pathname).toBe('/orglist');
   });
 
   test('No mock data', async () => {