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.

Sign up for GitHub

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

Refactor: src/screens/SubTags from Jest to Vitest #2733

Closed
wants to merge 2 commits into from
Closed

Refactor: src/screens/SubTags from Jest to Vitest #2733

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
2 commits
Select commit Hold shift + click to select a range
b2caab3
migrated SubTag.test.tsx from jest to vitest and added few more test …
PratapRathi Dec 23, 2024
cf44483
Refactor: Revert the SubTag.tsx changes to previous one
PratapRathi Dec 23, 2024
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
77 changes: 55 additions & 22 deletions src/screens/SubTags/SubTags.test.tsx → src/screens/SubTags/SubTags.spec.tsx
View file
Open in desktop
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 SubTags from './SubTags';
import { MOCKS, MOCKS_ERROR_SUB_TAGS } from './SubTagsMocks';
import { InMemoryCache, 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 @@ -44,10 +45,10 @@ async function wait(ms = 500): Promise<void> {
});
}

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 @@ -78,10 +79,13 @@ const cache = new InMemoryCache({
},
});

const renderSubTags = (link: ApolloLink): RenderResult => {
const renderSubTags = (
link: ApolloLink,
initialRoute = '/orgtags/123/subTags/1',
): RenderResult => {
return render(
<MockedProvider cache={cache} addTypename={false} link={link}>
<MemoryRouter initialEntries={['/orgtags/123/subTags/1']}>
<MemoryRouter initialEntries={[initialRoute]}>
<Provider store={store}>
<I18nextProvider i18n={i18n}>
<Routes>
Expand All @@ -107,19 +111,18 @@ const renderSubTags = (link: ApolloLink): RenderResult => {

describe('Organisation Tags 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')),
}));
cache.reset();
});

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

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

await wait();
Expand All @@ -129,7 +132,7 @@ describe('Organisation Tags Page', () => {
});
});

test('render error component on unsuccessful subtags query', async () => {
it('render error component on unsuccessful subtags query', async () => {
const { queryByText } = renderSubTags(link2);

await wait();
Expand All @@ -139,7 +142,7 @@ describe('Organisation Tags Page', () => {
});
});

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

await wait();
Expand All @@ -161,7 +164,7 @@ describe('Organisation Tags Page', () => {
);
});

test('navigates to manage tag screen after clicking manage tag option', async () => {
it('navigates to manage tag screen after clicking manage tag option', async () => {
renderSubTags(link);

await wait();
Expand All @@ -176,7 +179,7 @@ describe('Organisation Tags Page', () => {
});
});

test('navigates to sub tags screen after clicking on a tag', async () => {
it('navigates to sub tags screen after clicking on a tag', async () => {
renderSubTags(link);

await wait();
Expand All @@ -191,7 +194,7 @@ describe('Organisation Tags Page', () => {
});
});

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

await wait();
Expand All @@ -206,7 +209,7 @@ describe('Organisation Tags 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 () => {
renderSubTags(link);

await wait();
Expand All @@ -221,7 +224,7 @@ describe('Organisation Tags Page', () => {
});
});

test('navigates to manage tags screen for the current tag after clicking tha manageCurrentTag button', async () => {
it('navigates to manage tags screen for the current tag after clicking tha manageCurrentTag button', async () => {
renderSubTags(link);

await wait();
Expand All @@ -236,7 +239,7 @@ describe('Organisation Tags 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 () => {
renderSubTags(link);

await wait();
Expand All @@ -257,7 +260,7 @@ describe('Organisation Tags 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 () => {
renderSubTags(link);

await wait();
Expand Down Expand Up @@ -314,7 +317,7 @@ describe('Organisation Tags Page', () => {
});
});

test('Fetches more sub tags with infinite scroll', async () => {
it('Fetches more sub tags with infinite scroll', async () => {
const { getByText } = renderSubTags(link);

await wait();
Expand Down Expand Up @@ -343,7 +346,7 @@ describe('Organisation Tags Page', () => {
});
});

test('adds a new sub tag to the current tag', async () => {
it('adds a new sub tag to the current tag', async () => {
renderSubTags(link);

await wait();
Expand All @@ -358,6 +361,10 @@ describe('Organisation Tags Page', () => {
'subTag 12',
);

await waitFor(() => {
expect(screen.getByTestId('addSubTagSubmitBtn')).toBeInTheDocument();
});

userEvent.click(screen.getByTestId('addSubTagSubmitBtn'));

await waitFor(() => {
Expand All @@ -366,4 +373,30 @@ describe('Organisation Tags Page', () => {
);
});
});

it('Adding a subtag with invalid OrgID, error notification should appear', async () => {
renderSubTags(link, '/orgtags/invalid_orgID/subTags/1');

await wait();

await waitFor(() => {
expect(screen.getByTestId('addSubTagBtn')).toBeInTheDocument();
});
userEvent.click(screen.getByTestId('addSubTagBtn'));

userEvent.type(
screen.getByPlaceholderText(translations.tagNamePlaceholder),
'subTag 12',
);

await waitFor(() => {
expect(screen.getByTestId('addSubTagSubmitBtn')).toBeInTheDocument();
});

userEvent.click(screen.getByTestId('addSubTagSubmitBtn'));

await waitFor(() => {
expect(toast.error).toBeCalled();
});
});
});
30 changes: 16 additions & 14 deletions src/screens/SubTags/SubTags.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -93,7 +93,8 @@ function SubTags(): JSX.Element {
fetchMoreResult?: { getChildTags: InterfaceQueryUserTagChildTags };
},
) => {
if (!fetchMoreResult) /* istanbul ignore next */ return prevResult;
/* istanbul ignore if -- @preserve */
if (!fetchMoreResult) return prevResult;

return {
getChildTags: {
Expand Down Expand Up @@ -126,15 +127,15 @@ function SubTags(): JSX.Element {
},
});

/* istanbul ignore next */
/* istanbul ignore next -- @preserve */
if (data) {
toast.success(t('tagCreationSuccess') as string);
subTagsRefetch();
setTagName('');
setAddSubTagModalIsOpen(false);
}
} catch (error: unknown) {
/* istanbul ignore next */
/* istanbul ignore next -- @preserve */
if (error instanceof Error) {
toast.error(error.message);
}
Expand All @@ -156,7 +157,7 @@ function SubTags(): JSX.Element {

const subTagsList =
subTagsData?.getChildTags.childTags.edges.map((edge) => edge.node) ??
/* istanbul ignore next */ [];
/* istanbul ignore next -- @preserve */ [];

const parentTagName = subTagsData?.getChildTags.name;

Expand Down Expand Up @@ -394,7 +395,7 @@ function SubTags(): JSX.Element {
next={loadMoreSubTags}
hasMore={
subTagsData?.getChildTags.childTags.pageInfo.hasNextPage ??
/* istanbul ignore next */
/* istanbul ignore next -- @preserve */
false
}
loader={<InfiniteScrollLoader />}
Expand All @@ -406,15 +407,16 @@ function SubTags(): JSX.Element {
hideFooter={true}
getRowId={(row) => row.id}
slots={{
noRowsOverlay: /* istanbul ignore next */ () => (
<Stack
height="100%"
alignItems="center"
justifyContent="center"
>
{t('noTagsFound')}
</Stack>
),
noRowsOverlay:
/* istanbul ignore next -- @preserve */ () => (
<Stack
height="100%"
alignItems="center"
justifyContent="center"
>
{t('noTagsFound')}
</Stack>
),
}}
sx={dataGridStyle}
getRowClassName={() => `${styles.rowBackground}`}
Expand Down
Loading