From b8de00bf38aa7d39094ed53d356019197fed2771 Mon Sep 17 00:00:00 2001 From: abhishek Date: Thu, 26 Dec 2024 13:02:32 +0530 Subject: [PATCH 1/9] categoryModal tests migrated from jest to vitest --- ...yModal.test.tsx => CategoryModal.spec.tsx} | 28 +++++++++++++------ 1 file changed, 20 insertions(+), 8 deletions(-) rename src/components/OrgSettings/ActionItemCategories/{CategoryModal.test.tsx => CategoryModal.spec.tsx} (85%) diff --git a/src/components/OrgSettings/ActionItemCategories/CategoryModal.test.tsx b/src/components/OrgSettings/ActionItemCategories/CategoryModal.spec.tsx similarity index 85% rename from src/components/OrgSettings/ActionItemCategories/CategoryModal.test.tsx rename to src/components/OrgSettings/ActionItemCategories/CategoryModal.spec.tsx index 39d4884e8b..e4b5663788 100644 --- a/src/components/OrgSettings/ActionItemCategories/CategoryModal.test.tsx +++ b/src/components/OrgSettings/ActionItemCategories/CategoryModal.spec.tsx @@ -14,11 +14,23 @@ import { MOCKS, MOCKS_ERROR } from './OrgActionItemCategoryMocks'; import type { InterfaceActionItemCategoryModal } from './CategoryModal'; import CategoryModal from './CategoryModal'; import { toast } from 'react-toastify'; - -jest.mock('react-toastify', () => ({ +import { vi } from 'vitest'; +/** + * This file contains unit tests for the `CategoryModal` component. + * + * The tests cover: + * - Proper rendering of the component in various scenarios, including `create` and `edit` modes, mock data, and error states. + * - Handling user interactions with form fields, such as updating the category name and toggling the `isDisabled` switch. + * - Ensuring form submissions trigger appropriate callbacks (e.g., `refetchCategories` and `hide`) and display correct toast notifications. + * - Simulating GraphQL query and mutation operations with mocked data to validate behavior in success and error cases. + * - Testing edge cases, such as submitting without changes, invalid inputs, and handling API errors gracefully. + * - Verifying proper integration of internationalization, Redux state, routing, and toast notifications for success and error feedback. + */ + +vi.mock('react-toastify', () => ({ toast: { - success: jest.fn(), - error: jest.fn(), + success: vi.fn(), + error: vi.fn(), }, })); @@ -37,8 +49,8 @@ const translations = { const categoryProps: InterfaceActionItemCategoryModal[] = [ { isOpen: true, - hide: jest.fn(), - refetchCategories: jest.fn(), + hide: vi.fn(), + refetchCategories: vi.fn(), orgId: 'orgId', mode: 'create', category: { @@ -51,8 +63,8 @@ const categoryProps: InterfaceActionItemCategoryModal[] = [ }, { isOpen: true, - hide: jest.fn(), - refetchCategories: jest.fn(), + hide: vi.fn(), + refetchCategories: vi.fn(), orgId: 'orgId', mode: 'edit', category: { From c1153887efc89ab3ffe5d404b1bc61f7292f67ac Mon Sep 17 00:00:00 2001 From: abhishek Date: Thu, 26 Dec 2024 13:10:22 +0530 Subject: [PATCH 2/9] orgActionItemCategories tests migrated from jest to vitest --- ...t.tsx => OrgActionItemCategories.spec.tsx} | 33 ++++++++++++++----- vitest.config.ts | 6 +++- 2 files changed, 30 insertions(+), 9 deletions(-) rename src/components/OrgSettings/ActionItemCategories/{OrgActionItemCategories.test.tsx => OrgActionItemCategories.spec.tsx} (83%) diff --git a/src/components/OrgSettings/ActionItemCategories/OrgActionItemCategories.test.tsx b/src/components/OrgSettings/ActionItemCategories/OrgActionItemCategories.spec.tsx similarity index 83% rename from src/components/OrgSettings/ActionItemCategories/OrgActionItemCategories.test.tsx rename to src/components/OrgSettings/ActionItemCategories/OrgActionItemCategories.spec.tsx index 784d69325f..27eec94851 100644 --- a/src/components/OrgSettings/ActionItemCategories/OrgActionItemCategories.test.tsx +++ b/src/components/OrgSettings/ActionItemCategories/OrgActionItemCategories.spec.tsx @@ -12,19 +12,36 @@ import i18n from 'utils/i18nForTest'; import type { ApolloLink } from '@apollo/client'; import { MOCKS, MOCKS_EMPTY, MOCKS_ERROR } from './OrgActionItemCategoryMocks'; import OrgActionItemCategories from './OrgActionItemCategories'; - -jest.mock('react-toastify', () => ({ +import { vi } from 'vitest'; + +/** + * This file contains unit tests for the `OrgActionItemCategories` component. + * + * The tests cover: + * - Proper rendering of the component under different conditions, including scenarios with populated categories, empty categories, and API errors. + * - User interactions such as searching, filtering, sorting categories, and opening/closing modals for creating or editing categories. + * - Verification of GraphQL query and mutation behaviors using mock data, ensuring correct functionality in both success and error cases. + * - Handling edge cases like no input, invalid input, and form resets. + * - Integration tests for Redux state, routing, internationalization, and toast notifications. + * - Ensuring sorting functionality reflects the `createdAt` property both in ascending and descending order. + * - Testing the modal interactions for creating and editing categories, ensuring proper lifecycle (open/close) and state updates. + * - Checking the rendering of error messages and placeholders when no data is available or an error occurs. + * - Validation of search functionality for categories by name, including clearing the search input and using keyboard shortcuts like `Enter`. + */ + +vi.mock('react-toastify', () => ({ toast: { - success: jest.fn(), - error: jest.fn(), + success: vi.fn(), + error: vi.fn(), }, })); -jest.mock('@mui/x-date-pickers/DateTimePicker', () => { +vi.mock('@mui/x-date-pickers/DateTimePicker', async () => { + const dateTimePickerModule = await vi.importActual( + '@mui/x-date-pickers/DesktopDateTimePicker', + ); return { - DateTimePicker: jest.requireActual( - '@mui/x-date-pickers/DesktopDateTimePicker', - ).DesktopDateTimePicker, + DateTimePicker: dateTimePickerModule.DesktopDateTimePicker, }; }); diff --git a/vitest.config.ts b/vitest.config.ts index 3d071e7534..b34f84b304 100644 --- a/vitest.config.ts +++ b/vitest.config.ts @@ -14,7 +14,11 @@ export default defineConfig({ svgrPlugin(), ], test: { - include: ['src/**/*.spec.{js,jsx,ts,tsx}'], + // include: ['src/**/*.spec.{js,jsx,ts,tsx}'], + include: [ + // 'src/**/*.spec.{js,jsx,ts,tsx}', + 'src/components/OrgSettings/**/*.spec.{js,jsx,ts,tsx}', + ], globals: true, environment: 'jsdom', setupFiles: 'vitest.setup.ts', From 170d39f5b47bbe9256b00de8cc56ad1b2b7bf2a5 Mon Sep 17 00:00:00 2001 From: abhishek Date: Thu, 26 Dec 2024 13:15:42 +0530 Subject: [PATCH 3/9] agendaCategoryCreateModal tests migrated from jest to vitest --- ...tsx => AgendaCategoryCreateModal.spec.tsx} | 28 +++++++++++++------ 1 file changed, 19 insertions(+), 9 deletions(-) rename src/components/OrgSettings/AgendaItemCategories/{AgendaCategoryCreateModal.test.tsx => AgendaCategoryCreateModal.spec.tsx} (76%) diff --git a/src/components/OrgSettings/AgendaItemCategories/AgendaCategoryCreateModal.test.tsx b/src/components/OrgSettings/AgendaItemCategories/AgendaCategoryCreateModal.spec.tsx similarity index 76% rename from src/components/OrgSettings/AgendaItemCategories/AgendaCategoryCreateModal.test.tsx rename to src/components/OrgSettings/AgendaItemCategories/AgendaCategoryCreateModal.spec.tsx index da92dfd201..9b69a0e331 100644 --- a/src/components/OrgSettings/AgendaItemCategories/AgendaCategoryCreateModal.test.tsx +++ b/src/components/OrgSettings/AgendaItemCategories/AgendaCategoryCreateModal.spec.tsx @@ -1,30 +1,40 @@ import React from 'react'; import { render, screen, fireEvent } from '@testing-library/react'; -import userEvent from '@testing-library/user-event'; import { MockedProvider } from '@apollo/react-testing'; import { I18nextProvider } from 'react-i18next'; import { Provider } from 'react-redux'; import { BrowserRouter } from 'react-router-dom'; import { store } from 'state/store'; import i18nForTest from 'utils/i18nForTest'; - import { LocalizationProvider } from '@mui/x-date-pickers'; import { AdapterDayjs } from '@mui/x-date-pickers/AdapterDayjs'; - import AgendaCategoryCreateModal from './AgendaCategoryCreateModal'; +import { vi } from 'vitest'; +/** + * This file contains unit tests for the `AgendaCategoryCreateModal` component. + * + * The tests cover: + * - Rendering of the modal, ensuring all elements such as form fields, buttons, and labels are displayed correctly. + * - Behavior of form inputs, including updating the `formState` when the `name` and `description` fields are changed. + * - Proper invocation of the `createAgendaCategoryHandler` when the form is submitted. + * - Integration of Redux state, routing, localization (i18n), and date-picker utilities to ensure compatibility and proper rendering. + * - Validations for form controls to check user interactions, including typing and submitting the form. + * - Mock function verifications for `setFormState`, `hideCreateModal`, and other handlers to ensure state changes and actions are triggered appropriately. + * - Handling edge cases, such as empty fields or invalid data, ensuring graceful degradation of functionality. + */ const mockFormState = { name: 'Test Name', description: 'Test Description', createdBy: 'Test User', }; -const mockHideCreateModal = jest.fn(); -const mockSetFormState = jest.fn(); -const mockCreateAgendaCategoryHandler = jest.fn(); +const mockHideCreateModal = vi.fn(); +const mockSetFormState = vi.fn(); +const mockCreateAgendaCategoryHandler = vi.fn(); const mockT = (key: string): string => key; describe('AgendaCategoryCreateModal', () => { - test('renders modal correctly', () => { + it('renders modal correctly', () => { render( @@ -54,7 +64,7 @@ describe('AgendaCategoryCreateModal', () => { screen.getByTestId('createAgendaCategoryModalCloseBtn'), ).toBeInTheDocument(); }); - test('tests the condition for formState.name and formState.description', () => { + it('tests the condition for formState.name and formState.description', () => { const mockFormState = { name: 'Test Name', description: 'Test Description', @@ -97,7 +107,7 @@ describe('AgendaCategoryCreateModal', () => { description: 'New description', }); }); - test('calls createAgendaCategoryHandler when form is submitted', () => { + it('calls createAgendaCategoryHandler when form is submitted', () => { render( From d72b41a60d928c58616730575469e59b89bc75ad Mon Sep 17 00:00:00 2001 From: abhishek Date: Thu, 26 Dec 2024 13:18:13 +0530 Subject: [PATCH 4/9] agendaCategoryUpdateModal tests migrated from jest to vitest --- ...tsx => AgendaCategoryUpdateModal.spec.tsx} | 30 +++++++++++++------ 1 file changed, 21 insertions(+), 9 deletions(-) rename src/components/OrgSettings/AgendaItemCategories/{AgendaCategoryUpdateModal.test.tsx => AgendaCategoryUpdateModal.spec.tsx} (82%) diff --git a/src/components/OrgSettings/AgendaItemCategories/AgendaCategoryUpdateModal.test.tsx b/src/components/OrgSettings/AgendaItemCategories/AgendaCategoryUpdateModal.spec.tsx similarity index 82% rename from src/components/OrgSettings/AgendaItemCategories/AgendaCategoryUpdateModal.test.tsx rename to src/components/OrgSettings/AgendaItemCategories/AgendaCategoryUpdateModal.spec.tsx index 168b97abd3..8be982271c 100644 --- a/src/components/OrgSettings/AgendaItemCategories/AgendaCategoryUpdateModal.test.tsx +++ b/src/components/OrgSettings/AgendaItemCategories/AgendaCategoryUpdateModal.spec.tsx @@ -7,24 +7,36 @@ import { Provider } from 'react-redux'; import { BrowserRouter } from 'react-router-dom'; import { store } from 'state/store'; import i18nForTest from 'utils/i18nForTest'; - import { LocalizationProvider } from '@mui/x-date-pickers'; import { AdapterDayjs } from '@mui/x-date-pickers/AdapterDayjs'; - import AgendaCategoryUpdateModal from './AgendaCategoryUpdateModal'; +import { vi } from 'vitest'; + +/** + * Unit tests for `AgendaCategoryUpdateModal`: + * + * - **Rendering**: Verifies key elements (e.g., text, buttons) render correctly. + * - **Close Button**: Ensures `hideUpdateModal` is called on close. + * - **Form Inputs**: Confirms `setFormState` updates with new `name` and `description`. + * - **Submission**: Checks `updateAgendaCategoryHandler` triggers on submit. + * - **Integration**: Validates compatibility with Redux, routing, i18n, and MUI date-picker. + * - **Mocks**: Ensures handlers (`setFormState`, `hideUpdateModal`, `updateAgendaCategoryHandler`) are called with correct arguments. + * + * This suite ensures component reliability and behavior consistency. + */ const mockFormState = { name: 'Test Name', description: 'Test Description', createdBy: 'Test User', }; -const mockHideUpdateModal = jest.fn(); -const mockSetFormState = jest.fn(); -const mockUpdateAgendaCategoryHandler = jest.fn(); +const mockHideUpdateModal = vi.fn(); +const mockSetFormState = vi.fn(); +const mockUpdateAgendaCategoryHandler = vi.fn(); const mockT = (key: string): string => key; describe('AgendaCategoryUpdateModal', () => { - test('renders modal correctly', () => { + it('renders modal correctly', () => { render( @@ -53,7 +65,7 @@ describe('AgendaCategoryUpdateModal', () => { ).toBeInTheDocument(); }); - test('calls hideUpdateModal when close button is clicked', () => { + it('calls hideUpdateModal when close button is clicked', () => { render( @@ -79,7 +91,7 @@ describe('AgendaCategoryUpdateModal', () => { expect(mockHideUpdateModal).toHaveBeenCalledTimes(1); }); - test('tests the condition for formState.name and formState.description', () => { + it('tests the condition for formState.name and formState.description', () => { const mockFormState = { name: 'Test Name', description: 'Test Description', @@ -123,7 +135,7 @@ describe('AgendaCategoryUpdateModal', () => { }); }); - test('calls updateAgendaCategoryHandler when form is submitted', () => { + it('calls updateAgendaCategoryHandler when form is submitted', () => { render( From 143fc1d0fd5e48a9540606b2d256000f6f222f9f Mon Sep 17 00:00:00 2001 From: abhishek Date: Thu, 26 Dec 2024 13:28:06 +0530 Subject: [PATCH 5/9] organizationAgendaCategory tests migrated from jest to vitest --- ...sx => OrganizationAgendaCategory.spec.tsx} | 51 +++++++++++-------- 1 file changed, 31 insertions(+), 20 deletions(-) rename src/components/OrgSettings/AgendaItemCategories/{OrganizationAgendaCategory.test.tsx => OrganizationAgendaCategory.spec.tsx} (82%) diff --git a/src/components/OrgSettings/AgendaItemCategories/OrganizationAgendaCategory.test.tsx b/src/components/OrgSettings/AgendaItemCategories/OrganizationAgendaCategory.spec.tsx similarity index 82% rename from src/components/OrgSettings/AgendaItemCategories/OrganizationAgendaCategory.test.tsx rename to src/components/OrgSettings/AgendaItemCategories/OrganizationAgendaCategory.spec.tsx index 56cb450647..a2bd6d0130 100644 --- a/src/components/OrgSettings/AgendaItemCategories/OrganizationAgendaCategory.test.tsx +++ b/src/components/OrgSettings/AgendaItemCategories/OrganizationAgendaCategory.spec.tsx @@ -7,9 +7,7 @@ import { waitForElementToBeRemoved, } from '@testing-library/react'; import userEvent from '@testing-library/user-event'; -import 'jest-localstorage-mock'; import { MockedProvider } from '@apollo/client/testing'; -import 'jest-location-mock'; import { I18nextProvider } from 'react-i18next'; import { Provider } from 'react-redux'; import { BrowserRouter } from 'react-router-dom'; @@ -22,23 +20,38 @@ import { store } from 'state/store'; import { StaticMockLink } from 'utils/StaticMockLink'; import OrganizationAgendaCategory from './OrganizationAgendaCategory'; -import { - MOCKS_ERROR_AGENDA_ITEM_CATEGORY_LIST_QUERY, - MOCKS_ERROR_MUTATION, -} from './OrganizationAgendaCategoryErrorMocks'; +import { MOCKS_ERROR_AGENDA_ITEM_CATEGORY_LIST_QUERY } from './OrganizationAgendaCategoryErrorMocks'; import { MOCKS } from './OrganizationAgendaCategoryMocks'; - -jest.mock('react-toastify', () => ({ +import { vi } from 'vitest'; + +/** + * Unit Tests for `OrganizationAgendaCategory` Component + * + * - **Load Component**: Verifies successful rendering of key elements like `createAgendaCategory`. + * - **Error Handling**: Confirms error view appears when agenda category list query fails. + * - **Modal Functionality**: + * - Opens and closes the create agenda category modal. + * - Ensures `createAgendaCategoryModalCloseBtn` disappears on close. + * - **Create Agenda Category**: + * - Simulates filling the form and submission. + * - Verifies success toast on successful creation (`agendaCategoryCreated`). + * - **Integration**: Validates compatibility with Redux, Apollo, i18n, and MUI date-picker. + */ + +vi.mock('react-toastify', () => ({ toast: { - success: jest.fn(), - error: jest.fn(), + success: vi.fn(), + error: vi.fn(), }, })); -jest.mock('react-router-dom', () => ({ - ...jest.requireActual('react-router-dom'), - useParams: () => ({ orgId: '123' }), -})); +vi.mock('react-router-dom', async () => { + const actual = await vi.importActual('react-router-dom'); + return { + ...actual, + useParams: () => ({ orgId: '123' }), + }; +}); async function wait(ms = 100): Promise { await act(() => { @@ -53,8 +66,6 @@ const link2 = new StaticMockLink( MOCKS_ERROR_AGENDA_ITEM_CATEGORY_LIST_QUERY, true, ); -const link3 = new StaticMockLink(MOCKS_ERROR_MUTATION, true); - const translations = { ...JSON.parse( JSON.stringify( @@ -70,7 +81,7 @@ describe('Testing Agenda Categories Component', () => { description: 'Test Description', createdBy: 'Test User', }; - test('Component loads correctly', async () => { + it('Component loads correctly', async () => { const { getByText } = render( @@ -90,7 +101,7 @@ describe('Testing Agenda Categories Component', () => { }); }); - test('render error component on unsuccessful agenda category list query', async () => { + it('render error component on unsuccessful agenda category list query', async () => { const { queryByText } = render( @@ -112,7 +123,7 @@ describe('Testing Agenda Categories Component', () => { }); }); - test('opens and closes the create agenda category modal', async () => { + it('opens and closes the create agenda category modal', async () => { render( @@ -145,7 +156,7 @@ describe('Testing Agenda Categories Component', () => { screen.queryByTestId('createAgendaCategoryModalCloseBtn'), ); }); - test('creates new agenda cagtegory', async () => { + it('creates new agenda cagtegory', async () => { render( From 3224e1cfeb17c954f74d8c4896c0191ce3030229 Mon Sep 17 00:00:00 2001 From: abhishek Date: Thu, 26 Dec 2024 13:32:44 +0530 Subject: [PATCH 6/9] DeleteOrg tests migarated from jest to vitest --- ...{DeleteOrg.test.tsx => DeleteOrg.spec.tsx} | 51 +++++++++++++------ 1 file changed, 35 insertions(+), 16 deletions(-) rename src/components/OrgSettings/General/DeleteOrg/{DeleteOrg.test.tsx => DeleteOrg.spec.tsx} (80%) diff --git a/src/components/OrgSettings/General/DeleteOrg/DeleteOrg.test.tsx b/src/components/OrgSettings/General/DeleteOrg/DeleteOrg.spec.tsx similarity index 80% rename from src/components/OrgSettings/General/DeleteOrg/DeleteOrg.test.tsx rename to src/components/OrgSettings/General/DeleteOrg/DeleteOrg.spec.tsx index 77ffe65c08..e911d195dc 100644 --- a/src/components/OrgSettings/General/DeleteOrg/DeleteOrg.test.tsx +++ b/src/components/OrgSettings/General/DeleteOrg/DeleteOrg.spec.tsx @@ -1,11 +1,9 @@ import React, { act } from 'react'; import { MockedProvider } from '@apollo/react-testing'; import { render, screen, waitFor } from '@testing-library/react'; -import 'jest-location-mock'; import { I18nextProvider } from 'react-i18next'; import { Provider } from 'react-redux'; import { BrowserRouter } from 'react-router-dom'; - import { DELETE_ORGANIZATION_MUTATION, REMOVE_SAMPLE_ORGANIZATION_MUTATION, @@ -17,6 +15,24 @@ import DeleteOrg from './DeleteOrg'; import { ToastContainer, toast } from 'react-toastify'; import { IS_SAMPLE_ORGANIZATION_QUERY } from 'GraphQl/Queries/Queries'; import useLocalStorage from 'utils/useLocalstorage'; +import { vi } from 'vitest'; + +/** + * Unit Tests for `DeleteOrg` Component + * + * - **Toggle Modal**: Verifies the ability to open and close the delete organization modal for both sample and non-sample organizations. + * - **Delete Organization**: + * - Simulates deleting a non-sample organization and ensures the correct GraphQL mutation is triggered. + * - Confirms navigation occurs after a sample organization is deleted. + * - **Error Handling**: + * - Handles errors from `DELETE_ORGANIZATION_MUTATION` and `IS_SAMPLE_ORGANIZATION_QUERY`. + * - Verifies `toast.error` is called with appropriate error messages when mutations fail. + * - **Mocks**: + * - Mocks GraphQL queries and mutations using `StaticMockLink` for different success and error scenarios. + * - Uses `useParams` to simulate URL parameters (`orgId`). + * - Mocks `useNavigate` to check navigation after successful deletion. + * - **Toast Notifications**: Ensures `toast.success` or `toast.error` is triggered based on success or failure of actions. + */ const { setItem } = useLocalStorage(); @@ -98,13 +114,16 @@ const MOCKS_WITH_ERROR = [ }, ]; -const mockNavgatePush = jest.fn(); +const mockNavgatePush = vi.fn(); let mockURL = '123'; -jest.mock('react-router-dom', () => ({ - ...jest.requireActual('react-router-dom'), - useParams: () => ({ orgId: mockURL }), - useNavigate: () => mockNavgatePush, -})); +vi.mock('react-router-dom', async () => { + const actual = await vi.importActual('react-router-dom'); + return { + ...actual, + useParams: () => ({ orgId: mockURL }), + useNavigate: () => mockNavgatePush, + }; +}); const link = new StaticMockLink(MOCKS, true); const link2 = new StaticMockLink(MOCKS_WITH_ERROR, true); @@ -114,7 +133,7 @@ afterEach(() => { }); describe('Delete Organization Component', () => { - test('should be able to Toggle Delete Organization Modal', async () => { + it('should be able to Toggle Delete Organization Modal', async () => { mockURL = '456'; setItem('SuperAdmin', true); await act(async () => { @@ -143,7 +162,7 @@ describe('Delete Organization Component', () => { }); }); - test('should be able to Toggle Delete Organization Modal When Organization is Sample Organization', async () => { + it('should be able to Toggle Delete Organization Modal When Organization is Sample Organization', async () => { mockURL = '123'; setItem('SuperAdmin', true); await act(async () => { @@ -173,7 +192,7 @@ describe('Delete Organization Component', () => { }); }); - test('Delete organization functionality should work properly', async () => { + it('Delete organization functionality should work properly', async () => { mockURL = '456'; setItem('SuperAdmin', true); await act(async () => { @@ -201,7 +220,7 @@ describe('Delete Organization Component', () => { }); }); - test('Delete organization functionality should work properly for sample org', async () => { + it('Delete organization functionality should work properly for sample org', async () => { mockURL = '123'; setItem('SuperAdmin', true); await act(async () => { @@ -234,10 +253,10 @@ describe('Delete Organization Component', () => { expect(mockNavgatePush).toHaveBeenCalledWith('/orglist'); }); - test('Error handling for IS_SAMPLE_ORGANIZATION_QUERY mock', async () => { + it('Error handling for IS_SAMPLE_ORGANIZATION_QUERY mock', async () => { mockURL = '123'; setItem('SuperAdmin', true); - jest.spyOn(toast, 'error'); + vi.spyOn(toast, 'error'); await act(async () => { render( @@ -270,10 +289,10 @@ describe('Delete Organization Component', () => { }); }); - test('Error handling for DELETE_ORGANIZATION_MUTATION mock', async () => { + it('Error handling for DELETE_ORGANIZATION_MUTATION mock', async () => { mockURL = '456'; setItem('SuperAdmin', true); - jest.spyOn(toast, 'error'); + vi.spyOn(toast, 'error'); await act(async () => { render( From e8eeb6f93ed0568a44d1bb7246069482688a22c2 Mon Sep 17 00:00:00 2001 From: abhishek Date: Thu, 26 Dec 2024 13:36:39 +0530 Subject: [PATCH 7/9] OrgProfileFieldSettings tests migrated from jest to vitest --- ...t.tsx => OrgProfileFieldSettings.spec.tsx} | 28 +++++++++++++------ 1 file changed, 20 insertions(+), 8 deletions(-) rename src/components/OrgSettings/General/OrgProfileFieldSettings/{OrgProfileFieldSettings.test.tsx => OrgProfileFieldSettings.spec.tsx} (86%) diff --git a/src/components/OrgSettings/General/OrgProfileFieldSettings/OrgProfileFieldSettings.test.tsx b/src/components/OrgSettings/General/OrgProfileFieldSettings/OrgProfileFieldSettings.spec.tsx similarity index 86% rename from src/components/OrgSettings/General/OrgProfileFieldSettings/OrgProfileFieldSettings.test.tsx rename to src/components/OrgSettings/General/OrgProfileFieldSettings/OrgProfileFieldSettings.spec.tsx index 8db8773381..45bdfbc122 100644 --- a/src/components/OrgSettings/General/OrgProfileFieldSettings/OrgProfileFieldSettings.test.tsx +++ b/src/components/OrgSettings/General/OrgProfileFieldSettings/OrgProfileFieldSettings.spec.tsx @@ -12,6 +12,18 @@ import { } from 'GraphQl/Mutations/mutations'; import { ORGANIZATION_CUSTOM_FIELDS } from 'GraphQl/Queries/Queries'; import { ToastContainer, toast } from 'react-toastify'; +import { vi } from 'vitest'; + +/** + * Unit Tests for `OrgProfileFieldSettings` Component + * + * - Saving Custom Field: Verifies success and failure of adding a custom field. + * - Typing Custom Field Name: Ensures input updates correctly. + * - Handling No Custom Fields: Displays message when no custom fields exist. + * - Removing Custom Field: Verifies success and failure of removing a custom field. + * - Error Handling: Ensures error messages for GraphQL mutations are displayed. + * - Mock GraphQL Responses: Mocks GraphQL queries and mutations for different scenarios. + */ const MOCKS = [ { @@ -161,7 +173,7 @@ async function wait(ms = 100): Promise { } describe('Testing Save Button', () => { - test('Testing Failure Case For Fetching Custom field', async () => { + it('Testing Failure Case For Fetching Custom field', async () => { render( { screen.queryByText('Failed to fetch custom field'), ).toBeInTheDocument(); }); - test('Saving Organization Custom Field', async () => { + it('Saving Organization Custom Field', async () => { render( @@ -195,7 +207,7 @@ describe('Testing Save Button', () => { expect(screen.queryByText('Field added successfully')).toBeInTheDocument(); }); - test('Testing Failure Case For Saving Custom Field', async () => { + it('Testing Failure Case For Saving Custom Field', async () => { render( @@ -218,7 +230,7 @@ describe('Testing Save Button', () => { ).toBeInTheDocument(); }); - test('Testing Typing Organization Custom Field Name', async () => { + it('Testing Typing Organization Custom Field Name', async () => { const { getByTestId } = render( @@ -232,7 +244,7 @@ describe('Testing Save Button', () => { const fieldNameInput = getByTestId('customFieldInput'); userEvent.type(fieldNameInput, 'Age'); }); - test('When No Custom Data is Present', async () => { + it('When No Custom Data is Present', async () => { const { getByText } = render( @@ -244,7 +256,7 @@ describe('Testing Save Button', () => { await wait(); expect(getByText('No custom fields available')).toBeInTheDocument(); }); - test('Testing Remove Custom Field Button', async () => { + it('Testing Remove Custom Field Button', async () => { render( @@ -262,8 +274,8 @@ describe('Testing Save Button', () => { ).toBeInTheDocument(); }); - test('Testing Failure Case For Removing Custom Field', async () => { - const toastSpy = jest.spyOn(toast, 'error'); + it('Testing Failure Case For Removing Custom Field', async () => { + const toastSpy = vi.spyOn(toast, 'error'); render( From 1b0afc3ea919ae06c2394338c0a8d559a2482dfc Mon Sep 17 00:00:00 2001 From: abhishek Date: Thu, 26 Dec 2024 13:38:32 +0530 Subject: [PATCH 8/9] OrgUpdate tests migrated from jest to vitest --- ...{OrgUpdate.test.tsx => OrgUpdate.spec.tsx} | 22 ++++++++++++++----- 1 file changed, 17 insertions(+), 5 deletions(-) rename src/components/OrgSettings/General/OrgUpdate/{OrgUpdate.test.tsx => OrgUpdate.spec.tsx} (90%) diff --git a/src/components/OrgSettings/General/OrgUpdate/OrgUpdate.test.tsx b/src/components/OrgSettings/General/OrgUpdate/OrgUpdate.spec.tsx similarity index 90% rename from src/components/OrgSettings/General/OrgUpdate/OrgUpdate.test.tsx rename to src/components/OrgSettings/General/OrgUpdate/OrgUpdate.spec.tsx index 6304bb3ec9..2a6496d69a 100644 --- a/src/components/OrgSettings/General/OrgUpdate/OrgUpdate.test.tsx +++ b/src/components/OrgSettings/General/OrgUpdate/OrgUpdate.spec.tsx @@ -11,6 +11,18 @@ import { MOCKS_ERROR_ORGLIST, MOCKS_ERROR_UPDATE_ORGLIST, } from './OrgUpdateMocks'; +import { vi } from 'vitest'; + +/** + * Unit Tests for `OrgUpdate` Component + * + * - Rendering Component with Props: Verifies if labels and input fields are correctly rendered based on mock data. + * - Updating Organization: Ensures the form updates with new data and saves changes correctly. + * - Error Handling: Verifies error messages when organization cannot be found or updated. + * - Toast on Error: Verifies that an error toast is shown when the update fails. + * - Form Field Values: Ensures form values are correctly displayed and updated. + * - GraphQL Mock Responses: Mocks GraphQL responses for success and error scenarios. + */ const link = new StaticMockLink(MOCKS, true); @@ -45,9 +57,9 @@ describe('Testing Organization Update', () => { isVisible: true, }; - global.alert = jest.fn(); + global.alert = vi.fn(); - test('should render props and text elements test for the page component along with mock data', async () => { + it('should render props and text elements test for the page component along with mock data', async () => { act(() => { render( @@ -95,7 +107,7 @@ describe('Testing Organization Update', () => { expect(isVisible).not.toBeChecked(); }); - test('Should Update organization properly', async () => { + it('Should Update organization properly', async () => { await act(async () => { render( @@ -168,7 +180,7 @@ describe('Testing Organization Update', () => { expect(isVisible).toBeChecked(); }); - test('Should render error occured text when Organization Could not be found', async () => { + it('Should render error occured text when Organization Could not be found', async () => { act(() => { render( @@ -182,7 +194,7 @@ describe('Testing Organization Update', () => { expect(screen.getByText(/Mock Graphql Error/i)).toBeInTheDocument(); }); - test('Should show error occured toast when Organization could not be updated', async () => { + it('Should show error occured toast when Organization could not be updated', async () => { await act(async () => { render( From 375ef535f402630de4de7c2372359ec912468e6c Mon Sep 17 00:00:00 2001 From: abhishek Date: Thu, 26 Dec 2024 13:42:11 +0530 Subject: [PATCH 9/9] setting back to default vitest config file --- vitest.config.ts | 6 +----- 1 file changed, 1 insertion(+), 5 deletions(-) diff --git a/vitest.config.ts b/vitest.config.ts index b34f84b304..3d071e7534 100644 --- a/vitest.config.ts +++ b/vitest.config.ts @@ -14,11 +14,7 @@ export default defineConfig({ svgrPlugin(), ], test: { - // include: ['src/**/*.spec.{js,jsx,ts,tsx}'], - include: [ - // 'src/**/*.spec.{js,jsx,ts,tsx}', - 'src/components/OrgSettings/**/*.spec.{js,jsx,ts,tsx}', - ], + include: ['src/**/*.spec.{js,jsx,ts,tsx}'], globals: true, environment: 'jsdom', setupFiles: 'vitest.setup.ts',