Refactor: src/screens/OrganizationVenues from Jest to Vitest

jest.config.js

@@ -10,7 +10,8 @@ export default {
     '!**/index.{js,ts}',
     '!**/*.d.ts',
     '!src/test/**',
-    '!vitest.config.ts',],
+    '!vitest.config.ts',
+  ],
   // setupFiles: ['react-app-polyfill/jsdom'],
   setupFiles: ['whatwg-fetch'],
   setupFilesAfterEnv: ['<rootDir>/src/setupTests.ts'],
@@ -35,6 +36,7 @@ export default {
     '<rootDir>/src',
   ],
   moduleNameMapper: {
+    '\\.(css|less)$': 'identity-obj-proxy',
     '^react-native$': 'react-native-web',
     '^@dicebear/core$': '<rootDir>/scripts/__mocks__/@dicebear/core.ts',
     '^@dicebear/collection$':

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

@@ -4,11 +4,11 @@
 import { BrowserRouter } from 'react-router-dom';
 import { CustomTableCell } from './customTableCell';
 import { EVENT_DETAILS } from 'GraphQl/Queries/Queries';
-
-jest.mock('react-toastify', () => ({
+import { vi } from 'vitest';
+vi.mock('react-toastify', () => ({
   toast: {
-    success: jest.fn(),
-    error: jest.fn(),
+    success: vi.fn(),
+    error: vi.fn(),
   },
 }));
 
@@ -65,7 +65,16 @@
     await waitFor(() => screen.getByTestId('custom-row'));
 
     expect(screen.getByText('Test Event')).toBeInTheDocument();
-    expect(screen.getByText('May 1, 2023')).toBeInTheDocument();
+    expect(
+      screen.getByText(
+        new Date('2023-05-01').toLocaleDateString(undefined, {
+          year: 'numeric',
+          month: 'long',
+          day: 'numeric',
+          timeZone: 'UTC',
+        }),
+      ),
+    ).toBeInTheDocument();
     expect(screen.getByText('Yes')).toBeInTheDocument();
     expect(screen.getByText('2')).toBeInTheDocument();
 
@@ -87,7 +96,7 @@
     expect(screen.getByRole('progressbar')).toBeInTheDocument();
   });
 
   // it('displays error state', async () => {
   //   const errorMock = [
   //     {
   //       request: {
@@ -121,7 +130,7 @@
   //   expect(toast.error).toHaveBeenCalledWith('An error occurred');
   // });
 
   // it('displays no event found message', async () => {
   //   const noEventMock = [
   //     {
   //       request: {

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

@@ -2,7 +2,6 @@ import React from 'react';
 import { MockedProvider } from '@apollo/react-testing';
 import { fireEvent, render, screen, waitFor } from '@testing-library/react';
 import { I18nextProvider } from 'react-i18next';
-import 'jest-location-mock';
 import { Provider } from 'react-redux';
 import { BrowserRouter } from 'react-router-dom';
 import { store } from 'state/store';
@@ -11,10 +10,10 @@ import OrganizationScreen from './OrganizationScreen';
 import { ORGANIZATION_EVENT_LIST } from 'GraphQl/Queries/Queries';
 import { StaticMockLink } from 'utils/StaticMockLink';
 import styles from './OrganizationScreen.module.css';
-
+import { vi } from 'vitest';
 const mockID: string | undefined = '123';
-jest.mock('react-router-dom', () => ({
-  ...jest.requireActual('react-router-dom'),
+vi.mock('react-router-dom', async () => ({
+  ...(await vi.importActual('react-router-dom')),
   useParams: () => ({ orgId: mockID }),
   useMatch: () => ({ params: { eventId: 'event123', orgId: '123' } }),
 }));
@@ -81,14 +80,18 @@ describe('Testing OrganizationScreen', () => {
     fireEvent.click(closeButton);
 
     // Check for contract class after closing
-    expect(screen.getByTestId('mainpageright')).toHaveClass('_expand_ccl5z_8');
+    expect(screen.getByTestId('mainpageright')).toHaveAttribute(
+      'data-expanded',
+      'true',
+    );
 
     const openButton = screen.getByTestId('openMenu');
     fireEvent.click(openButton);
 
     // Check for expand class after opening
-    expect(screen.getByTestId('mainpageright')).toHaveClass(
-      '_contract_ccl5z_61',
+    expect(screen.getByTestId('mainpageright')).toHaveAttribute(
+      'data-expanded',
+      'false',
     );
   });
 

src/components/OrganizationScreen/OrganizationScreen.tsx

@@ -146,6 +146,7 @@ const OrganizationScreen = (): JSX.Element => {
               : styles.contract
         } `}
         data-testid="mainpageright"
+        data-expanded={hideDrawer === null ? '' : hideDrawer ? 'true' : 'false'}
       >
         <div className="d-flex justify-content-between align-items-center">
           <div style={{ flex: 1 }}>

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

@@ -1,3 +1,15 @@
+/**
+ * Tests for the OrganizationVenues component.
+ * These tests include:
+ * - Ensuring the component renders correctly with default props.
+ * - Handling the absence of `orgId` by redirecting to the homepage.
+ * - Fetching and displaying venues via Apollo GraphQL queries.
+ * - Allowing users to search venues by name or description.
+ * - Sorting venues by capacity in ascending or descending order.
+ * - Verifying that long venue names or descriptions are handled gracefully.
+ * - Testing loading states and edge cases for Apollo queries.
+ * - Mocking GraphQL mutations for venue-related actions and validating their behavior.
+ */
 import React from 'react';
 import { MockedProvider } from '@apollo/react-testing';
 import type { RenderResult } from '@testing-library/react';
@@ -10,7 +22,6 @@ import {
 } from '@testing-library/react';
 import { Provider } from 'react-redux';
 import { MemoryRouter, Route, Routes } from 'react-router-dom';
-import 'jest-location-mock';
 import { I18nextProvider } from 'react-i18next';
 import OrganizationVenues from './OrganizationVenues';
 import { store } from 'state/store';
@@ -19,7 +30,7 @@ import { StaticMockLink } from 'utils/StaticMockLink';
 import { VENUE_LIST } from 'GraphQl/Queries/OrganizationQueries';
 import type { ApolloLink } from '@apollo/client';
 import { DELETE_VENUE_MUTATION } from 'GraphQl/Mutations/VenueMutations';
-
+import { vi } from 'vitest';
 const MOCKS = [
   {
     request: {
@@ -239,11 +250,11 @@ async function wait(ms = 100): Promise<void> {
   });
 }
 
-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(),
   },
 }));
 
@@ -272,14 +283,14 @@ const renderOrganizationVenue = (link: ApolloLink): RenderResult => {
 
 describe('OrganizationVenue with missing orgId', () => {
   beforeAll(() => {
-    jest.mock('react-router-dom', () => ({
-      ...jest.requireActual('react-router-dom'),
+    vi.doMock('react-router-dom', async () => ({
+      ...(await vi.importActual('react-router-dom')),
       useParams: () => ({ orgId: undefined }),
     }));
   });
 
   afterAll(() => {
-    jest.clearAllMocks();
+    vi.clearAllMocks();
   });
   test('Redirect to /orglist when orgId is falsy/undefined', async () => {
     render(
@@ -299,7 +310,6 @@ describe('OrganizationVenue with missing orgId', () => {
         </MemoryRouter>
       </MockedProvider>,
     );
-
     await waitFor(() => {
       const paramsError = screen.getByTestId('paramsError');
       expect(paramsError).toBeInTheDocument();
@@ -308,17 +318,17 @@ describe('OrganizationVenue with missing orgId', () => {
 });
 
 describe('Organisation Venues', () => {
-  global.alert = jest.fn();
+  global.alert = vi.fn();
 
   beforeAll(() => {
-    jest.mock('react-router-dom', () => ({
-      ...jest.requireActual('react-router-dom'),
+    vi.doMock('react-router-dom', async () => ({
+      ...(await vi.importActual('react-router-dom')),
       useParams: () => ({ orgId: 'orgId' }),
     }));
   });
 
   afterAll(() => {
-    jest.clearAllMocks();
+    vi.clearAllMocks();
   });
 
   test('searches the venue list correctly by Name', async () => {