diff --git a/jest.config.js b/jest.config.js index 3083bcda4f..89dbc7120e 100644 --- a/jest.config.js +++ b/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: ['/src/setupTests.ts'], @@ -35,6 +36,7 @@ export default { '/src', ], moduleNameMapper: { + '\\.(css|less)$': 'identity-obj-proxy', '^react-native$': 'react-native-web', '^@dicebear/core$': '/scripts/__mocks__/@dicebear/core.ts', '^@dicebear/collection$': diff --git a/package-lock.json b/package-lock.json index 2404c03835..f07c9e0e22 100644 --- a/package-lock.json +++ b/package-lock.json @@ -11375,6 +11375,7 @@ "resolved": "https://registry.npmjs.org/identity-obj-proxy/-/identity-obj-proxy-3.0.0.tgz", "integrity": "sha512-00n6YnVHKrinT9t0d9+5yZC6UBNJANpYEQvL2LlX6Ab9lnmxzIRcEmTPuyGScvl1+jKuCICX1Z0Ab1pPKKdikA==", "dev": true, + "license": "MIT", "dependencies": { "harmony-reflect": "^1.4.6" }, diff --git a/src/components/MemberDetail/customTableCell.test.tsx b/src/components/MemberDetail/customTableCell.spec.tsx similarity index 92% rename from src/components/MemberDetail/customTableCell.test.tsx rename to src/components/MemberDetail/customTableCell.spec.tsx index bc296a74f3..c595c46d5e 100644 --- a/src/components/MemberDetail/customTableCell.test.tsx +++ b/src/components/MemberDetail/customTableCell.spec.tsx @@ -4,11 +4,11 @@ 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', () => ({ +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 @@ describe('CustomTableCell', () => { 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(); diff --git a/src/components/OrganizationScreen/OrganizationScreen.test.tsx b/src/components/OrganizationScreen/OrganizationScreen.spec.tsx similarity index 89% rename from src/components/OrganizationScreen/OrganizationScreen.test.tsx rename to src/components/OrganizationScreen/OrganizationScreen.spec.tsx index cd039cc3ca..733ef5a4b3 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' } }), })); @@ -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', ); }); diff --git a/src/components/OrganizationScreen/OrganizationScreen.tsx b/src/components/OrganizationScreen/OrganizationScreen.tsx index 85fb6ee181..f4c96c90a4 100644 --- a/src/components/OrganizationScreen/OrganizationScreen.tsx +++ b/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'} >
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 () => {