diff --git a/src/components/MemberDetail/customTableCell.spec.tsx b/src/components/MemberDetail/customTableCell.spec.tsx
new file mode 100644
index 0000000000..81a088d5bb
--- /dev/null
+++ b/src/components/MemberDetail/customTableCell.spec.tsx
@@ -0,0 +1,160 @@
+import React from 'react';
+import { render, screen, waitFor } from '@testing-library/react';
+import { MockedProvider } from '@apollo/client/testing';
+import { BrowserRouter } from 'react-router-dom';
+import { CustomTableCell } from './customTableCell';
+import { EVENT_DETAILS } from 'GraphQl/Queries/Queries';
+import { vi } from 'vitest';
+vi.mock('react-toastify', () => ({
+ toast: {
+ success: vi.fn(),
+ error: vi.fn(),
+ },
+}));
+
+const mocks = [
+ {
+ request: {
+ query: EVENT_DETAILS,
+ variables: { id: 'event123' },
+ },
+ result: {
+ data: {
+ event: {
+ _id: 'event123',
+ title: 'Test Event',
+ description: 'This is a test event description',
+ startDate: '2023-05-01',
+ endDate: '2023-05-02',
+ startTime: '09:00:00',
+ endTime: '17:00:00',
+ allDay: false,
+ location: 'Test Location',
+ recurring: true,
+ baseRecurringEvent: {
+ _id: 'recurringEvent123',
+ },
+ organization: {
+ _id: 'org456',
+ members: [
+ { _id: 'member1', firstName: 'John', lastName: 'Doe' },
+ { _id: 'member2', firstName: 'Jane', lastName: 'Smith' },
+ ],
+ },
+ attendees: [{ _id: 'user1' }, { _id: 'user2' }],
+ },
+ },
+ },
+ },
+];
+
+describe('CustomTableCell', () => {
+ it('renders event details correctly', async () => {
+ render(
+
+
+
+
+ ,
+ );
+
+ await waitFor(() => screen.getByTestId('custom-row'));
+
+ expect(screen.getByText('Test Event')).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();
+
+ const link = screen.getByRole('link', { name: 'Test Event' });
+ expect(link).toHaveAttribute('href', '/event/org456/event123');
+ });
+
+ it('displays loading state', () => {
+ render(
+
+
+ ,
+ );
+
+ expect(screen.getByRole('progressbar')).toBeInTheDocument();
+ });
+
+ it('displays error state', async () => {
+ const errorMock = [
+ {
+ request: {
+ query: EVENT_DETAILS,
+ variables: { id: 'event123' },
+ },
+ error: new Error('An error occurred'),
+ },
+ ];
+
+ render(
+
+
+ ,
+ );
+
+ await waitFor(() => {
+ expect(
+ screen.getByText(
+ 'Unable to load event details. Please try again later.',
+ ),
+ ).toBeInTheDocument();
+ });
+ });
+
+ it('displays no event found message', async () => {
+ const noEventMock = [
+ {
+ request: {
+ query: EVENT_DETAILS,
+ variables: { id: 'event123' },
+ },
+ result: {
+ data: {
+ event: null,
+ },
+ },
+ },
+ ];
+
+ render(
+
+
+ ,
+ );
+
+ await waitFor(() => {
+ expect(
+ screen.getByText('Event not found or has been deleted'),
+ ).toBeInTheDocument();
+ });
+ });
+});
diff --git a/src/components/MemberDetail/customTableCell.test.tsx b/src/components/MemberDetail/customTableCell.test.tsx
deleted file mode 100644
index bc296a74f3..0000000000
--- a/src/components/MemberDetail/customTableCell.test.tsx
+++ /dev/null
@@ -1,171 +0,0 @@
-import React from 'react';
-import { render, screen, waitFor } from '@testing-library/react';
-import { MockedProvider } from '@apollo/client/testing';
-import { BrowserRouter } from 'react-router-dom';
-import { CustomTableCell } from './customTableCell';
-import { EVENT_DETAILS } from 'GraphQl/Queries/Queries';
-
-jest.mock('react-toastify', () => ({
- toast: {
- success: jest.fn(),
- error: jest.fn(),
- },
-}));
-
-const mocks = [
- {
- request: {
- query: EVENT_DETAILS,
- variables: { id: 'event123' },
- },
- result: {
- data: {
- event: {
- _id: 'event123',
- title: 'Test Event',
- description: 'This is a test event description',
- startDate: '2023-05-01',
- endDate: '2023-05-02',
- startTime: '09:00:00',
- endTime: '17:00:00',
- allDay: false,
- location: 'Test Location',
- recurring: true,
- baseRecurringEvent: {
- _id: 'recurringEvent123',
- },
- organization: {
- _id: 'org456',
- members: [
- { _id: 'member1', firstName: 'John', lastName: 'Doe' },
- { _id: 'member2', firstName: 'Jane', lastName: 'Smith' },
- ],
- },
- attendees: [{ _id: 'user1' }, { _id: 'user2' }],
- },
- },
- },
- },
-];
-
-describe('CustomTableCell', () => {
- it('renders event details correctly', async () => {
- render(
-
-
-
-
- ,
- );
-
- await waitFor(() => screen.getByTestId('custom-row'));
-
- expect(screen.getByText('Test Event')).toBeInTheDocument();
- expect(screen.getByText('May 1, 2023')).toBeInTheDocument();
- expect(screen.getByText('Yes')).toBeInTheDocument();
- expect(screen.getByText('2')).toBeInTheDocument();
-
- const link = screen.getByRole('link', { name: 'Test Event' });
- expect(link).toHaveAttribute('href', '/event/org456/event123');
- });
-
- it('displays loading state', () => {
- render(
-
-
- ,
- );
-
- expect(screen.getByRole('progressbar')).toBeInTheDocument();
- });
-
- // it('displays error state', async () => {
- // const errorMock = [
- // {
- // request: {
- // query: EVENT_DETAILS,
- // variables: { id: 'event123' },
- // },
- // error: new Error('An error occurred'),
- // },
- // ];
-
- // render(
- //
- //
- // ,
- // );
-
- // await waitFor(
- // () => {
- // expect(
- // screen.getByText('Error loading event details'),
- // ).toBeInTheDocument();
- // },
- // { timeout: 2000 },
- // );
-
- // // Check if the error message from toast has been called
- // expect(toast.error).toHaveBeenCalledWith('An error occurred');
- // });
-
- // it('displays no event found message', async () => {
- // const noEventMock = [
- // {
- // request: {
- // query: EVENT_DETAILS,
- // variables: { id: 'event123' },
- // },
- // result: {
- // data: {
- // event: {
- // _id: null,
- // title: null,
- // startDate: null,
- // description: null,
- // endDate: null,
- // startTime: null,
- // endTime: null,
- // allDay: false,
- // location: null,
- // recurring: null,
- // organization: {
- // _id: null,
- // members: [],
- // },
- // baseRecurringEvent: {
- // _id: 'recurringEvent123',
- // },
- // attendees: [],
- // },
- // },
- // },
- // },
- // ];
-
- // render(
- //
- //
- // ,
- // );
-
- // await waitFor(() => screen.getByText('No event found'));
- // expect(screen.getByText('No event found')).toBeInTheDocument();
- // });
-});
diff --git a/src/components/OrganizationScreen/OrganizationScreen.test.tsx b/src/components/OrganizationScreen/OrganizationScreen.spec.tsx
similarity index 95%
rename from src/components/OrganizationScreen/OrganizationScreen.test.tsx
rename to src/components/OrganizationScreen/OrganizationScreen.spec.tsx
index d1c4c81c27..e6a75c46d8 100644
--- a/src/components/OrganizationScreen/OrganizationScreen.test.tsx
+++ b/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' } }),
}));
diff --git a/src/screens/OrganizationVenues/OrganizationVenues.test.tsx b/src/screens/OrganizationVenues/OrganizationVenues.spec.tsx
similarity index 92%
rename from src/screens/OrganizationVenues/OrganizationVenues.test.tsx
rename to src/screens/OrganizationVenues/OrganizationVenues.spec.tsx
index 5b8b9933a1..e306c56cfc 100644
--- a/src/screens/OrganizationVenues/OrganizationVenues.test.tsx
+++ b/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 {
});
}
-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', () => {
,
);
-
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 () => {