Merge branch 'develop-postgres' into Issue#2983

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/RecurrenceOptions/CustomRecurrenceModal.tsx

@@ -1,6 +1,6 @@
 import React, { useEffect, useState } from 'react';
 import { Button, Dropdown, Form, FormControl, Modal } from 'react-bootstrap';
-import styles from './CustomRecurrenceModal.module.css';
+import styles from '../../style/app.module.css';
 import { DatePicker } from '@mui/x-date-pickers';
 import {
   Days,
@@ -153,7 +153,9 @@ const CustomRecurrenceModal: React.FC<InterfaceCustomRecurrenceModalProps> = ({
         centered
       >
         <Modal.Header>
-          <p className={styles.titlemodal}>{t('customRecurrence')}</p>
+          <p className={styles.titlemodalCustomRecurrenceModal}>
+            {t('customRecurrence')}
+          </p>
           <Button
             variant="danger"
             onClick={hideCustomRecurrenceModal}

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>