Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Migrated src/screens/manage tag from jest to vitest #2736

Closed
Show file tree
Hide file tree
Changes from all commits
Commits
File filter

Filter by extension

Filter by extension

Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
Original file line number Diff line number Diff line change
Expand Up @@ -11,7 +11,6 @@ import {
waitForElementToBeRemoved,
} from '@testing-library/react';
import userEvent from '@testing-library/user-event';
import 'jest-location-mock';
import { I18nextProvider } from 'react-i18next';
import { Provider } from 'react-redux';
import { MemoryRouter, Route, Routes } from 'react-router-dom';
Expand All @@ -22,6 +21,8 @@ import i18n from 'utils/i18nForTest';
import ManageTag from './ManageTag';
import { MOCKS, MOCKS_ERROR_ASSIGNED_MEMBERS } from './ManageTagMocks';
import { type ApolloLink } from '@apollo/client';
import { vi, beforeEach, afterEach, expect, it } from 'vitest';
import '@testing-library/jest-dom/vitest';

const translations = {
...JSON.parse(
Expand All @@ -42,21 +43,21 @@ async function wait(ms = 500): Promise<void> {
});
}

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

/* eslint-disable @typescript-eslint/no-var-requires, @typescript-eslint/no-require-imports */
jest.mock('../../components/AddPeopleToTag/AddPeopleToTag', () => {
return require('./ManageTagMockComponents/MockAddPeopleToTag').default;
vi.mock('../../components/AddPeopleToTag/AddPeopleToTag', async () => {
return await import('./ManageTagMockComponents/MockAddPeopleToTag');
});

jest.mock('../../components/TagActions/TagActions', () => {
return require('./ManageTagMockComponents/MockTagActions').default;
vi.mock('../../components/TagActions/TagActions', async () => {
return await import('./ManageTagMockComponents/MockTagActions');
});
/* eslint-enable @typescript-eslint/no-var-requires, @typescript-eslint/no-require-imports */

Expand Down Expand Up @@ -93,18 +94,17 @@ const renderManageTag = (link: ApolloLink): RenderResult => {

describe('Manage Tag Page', () => {
beforeEach(() => {
jest.mock('react-router-dom', () => ({
...jest.requireActual('react-router-dom'),
useParams: () => ({ orgId: 'orgId' }),
vi.mock('react-router-dom', async () => ({
...(await vi.importActual('react-router-dom')),
}));
});

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

test('Component loads correctly', async () => {
it('Component loads correctly', async () => {
const { getByText } = renderManageTag(link);

await wait();
Expand All @@ -114,7 +114,7 @@ describe('Manage Tag Page', () => {
});
});

test('renders error component on unsuccessful userTag assigned members query', async () => {
it('renders error component on unsuccessful userTag assigned members query', async () => {
const { queryByText } = renderManageTag(link2);

await wait();
Expand All @@ -124,7 +124,7 @@ describe('Manage Tag Page', () => {
});
});

test('opens and closes the add people to tag modal', async () => {
it('opens and closes the add people to tag modal', async () => {
renderManageTag(link);

await waitFor(() => {
Expand All @@ -146,7 +146,7 @@ describe('Manage Tag Page', () => {
});
});

test('opens and closes the unassign tag modal', async () => {
it('opens and closes the unassign tag modal', async () => {
renderManageTag(link);

await wait();
Expand All @@ -168,7 +168,7 @@ describe('Manage Tag Page', () => {
);
});

test('opens and closes the assignToTags modal', async () => {
it('opens and closes the assignToTags modal', async () => {
renderManageTag(link);

// Wait for the assignToTags button to be present
Expand All @@ -193,7 +193,7 @@ describe('Manage Tag Page', () => {
});
});

test('opens and closes the removeFromTags modal', async () => {
it('opens and closes the removeFromTags modal', async () => {
renderManageTag(link);

// Wait for the removeFromTags button to be present
Expand All @@ -218,7 +218,7 @@ describe('Manage Tag Page', () => {
});
});

test('opens and closes the edit tag modal', async () => {
it('opens and closes the edit tag modal', async () => {
renderManageTag(link);

await wait();
Expand All @@ -240,7 +240,7 @@ describe('Manage Tag Page', () => {
);
});

test('opens and closes the remove tag modal', async () => {
it('opens and closes the remove tag modal', async () => {
renderManageTag(link);

await wait();
Expand All @@ -262,7 +262,7 @@ describe('Manage Tag Page', () => {
);
});

test("navigates to the member's profile after clicking the view option", async () => {
it("navigates to the member's profile after clicking the view option", async () => {
renderManageTag(link);

await wait();
Expand All @@ -277,7 +277,7 @@ describe('Manage Tag Page', () => {
});
});

test('navigates to the subTags screen after clicking the subTags option', async () => {
it('navigates to the subTags screen after clicking the subTags option', async () => {
renderManageTag(link);

await wait();
Expand All @@ -292,7 +292,7 @@ describe('Manage Tag Page', () => {
});
});

test('navigates to the manageTag screen after clicking a tag in the breadcrumbs', async () => {
it('navigates to the manageTag screen after clicking a tag in the breadcrumbs', async () => {
renderManageTag(link);

await wait();
Expand All @@ -309,7 +309,7 @@ describe('Manage Tag Page', () => {
});
});

test('navigates to organization tags screen screen after clicking tha all tags option in the breadcrumbs', async () => {
it('navigates to organization tags screen screen after clicking tha all tags option in the breadcrumbs', async () => {
renderManageTag(link);

await wait();
Expand All @@ -324,7 +324,7 @@ describe('Manage Tag Page', () => {
});
});

test('searchs for tags where the name matches the provided search input', async () => {
it('searchs for tags where the name matches the provided search input', async () => {
renderManageTag(link);

await wait();
Expand All @@ -345,7 +345,7 @@ describe('Manage Tag Page', () => {
});
});

test('fetches the tags by the sort order, i.e. latest or oldest first', async () => {
it('fetches the tags by the sort order, i.e. latest or oldest first', async () => {
renderManageTag(link);

await wait();
Expand Down Expand Up @@ -402,7 +402,7 @@ describe('Manage Tag Page', () => {
});
});

test('Fetches more assigned members with infinite scroll', async () => {
it('Fetches more assigned members with infinite scroll', async () => {
const { getByText } = renderManageTag(link);

await wait();
Expand Down Expand Up @@ -433,7 +433,7 @@ describe('Manage Tag Page', () => {
});
});

test('unassigns a tag from a member', async () => {
it('unassigns a tag from a member', async () => {
renderManageTag(link);

await wait();
Expand All @@ -452,7 +452,7 @@ describe('Manage Tag Page', () => {
});
});

test('successfully edits the tag name', async () => {
it('successfully edits the tag name', async () => {
renderManageTag(link);

await wait();
Expand Down Expand Up @@ -482,7 +482,7 @@ describe('Manage Tag Page', () => {
});
});

test('successfully removes the tag and redirects to orgTags page', async () => {
it('successfully removes the tag and redirects to orgTags page', async () => {
renderManageTag(link);

await wait();
Expand Down
35 changes: 19 additions & 16 deletions src/screens/ManageTag/ManageTag.tsx
Original file line number Diff line number Diff line change
Expand Up @@ -132,7 +132,8 @@ function ManageTag(): JSX.Element {
};
},
) => {
if (!fetchMoreResult) /* istanbul ignore next */ return prevResult;
/* istanbul ignore next -- @preserve */
if (!fetchMoreResult) return prevResult;

return {
getAssignedUsers: {
Expand Down Expand Up @@ -174,7 +175,7 @@ function ManageTag(): JSX.Element {
toggleUnassignUserTagModal();
toast.success(t('successfullyUnassigned') as string);
} catch (error: unknown) {
/* istanbul ignore next */
/* istanbul ignore next -- @preserve */
if (error instanceof Error) {
toast.error(error.message);
}
Expand Down Expand Up @@ -209,13 +210,14 @@ function ManageTag(): JSX.Element {
},
});

/* istanbul ignore else -- @preserve */
if (data) {
toast.success(t('tagUpdationSuccess'));
userTagAssignedMembersRefetch();
setEditUserTagModalIsOpen(false);
}
} catch (error: unknown) {
/* istanbul ignore next */
/* istanbul ignore next -- @preserve */
if (error instanceof Error) {
toast.error(error.message);
}
Expand All @@ -235,7 +237,7 @@ function ManageTag(): JSX.Element {
toggleRemoveUserTagModal();
toast.success(t('tagRemovalSuccess') as string);
} catch (error: unknown) {
/* istanbul ignore next */
/* istanbul ignore next -- @preserve */
if (error instanceof Error) {
toast.error(error.message);
}
Expand All @@ -258,7 +260,7 @@ function ManageTag(): JSX.Element {
const userTagAssignedMembers =
userTagAssignedMembersData?.getAssignedUsers.usersAssignedTo.edges.map(
(edge) => edge.node,
) ?? /* istanbul ignore next */ [];
) ?? /* istanbul ignore next -- @preserve */ [];

// get the ancestorTags array and push the current tag in it
// used for the tag breadcrumbs
Expand Down Expand Up @@ -452,7 +454,7 @@ function ManageTag(): JSX.Element {
>
{tag.name}
{orgUserTagAncestors.length - 1 !== index && (
/* istanbul ignore next */
/* istanbul ignore next -- @preserve */
<i className={'mx-2 fa fa-caret-right'} />
)}
</div>
Expand All @@ -469,7 +471,7 @@ function ManageTag(): JSX.Element {
hasMore={
userTagAssignedMembersData?.getAssignedUsers
.usersAssignedTo.pageInfo.hasNextPage ??
/* istanbul ignore next */ false
/* istanbul ignore next -- @preserve */ false
}
loader={<InfiniteScrollLoader />}
scrollableTarget="manageTagScrollableDiv"
Expand All @@ -480,15 +482,16 @@ function ManageTag(): JSX.Element {
hideFooter={true}
getRowId={(row) => row.id}
slots={{
noRowsOverlay: /* istanbul ignore next */ () => (
<Stack
height="100%"
alignItems="center"
justifyContent="center"
>
{t('noAssignedMembersFound')}
</Stack>
),
noRowsOverlay:
/* istanbul ignore next -- @preserve */ () => (
<Stack
height="100%"
alignItems="center"
justifyContent="center"
>
{t('noAssignedMembersFound')}
</Stack>
),
}}
sx={dataGridStyle}
getRowClassName={() => `${styles.rowBackground}`}
Expand Down
Loading