Skip to content

Commit

Permalink
Refactor: src/screens/OrganizationFunds from Jest to Vitest (#2685)
Browse files Browse the repository at this point in the history
  • Loading branch information
@prathmesh703
prathmesh703 authored Dec 23, 2024
1 parent 92ce58d commit fd0fe5c
Show file tree
Hide file tree
Showing 3 changed files with 72 additions and 24 deletions.
47 changes: 40 additions & 7 deletions ...eens/OrganizationFunds/FundModal.test.tsx → ...eens/OrganizationFunds/FundModal.spec.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -21,11 +21,12 @@ import { toast } from 'react-toastify';
import { MOCKS, MOCKS_ERROR } from './OrganizationFundsMocks';
import type { InterfaceFundModal } from './FundModal';
import FundModal from './FundModal';
import { vi } from 'vitest';

jest.mock('react-toastify', () => ({
vi.mock('react-toastify', () => ({
toast: {
success: jest.fn(),
error: jest.fn(),
success: vi.fn(),
error: vi.fn(),
},
}));

Expand All @@ -38,7 +39,7 @@ const translations = JSON.parse(
const fundProps: InterfaceFundModal[] = [
{
isOpen: true,
hide: jest.fn(),
hide: vi.fn(),
fund: {
_id: 'fundId',
name: 'Fund 1',
Expand All @@ -54,13 +55,13 @@ const fundProps: InterfaceFundModal[] = [
lastName: 'Doe',
},
},
refetchFunds: jest.fn(),
refetchFunds: vi.fn(),
orgId: 'orgId',
mode: 'create',
},
{
isOpen: true,
hide: jest.fn(),
hide: vi.fn(),
fund: {
_id: 'fundId',
name: 'Fund 1',
Expand All @@ -76,7 +77,7 @@ const fundProps: InterfaceFundModal[] = [
lastName: 'Doe',
},
},
refetchFunds: jest.fn(),
refetchFunds: vi.fn(),
orgId: 'orgId',
mode: 'edit',
},
Expand Down Expand Up @@ -104,6 +105,7 @@ const renderFundModal = (
describe('PledgeModal', () => {
afterEach(() => {
cleanup();
vi.clearAllMocks();
});

it('should populate form fields with correct values in edit mode', async () => {
Expand Down Expand Up @@ -184,6 +186,37 @@ describe('PledgeModal', () => {
});
});

it('should not update the fund when no fields are changed', async () => {
renderFundModal(link1, fundProps[1]);

// Simulate no change to the fields
const fundNameInput = screen.getByLabelText(translations.fundName);
fireEvent.change(fundNameInput, { target: { value: 'Fund 1' } });

const fundIdInput = screen.getByLabelText(translations.fundId);
fireEvent.change(fundIdInput, { target: { value: '1111' } });

const taxDeductibleSwitch = screen.getByTestId('setTaxDeductibleSwitch');
fireEvent.click(taxDeductibleSwitch);
fireEvent.click(taxDeductibleSwitch);

const defaultSwitch = screen.getByTestId('setDefaultSwitch');
fireEvent.click(defaultSwitch);
fireEvent.click(defaultSwitch);

const archivedSwitch = screen.getByTestId('archivedSwitch');
fireEvent.click(archivedSwitch);
fireEvent.click(archivedSwitch);

fireEvent.click(screen.getByTestId('createFundFormSubmitBtn'));

await waitFor(() => {
expect(toast.success).not.toHaveBeenCalled();
expect(fundProps[1].refetchFunds).not.toHaveBeenCalled();
expect(fundProps[1].hide).not.toHaveBeenCalled();
});
});

it('should update fund', async () => {
renderFundModal(link1, fundProps[1]);

Expand Down
8 changes: 4 additions & 4 deletions src/screens/OrganizationFunds/FundModal.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -139,7 +139,9 @@ const FundModal: React.FC<InterfaceFundModal> = ({
if (isDefault != fund?.isDefault) {
updatedFields.isDefault = isDefault;
}

if (Object.keys(updatedFields).length === 0) {
return;
}
await updateFund({
variables: {
id: fund?._id,
Expand All @@ -157,9 +159,7 @@ const FundModal: React.FC<InterfaceFundModal> = ({
hide();
toast.success(t('fundUpdated') as string);
} catch (error: unknown) {
if (error instanceof Error) {
toast.error(error.message);
}
toast.error((error as Error).message);
}
};

Expand Down
41 changes: 28 additions & 13 deletions ...anizationFunds/OrganizationFunds.test.tsx → ...anizationFunds/OrganizationFunds.spec.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -11,7 +11,7 @@ import {
import userEvent from '@testing-library/user-event';
import { I18nextProvider } from 'react-i18next';
import { Provider } from 'react-redux';
import { MemoryRouter, Route, Routes } from 'react-router-dom';
import { MemoryRouter, Route, Routes, useParams } from 'react-router-dom';
import { store } from 'state/store';
import { StaticMockLink } from 'utils/StaticMockLink';
import i18nForTest from 'utils/i18nForTest';
Expand All @@ -20,11 +20,12 @@ import { MOCKS, MOCKS_ERROR, NO_FUNDS } from './OrganizationFundsMocks';
import type { ApolloLink } from '@apollo/client';
import { LocalizationProvider } from '@mui/x-date-pickers';
import { AdapterDayjs } from '@mui/x-date-pickers/AdapterDayjs';
import { vi } from 'vitest';

jest.mock('react-toastify', () => ({
vi.mock('react-toastify', () => ({
toast: {
success: jest.fn(),
error: jest.fn(),
success: vi.fn(),
error: vi.fn(),
},
}));

Expand Down Expand Up @@ -67,51 +68,57 @@ const renderOrganizationFunds = (link: ApolloLink): RenderResult => {

describe('OrganizationFunds Screen =>', () => {
beforeEach(() => {
jest.mock('react-router-dom', () => ({
...jest.requireActual('react-router-dom'),
useParams: () => ({ orgId: 'orgId' }),
}));
});

afterEach(() => {
jest.clearAllMocks();
vi.mock('react-router-dom', async () => {
const actual = await vi.importActual('react-router-dom');
return {
...actual,
useParams: vi.fn(),
};
});
});

afterEach(() => {
vi.clearAllMocks();
cleanup();
});

it('should render the Campaign Pledge screen', async () => {
vi.mocked(useParams).mockReturnValue({ orgId: 'orgId' });
renderOrganizationFunds(link1);
await waitFor(() => {
expect(screen.getByTestId('searchByName')).toBeInTheDocument();
});
});

it('should redirect to fallback URL if URL params are undefined', async () => {
vi.mocked(useParams).mockReturnValue({});
render(
<MockedProvider addTypename={false} link={link1}>
<MemoryRouter initialEntries={['/orgfunds/']}>
<Provider store={store}>
<I18nextProvider i18n={i18nForTest}>
<Routes>
<Route path="/orgfunds/" element={<OrganizationFunds />} />
<Route
path="/"
element={<div data-testid="paramsError"></div>}
/>
<Route path="/orgfunds/" element={<OrganizationFunds />} />
</Routes>
</I18nextProvider>
</Provider>
</MemoryRouter>
</MockedProvider>,
);
await waitFor(() => {
expect(window.location.pathname).toBe('/');
});
await waitFor(() => {
expect(screen.getByTestId('paramsError')).toBeInTheDocument();
});
});

it('open and close Create Fund modal', async () => {
vi.mocked(useParams).mockReturnValue({ orgId: 'orgId' });
renderOrganizationFunds(link1);

const createFundBtn = await screen.findByTestId('createFundBtn');
Expand All @@ -128,6 +135,7 @@ describe('OrganizationFunds Screen =>', () => {
});

it('open and close update fund modal', async () => {
vi.mocked(useParams).mockReturnValue({ orgId: 'orgId' });
renderOrganizationFunds(link1);

await waitFor(() => {
Expand All @@ -150,6 +158,7 @@ describe('OrganizationFunds Screen =>', () => {
});

it('Search the Funds list by name', async () => {
vi.mocked(useParams).mockReturnValue({ orgId: 'orgId' });
renderOrganizationFunds(link1);
const searchField = await screen.findByTestId('searchByName');
fireEvent.change(searchField, {
Expand All @@ -163,20 +172,23 @@ describe('OrganizationFunds Screen =>', () => {
});

it('should render the Fund screen with error', async () => {
vi.mocked(useParams).mockReturnValue({ orgId: 'orgId' });
renderOrganizationFunds(link2);
await waitFor(() => {
expect(screen.getByTestId('errorMsg')).toBeInTheDocument();
});
});

it('renders the empty fund component', async () => {
vi.mocked(useParams).mockReturnValue({ orgId: 'orgId' });
renderOrganizationFunds(link3);
await waitFor(() =>
expect(screen.getByText(translations.noFundsFound)).toBeInTheDocument(),
);
});

it('Sort the Pledges list by Latest created Date', async () => {
vi.mocked(useParams).mockReturnValue({ orgId: 'orgId' });
renderOrganizationFunds(link1);

const sortBtn = await screen.findByTestId('filter');
Expand All @@ -198,6 +210,7 @@ describe('OrganizationFunds Screen =>', () => {
});

it('Sort the Pledges list by Earliest created Date', async () => {
vi.mocked(useParams).mockReturnValue({ orgId: 'orgId' });
renderOrganizationFunds(link1);

const sortBtn = await screen.findByTestId('filter');
Expand All @@ -219,6 +232,7 @@ describe('OrganizationFunds Screen =>', () => {
});

it('Click on Fund Name', async () => {
vi.mocked(useParams).mockReturnValue({ orgId: 'orgId' });
renderOrganizationFunds(link1);

const fundName = await screen.findAllByTestId('fundName');
Expand All @@ -231,6 +245,7 @@ describe('OrganizationFunds Screen =>', () => {
});

it('Click on View Campaign', async () => {
vi.mocked(useParams).mockReturnValue({ orgId: 'orgId' });
renderOrganizationFunds(link1);

const viewBtn = await screen.findAllByTestId('viewBtn');
Expand Down

0 comments on commit fd0fe5c

Please sign in to comment.