Fixing infiniteList tests

CruGlobal · Jun 7, 2024 · 824679d · 824679d
1 parent b714100
commit 824679d
Show file tree

Hide file tree

Showing 3 changed files with 86 additions and 56 deletions.
diff --git a/src/components/Contacts/ContactFlow/ContactFlowColumn/ContactFlowColumn.test.tsx b/src/components/Contacts/ContactFlow/ContactFlowColumn/ContactFlowColumn.test.tsx
@@ -36,7 +36,7 @@ const router = {
 
 describe('ContactFlowColumn', () => {
   it('should render a column with correct details', async () => {
-    const { getByText, getByTestId } = render(
+    const { getByText, findByText, getByTestId } = render(
       <SnackbarProvider>
         <DndProvider backend={HTML5Backend}>
           <ThemeProvider theme={theme}>
@@ -75,7 +75,7 @@ describe('ContactFlowColumn', () => {
     );
     await waitFor(() => expect(getByText(title)).toBeInTheDocument());
     expect(getByText('1')).toBeInTheDocument();
-    expect(getByText('Test Person')).toBeInTheDocument();
+    expect(await findByText('Test Person')).toBeInTheDocument();
     expect(getByTestId('column-header')).toHaveStyle({
       backgroundColor: 'theme.palette.mpdxBlue.main',
     });

diff --git a/src/components/Contacts/ContactsContext/ContactsContext.test.tsx b/src/components/Contacts/ContactsContext/ContactsContext.test.tsx
@@ -47,39 +47,29 @@ jest.mock('notistack', () => ({
 }));
 
 const TestRender: React.FC = () => {
-  const { viewMode, handleViewModeChange, userOptionsLoading } = useContext(
+  const { viewMode, handleViewModeChange } = useContext(
     ContactsContext,
   ) as ContactsType;
   return (
     <Box>
-      {!userOptionsLoading ? (
-        <>
-          <Typography>{viewMode}</Typography>
-          <Button
-            onClick={(event) =>
-              handleViewModeChange(event, TableViewModeEnum.List)
-            }
-          >
-            List Button
-          </Button>
-          <Button
-            onClick={(event) =>
-              handleViewModeChange(event, TableViewModeEnum.Flows)
-            }
-          >
-            Flows Button
-          </Button>
-          <Button
-            onClick={(event) =>
-              handleViewModeChange(event, TableViewModeEnum.Map)
-            }
-          >
-            Map Button
-          </Button>
-        </>
-      ) : (
-        <>Loading</>
-      )}
+      <Typography>{viewMode}</Typography>
+      <Button
+        onClick={(event) => handleViewModeChange(event, TableViewModeEnum.List)}
+      >
+        List Button
+      </Button>
+      <Button
+        onClick={(event) =>
+          handleViewModeChange(event, TableViewModeEnum.Flows)
+        }
+      >
+        Flows Button
+      </Button>
+      <Button
+        onClick={(event) => handleViewModeChange(event, TableViewModeEnum.Map)}
+      >
+        Map Button
+      </Button>
     </Box>
   );
 };
@@ -128,7 +118,6 @@ describe('ContactsPageContext', () => {
         </TestRouter>
       </ThemeProvider>,
     );
-    expect(getByText('Loading')).toBeInTheDocument();
     await waitFor(() => expect(getByText('Flows Button')).toBeInTheDocument());
     userEvent.click(getByText('Flows Button'));
     await waitFor(() => expect(getByText('flows')).toBeInTheDocument());
@@ -171,7 +160,6 @@ describe('ContactsPageContext', () => {
         </TestRouter>
       </ThemeProvider>,
     );
-    expect(getByText('Loading')).toBeInTheDocument();
     await waitFor(() => expect(getByText('Map Button')).toBeInTheDocument());
     userEvent.click(getByText('Map Button'));
     await waitFor(() => expect(getByText('map')).toBeInTheDocument());
@@ -192,7 +180,7 @@ describe('ContactsPageContext', () => {
   });
 
   it('does not have a contact id and changes to map', async () => {
-    const { getByText, queryByText } = render(
+    const { getByText } = render(
       <ThemeProvider theme={theme}>
         <TestRouter
           router={{
@@ -222,8 +210,6 @@ describe('ContactsPageContext', () => {
         </TestRouter>
       </ThemeProvider>,
     );
-    expect(getByText('Loading')).toBeInTheDocument();
-    await waitFor(() => expect(queryByText('Loading')).not.toBeInTheDocument());
     await waitFor(() => expect(getByText('Map Button')).toBeInTheDocument());
     userEvent.click(getByText('Map Button'));
     await waitFor(() => expect(getByText('map')).toBeInTheDocument());

diff --git a/src/components/InfiniteList/InfiniteList.test.tsx b/src/components/InfiniteList/InfiniteList.test.tsx
@@ -1,15 +1,23 @@
 import React from 'react';
+import { Skeleton } from '@mui/material';
 import { ThemeProvider } from '@mui/material/styles';
 import { render } from '@testing-library/react';
 import { VirtuosoMockContext } from 'react-virtuoso';
 import theme from '../../theme';
 import { InfiniteList } from './InfiniteList';
 
+const RowSkeleton: React.FC = () => (
+  <div data-testid="row-skeleton">
+    <Skeleton width={'100%'} height={42} style={{ maxWidth: '300px' }} />
+    <Skeleton width={'100%'} height={20} style={{ maxWidth: '360px' }} />
+  </div>
+);
+
 const endReached = jest.fn();
 
 describe('InfiniteList', () => {
   it('should show loading indicator', async () => {
-    const { getByTestId } = render(
+    const { getAllByTestId } = render(
       <ThemeProvider theme={theme}>
         <InfiniteList
           loading={true}
@@ -21,7 +29,61 @@ describe('InfiniteList', () => {
       </ThemeProvider>,
     );
 
-    expect(getByTestId('infinite-list-skeleton-loading')).toBeVisible();
+    expect(getAllByTestId('infinite-list-skeleton-loading').length).toBe(2);
+  });
+
+  it('should show custom skeletons', async () => {
+    const { getAllByTestId } = render(
+      <ThemeProvider theme={theme}>
+        <InfiniteList
+          loading={true}
+          Skeleton={RowSkeleton}
+          numberOfSkeletons={10}
+          data={[]}
+          itemContent={(index, item) => <div>{item}</div>}
+          endReached={() => true}
+          EmptyPlaceholder={<div>No items</div>}
+        />
+      </ThemeProvider>,
+    );
+
+    expect(getAllByTestId('infinite-list-skeleton-loading').length).toBe(2);
+    // 10 skeletons for loading, and another 10 for next items
+    expect(getAllByTestId('row-skeleton').length).toBe(20);
+  });
+
+  it('does not show loading when items are present', async () => {
+    const { getAllByTestId } = render(
+      <ThemeProvider theme={theme}>
+        <InfiniteList
+          loading={true}
+          data={['item 1']}
+          itemContent={(index, item) => <div>{item}</div>}
+          endReached={endReached}
+          EmptyPlaceholder={<div>No items</div>}
+        />
+      </ThemeProvider>,
+    );
+
+    expect(getAllByTestId('infinite-list-skeleton-loading').length).toBe(1);
+  });
+
+  it('empty', async () => {
+    const { queryByTestId, getByText } = render(
+      <ThemeProvider theme={theme}>
+        <InfiniteList
+          loading={false}
+          data={[]}
+          initialItemCount={0}
+          itemContent={(index, item) => <div>{item}</div>}
+          endReached={endReached}
+          EmptyPlaceholder={<div>No items</div>}
+        />
+      </ThemeProvider>,
+    );
+
+    expect(queryByTestId('infinite-list-skeleton-loading')).toBeNull();
+    expect(getByText('No items')).toBeInTheDocument();
   });
 
   it('should render data', async () => {
@@ -75,22 +137,4 @@ describe('InfiniteList', () => {
     expect(queryByText('No items')).toBeNull();
     expect(endReached).not.toHaveBeenCalled();
   });
-
-  it('empty', async () => {
-    const { queryByTestId, getByText } = render(
-      <ThemeProvider theme={theme}>
-        <InfiniteList
-          loading={false}
-          data={[]}
-          initialItemCount={0}
-          itemContent={(index, item) => <div>{item}</div>}
-          endReached={endReached}
-          EmptyPlaceholder={<div>No items</div>}
-        />
-      </ThemeProvider>,
-    );
-
-    expect(queryByTestId('infinite-list-skeleton-loading')).toBeNull();
-    expect(getByText('No items')).toBeInTheDocument();
-  });
 });