From 02eb9d4fa59009ba81d93d5b137ba2d0f95eae23 Mon Sep 17 00:00:00 2001 From: im-vedant <194vedantgutpa@gmail.com> Date: Thu, 12 Dec 2024 21:58:02 +0530 Subject: [PATCH 01/11] Refactored some code --- .husky/post-merge | 1 - src/screens/SubTags/SubTags.test.tsx | 13 +++++++------ 2 files changed, 7 insertions(+), 7 deletions(-) diff --git a/.husky/post-merge b/.husky/post-merge index c7f42c373b..b70b729be7 100755 --- a/.husky/post-merge +++ b/.husky/post-merge @@ -1,4 +1,3 @@ #!/bin/sh -. "$(dirname "$0")/_/husky.sh" git diff HEAD^ HEAD --exit-code -- ./package.json || npm install \ No newline at end of file diff --git a/src/screens/SubTags/SubTags.test.tsx b/src/screens/SubTags/SubTags.test.tsx index 145d31109d..db153b27c7 100644 --- a/src/screens/SubTags/SubTags.test.tsx +++ b/src/screens/SubTags/SubTags.test.tsx @@ -10,6 +10,7 @@ import { waitFor, waitForElementToBeRemoved, } from '@testing-library/react'; +import { vi } from 'vitest'; import userEvent from '@testing-library/user-event'; import 'jest-location-mock'; import { I18nextProvider } from 'react-i18next'; @@ -44,10 +45,10 @@ async function wait(ms = 500): Promise { }); } -jest.mock('react-toastify', () => ({ +vi.mock('react-toastify', () => ({ toast: { - success: jest.fn(), - error: jest.fn(), + success: vi.fn(), + error: vi.fn(), }, })); @@ -107,15 +108,15 @@ const renderSubTags = (link: ApolloLink): RenderResult => { describe('Organisation Tags Page', () => { beforeEach(() => { - jest.mock('react-router-dom', () => ({ - ...jest.requireActual('react-router-dom'), + vi.mock('react-router-dom', async () => ({ + ...(await vi.importActual('react-router-dom')), useParams: () => ({ orgId: 'orgId' }), })); cache.reset(); }); afterEach(() => { - jest.clearAllMocks(); + vi.clearAllMocks(); cleanup(); }); From b4fa1ef1588b6028477f8bfb790ad67aa8dbc52e Mon Sep 17 00:00:00 2001 From: im-vedant <194vedantgutpa@gmail.com> Date: Sun, 15 Dec 2024 02:52:43 +0530 Subject: [PATCH 02/11] Migrate src/screens/OrganizationVenues from jest to vitest --- ...s.test.tsx => OrganizationVenues.spec.tsx} | 25 +++++++++---------- 1 file changed, 12 insertions(+), 13 deletions(-) rename src/screens/OrganizationVenues/{OrganizationVenues.test.tsx => OrganizationVenues.spec.tsx} (97%) diff --git a/src/screens/OrganizationVenues/OrganizationVenues.test.tsx b/src/screens/OrganizationVenues/OrganizationVenues.spec.tsx similarity index 97% rename from src/screens/OrganizationVenues/OrganizationVenues.test.tsx rename to src/screens/OrganizationVenues/OrganizationVenues.spec.tsx index 5b8b9933a1..a9a1301eb5 100644 --- a/src/screens/OrganizationVenues/OrganizationVenues.test.tsx +++ b/src/screens/OrganizationVenues/OrganizationVenues.spec.tsx @@ -10,7 +10,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 +18,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 +238,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 +271,14 @@ const renderOrganizationVenue = (link: ApolloLink): RenderResult => { describe('OrganizationVenue with missing orgId', () => { beforeAll(() => { - jest.mock('react-router-dom', () => ({ - ...jest.requireActual('react-router-dom'), + vi.mock('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( @@ -308,17 +307,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.mock('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 () => { From 4acf452dc516a40e3b74ebe33f979f532249abac Mon Sep 17 00:00:00 2001 From: im-vedant <194vedantgutpa@gmail.com> Date: Sun, 15 Dec 2024 03:02:15 +0530 Subject: [PATCH 03/11] Revert "Refactored some code" This reverts commit 02eb9d4fa59009ba81d93d5b137ba2d0f95eae23. --- .husky/post-merge | 1 + src/screens/SubTags/SubTags.test.tsx | 13 ++++++------- 2 files changed, 7 insertions(+), 7 deletions(-) diff --git a/.husky/post-merge b/.husky/post-merge index b70b729be7..c7f42c373b 100755 --- a/.husky/post-merge +++ b/.husky/post-merge @@ -1,3 +1,4 @@ #!/bin/sh +. "$(dirname "$0")/_/husky.sh" git diff HEAD^ HEAD --exit-code -- ./package.json || npm install \ No newline at end of file diff --git a/src/screens/SubTags/SubTags.test.tsx b/src/screens/SubTags/SubTags.test.tsx index db153b27c7..145d31109d 100644 --- a/src/screens/SubTags/SubTags.test.tsx +++ b/src/screens/SubTags/SubTags.test.tsx @@ -10,7 +10,6 @@ import { waitFor, waitForElementToBeRemoved, } from '@testing-library/react'; -import { vi } from 'vitest'; import userEvent from '@testing-library/user-event'; import 'jest-location-mock'; import { I18nextProvider } from 'react-i18next'; @@ -45,10 +44,10 @@ async function wait(ms = 500): Promise { }); } -vi.mock('react-toastify', () => ({ +jest.mock('react-toastify', () => ({ toast: { - success: vi.fn(), - error: vi.fn(), + success: jest.fn(), + error: jest.fn(), }, })); @@ -108,15 +107,15 @@ const renderSubTags = (link: ApolloLink): RenderResult => { describe('Organisation Tags Page', () => { beforeEach(() => { - vi.mock('react-router-dom', async () => ({ - ...(await vi.importActual('react-router-dom')), + jest.mock('react-router-dom', () => ({ + ...jest.requireActual('react-router-dom'), useParams: () => ({ orgId: 'orgId' }), })); cache.reset(); }); afterEach(() => { - vi.clearAllMocks(); + jest.clearAllMocks(); cleanup(); }); From 60002f1152b98d374982e884346339c5c5faf8b9 Mon Sep 17 00:00:00 2001 From: im-vedant <194vedantgutpa@gmail.com> Date: Sun, 15 Dec 2024 04:15:35 +0530 Subject: [PATCH 04/11] replaced vi.mock with vi.doMock --- src/screens/OrganizationVenues/OrganizationVenues.spec.tsx | 5 ++--- 1 file changed, 2 insertions(+), 3 deletions(-) diff --git a/src/screens/OrganizationVenues/OrganizationVenues.spec.tsx b/src/screens/OrganizationVenues/OrganizationVenues.spec.tsx index a9a1301eb5..1528a0928e 100644 --- a/src/screens/OrganizationVenues/OrganizationVenues.spec.tsx +++ b/src/screens/OrganizationVenues/OrganizationVenues.spec.tsx @@ -271,7 +271,7 @@ const renderOrganizationVenue = (link: ApolloLink): RenderResult => { describe('OrganizationVenue with missing orgId', () => { beforeAll(() => { - vi.mock('react-router-dom', async () => ({ + vi.doMock('react-router-dom', async () => ({ ...(await vi.importActual('react-router-dom')), useParams: () => ({ orgId: undefined }), })); @@ -298,7 +298,6 @@ describe('OrganizationVenue with missing orgId', () => { , ); - await waitFor(() => { const paramsError = screen.getByTestId('paramsError'); expect(paramsError).toBeInTheDocument(); @@ -310,7 +309,7 @@ describe('Organisation Venues', () => { global.alert = vi.fn(); beforeAll(() => { - vi.mock('react-router-dom', async () => ({ + vi.doMock('react-router-dom', async () => ({ ...(await vi.importActual('react-router-dom')), useParams: () => ({ orgId: 'orgId' }), })); From 9c87ad33efdf4201ac5d24a3346f1566907b167c Mon Sep 17 00:00:00 2001 From: im-vedant <194vedantgutpa@gmail.com> Date: Sun, 15 Dec 2024 04:27:48 +0530 Subject: [PATCH 05/11] Add comments --- .../OrganizationVenues/OrganizationVenues.spec.tsx | 12 ++++++++++++ 1 file changed, 12 insertions(+) diff --git a/src/screens/OrganizationVenues/OrganizationVenues.spec.tsx b/src/screens/OrganizationVenues/OrganizationVenues.spec.tsx index 1528a0928e..e306c56cfc 100644 --- a/src/screens/OrganizationVenues/OrganizationVenues.spec.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'; From 99caf1498bf4cfb7b83378b29d9d4eac27db8416 Mon Sep 17 00:00:00 2001 From: im-vedant <194vedantgutpa@gmail.com> Date: Mon, 16 Dec 2024 06:01:18 +0530 Subject: [PATCH 06/11] Suppressed Css error --- .../MemberDetail/customTableCell.test.tsx | 2 +- .../OrganizationScreen/OrganizationScreen.test.tsx | 10 ++++++---- src/setupTests.ts | 13 +++++++++++-- 3 files changed, 18 insertions(+), 7 deletions(-) diff --git a/src/components/MemberDetail/customTableCell.test.tsx b/src/components/MemberDetail/customTableCell.test.tsx index bc296a74f3..a013b0f314 100644 --- a/src/components/MemberDetail/customTableCell.test.tsx +++ b/src/components/MemberDetail/customTableCell.test.tsx @@ -65,7 +65,7 @@ describe('CustomTableCell', () => { await waitFor(() => screen.getByTestId('custom-row')); expect(screen.getByText('Test Event')).toBeInTheDocument(); - expect(screen.getByText('May 1, 2023')).toBeInTheDocument(); + expect(screen.getByText('1 May 2023')).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.test.tsx index cd039cc3ca..a1fefd64da 100644 --- a/src/components/OrganizationScreen/OrganizationScreen.test.tsx +++ b/src/components/OrganizationScreen/OrganizationScreen.test.tsx @@ -81,15 +81,17 @@ describe('Testing OrganizationScreen', () => { fireEvent.click(closeButton); // Check for contract class after closing - expect(screen.getByTestId('mainpageright')).toHaveClass('_expand_ccl5z_8'); + expect( + screen.getByTestId('mainpageright').className.includes('expand'), + ).toBeTruthy(); 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').className.includes('contract'), + ).toBeTruthy(); }); test('handles window resize', () => { diff --git a/src/setupTests.ts b/src/setupTests.ts index eac7093309..85f6f6c403 100644 --- a/src/setupTests.ts +++ b/src/setupTests.ts @@ -8,8 +8,17 @@ global.fetch = jest.fn(); import { format } from 'util'; -global.console.error = function (...args): void { - throw new Error(format(...args)); +const jsDomCssError = 'Error: Could not parse CSS stylesheet'; + +// Override console.error to suppress the CSS parsing error +global.console.error = (...params) => { + // If the error message is related to CSS parsing, suppress it + if (params.find((p) => p.toString().includes(jsDomCssError))) { + return; // Do nothing for this error + } + + // Otherwise, throw an error or log the message + throw new Error(format(...params)); // You can choose to throw or log here }; global.console.warn = function (...args): void { From 0edc76ebf5360d505386226610b8d557c18ed769 Mon Sep 17 00:00:00 2001 From: im-vedant <194vedantgutpa@gmail.com> Date: Mon, 16 Dec 2024 06:16:24 +0530 Subject: [PATCH 07/11] Fix customTableCell issue --- src/components/MemberDetail/customTableCell.test.tsx | 11 ++++++++++- 1 file changed, 10 insertions(+), 1 deletion(-) diff --git a/src/components/MemberDetail/customTableCell.test.tsx b/src/components/MemberDetail/customTableCell.test.tsx index a013b0f314..24b78451d0 100644 --- a/src/components/MemberDetail/customTableCell.test.tsx +++ b/src/components/MemberDetail/customTableCell.test.tsx @@ -65,7 +65,16 @@ describe('CustomTableCell', () => { await waitFor(() => screen.getByTestId('custom-row')); expect(screen.getByText('Test Event')).toBeInTheDocument(); - expect(screen.getByText('1 May 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(); From b9f08304d1614ac23d38811c92ba5f9a263cfb36 Mon Sep 17 00:00:00 2001 From: im-vedant <194vedantgutpa@gmail.com> Date: Mon, 16 Dec 2024 18:11:58 +0530 Subject: [PATCH 08/11] add data-testid attributes for toggle state for improved testability --- .../OrganizationScreen/OrganizationScreen.test.tsx | 14 ++++++++------ .../OrganizationScreen/OrganizationScreen.tsx | 1 + 2 files changed, 9 insertions(+), 6 deletions(-) diff --git a/src/components/OrganizationScreen/OrganizationScreen.test.tsx b/src/components/OrganizationScreen/OrganizationScreen.test.tsx index a1fefd64da..46f350be01 100644 --- a/src/components/OrganizationScreen/OrganizationScreen.test.tsx +++ b/src/components/OrganizationScreen/OrganizationScreen.test.tsx @@ -81,17 +81,19 @@ describe('Testing OrganizationScreen', () => { fireEvent.click(closeButton); // Check for contract class after closing - expect( - screen.getByTestId('mainpageright').className.includes('expand'), - ).toBeTruthy(); + 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').className.includes('contract'), - ).toBeTruthy(); + expect(screen.getByTestId('mainpageright')).toHaveAttribute( + 'data-expanded', + 'false', + ); }); test('handles window resize', () => { 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'} >
From 18cc26b7d880860882c58f21ce728fc84ab9050c Mon Sep 17 00:00:00 2001 From: im-vedant <194vedantgutpa@gmail.com> Date: Tue, 17 Dec 2024 00:29:58 +0530 Subject: [PATCH 09/11] feat: updated jest config and package-lock.json to include identity-obj-proxy to mock Css modules --- jest.config.js | 1 + package-lock.json | 1 + src/setupTests.ts | 13 ++----------- 3 files changed, 4 insertions(+), 11 deletions(-) diff --git a/jest.config.js b/jest.config.js index 3083bcda4f..a1d8d125f8 100644 --- a/jest.config.js +++ b/jest.config.js @@ -35,6 +35,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/setupTests.ts b/src/setupTests.ts index 85f6f6c403..eac7093309 100644 --- a/src/setupTests.ts +++ b/src/setupTests.ts @@ -8,17 +8,8 @@ global.fetch = jest.fn(); import { format } from 'util'; -const jsDomCssError = 'Error: Could not parse CSS stylesheet'; - -// Override console.error to suppress the CSS parsing error -global.console.error = (...params) => { - // If the error message is related to CSS parsing, suppress it - if (params.find((p) => p.toString().includes(jsDomCssError))) { - return; // Do nothing for this error - } - - // Otherwise, throw an error or log the message - throw new Error(format(...params)); // You can choose to throw or log here +global.console.error = function (...args): void { + throw new Error(format(...args)); }; global.console.warn = function (...args): void { From 8aea843cde6643793ae86ac41b0b2221030a5712 Mon Sep 17 00:00:00 2001 From: im-vedant <194vedantgutpa@gmail.com> Date: Tue, 17 Dec 2024 00:40:42 +0530 Subject: [PATCH 10/11] Fix linting errors --- jest.config.js | 5 +++-- 1 file changed, 3 insertions(+), 2 deletions(-) diff --git a/jest.config.js b/jest.config.js index a1d8d125f8..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,7 +36,7 @@ export default { '/src', ], moduleNameMapper: { - '\\.(css|less)$': 'identity-obj-proxy', + '\\.(css|less)$': 'identity-obj-proxy', '^react-native$': 'react-native-web', '^@dicebear/core$': '/scripts/__mocks__/@dicebear/core.ts', '^@dicebear/collection$': From 650f431837a1d3a03972e2f749c6061940e39d38 Mon Sep 17 00:00:00 2001 From: im-vedant <194vedantgutpa@gmail.com> Date: Wed, 18 Dec 2024 00:28:46 +0530 Subject: [PATCH 11/11] refactor : src\components\MemberDetail\customTableCell.test.tsx and src\components\OrganizationScreen\OrganizationScreen.test.tsx from jest to vitest --- ...{customTableCell.test.tsx => customTableCell.spec.tsx} | 8 ++++---- ...izationScreen.test.tsx => OrganizationScreen.spec.tsx} | 7 +++---- 2 files changed, 7 insertions(+), 8 deletions(-) rename src/components/MemberDetail/{customTableCell.test.tsx => customTableCell.spec.tsx} (97%) rename src/components/OrganizationScreen/{OrganizationScreen.test.tsx => OrganizationScreen.spec.tsx} (95%) diff --git a/src/components/MemberDetail/customTableCell.test.tsx b/src/components/MemberDetail/customTableCell.spec.tsx similarity index 97% rename from src/components/MemberDetail/customTableCell.test.tsx rename to src/components/MemberDetail/customTableCell.spec.tsx index 24b78451d0..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(), }, })); 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 46f350be01..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' } }), }));