Skip to content

Commit

Permalink
Improves Code Coverage In OrganizationTags.tsx #3031 (#3314)
Browse files Browse the repository at this point in the history 
* Code coverage improvement

* Linting issue resolved

* Reduced the no of ignore comments by adding more tests

* Reduce no of lines in OrganizationTagsMocks.ts

* Deleted MOCKS_EMPTY_USER_TAG

* Added appropiate error message

* Resolving conflicting files

* Removed all ignore statements
  • Loading branch information
@arpit-chakraborty
arpit-chakraborty authored Jan 19, 2025
1 parent c52f54e commit a7149b9
Show file tree
Hide file tree
Showing 3 changed files with 366 additions and 160 deletions.
119 changes: 109 additions & 10 deletions src/screens/OrganizationTags/OrganizationTags.spec.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -20,7 +20,15 @@ import { store } from 'state/store';
import { StaticMockLink } from 'utils/StaticMockLink';
import i18n from 'utils/i18nForTest';
import OrganizationTags from './OrganizationTags';
import { MOCKS, MOCKS_ERROR } from './OrganizationTagsMocks';
import {
MOCKS,
MOCKS_ERROR,
MOCKS_ERROR_ERROR_TAG,
MOCKS_EMPTY,
MOCKS_UNDEFINED_USER_TAGS,
MOCKS_NULL_END_CURSOR,
MOCKS_NO_MORE_PAGES,
} from './OrganizationTagsMocks';
import type { ApolloLink } from '@apollo/client';

const translations = {
Expand All @@ -35,6 +43,11 @@ const translations = {

const link = new StaticMockLink(MOCKS, true);
const link2 = new StaticMockLink(MOCKS_ERROR, true);
const link3 = new StaticMockLink([...MOCKS, ...MOCKS_ERROR_ERROR_TAG], true);
const link4 = new StaticMockLink(MOCKS_EMPTY, true);
const link5 = new StaticMockLink(MOCKS_UNDEFINED_USER_TAGS, true);
const link6 = new StaticMockLink(MOCKS_NULL_END_CURSOR, true);
const link7 = new StaticMockLink(MOCKS_NO_MORE_PAGES, true);

async function wait(ms = 500): Promise<void> {
await act(() => {
Expand Down Expand Up @@ -85,12 +98,10 @@ describe('Organisation Tags Page', () => {
};
});
});

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

test('component loads correctly', async () => {
const { getByText } = renderOrganizationTags(link);

Expand All @@ -100,7 +111,6 @@ describe('Organisation Tags Page', () => {
expect(getByText(translations.createTag)).toBeInTheDocument();
});
});

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

Expand All @@ -110,7 +120,6 @@ describe('Organisation Tags Page', () => {
expect(queryByText(translations.createTag)).not.toBeInTheDocument();
});
});

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

Expand Down Expand Up @@ -146,7 +155,6 @@ describe('Organisation Tags Page', () => {
expect(screen.getByTestId('subTagsScreen')).toBeInTheDocument();
});
});

test('navigates to manage tag page after clicking manage tag option', async () => {
renderOrganizationTags(link);

Expand All @@ -161,7 +169,6 @@ describe('Organisation Tags Page', () => {
expect(screen.getByTestId('manageTagScreen')).toBeInTheDocument();
});
});

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

Expand All @@ -182,7 +189,6 @@ describe('Organisation Tags Page', () => {
expect(buttons.length).toEqual(2);
});
});

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

Expand Down Expand Up @@ -239,7 +245,6 @@ describe('Organisation Tags Page', () => {
);
});
});

test('fetches more tags with infinite scroll', async () => {
const { getByText } = renderOrganizationTags(link);

Expand Down Expand Up @@ -268,7 +273,6 @@ describe('Organisation Tags Page', () => {
expect(getByText(translations.createTag)).toBeInTheDocument();
});
});

test('creates a new user tag', async () => {
renderOrganizationTags(link);

Expand Down Expand Up @@ -298,4 +302,99 @@ describe('Organisation Tags Page', () => {
);
});
});
test('creates a new user tag with error', async () => {
renderOrganizationTags(link3);

await wait();

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

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

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

await waitFor(() => {
expect(toast.error).toHaveBeenCalledWith('Mock Graphql Error');
});
});
test('renders the no tags found message when there are no tags', async () => {
renderOrganizationTags(link4);

await wait();

await waitFor(() => {
expect(screen.getByText(translations.noTagsFound)).toBeInTheDocument();
});
});
test('sets dataLength to 0 when userTagsList is undefined', async () => {
renderOrganizationTags(link5);

await wait();

// Wait for the component to render
await waitFor(() => {
const userTags = screen.queryAllByTestId('user-tag');
expect(userTags).toHaveLength(0);
});
});
test('Null endCursor', async () => {
renderOrganizationTags(link6);

await wait();

const orgUserTagsScrollableDiv = screen.getByTestId(
'orgUserTagsScrollableDiv',
);

// Set scroll position to the bottom
fireEvent.scroll(orgUserTagsScrollableDiv, {
target: { scrollY: orgUserTagsScrollableDiv.scrollHeight },
});

await waitFor(() => {
expect(screen.getByTestId('createTagBtn')).toBeInTheDocument();
});
});
test('Null Page available', async () => {
renderOrganizationTags(link7);

await wait();

const orgUserTagsScrollableDiv = screen.getByTestId(
'orgUserTagsScrollableDiv',
);

// Set scroll position to the bottom
fireEvent.scroll(orgUserTagsScrollableDiv, {
target: { scrollY: orgUserTagsScrollableDiv.scrollHeight },
});

await waitFor(() => {
expect(screen.getByTestId('createTagBtn')).toBeInTheDocument();
});
});
test('creates a new user tag with undefined data', async () => {
renderOrganizationTags(link);

await wait();

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

userEvent.type(
screen.getByPlaceholderText(translations.tagNamePlaceholder),
'userTag 13',
);

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

await waitFor(() => {
expect(toast.error).toHaveBeenCalledWith('Tag creation failed');
});
});
});
23 changes: 12 additions & 11 deletions src/screens/OrganizationTags/OrganizationTags.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -113,7 +113,9 @@ function OrganizationTags(): JSX.Element {
};
},
) => {
if (!fetchMoreResult) return prevResult;
if (!fetchMoreResult) {
return prevResult;
}

return {
organizations: [
Expand Down Expand Up @@ -156,20 +158,18 @@ function OrganizationTags(): JSX.Element {
organizationId: orgId,
},
});

if (data) {
toast.success(t('tagCreationSuccess'));
orgUserTagsRefetch();
setTagName('');
setCreateTagModalIsOpen(false);
} else {
toast.error('Tag creation failed');
}
} catch (error: unknown) {
if (error instanceof Error) {
toast.error(error.message);
}
toast.error((error as Error).message);
}
};

if (orgUserTagsError) {
return (
<div className={`${styles.errorContainer} bg-white rounded-4 my-3`}>
Expand All @@ -185,10 +185,10 @@ function OrganizationTags(): JSX.Element {
);
}

const userTagsList = orgUserTagsData?.organizations[0].userTags.edges.map(
(edge) => edge.node,
);

const userTagsList =
orgUserTagsData?.organizations?.[0]?.userTags?.edges?.map(
(edge) => edge.node,
) || [];
const redirectToManageTag = (tagId: string): void => {
navigate(`/orgtags/${orgId}/manageTag/${tagId}`);
};
Expand Down Expand Up @@ -379,14 +379,15 @@ function OrganizationTags(): JSX.Element {
className={styles.orgUserTagsScrollableDiv}
>
<InfiniteScroll
dataLength={userTagsList?.length ?? 0}
dataLength={userTagsList?.length}
next={loadMoreUserTags}
hasMore={
orgUserTagsData?.organizations?.[0]?.userTags?.pageInfo
?.hasNextPage ?? false
}
loader={<InfiniteScrollLoader />}
scrollableTarget="orgUserTagsScrollableDiv"
data-testid="infinite-scroll"
>
<DataGrid
disableColumnMenu
Expand Down
Loading

0 comments on commit a7149b9

Please sign in to comment.