Skip to content

Commit

Permalink
migrated SubTag.test.tsx from jest to vitest and added few more test …
Browse files Browse the repository at this point in the history 
…(fixes 2570)
  • Loading branch information
@PratapRathi
PratapRathi committed Dec 23, 2024
1 parent ec91a82 commit b2caab3
Show file tree
Hide file tree
Showing 2 changed files with 58 additions and 28 deletions.
77 changes: 55 additions & 22 deletions src/screens/SubTags/SubTags.test.tsx → src/screens/SubTags/SubTags.spec.tsx
View file
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();
});
});
});
9 changes: 3 additions & 6 deletions src/screens/SubTags/SubTags.tsx
View file
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,13 @@ function SubTags(): JSX.Element {
},
});

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

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

const parentTagName = subTagsData?.getChildTags.name;

Expand Down Expand Up @@ -394,7 +392,6 @@ function SubTags(): JSX.Element {
next={loadMoreSubTags}
hasMore={
subTagsData?.getChildTags.childTags.pageInfo.hasNextPage ??
/* istanbul ignore next */
false
}
loader={<InfiniteScrollLoader />}
Expand Down

0 comments on commit b2caab3

Please sign in to comment.