Code Coverage Improvement in 'OrganizationTags.tsx' #3031

src/screens/OrganizationTags/OrganizationTags.spec.tsx

@@ -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 = {
@@ -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(() => {
@@ -298,4 +311,83 @@ 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();
+    });
+  });
 });

src/screens/OrganizationTags/OrganizationTags.tsx

@@ -84,7 +84,6 @@ function OrganizationTags(): JSX.Element {
         first: TAGS_QUERY_DATA_CHUNK_SIZE,
         after:
           orgUserTagsData?.organizations?.[0]?.userTags?.pageInfo?.endCursor ??
-          /* istanbul ignore next */
           null,
       },
       updateQuery: (
@@ -97,7 +96,9 @@ function OrganizationTags(): JSX.Element {
           };
         },
       ) => {
-        if (!fetchMoreResult) /* istanbul ignore next */ return prevResult;
+        if (!fetchMoreResult) {
+          return prevResult;
+        }
 
         return {
           organizations: [
@@ -140,21 +141,20 @@ function OrganizationTags(): JSX.Element {
           organizationId: orgId,
         },
       });
-
+      /* istanbul ignore else -- @preserve */
       if (data) {
         toast.success(t('tagCreationSuccess'));
         orgUserTagsRefetch();
         setTagName('');
         setCreateTagModalIsOpen(false);
       }
     } catch (error: unknown) {
-      /* istanbul ignore next */
+      /* istanbul ignore else -- @preserve */
       if (error instanceof Error) {
         toast.error(error.message);
       }
     }
   };
-
   if (orgUserTagsError) {
     return (
       <div className={`${styles.errorContainer} bg-white rounded-4 my-3`}>
@@ -170,10 +170,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}`);
   };
@@ -376,22 +376,23 @@ function OrganizationTags(): JSX.Element {
                 className={styles.orgUserTagsScrollableDiv}
               >
                 <InfiniteScroll
-                  dataLength={userTagsList?.length ?? 0}
+                  dataLength={userTagsList?.length}
                   next={loadMoreUserTags}
                   hasMore={
                     orgUserTagsData?.organizations?.[0]?.userTags?.pageInfo
-                      ?.hasNextPage ?? /* istanbul ignore next */ false
+                      ?.hasNextPage ?? false
                   }
                   loader={<InfiniteScrollLoader />}
                   scrollableTarget="orgUserTagsScrollableDiv"
+                  data-testid="infinite-scroll"
                 >
                   <DataGrid
                     disableColumnMenu
                     columnBufferPx={7}
                     hideFooter={true}
                     getRowId={(row) => row.id}
                     slots={{
-                      noRowsOverlay: /* istanbul ignore next */ () => (
+                      noRowsOverlay: () => (
                         <Stack
                           height="100%"
                           alignItems="center"